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
... ... @@ -39,52 +39,57 @@
39 39 </v-flex>
40 40 </v-layout>
41 41 <v-layout wrap>
42   - <v-flex xs12 sm12 md12 class="text-xs-center">
43   - <v-card class="student-card" xs6 sm6 md6>
44   - <v-avatar style="padding-top: 8%">
45   - <img src="/static/icon/user.png" v-if="!markData[0].studentId.profilePicUrl" />
46   - <img
47   - :src="markData[0].studentId.profilePicUrl"
48   - v-else-if="markData[0].studentId.profilePicUrl"
49   - />
50   - </v-avatar>
51   - <v-layout style=" padding-top: 8%">
52   - <v-flex xs6 sm6 class="pa-0">
  42 + <v-flex xs12 sm12 md4>
  43 + <v-card>
  44 + <v-layout class="py-4">
  45 + <v-avatar class="mx-auto" size="70">
  46 + <img
  47 + src="/static/icon/user.png"
  48 + v-if="!markData[0].studentId.profilePicUrl"
  49 + />
  50 + <img
  51 + :src="markData[0].studentId.profilePicUrl"
  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 58 <h4 class="right">
54 59 <b>Name :</b>
55 60 </h4>
56 61 </v-flex>
57   - <v-flex sm6 xs6 class="pa-0">
  62 + <v-flex sm6 xs6>
58 63 <h4>{{ markData[0].studentId.name }}</h4>
59 64 </v-flex>
60 65 </v-layout>
61   - <v-layout style=" padding-top: 8%">
62   - <v-flex xs6 sm6 class="pa-0">
  66 + <v-layout class="pa-2">
  67 + <v-flex xs6 sm6>
63 68 <h4 class="right">
64 69 <b>Class :</b>
65 70 </h4>
66 71 </v-flex>
67   - <v-flex sm6 xs6 class="pa-0">
  72 + <v-flex sm6 xs6>
68 73 <h4>{{ markData[0].classId.classNum }}</h4>
69 74 </v-flex>
70 75 </v-layout>
71   - <v-layout style=" padding-top: 8%">
72   - <v-flex xs6 sm6 class="pa-0">
  76 + <v-layout class="pa-2">
  77 + <v-flex xs6 sm6>
73 78 <h4 class="right">
74 79 <b>Section :</b>
75 80 </h4>
76 81 </v-flex>
77   - <v-flex sm6 xs6 class="pa-0">
  82 + <v-flex sm6 xs6>
78 83 <h4>{{ markData[0].sectionId.name }}</h4>
79 84 </v-flex>
80 85 </v-layout>
81   - <v-layout style=" padding-top: 8%">
82   - <v-flex xs6 sm6 class="pa-0">
  86 + <v-layout class="pa-2">
  87 + <v-flex xs6 sm6>
83 88 <h4 class="right">
84 89 <b>Roll No :</b>
85 90 </h4>
86 91 </v-flex>
87   - <v-flex sm6 xs6 class="pa-0">
  92 + <v-flex sm6 xs6>
88 93 <h4>{{ markData[0].studentId.rollNo }}</h4>
89 94 </v-flex>
90 95 </v-layout>
... ... @@ -99,9 +104,11 @@
99 104 >Section : {{ markData[0].sectionId.name }}</p>
100 105 <p
101 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 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 112 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
106 113 <table
107 114 v-for="(value, id) in filterData"
... ... @@ -113,21 +120,33 @@
113 120 width: 100% !important;
114 121 overflow: hidden;"
115 122 >
116   - <thead style="border: 1px solid lightgrey !important;">
117   - <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
118   -
  123 + <thead style="border: 1px solid transparent !important;">
  124 + <!-- <tr>
  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 136 <tr style="border: 1px solid lightgrey !important;padding:4px;">
120 137 <td
121 138 rowspan="2"
122 139 style="border: 1px solid lightgrey !important;padding: 10px;"
123 140 >Subject</td>
124   - <template v-for="studentData in value">
  141 + <template v-for="(studentData,ind) in value">
