viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c0b01ae20e75a0c20e5bac2cdaa07f64bf9803dd

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

solve bugs in progressCardReport

Showing 1 changed file with 129 additions and 124 deletions   Show diff stats
src/pages/Report/progressCardReport.vue
Diff comments   View file @c0b01ae
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Progress Card Report Table****** --> 3 <!-- ****** Progress Card Report Table****** -->
4 4
5 <v-card flat> 5 <v-card flat>
6 <v-card-actions> 6 <v-card-actions>
7 <v-layout> 7 <v-layout>
8 <h4 class="ml-2">Progress Card Report</h4> 8 <h4 class="ml-2">Progress Card Report</h4>
9 </v-layout> 9 </v-layout>
10 </v-card-actions> 10 </v-card-actions>
11 </v-card> 11 </v-card>
12 <v-card flat> 12 <v-card flat>
13 <v-form ref="form" v-model="valid" lazy-validation> 13 <v-form ref="form" v-model="valid" lazy-validation>
14 <v-flex xs12 sm12 lg12> 14 <v-flex xs12 sm12 lg12>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12 lg3> 16 <v-flex xs12 sm12 lg3>
17 <v-layout> 17 <v-layout>
18 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 18 <v-flex xs3 sm6 lg2 class="subheading mt-4">
19 <label class="right">Class:</label> 19 <label class="right">Class:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs9 sm6 lg8 class="ml-2"> 21 <v-flex xs9 sm6 lg8 class="ml-2">
22 <v-select 22 <v-select
23 v-model="getReport.classId" 23 v-model="getReport.classId"
24 label="Select your class" 24 label="Select your class"
25 type="text" 25 type="text"
26 :items="classList" 26 :items="classList"
27 item-text="classNum" 27 item-text="classNum"
28 item-value="_id" 28 item-value="_id"
29 :rules="classRules" 29 :rules="classRules"
30 @change="getSections(getReport.classId)" 30 @change="getSections(getReport.classId)"
31 required 31 required
32 ></v-select> 32 ></v-select>
33 </v-flex> 33 </v-flex>
34 </v-layout> 34 </v-layout>
35 </v-flex> 35 </v-flex>
36 <v-flex xs12 sm12 lg3> 36 <v-flex xs12 sm12 lg3>
37 <v-layout> 37 <v-layout>
38 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 38 <v-flex xs3 sm6 lg2 class="subheading mt-4">
39 <label class="right">Section:</label> 39 <label class="right">Section:</label>
40 </v-flex> 40 </v-flex>
41 <v-flex xs9 sm6 lg8 class="ml-2"> 41 <v-flex xs9 sm6 lg8 class="ml-2">
42 <v-select 42 <v-select
43 :items="addSection" 43 :items="addSection"
44 label="Select your Section" 44 label="Select your Section"
45 v-model="getReport.sectionId" 45 v-model="getReport.sectionId"
46 item-text="name" 46 item-text="name"
47 item-value="_id" 47 item-value="_id"
48 name="Select Section" 48 name="Select Section"
49 @change="getStudents" 49 @change="getStudents"
50 :rules="sectionRules" 50 :rules="sectionRules"
51 required 51 required
52 ></v-select> 52 ></v-select>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <v-flex xs12 sm12 lg3> 56 <v-flex xs12 sm12 lg3>
57 <v-layout> 57 <v-layout>
58 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 58 <v-flex xs3 sm6 lg2 class="subheading mt-4">
59 <label class="right">Student:</label> 59 <label class="right">Student:</label>
60 </v-flex> 60 </v-flex>
61 <v-flex xs9 sm6 lg8 class="ml-2"> 61 <v-flex xs9 sm6 lg8 class="ml-2">
62 <v-select 62 <v-select
63 :items="getStudentsList" 63 :items="getStudentsList"
64 label="Select your student" 64 label="Select your student"
65 v-model="getReport.studentId" 65 v-model="getReport.studentId"
66 item-text="name" 66 item-text="name"
67 item-value="_id" 67 item-value="_id"
68 :rules="studentRules" 68 :rules="studentRules"
69 required 69 required
70 ></v-select> 70 ></v-select>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm12 lg3> 74 <v-flex xs12 sm12 lg3>
75 <v-btn 75 <v-btn
76 @click="getMarkReportList" 76 @click="getMarkReportList"
77 round 77 round
78 dark 78 dark
79 :loading="loading" 79 :loading="loading"
80 class="right mt-3" 80 class="right mt-3"
81 >Get Report</v-btn> 81 >Get Report</v-btn>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 </v-form> 85 </v-form>
86 </v-card> 86 </v-card>
87 <!-- ****** PROFILE MARK ****** --> 87 <v-container grid-list-md v-show="showReport">
88 88 <!-- {{ filterData }} -->
89 <v-container fluid grid-list-md v-show="showReport">
90 <v-layout> 89 <v-layout>
91 <v-flex xs12 sm12> 90 <v-flex xs12 sm12 v-if="filterData != {}">
92 <v-btn class="grey" dark @click="print()"> 91 <v-btn class="grey" dark @click="print()">
93 Print 92 Print
94 <v-icon right dark>print</v-icon> 93 <v-icon right dark>print</v-icon>
95 </v-btn> 94 </v-btn>
96 </v-flex> 95 </v-flex>
97 </v-layout> 96 </v-layout>
98 <v-flex xs12 sm12 id="printMe"> 97 <v-flex xs12 sm12 id="printMe">
99 <v-layout wrap> 98 <v-layout wrap>
100 <v-flex xs12 sm12 md3>
101 <v-card class="fixcolors white--text" flat>
102 <v-card-actions class="pa-0">
103 <v-spacer></v-spacer>
104 <v-card-title class="pa-2">
105 <h3>Profile</h3>
106 </v-card-title>
107 <v-spacer></v-spacer>
108 </v-card-actions>
109 </v-card>
110 <v-card flat>
111 <v-layout
112 wrap
113 v-for="(value, id, index) in filterData"
114 v-if="index == 0"
115 :key="index"
116 >
117 <v-flex xs12 style="margin:16px;">
118 <v-layout>
119 <v-flex xs12>
120 <v-avatar
121 size="100px"
122 class="mx-auto"
123 style="margin: auto;display:block;margin-bottom:10px !important"
124 >
125 <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
126 <img
127 :src="value[0].studentId.profilePicUrl"
128 v-else-if="value[0].studentId.profilePicUrl"
129 />
130 </v-avatar>
131 </v-flex>
132 </v-layout>
133 <v-layout>
134 <v-flex xs12 style="text-align:center;">
135 <h3>
136 <b>{{ value[0].studentId.name }}</b>
137 </h3>
138 <p class="grey--text">Student</p>
139 </v-flex>
140 </v-layout>
141 <v-layout
142 style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
143 border-top-left-radius: 4px;"
144 >
145 <v-flex xs6 sm3 class="py-1">
146 <h4>
147 <b>RollNo</b>
148 </h4>
149 </v-flex>
150 <v-flex sm9 xs6 class="py-1">
151 <h4>: {{ value[0].studentId.rollNo }}</h4>
152 </v-flex>
153 </v-layout>
154 <v-layout style="border: 1px solid lightgrey;padding: 4px;">
155 <v-flex xs6 sm3 class="py-1">
156 <h4>
157 <b>Class</b>
158 </h4>
159 </v-flex>
160 <v-flex sm9 xs6 class="py-1">
161 <h4>: {{value[0].classId.classNum }}</h4>
162 </v-flex>
163 </v-layout>
164 <v-layout
165 style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
166 border-bottom-left-radius: 4px;"
167 >
168 <v-flex xs6 sm3 class>
169 <h4>
170 <b>Section</b>
171 </h4>
172 </v-flex>
173 <v-flex sm9 xs6 class>
174 <h4>: {{ value[0].sectionId.name}}</h4>
175 </v-flex>
176 </v-layout>
177 </v-flex>
178 </v-layout>
179 </v-card>
180 </v-flex>
181
182 <!-- ****** TABLE DATA MARK ****** --> 99 <!-- ****** TABLE DATA MARK ****** -->
183 100 <v-flex xs12 sm12 md12>
184 <v-flex xs12 sm12 md9>
185 <v-card class="fixcolors white--text" flat>
186 <v-card-actions class="pa-0">
187 <v-spacer></v-spacer>
188 <v-card-title class="pa-2">
189 <h3>Mark</h3>
190 </v-card-title>
191 <v-spacer></v-spacer>
192 </v-card-actions>
193 </v-card>
194 <v-card 101 <v-card
195 v-for="(value, id, index) in filterData" 102 v-for="(value, id, index) in filterData"
196 :key="index" 103 :key="index"
197 flat 104 flat
198 style="border: 1px solid lightgrey;margin-bottom:14px;" 105 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
199 > 106 >
107 <!-- {{ value[index] }} -->
108 <v-layout>
109 <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important">
110 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" />
111 <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" />
112 </v-flex>
113 </v-layout>
114 <v-layout style="padding-top:10px">
115 <v-flex xs5>
116 <p style="margin:0px;margin-bottom:4px">
117 <span style="font-size:20px">{{ userData.name }}</span>
118 <br />
119 <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
120 </p>
121 <p
122 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
123 >phone : {{ userData.mobile }}</p>
124 <p
125 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
126 >Email : {{ userData.email }}</p>
127 </v-flex>
128 <v-flex xs5>
129 <p
130 style="font-size:20px;margin:0px;margin-bottom:4px;"
131 >{{ value[0].studentId.name }}</p>
132 <p
133 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
134 >Class : {{ value[0].classId.classNum }}</p>
135 <p
136 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
137 >Roll NO : {{ value[0].studentId.rollNo }}</p>
138 <p
139 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
140 >Section : {{ value[0].sectionId.name }}</p>
141 </v-flex>
142 <v-flex xs2>
143 <v-avatar size="100">
144 <img
145 :src="value[0].studentId.profilePicUrl"
146 v-if="value[0].studentId.profilePicUrl"
147 width="100px"
148 />
149 <img
150 src="/static/icon/user.png"
151 v-else-if="!value[0].studentId.profilePicUrl"
152 width="100px"
153 />
154 </v-avatar>
155 </v-flex>
156 </v-layout>
200 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> 157 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
201 <table 158 <table
202 class="mb-5 tableRsponsive feeTypeTable" 159 class="mb-5 tableRsponsive feeTypeTable"
203 style="border: 1px solid lightgrey; 160 style="border: 1px solid lightgrey;
204 border-collapse: collapse;!important 161 border-collapse: collapse;!important
205 table-layout: auto !important; 162 table-layout: auto !important;
206 width: 100% !important;" 163 width: 100% !important;"
207 > 164 >
208 <thead style="border: 1px solid lightgrey !important;"> 165 <thead style="border: 1px solid lightgrey !important;">
209 <tr 166 <tr style="border: 1px solid lightgrey !important;padding:4px;">
210 class="info white--text"
211 style="border: 1px solid lightgrey !important;padding:4px;"
212 >
213 <td 167 <td
214 rowspan="2" 168 rowspan="2"
215 style="border: 1px solid lightgrey !important;padding: 10px;" 169 style="border: 1px solid lightgrey !important;padding: 10px;"
216 >Subject</td> 170 >Subject</td>
217 <td 171 <!-- <template v-for="(exam,i) in value[index].studentsMarks">
218 colspan="2" 172 <td
219 v-for="exam in value[index].studentsMarks" 173 colspan="2"
220 style="border: 1px solid lightgrey !important;padding: 10px;" 174 style="border: 1px solid lightgrey !important;padding: 10px;"
221 >{{exam.markDistributionId.distributionType}}</td> 175 >{{ exam.markDistributionId.distributionType }}</td>
176 </template>-->
177 <template v-for="values in value">
178 <td
179 colspan="2"
180 v-for="studentData in values.studentsMarks"
181 >{{ studentData.markDistributionId.distributionType }}</td>
182 </template>
183 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> -->
184
222 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td> 185 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
223 </tr> 186 </tr>
224 <tr 187 <tr
225 v-for="(subject, ind) in value" 188 v-for="(subject, ind) in value"
226 v-if="ind == 0" 189 v-if="ind == 0"
227 style="border: 1px solid lightgrey !important;" 190 style="border: 1px solid lightgrey !important;"
228 > 191 >
229 <template v-for="(exam, i) in subject.studentsMarks"> 192 <template v-for="(exam, i) in subject.studentsMarks">
230 <td 193 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
231 class="bg-sky white--text" 194 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</td>
232 style="border: 1px solid lightgrey !important;padding: 10px;"
233 >Mark</td>
234 <td
235 class="bg-sky-light white--text"
236 style="border: 1px solid lightgrey !important;padding: 10px;"
237 >Highest Mark</td>
238 </template> 195 </template>
239 <td 196 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
240 class="bg-sky white--text"
241 style="border: 1px solid lightgrey !important;padding: 10px;"
242 >Mark</td>
243 </tr> 197 </tr>
244 </thead> 198 </thead>
245 <tbody style="border: 1px solid lightgrey !important;"> 199 <tbody style="border: 1px solid lightgrey !important;">
246 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;"> 200 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
247 <td 201 <td
248 style="border: 1px solid lightgrey !important;padding: 10px;" 202 style="border: 1px solid lightgrey !important;padding: 10px;"
249 >{{subject.subjectName}}</td> 203 >{{subject.subjectName}}</td>
250 <template v-for="(exam, i) in subject.studentsMarks"> 204 <template v-for="(exam, i) in subject.studentsMarks">
251 <td 205 <td
252 style="border: 1px solid lightgrey !important;padding: 10px;" 206 style="border: 1px solid lightgrey !important;padding: 10px;"
253 >{{exam.marksScored}}</td> 207 >{{exam.marksScored}}</td>
254 <td 208 <td
255 style="border: 1px solid lightgrey !important;padding: 10px;" 209 style="border: 1px solid lightgrey !important;padding: 10px;"
256 >{{exam.markDistributionId.markValue}}</td> 210 >{{exam.markDistributionId.markValue}}</td>
257 </template> 211 </template>
258 <td 212 <td
259 style="border: 1px solid lightgrey !important;padding: 10px;" 213 style="border: 1px solid lightgrey !important;padding: 10px;"
260 >{{subject.totalMarks}}</td> 214 >{{subject.totalMarks}}</td>
261 </tr> 215 </tr>
262 </tbody> 216 </tbody>
217 <!-- <tfoot>
218 <tr>
219 <td colspan="4">
220 <span class="right subheding">Total Amount (RS) :</span>
221 </td>
222 <td>{{ feeType.subTotal }}</td>
223 </tr>
224 <tr>
225 <td colspan="4">
226 <span class="right subheding">Paid (RS) :</span>
227 </td>
228 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
229 </tr>
230 <tr>
231 <td colspan="4">
232 <span class="right subheding">Balance (RS) :</span>
233 </td>
234 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
235 </tr>
236 </tfoot>-->
263 </table> 237 </table>
264 </v-card> 238 </v-card>
265 </v-flex> 239 </v-flex>
266 </v-layout> 240 </v-layout>
267 </v-flex> 241 </v-flex>
268 </v-container> 242 </v-container>
269 <div class="loader" v-if="showLoader"> 243 <div class="loader" v-if="showLoader">
270 <v-progress-circular indeterminate color="white"></v-progress-circular> 244 <v-progress-circular indeterminate color="white"></v-progress-circular>
271 </div> 245 </div>
272 </v-app> 246 </v-app>
273 </template> 247 </template>
274 248
275 <script> 249 <script>
276 import http from "@/Services/http.js"; 250 import http from "@/Services/http.js";
277 import moment from "moment"; 251 import moment from "moment";
278 import _ from "underscore"; 252 import _ from "underscore";
279 253
280 export default { 254 export default {
281 data: () => ({ 255 data: () => ({
282 showLoader: false, 256 showLoader: false,
283 markData: [], 257 markData: [],
284 token: "", 258 token: "",
285 markDistributions: [], 259 markDistributions: [],
286 markParticularDistributionData: [], 260 markParticularDistributionData: [],
287 loading: false, 261 loading: false,
288 valid: true, 262 valid: true,
289 loading: false, 263 loading: false,
290 showReport: false, 264 showReport: false,
291 addSection: [], 265 addSection: [],
292 filterData: [], 266 filterData: [],
293 getStudentsList: [], 267 getStudentsList: [],
294 classRules: [v => !!v || "Class is required"], 268 classRules: [v => !!v || "Class is required"],
295 sectionRules: [v => !!v || "Class is required"], 269 sectionRules: [v => !!v || "Class is required"],
296 studentRules: [v => !!v || "Student is required"], 270 studentRules: [v => !!v || "Student is required"],
297 getReport: {}, 271 getReport: {},
298 classList: [], 272 classList: [],
299 output: null 273 output: null,
274 userData: {}
300 }), 275 }),
301 mounted() { 276 mounted() {
302 this.token = this.$store.state.token; 277 this.token = this.$store.state.token;
303 this.getClass(); 278 this.getClass();
279 this.getUserData();
304 }, 280 },
305 methods: { 281 methods: {
306 clear() { 282 clear() {
307 this.$refs.form.reset(); 283 this.$refs.form.reset();
308 }, 284 },
309 getClass() { 285 getClass() {
310 this.showLoader = true; 286 this.showLoader = true;
311 http() 287 http()
312 .get("/getClassesList", { 288 .get("/getClassesList", {
313 headers: { Authorization: "Bearer " + this.token } 289 headers: { Authorization: "Bearer " + this.token }
314 }) 290 })
315 .then(response => { 291 .then(response => {
316 this.classList = response.data.data; 292 this.classList = response.data.data;
317 this.showLoader = false; 293 this.showLoader = false;
318 }) 294 })
319 .catch(err => { 295 .catch(error => {
320 this.showLoader = false; 296 this.showLoader = false;
321 // console.log("err====>", err); 297 // console.log("err====>", err);
322 }); 298 });
323 }, 299 },
324 getSections(_id) { 300 getSections(_id) {
301 this.showLoader = true;
325 http() 302 http()
326 .get( 303 .get(
327 "/getSectionsList", 304 "/getSectionsList",
328 { params: { classId: _id } }, 305 { params: { classId: _id } },
329 { 306 {
330 headers: { Authorization: "Bearer " + this.token } 307 headers: { Authorization: "Bearer " + this.token }
331 } 308 }
332 ) 309 )
333 .then(response => { 310 .then(response => {
334 this.addSection = response.data.data; 311 this.addSection = response.data.data;
312 this.showLoader = false;
335 }) 313 })
336 .catch(err => { 314 .catch(err => {
315 this.showLoader = false;
337 // console.log("err====>", err); 316 // console.log("err====>", err);
338 }); 317 });
339 }, 318 },
340 getStudents() { 319 getStudents() {
341 this.showLoader = true; 320 this.showLoader = true;
342 http() 321 http()
343 .get("/getStudentWithClass", { 322 .get("/getStudentWithClass", {
344 params: { 323 params: {
345 classId: this.getReport.classId, 324 classId: this.getReport.classId,
346 sectionId: this.getReport.sectionId 325 sectionId: this.getReport.sectionId
347 } 326 }
348 }) 327 })
349 .then(response => { 328 .then(response => {
350 this.getStudentsList = response.data.data; 329 this.getStudentsList = response.data.data;
351 this.showLoader = false; 330 this.showLoader = false;
352 console.log("getSectionsList=====>", response.data.data); 331 // console.log("getSectionsList=====>", response.data.data);
353 }) 332 })
354 .catch(error => { 333 .catch(error => {
355 console.log("err====>", error); 334 console.log("err====>", error);
356 this.showLoader = false; 335 this.showLoader = false;
357 }); 336 });
358 }, 337 },
359 getMarkReportList() { 338 getMarkReportList() {
360 this.showLoader = true; 339 // this.showLoader = true;
361 this.showReport = true; 340 this.showReport = true;
362 http() 341 http()
363 .get("/getParticularMark", { 342 .get("/getParticularMark", {
364 params: { studentId: this.getReport.studentId }, 343 params: { studentId: this.getReport.studentId },
365 headers: { Authorization: "Bearer " + this.token } 344 headers: { Authorization: "Bearer " + this.token }