viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 962a41f538ae2a8574015b3028be58fd1f59e7f0

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

fixed multiple progress card report display and print

Showing 1 changed file with 143 additions and 277 deletions   Show diff stats
src/pages/Report/progressCardReport.vue
Diff comments   View file @962a41f
... ... @@ -79,27 +79,11 @@
79 79 <v-layout v-show="showReport">
80 80 <v-flex xs12>
81 81 <v-card class="transparent elevation-0">
82   - <!-- <v-layout>
83   - <v-flex xs12>
84   - <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
85   - Print
86   - <v-icon right dark>print</v-icon>
87   - </v-btn>
88   - </v-flex>
89   - </v-layout>-->
90 82 <v-container grid-list-md v-show="showReport" class="report">
91 83 <v-flex xs12 sm12 id="printMe">
92   - <!-- {{filterData}} -->
93 84 <v-layout wrap>
94 85 <!-- ****** TABLE DATA MARK ****** -->
95 86 <v-flex xs12 sm12 md12>
96   - <!-- <v-card
97   - v-for="(value, id, index) in filterData"
98   - :key="index"
99   - :items="newData"
100   - flat
101   - style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
102   - >-->
103 87 <v-layout>
104 88 <v-flex xs12>
105 89 <v-btn class="open-dialog-button" round dark @click="printProgressReport()">
... ... @@ -108,284 +92,166 @@
108 92 </v-btn>
109 93 </v-flex>
110 94 </v-layout>
111   - <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px">
112   - <v-layout>
113   - <v-flex xs12 sm12 md12>
114   - <!-- {{userData}} -->
115   - <div>
116   - <div class="school-logo">
117   - <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
118   - <v-avatar>
119   - <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
120   - <img
121   - src="/static/schoolIcons/INTRACK_White.png"
122   - v-else-if="!userData.schoolLogoUrl"
123   - />
124   - </v-avatar>
125   - </div>
126   - <div class="school-name">
127   - <h2>{{ userData.name }}</h2>
  95 + <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
  96 + <!-- Index Loop Start -->
  97 + <v-card
  98 + v-for="(studentMark,i) in value"
  99 + :key="i"
  100 + class="pa-3 ma-3"
  101 + style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
  102 + >
  103 + <!-- Profile School -->
  104 + <v-layout>
  105 + <v-flex xs12 sm12 md12>
  106 + <div>
  107 + <div class="school-logo">
  108 + <v-avatar>
  109 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  110 + <img
  111 + src="/static/schoolIcons/INTRACK_White.png"
  112 + v-else-if="!userData.schoolLogoUrl"
  113 + />
  114 + </v-avatar>
  115 + </div>
  116 + <div class="school-name">
  117 + <h2>{{ userData.name }}</h2>
  118 + </div>
128 119 </div>
129   - </div>
130   - <hr
131   - style="border:1px solid #ddd;
  120 + <hr
  121 + style="border:1px solid #ddd;
132 122 overflow: hidden;
133 123 vertical-align: middle;
134 124 margin-bottom: 4px;"
135   - />
136   - <div class="school-info">
137   - <v-layout>
138   - <v-flex xs5 class="pl-3">
139   - <p style="font-size:20px;">{{ userData.name }}</p>
140   - <p
141   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
142   - >{{ userData.address }}</p>
143   - <p
144   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
145   - >{{ userData.mobile }}</p>
146   - <p
147   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
148   - >{{ userData.email }}</p>
149   - </v-flex>
150   - <v-flex xs5>
151   - <div v-if="cardData !=''">
152   - <p style="font-size:20px;">{{ cardData[0].studentId.name }}</p>
  125 + />
  126 + <div class="school-info">
  127 + <v-layout>
  128 + <v-flex xs5 class="pl-3">
  129 + <p style="font-size:20px;">{{ userData.name }}</p>
153 130 <p
154 131 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
155   - >
156   - Class :
157   - <b>{{ cardData[0].classId.classNum }}</b>
158   - </p>
  132 + >{{ userData.address }}</p>
159 133 <p
160 134 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
161   - >
162   - Section :
163   - <b>{{ cardData[0].sectionId.name }}</b>
164   - </p>
  135 + >{{ userData.mobile }}</p>