125 142 <td
  143 + v-if="ind == 0"
126 144 colspan="2"
127 145 v-for="studentMark in studentData.studentsMarks"
128 146 style="border: 1px solid lightgrey !important;padding: 10px;"
129 147 >{{studentMark.markDistributionId.distributionType}}</td>
130 148 <td
  149 + v-if="ind == 0"
131 150 style="border: 1px solid lightgrey !important;padding: 10px;"
132 151 >Total Marks</td>
133 152 </template>
... ... @@ -169,6 +188,63 @@
169 188 </table>
170 189 </v-card>
171 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 248 </v-layout>
173 249 </v-card>
174 250 </v-flex>
... ...
src/pages/Report/progressCardReport.vue
Diff comments   View file @1d72272
... ... @@ -76,10 +76,11 @@
76 76 </v-flex>
77 77 </v-form>
78 78 </v-card>
  79 +
79 80 <v-layout v-show="showReport">
80 81 <v-flex xs12>
81 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 84 <v-flex xs12 sm12 id="printMe">
84 85 <v-layout wrap>
85 86 <!-- ****** TABLE DATA MARK ****** -->
... ... @@ -93,14 +94,11 @@
93 94 </v-flex>
94 95 </v-layout>
95 96 <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
96   - <!-- Index Loop Start -->
  97 + <!-- {{value}}---{{id}}---{{index}} -->
97 98 <v-card
98   - v-for="(studentMark,i) in value"
99   - :key="i"
100   - class="pa-3 ma-3"
  99 + class="ma-3"
101 100 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
102 101 >
103   - <!-- Profile School -->
104 102 <v-layout>
105 103 <v-flex xs12 sm12 md12>
106 104 <div>
... ... @@ -121,8 +119,9 @@
121 119 style="border:1px solid #ddd;
122 120 overflow: hidden;
123 121 vertical-align: middle;
124   - margin-bottom: 4px;"
  122 + margin: 10px; 0px;"
125 123 />
  124 + <!-- Profile School -->
126 125 <div class="school-info">
127 126 <v-layout>
128 127 <v-flex xs5 class="pl-3">
... ... @@ -139,47 +138,57 @@
139 138 </v-flex>
140 139 <!-- Profile Student Report Card-->
141 140 <v-flex xs5>
142   - <div v-if="cardData !=''">
143   - <p style="font-size:20px;">{{ studentMark.studentId.name }}</p>
  141 + <div v-for="(studentMark,i,index) in value" :key="index">
  142 + <p
  143 + v-if="index == 0"
  144 + style="font-size:20px;"
  145 + >{{ studentMark[0].studentId.name }}</p>
144 146 <p
  147 + v-if="index == 0"
145 148 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
146 149 >
147 150 Class :
148   - <b>{{ studentMark.classId.classNum }}</b>
  151 + <b>{{ studentMark[0].classId.classNum }}</b>
149 152 </p>
150 153 <p
  154 + v-if="index == 0"
151 155 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
152 156 >
153 157 Section :
154   - <b>{{ studentMark.sectionId.name }}</b>
  158 + <b>{{ studentMark[0].sectionId.name }}</b>
155 159 </p>
156 160 <p
  161 + v-if="index == 0"
157 162 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
158 163 >
159 164 Roll NO :
160   - <b>{{ studentMark.studentId.rollNo }}</b>
  165 + <b>{{ studentMark[0].studentId.rollNo }}</b>
161 166 </p>
162 167 </div>
163 168 </v-flex>
164 169 <v-flex xs2>
165   - <v-avatar size="100" style="padding-top:20px">
166   - <img
167   - src="/static/icon/user.png"
168   - v-if="!studentMark.studentId.profilePicUrl"
169   - />
170   - <img
171   - :src="studentMark.studentId.profilePicUrl"
172   - v-else-if="studentMark.studentId.profilePicUrl"
173   - />
174   - </v-avatar>
  170 + <div v-for="(studentMark,i,index) in value" :key="index">
  171 + <v-avatar size="100" style="padding-top:20px" v-if="index == 0">
  172 + <img
  173 + src="/static/icon/user.png"
  174 + v-if="!studentMark[0].studentId.profilePicUrl"
  175 + />
  176 + <img
  177 + :src="studentMark[0].studentId.profilePicUrl"
  178 + v-else-if="studentMark[0].studentId.profilePicUrl"
  179 + />
  180 + </v-avatar>
  181 + </div>
