viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 1a34a28a1759a70f9d91b010881fa1aa4eb3fc25

Authored by Shikha Mishra
1 parent c1975052aa
Exists in master and in 3 other branches amber-development, development, ui-design

issue solved of table as per requirement

Showing 1 changed file with 3 additions and 2 deletions   Show diff stats
src/pages/Report/progressCardReport.vue
Diff comments   View file @1a34a28
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 pl-5"> 66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
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 ml-5" 72 class="open-dialog-button mt-3 ml-5"
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 <v-layout v-show="showReport"> 79 <v-layout v-show="showReport">
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-card class="transparent elevation-0"> 81 <v-card class="transparent elevation-0">
82 <v-layout> 82 <v-layout>
83 <v-flex xs12> 83 <v-flex xs12>
84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()"> 84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
85 Print 85 Print
86 <v-icon right dark>print</v-icon> 86 <v-icon right dark>print</v-icon>
87 </v-btn> 87 </v-btn>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-container grid-list-md v-show="showReport" class="report"> 90 <v-container grid-list-md v-show="showReport" class="report">
91 <v-flex xs12 sm12 id="printMe"> 91 <v-flex xs12 sm12 id="printMe">
92 <v-layout wrap> 92 <v-layout wrap>
93 <!-- ****** TABLE DATA MARK ****** --> 93 <!-- ****** TABLE DATA MARK ****** -->
94 <v-flex xs12 sm12 md12> 94 <v-flex xs12 sm12 md12>
95 <v-card 95 <v-card
96 v-for="(value, id, index) in filterData" 96 v-for="(value, id, index) in filterData"
97 :key="index" 97 :key="index"
98 flat 98 flat
99 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 99 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
100 > 100 >
101 <v-layout> 101 <v-layout>
102 <v-flex xs12 sm12 md12 class="text-xs-center"> 102 <v-flex xs12 sm12 md12 class="text-xs-center">
103 <div class="line"> 103 <div class="line">
104 <div class="school-logo"> 104 <div class="school-logo">
105 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 105 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
106 </div> 106 </div>
107 <div class="school-name"> 107 <div class="school-name">
108 <h2>{{ userData.name }}</h2> 108 <h2>{{ userData.name }}</h2>
109 </div> 109 </div>
110 </div> 110 </div>
111 <div class="school-info"> 111 <div class="school-info">
112 <v-flex class="school-address"> 112 <v-flex class="school-address">
113 <p class="title">{{ userData.name }}</p> 113 <p class="title">{{ userData.name }}</p>
114 <p>{{ userData.address }}</p> 114 <p>{{ userData.address }}</p>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm12 md12 class="text-xs-center student-data"> 116 <v-flex xs12 sm12 md12 class="text-xs-center student-data">
117 <v-avatar size="100"> 117 <v-avatar size="100">
118 <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" /> 118 <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" />
119 <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" /> 119 <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" />
120 </v-avatar> 120 </v-avatar>
121 <div class="student-info"> 121 <div class="student-info">
122 <p 122 <p
123 style="font-size:20px;margin:0px;margin-bottom:4px;" 123 style="font-size:20px;margin:0px;margin-bottom:4px;"
124 >{{ value[0].studentId.name }}</p> 124 >{{ value[0].studentId.name }}</p>
125 <p 125 <p
126 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 126 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
127 >Class : {{ value[0].classId.classNum }}</p> 127 >Class : {{ value[0].classId.classNum }}</p>
128 <p 128 <p
129 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 129 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
130 >Section : {{ value[0].sectionId.name }}</p> 130 >Section : {{ value[0].sectionId.name }}</p>
131 <p 131 <p
132 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 132 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
133 >Roll NO : {{ value[0].studentId.rollNo }}</p> 133 >Roll NO : {{ value[0].studentId.rollNo }}</p>
134 </div> 134 </div>
135 </v-flex> 135 </v-flex>
136 </div> 136 </div>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> --> 139 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
140 <table 140 <table
141 class="mb-5 tableRsponsive feeTypeTable" 141 class="mb-5 tableRsponsive feeTypeTable"
142 style="border: 1px solid lightgrey; 142 style="border: 1px solid lightgrey;
143 border-collapse: collapse;!important 143 border-collapse: collapse;!important
144 table-layout: auto !important; 144 table-layout: auto !important;
145 width: 100% !important; 145 width: 100% !important;
146 overflow: hidden;" 146 overflow: hidden;"
147 > 147 >
148 <thead style="border: 1px solid lightgrey !important;"> 148 <thead style="border: 1px solid lightgrey !important;">
149 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 149 <tr style="border: 1px solid lightgrey !important;padding:4px;">
150 <td 150 <td
151 rowspan="2" 151 rowspan="2"
152 style="border: 1px solid lightgrey !important;padding: 10px;" 152 style="border: 1px solid lightgrey !important;padding: 10px;"
153 >Subject</td> 153 >Subject</td>
154 <td 154 <td
155 v-for="(exam,i) in value[index].studentsMarks" 155 v-for="(exam,i) in value[index].studentsMarks"
156 colspan="2" 156 colspan="2"
157 style="border: 1px solid lightgrey !important;padding: 10px;" 157 style="border: 1px solid lightgrey !important;padding: 10px;"
158 >{{ exam.markDistributionId.distributionType }}</td> 158 >{{ exam.markDistributionId.distributionType }}</td>
159 <!-- <template v-for="studentData in value"> 159 <!-- <template v-for="studentData in value">
160 <td 160 <td
161 colspan="2" 161 colspan="2"
162 v-for="studentMark in studentData.studentsMarks" 162 v-for="studentMark in studentData.studentsMarks"
163 >{{ studentMark.markDistributionId.distributionType }}</td> 163 >{{ studentMark.markDistributionId.distributionType }}</td>
164 </template> --> 164 </template> -->
165 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> --> 165 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> -->
166 166
167 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td> 167 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
168 </tr> 168 </tr>
169 <tr 169 <tr
170 v-for="(subject, ind) in value" 170 v-for="(subject, ind) in value"
171 v-if="ind == 0" 171 v-if="ind == 0"
172 style="border: 1px solid lightgrey !important;" 172 style="border: 1px solid lightgrey !important;"
173 > 173 >
174 <template v-for="(exam, i) in subject.studentsMarks"> 174 <template v-for="(exam, i) in subject.studentsMarks">
175 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 175 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
176 <td 176 <td
177 style="border: 1px solid lightgrey !important;padding: 10px;" 177 style="border: 1px solid lightgrey !important;padding: 10px;"
178 >Highest Mark</td> 178 >Highest Mark</td>
179 </template> 179 </template>
180 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 180 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
181 </tr> 181 </tr>
182 </thead> 182 </thead>
183 <tbody style="border: 1px solid lightgrey !important;"> 183 <tbody style="border: 1px solid lightgrey !important;">
184 <tr 184 <tr
185 v-for="subject in value" 185 v-for="subject in value"
186 style="border: 1px solid lightgrey !important;" 186 style="border: 1px solid lightgrey !important;"
187 > 187 >
188 <td 188 <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>
189 <!-- <td
189 style="border: 1px solid lightgrey !important;padding: 10px;" 190 style="border: 1px solid lightgrey !important;padding: 10px;"
190 >{{subject.subjectName}}</td> 191 >{{subject.subjectName}}</td> -->
191 <template v-for="(exam, i) in subject.studentsMarks"> 192 <template v-for="(exam, i) in subject.studentsMarks">
192 <td 193 <td
193 style="border: 1px solid lightgrey !important;padding: 10px;" 194 style="border: 1px solid lightgrey !important;padding: 10px;"
194 >{{exam.marksScored}}</td> 195 >{{exam.marksScored}}</td>
195 <td 196 <td
196 style="border: 1px solid lightgrey !important;padding: 10px;" 197 style="border: 1px solid lightgrey !important;padding: 10px;"
197 >{{exam.markDistributionId.markValue}}</td> 198 >{{exam.markDistributionId.markValue}}</td>
198 </template> 199 </template>
199 <td 200 <td
200 style="border: 1px solid lightgrey !important;padding: 10px;" 201 style="border: 1px solid lightgrey !important;padding: 10px;"
201 >{{subject.totalMarks}}</td> 202 >{{subject.totalMarks}}</td>
202 </tr> 203 </tr>
203 </tbody> 204 </tbody>
204 <!-- <tfoot> 205 <!-- <tfoot>
205 <tr> 206 <tr>
206 <td colspan="4"> 207 <td colspan="4">
207 <span class="right subheding">Total Amount (RS) :</span> 208 <span class="right subheding">Total Amount (RS) :</span>
208 </td> 209 </td>
209 <td>{{ feeType.subTotal }}</td> 210 <td>{{ feeType.subTotal }}</td>
210 </tr> 211 </tr>
211 <tr> 212 <tr>
212 <td colspan="4"> 213 <td colspan="4">
213 <span class="right subheding">Paid (RS) :</span> 214 <span class="right subheding">Paid (RS) :</span>
214 </td> 215 </td>
215 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 216 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
216 </tr> 217 </tr>
217 <tr> 218 <tr>
218 <td colspan="4"> 219 <td colspan="4">
219 <span class="right subheding">Balance (RS) :</span> 220 <span class="right subheding">Balance (RS) :</span>
220 </td> 221 </td>
221 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 222 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
222 </tr> 223 </tr>
223 </tfoot>--> 224 </tfoot>-->
224 </table> 225 </table>
225 </v-card> 226 </v-card>
226 </v-flex> 227 </v-flex>
227 </v-layout> 228 </v-layout>
228 </v-flex> 229 </v-flex>
229 </v-container> 230 </v-container>
230 </v-card> 231 </v-card>
231 </v-flex> 232 </v-flex>
232 </v-layout> 233 </v-layout>
233 <div class="loader" v-if="showLoader"> 234 <div class="loader" v-if="showLoader">
234 <v-progress-circular indeterminate color="white"></v-progress-circular> 235 <v-progress-circular indeterminate color="white"></v-progress-circular>
235 </div> 236 </div>
236 </v-container> 237 </v-container>
237 </template> 238 </template>
238 239
239 <script> 240 <script>
240 import http from "@/Services/http.js"; 241 import http from "@/Services/http.js";
241 import moment from "moment"; 242 import moment from "moment";
242 import _ from "underscore"; 243 import _ from "underscore";
243 244
244 export default { 245 export default {
245 data: () => ({ 246 data: () => ({
246 showLoader: false, 247 showLoader: false,
247 markData: [], 248 markData: [],
248 token: "", 249 token: "",
249 markDistributions: [], 250 markDistributions: [],
250 markParticularDistributionData: [], 251 markParticularDistributionData: [],
251 loading: false, 252 loading: false,
252 valid: true, 253 valid: true,
253 loading: false, 254 loading: false,
254 showReport: false, 255 showReport: false,
255 addSection: [], 256 addSection: [],
256 filterData: [], 257 filterData: [],
257 getStudentsList: [], 258 getStudentsList: [],
258 classRules: [v => !!v || "Class is required"], 259 classRules: [v => !!v || "Class is required"],
259 sectionRules: [v => !!v || "Class is required"], 260 sectionRules: [v => !!v || "Class is required"],
260 studentRules: [v => !!v || "Student is required"], 261 studentRules: [v => !!v || "Student is required"],
261 getReport: {}, 262 getReport: {},
262 classList: [], 263 classList: [],
263 output: null, 264 output: null,
264 userData: {} 265 userData: {}
265 }), 266 }),
266 mounted() { 267 mounted() {
267 this.token = this.$store.state.token; 268 this.token = this.$store.state.token;
268 this.getClass(); 269 this.getClass();
269 this.getUserData(); 270 this.getUserData();
270 }, 271 },
271 methods: { 272 methods: {
272 clear() { 273 clear() {
273 this.$refs.form.reset(); 274 this.$refs.form.reset();
274 }, 275 },
275 getClass() { 276 getClass() {
276 this.showLoader = true; 277 this.showLoader = true;
277 http() 278 http()
278 .get("/getClassesList", { 279 .get("/getClassesList", {
279 headers: { Authorization: "Bearer " + this.token } 280 headers: { Authorization: "Bearer " + this.token }
280 }) 281 })
281 .then(response => { 282 .then(response => {
282 this.classList = response.data.data; 283 this.classList = response.data.data;
283 this.showLoader = false; 284 this.showLoader = false;
284 }) 285 })
285 .catch(error => { 286 .catch(error => {
286 this.showLoader = false; 287 this.showLoader = false;
287 // console.log("err====>", err); 288 // console.log("err====>", err);
288 }); 289 });
289 }, 290 },
290 getSections(_id) { 291 getSections(_id) {
291 this.showLoader = true; 292 this.showLoader = true;
292 http() 293 http()
293 .get( 294 .get(
294 "/getSectionsList", 295 "/getSectionsList",
295 { params: { classId: _id } }, 296 { params: { classId: _id } },
296 { 297 {
297 headers: { Authorization: "Bearer " + this.token } 298 headers: { Authorization: "Bearer " + this.token }
298 } 299 }
299 ) 300 )
300 .then(response => { 301 .then(response => {
301 this.addSection = response.data.data; 302 this.addSection = response.data.data;
302 this.showLoader = false; 303 this.showLoader = false;
303 }) 304 })
304 .catch(err => { 305 .catch(err => {
305 this.showLoader = false; 306 this.showLoader = false;
306 // console.log("err====>", err); 307 // console.log("err====>", err);
307 }); 308 });
308 }, 309 },
309 getStudents() { 310 getStudents() {
310 this.showLoader = true; 311 this.showLoader = true;
311 http() 312 http()
312 .get("/getStudentWithClass", { 313 .get("/getStudentWithClass", {
313 params: { 314 params: {
314 classId: this.getReport.classId, 315 classId: this.getReport.classId,
315 sectionId: this.getReport.sectionId 316 sectionId: this.getReport.sectionId
316 } 317 }
317 }) 318 })
318 .then(response => { 319 .then(response => {
319 this.getStudentsList = response.data.data; 320 this.getStudentsList = response.data.data;
320 this.showLoader = false; 321 this.showLoader = false;
321 // console.log("getSectionsList=====>", response.data.data); 322 // console.log("getSectionsList=====>", response.data.data);
322 }) 323 })
323 .catch(error => { 324 .catch(error => {
324 console.log("err====>", error); 325 console.log("err====>", error);
325 this.showLoader = false; 326 this.showLoader = false;
326 }); 327 });
327 }, 328 },
328 getMarkReportList() { 329 getMarkReportList() {
329 // this.showLoader = true; 330 // this.showLoader = true;
330 this.showReport = true; 331 this.showReport = true;
331 http() 332 http()
332 .get("/getParticularMark", { 333 .get("/getParticularMark", {
333 params: { studentId: this.getReport.studentId }, 334 params: { studentId: this.getReport.studentId },
334 headers: { Authorization: "Bearer " + this.token } 335 headers: { Authorization: "Bearer " + this.token }
335 }) 336 })
336 .then(response => { 337 .then(response => {
337 this.showLoader = false; 338 this.showLoader = false;
338 let newData = response.data.data; 339 let newData = response.data.data;
339 // console.log("response", newData); 340 // console.log("response", newData);
340 for (var i = 0; i < newData.length; i++) { 341 for (var i = 0; i < newData.length; i++) {
341 newData[i].examination = newData[i].examId._id; 342 newData[i].examination = newData[i].examId._id;
342 // console.log("newData[i].examination", newData[i].examination); 343 // console.log("newData[i].examination", newData[i].examination);
343 } 344 }
344 this.filterData = _.groupBy(newData, ["examination"]); 345 this.filterData = _.groupBy(newData, ["examination"]);
345 for (let data in this.filterData) { 346 for (let data in this.filterData) {
346 // console.log("data+++++++++++++++++++++++++++++++++++", data); 347 // console.log("data+++++++++++++++++++++++++++++++++++", data);
347 348
348 for (let item in this.filterData[data]) { 349 for (let item in this.filterData[data]) {
349 // console.log( 350 // console.log(
350 // "filterData[data]==========================>", 351 // "filterData[data]==========================>",
351 // this.filterData[data] 352 // this.filterData[data]
352 // ); 353 // );
353 // console.log("filterData[item]==========================>", item); 354 // console.log("filterData[item]==========================>", item);
354 var totalMarks = 0; 355 var totalMarks = 0;
355 for ( 356 for (
356 let i = 0; 357 let i = 0;
357 i < this.filterData[data][item].studentsMarks.length; 358 i < this.filterData[data][item].studentsMarks.length;
358 i++ 359 i++
359 ) { 360 ) {
360 totalMarks += this.filterData[data][item].studentsMarks[i] 361 totalMarks += this.filterData[data][item].studentsMarks[i]
361 .marksScored; 362 .marksScored;
362 } 363 }
363 this.filterData[data][item].totalMarks = totalMarks; 364 this.filterData[data][item].totalMarks = totalMarks;
364 // var total = 0; 365 // var total = 0;
365 // total += this.filterData[data][item].totalMarks ; 366 // total += this.filterData[data][item].totalMarks ;
366 // console.log("total", total); 367 // console.log("total", total);
367 } 368 }
368 } 369 }
369 }) 370 })
370 .catch(error => { 371 .catch(error => {
371 // console.log("err====>", err); 372 // console.log("err====>", err);
372 this.showLoader = false; 373 this.showLoader = false;
373 this.snackbar = true; 374 this.snackbar = true;
374 this.text = error.response.data.message; 375 this.text = error.response.data.message;
375 if (error.response.status === 401) { 376 if (error.response.status === 401) {
376 this.$router.replace({ path: "/" }); 377 this.$router.replace({ path: "/" });
377 this.$store.dispatch("setToken", null); 378 this.$store.dispatch("setToken", null);
378 this.$store.dispatch("Id", null); 379 this.$store.dispatch("Id", null);
379 } 380 }
380 }); 381 });
381 }, 382 },
382 printProgressReport() { 383 printProgressReport() {
383 // Pass the element id here 384 // Pass the element id here
384 this.$htmlToPaper("printMe"); 385 this.$htmlToPaper("printMe");
385 }, 386 },
386 getUserData() { 387 getUserData() {
387 http() 388 http()
388 .get("/getParticularUserDetail") 389 .get("/getParticularUserDetail")
389 .then(response => { 390 .then(response => {
390 this.userData = response.data.data; 391 this.userData = response.data.data;
391 }) 392 })
392 .catch(error => { 393 .catch(error => {
393 // if (error.response.status === 401) { 394 // if (error.response.status === 401) {
394 // this.$router.replace({ path: "/" }); 395 // this.$router.replace({ path: "/" });
395 // this.$store.dispatch("setToken", null); 396 // this.$store.dispatch("setToken", null);
396 // this.$store.dispatch("Id", null); 397 // this.$store.dispatch("Id", null);
397 // } 398 // }
398 }); 399 });
399 } 400 }
400 } 401 }
401 }; 402 };
402 </script> 403 </script>
403 404
404 <style scoped> 405 <style scoped>
405 table { 406 table {
406 border-collapse: collapse; 407 border-collapse: collapse;
407 border: 1px solid #e2e7eb; 408 border: 1px solid #e2e7eb;
408 } 409 }
409 410
410 th, 411 th,
411 td { 412 td {
412 border: 1px solid #e2e7eb; 413 border: 1px solid #e2e7eb;
413 padding: 10px; 414 padding: 10px;
414 text-align: center; 415 text-align: center;
415 } 416 }
416 table.feeTypeTable { 417 table.feeTypeTable {
417 table-layout: auto !important; 418 table-layout: auto !important;
418 width: 100% !important; 419 width: 100% !important;
419 } 420 }
420 .bg-sky { 421 .bg-sky {
421 background-color: #98b2cc !important; 422 background-color: #98b2cc !important;
422 } 423 }
423 .bg-sky-light { 424 .bg-sky-light {
424 background-color: #89a0b8; 425 background-color: #89a0b8;
425 } 426 }
426 .bg-purple { 427 .bg-purple {
427 background-color: #9583ac; 428 background-color: #9583ac;
428 } 429 }
429 .bg-skyDark { 430 .bg-skyDark {
430 background-color: #956785; 431 background-color: #956785;
431 } 432 }
432 433
433 /* .report { 434 /* .report {
434 overflow: hidden; 435 overflow: hidden;
435 max-width: 794px; 436 max-width: 794px;
436 margin: 0px auto; 437 margin: 0px auto;
437 margin-bottom: 10px; 438 margin-bottom: 10px;
438 padding: 30px; 439 padding: 30px;
439 } */ 440 } */
440 .line { 441 .line {
441 border-bottom: 1px solid #ddd; 442 border-bottom: 1px solid #ddd;
442 overflow: hidden; 443 overflow: hidden;
443 padding-bottom: 10px; 444 padding-bottom: 10px;
444 vertical-align: middle; 445 vertical-align: middle;
445 margin-bottom: 4px; 446 margin-bottom: 4px;
446 } 447 }
447 .school-logo { 448 .school-logo {
448 float: left; 449 float: left;
449 } 450 }
450 .school-name { 451 .school-name {
451 box-sizing: border-box; 452 box-sizing: border-box;
452 } 453 }
453 .school-info { 454 .school-info {
454 width: 100%; 455 width: 100%;
455 overflow: hidden; 456 overflow: hidden;
456 } 457 }
457 .school-address { 458 .school-address {
458 float: left; 459 float: left;
459 width: 40%; 460 width: 40%;
460 } 461 }
461 .student-data { 462 .student-data {
462 float: right; 463 float: right;
463 width: 40%; 464 width: 40%;
464 } 465 }
465 .student-info { 466 .student-info {
466 float: left; 467 float: left;
467 } 468 }
468 @media screen and (max-width: 380px) { 469 @media screen and (max-width: 380px) {
469 .tableRsponsive { 470 .tableRsponsive {
470 /* display: block; */ 471 /* display: block; */
471 position: relative; 472 position: relative;
472 overflow: scroll; 473 overflow: scroll;
473 } 474 }
474 } 475 }
475 </style> s 476 </style> s