165 136 <p
166 137 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
167   - >
168   - Roll NO :
169   - <b>{{ cardData[0].studentId.rollNo }}</b>
170   - </p>
171   - </div>
172   - </v-flex>
173   - <v-flex xs2 v-if="cardData !=''">
174   - <v-avatar size="100" style="padding-top:20px">
175   - <img
176   - src="/static/icon/user.png"
177   - v-if="!cardData[0].studentId.profilePicUrl"
178   - />
179   - <img
180   - :src="cardData[0].studentId.profilePicUrl"
181   - v-else-if="cardData[0].studentId.profilePicUrl"
182   - />
183   - </v-avatar>
184   - </v-flex>
185   - </v-layout>
186   - </div>
187   - </v-flex>
188   - </v-layout>
189   - <v-card class="student-table" xs6 sm6 md6>
190   - <table
191   - v-for="(value, id, index) in filterData"
192   - :key="index"
193   - class="mb-5 tableRsponsive feeTypeTable subheading"
194   - style="border: 1px solid black;
195   - border-collapse: collapse;!important
196   - table-layout: auto !important;
197   - width: 100% !important;
198   - overflow: hidden;"
199   - >
200   - <thead style="border: 1px solid transparent !important">
201   - <tr style="border: 1px solid transparent !important">
202   - <td
203   - colspan="4"
204   - style="text-align: inherit !important;
205   - border-right: inherit;
206   - border-top: inherit;
207   - padding:14px;"
208   - >{{value[0].examId.examName}}</td>
209   - </tr>
210   - <!-- <v-card-title class="subheading" colspan="4">{{value[0].examId.examName}}</v-card-title> -->
211   - <tr style="border: 1px solid lightgrey !important;padding:4px;">
212   - <td
213   - rowspan="2"
214   - style="border: 1px solid lightgrey !important;padding: 10px;"
215   - >Subject</td>
216   - <!-- <template v-for="studentData in value"> -->
217   - <!-- <td
218   - colspan="4"
219   - style="border: 1px solid lightgrey !important;padding: 10px;"
220   - >{{value[0].examId.examName}}</td>
221   - <td
222   - colspan="2"
223   - style="border: 1px solid lightgrey !important;padding: 10px;"
224   - ></td>
225   - <td
226   - colspan="2"
227   - style="border: 1px solid lightgrey !important;padding: 10px;"
228   - >Total</td>-->
229   - <!-- <td
230   - colspan="2"
231   - style="border: 1px solid lightgrey !important;padding: 10px;"
232   - >Grade</td>-->
233   - <!-- <td
234   - colspan="2"
235   - style="border: 1px solid lightgrey !important;padding: 10px;"
236   - >Points</td>-->
237   - <!-- <td
238   - colspan="2"
239   - v-for="studentMark in studentData.studentsMarks"
240   - style="border: 1px solid lightgrey !important;padding: 10px;"
241   - >{{studentMark.markDistributionId.distributionType}}</td>-->
242   - <!-- <td
243   - style="border: 1px solid lightgrey !important;padding: 10px;"
244   - >Total Marks</td>-->
245   - <!-- </template> -->
246   - <!-- </tr> -->
247   - <!-- <tr
248   - v-for="(subject, ind) in value"
249   - v-if="ind == 0"
250   - style="border: 1px solid lightgrey !important;"
251   - >-->
252   - <!-- <template v-for="(exam, i) in subject.studentsMarks"> -->
253   - <template v-for="studentData in value">
254   - <td
255   - colspan="2"
256   - v-for="studentMark in studentData.studentsMarks"
257   - style="border: 1px solid lightgrey !important;padding: 10px;"
258   - >{{studentMark.markDistributionId.distributionType}}</td>
259   - <td
260   - style="border: 1px solid lightgrey !important;padding: 10px;"
261   - >Total Marks</td>
262   - <!-- <td
263   - style="border: 1px solid lightgrey !important;padding: 10px;"
264   - >Marks</td>
265   - <td
266   - style="border: 1px solid lightgrey !important;padding: 10px;"
267   - >Highest Marks</td>-->
268   - </template>
269   - </tr>
270   - <tr
271   - v-for="(subject, ind) in value"
272   - v-if="ind == 0"
273   - style="border: 1px solid lightgrey !important;"
274   - >
275   - <template v-for="(exam, i) in subject.studentsMarks">
  138 + >{{ userData.email }}</p>
  139 + </v-flex>
  140 + <!-- Profile Student Report Card-->
  141 + <v-flex xs5>
  142 + <div v-if="cardData !=''">
  143 + <p style="font-size:20px;">{{ studentMark.studentId.name }}</p>
  144 + <p
  145 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  146 + >
  147 + Class :
  148 + <b>{{ studentMark.classId.classNum }}</b>
  149 + </p>
  150 + <p
  151 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  152 + >
  153 + Section :
  154 + <b>{{ studentMark.sectionId.name }}</b>
  155 + </p>
  156 + <p
  157 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  158 + >
  159 + Roll NO :
  160 + <b>{{ studentMark.studentId.rollNo }}</b>
  161 + </p>
  162 + </div>
  163 + </v-flex>
  164 + <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>
  175 + </v-flex>
  176 + </v-layout>
  177 + </div>
  178 + </v-flex>
  179 + </v-layout>
  180 + <!-- {{studentMark.examId.examName}} -->
  181 + <!-- Start Table Report Marks -->
  182 + <v-card class="student-table">
  183 + <table
  184 + class="mb-5 tableRsponsive feeTypeTable subheading"
  185 + style="border: 1px solid black;
  186 + border-collapse: collapse;!important
  187 + table-layout: auto !important;
  188 + width: 100% !important;
  189 + overflow: hidden;"
  190 + >
  191 + <thead style="border: 1px solid transparent !important">
  192 + <tr style="border: 1px solid transparent !important">