175 182 </v-flex>
176 183 </v-layout>
177 184 </div>
178 185 </v-flex>
179 186 </v-layout>
180   - <!-- Start Table Report Marks -->
181   - <v-card class="student-table">
  187 + <v-card v-for="studentMarks in value" :key="studentMarks" class="my-4">
  188 + <!-- {{studentMark}} -->
182 189 <table
  190 + v-for="(studentMark,key) in studentMarks"
  191 + :key="key"
183 192 class="mb-5 tableRsponsive feeTypeTable subheading"
184 193 style="border: 1px solid black;
185 194 border-collapse: collapse;!important
... ... @@ -187,7 +196,7 @@
187 196 width: 100% !important;
188 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 200 <tr style="border: 1px solid transparent !important">
192 201 <td
193 202 colspan="4"
... ... @@ -227,8 +236,9 @@
227 236 </template>
228 237 </tr>
229 238 </thead>
230   - <tbody style="border: 1px solid lightgrey !important;">
231   - <tr>
  239 + <tbody style="border: 1px solid lightgrey !important;" v-if="key == 0">
  240 + <tr v-for="studentMark in studentMarks" :key="studentMark">
  241 + <!-- {{studentMark.totalMarks}} -->
232 242 <td
233 243 style="border: 1px solid lightgrey !important;padding: 10px;"
234 244 >{{studentMark.subjectName}}</td>
... ... @@ -247,7 +257,7 @@
247 257 >{{studentMark.totalMarks}}</td>
248 258 </tr>
249 259 </tbody>
250   - <tfoot>
  260 + <tfoot v-if="key == 0">
251 261 <tr style="border: 1px solid lightgrey !important;">
252 262 <td
253 263 colspan="5"
... ... @@ -404,49 +414,8 @@ export default {
404 414 });
405 415 },
406 416 getMarkReportList() {
407   - // this.showLoader = true;
  417 + this.showLoader = true;
408 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 419 var getSelectMarks = {};
451 420 if (this.getReport.studentId == "Select All") {
452 421 getSelectMarks = {
... ... @@ -468,41 +437,53 @@ export default {
468 437 .then(response => {
469 438 this.cardData = response.data.data;
470 439 let newData = response.data.data;
471   - // console.log("newData", newData);
472 440 for (var i = 0; i < newData.length; i++) {
473 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"]);
476   - // console.log("this.filterData", this.filterData);
  451 + this.filterData = studentMarkArray;
477 452 for (let data in this.filterData) {
478 453 for (let item in this.filterData[data]) {
479 454 var totalMarks = 0;
480   - for (
481   - let i = 0;
482   - i < this.filterData[data][item].studentsMarks.length;
483   - i++
484   - ) {
485   - totalMarks += this.filterData[data][item].studentsMarks[i]
486   - .marksScored;
487   - }
488   - this.filterData[data][item].totalMarks = totalMarks;
489   - console.log("totalMarks", totalMarks);
490   - this.totalMarks = totalMarks;
491   - if (totalMarks > 90) {
492   - this.filterData[data][item].grade = this.gradeAPlus;
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;
  455 +
  456 + for (let i = 0; i < this.filterData[data][item].length; i++) {
  457 + for (
  458 + let j = 0;
  459 + j < studentMarkArray[data][item][i].studentsMarks.length;
  460 + j++
  461 + ) {
  462 + totalMarks +=
  463 + studentMarkArray[data][item][i].studentsMarks[j]
  464 + .marksScored;
  465 + console.log("totalMarks", totalMarks);
  466 + }
  467 + this.filterData[data][item][i].totalMarks = totalMarks;
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 487 this.showLoader = false;
507 488 })
508 489 .catch(error => {
... ...