276 193 <td
277   - style="border: 1px solid lightgrey !important;padding: 10px;"
278   - >Marks</td>
  194 + colspan="4"
  195 + style="text-align: inherit !important;
  196 + border-right: inherit;
  197 + border-top: inherit;
  198 + padding:14px;"
  199 + >{{studentMark.examId.examName}}</td>
  200 + </tr>
  201 + <tr style="border: 1px solid lightgrey !important;padding:4px;">
279 202 <td
  203 + rowspan="2"
280 204 style="border: 1px solid lightgrey !important;padding: 10px;"
281   - >Highest Marks</td>
282   - </template>
283   - </tr>
284   - </thead>
285   - <tbody style="border: 1px solid lightgrey !important;">
286   - <tr
287   - v-for="subject in value"
288   - style="border: 1px solid lightgrey !important;"
289   - >
290   - <td
291   - style="border: 1px solid lightgrey !important;padding: 10px;"
292   - >{{subject.subjectName}}</td>
293   - <template v-for="(exam, i) in subject.studentsMarks">
  205 + >Subject</td>
  206 + <template>
  207 + <td
  208 + v-for="(studentMarkData,i) in studentMark.studentsMarks"
  209 + :key="i"
  210 + colspan="2"
  211 + style="border: 1px solid lightgrey !important;padding: 10px;"
  212 + >{{studentMarkData.markDistributionId.distributionType}}</td>
  213 + <td
  214 + style="border: 1px solid lightgrey !important;padding: 10px;"
  215 + >Total Marks</td>
  216 + </template>
  217 + </tr>
  218 + <tr style="border: 1px solid lightgrey !important;">
  219 + <template v-for="(exam, ind) in studentMark.studentsMarks">
  220 + <td
  221 + :key="ind"
  222 + style="border: 1px solid lightgrey !important;padding: 10px;"
  223 + >Marks</td>
  224 + <td
  225 + :key="ind"
  226 + style="border: 1px solid lightgrey !important;padding: 10px;"
  227 + >Highest Marks</td>
  228 + </template>
  229 + </tr>
  230 + </thead>
  231 + <tbody style="border: 1px solid lightgrey !important;">
  232 + <tr>
294 233 <td
295 234 style="border: 1px solid lightgrey !important;padding: 10px;"
296   - >{{exam.marksScored}}</td>
  235 + >{{studentMark.subjectName}}</td>
  236 + <template v-for="(exam, index) in studentMark.studentsMarks">
  237 + <td
  238 + :key="index"
  239 + style="border: 1px solid lightgrey !important;padding: 10px;"
  240 + >{{exam.marksScored}}</td>
  241 + <td
  242 + :key="index"
  243 + style="border: 1px solid lightgrey !important;padding: 10px;"
  244 + >{{exam.markDistributionId.markValue}}</td>
  245 + </template>
297 246 <td
298 247 style="border: 1px solid lightgrey !important;padding: 10px;"
299   - >{{exam.markDistributionId.markValue}}</td>
300   - </template>
301   - <td
302   - style="border: 1px solid lightgrey !important;padding: 10px;"
303   - >{{subject.totalMarks}}</td>
304   - </tr>
305   - </tbody>
306   - <!-- <tfoot>
307   - <tr v-for="subject in value"
308   - style="border: 1px solid lightgrey !important;">
309   - <td colspan="5">
310   - <span class="right subheding">Total Marks :</span>
311   - </td>
312   - <td
313   - style="border: 1px solid lightgrey !important;padding: 10px;"
314   - >{{subject.totalMarks}}</td>
315   - </tr>
316   - <tr>
317   - <td colspan="5">
318   - <span class="right subheding">Average Mark :</span>
319   - </td>
320   - <td
321   - style="border: 1px solid lightgrey !important;padding: 10px;"
322   - >{{subject.averageMark}}</td>
323   - </tr>
324   - <tr>
325   - <td colspan="5">
326   - <span class="right subheding">GPA :</span>
327   - </td>
328   - <td
329   - style="border: 1px solid lightgrey !important;padding: 10px;"
330   - >{{subject.gpa}}</td>
331   - </tr>
332   - </tfoot>-->
333   - <!-- <v-card> -->
334   - <tr style="border: 1px solid lightgrey !important;">
335   - <td colspan="5">
336   - <span class="subheding">Total Marks</span>
337   - </td>
338   - <td
339   - colspan="7"
340   - style="border: 1px solid lightgrey !important;padding: 10px;"
341   - >
342   - <b>{{ totalMarks }}</b>
343   - </td>
344   - </tr>
345   - <tr>
346   - <td colspan="5">
347   - <span class="subheding">Average Mark</span>
348   - </td>
349   - <td
350   - colspan="7"
351   - style="border: 1px solid lightgrey !important;padding: 10px;"
352   - ></td>
353   - </tr>
354   - <tr>
355   - <td colspan="5">
356   - <span class="subheding">GPA</span>
357   - </td>
358   - <td
359   - colspan="7"
360   - style="border: 1px solid lightgrey !important;padding: 10px;"
361   - ></td>
362   - </tr>
363   - <!-- </v-card> -->
364   - <!-- <tbody style="border: 1px solid lightgrey !important;">
365   - <tr
366   - v-for="subject in value"
367   - style="border: 1px solid lightgrey !important;"
368   - >
369   - <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
370   - <!-- <td
371   - style="border: 1px solid lightgrey !important;padding: 10px;"
372   - >{{subject.subjectName}}</td>-->
373   - <!-- <template v-for="(exam, i) in subject.studentsMarks">
374   - <td
375   - style="border: 1px solid lightgrey !important;padding: 10px;"
376   - >{{exam.marksScored}}</td>
377   - <td
378   - style="border: 1px solid lightgrey !important;padding: 10px;"
379   - >{{exam.markDistributionId.markValue}}</td>
380   - </template>
381   - <td
382   - style="border: 1px solid lightgrey !important;padding: 10px;"
383   - >{{subject.totalMarks}}</td>
384   - </tr>
385   - </tbody>-->
386   - </table>
  248 + >{{studentMark.totalMarks}}</td>
  249 + </tr>
  250 + </tbody>
  251 + </table>
  252 + </v-card>
387 253 </v-card>
388   - </v-card>
  254 + </v-flex>
389 255 </v-flex>
390 256 </v-layout>
391 257 </v-flex>
... ... @@ -550,7 +416,7 @@ export default {
550 416 classId: this.getReport.classId,
551 417 sectionId: this.getReport.sectionId
552 418 };
553   - } else if(this.getReport.studentId != "Select All") {
  419 + } else if (this.getReport.studentId != "Select All") {
554 420 getSelectMarks = {
555 421 classId: this.getReport.classId,
556 422 sectionId: this.getReport.sectionId,
... ...