viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit ec5677f43263a2e7c08f2508e2ace1b53997f385

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

implement print on report and view mark

Showing 8 changed files with 490 additions and 342 deletions   Show diff stats
package-lock.json
Diff comments   View file @ec5677f
... ... @@ -15728,6 +15728,11 @@
15728 15728 "integrity": "sha512-2j/t+wIbyVMP5NvctQoSUvLkYKoWAAk2QlQiilrM2a6/ulzFgdcLUJfTvs4XQ/3eZhHiBmmEojbjmM4AzZj8JA==",
15729 15729 "dev": true
15730 15730 },
  15731 + "vue-html-to-paper": {
  15732 + "version": "1.1.1",
  15733 + "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.1.1.tgz",
  15734 + "integrity": "sha512-Dk65vtHZTvOG0x40hKCbmaqjOsIPU077kJquc3AwV5PuFNsRJxXYte1TPX8ZOv+aQP0mhxKVIYPwiANLLtTm3w=="
  15735 + },
15731 15736 "vue-html2canvas": {
15732 15737 "version": "0.0.4",
15733 15738 "resolved": "https://registry.npmjs.org/vue-html2canvas/-/vue-html2canvas-0.0.4.tgz",
... ...
... ... @@ -29,6 +29,7 @@
29 29 "vee-validate": "^2.2.15",
30 30 "vue": "^2.5.16",
31 31 "vue-full-calendar": "^2.7.0",
  32 + "vue-html-to-paper": "^1.1.1",
32 33 "vue-html2canvas": "0.0.4",
33 34 "vue-json-csv": "^1.2.9",
34 35 "vue-material-year-calendar": "^1.2.4",
... ...
src/Services/http.js
Diff comments   View file @ec5677f
... ... @@ -3,7 +3,7 @@ import store from '@/store/store'
3 3  
4 4 export default () => {
5 5 return axios.create({
6   - // baseURL: 'http://192.168.2.221:3002/v1',
  6 + // baseURL: 'http://192.168.0.101:3002/v1',
7 7 baseURL: 'http://13.234.251.173:8001/v1',
8 8 headers: {
9 9 Authorization: `Bearer ${store.state.token}`
... ...
... ... @@ -14,7 +14,26 @@ import FullCalendar from 'vue-full-calendar';
14 14 import JsonCSV from 'vue-json-csv'
15 15 import VueHtml2Canvas from 'vue-html2canvas';
16 16 import 'babel-polyfill';
  17 +import VueHtmlToPaper from 'vue-html-to-paper';
17 18  
  19 +const options = {
  20 + name: '_blank',
  21 + specs: [
  22 + 'fullscreen=yes',
  23 + 'titlebar=yes',
  24 + 'scrollbars=yes'
  25 + ],
  26 + styles: [
  27 + 'https://unpkg.com/vuetify/dist/vuetify.min.css',
  28 + 'https://unpkg.com/kidlat-css/css/kidlat.css'
  29 + ]
  30 +}
  31 +
  32 +Vue.use(VueHtmlToPaper, options);
  33 +
  34 +// or, using the defaults with no stylesheet
  35 +
  36 +Vue.use(VueHtmlToPaper);
18 37 Vue.use(VueHtml2Canvas);
19 38  
20 39 Vue.component('downloadCsv', JsonCSV)
... ...
src/pages/Mark/mark.vue
Diff comments   View file @ec5677f
... ... @@ -238,7 +238,8 @@
238 238 <td
239 239 id="td"
240 240 class="text-xs-center markTable"
241   - v-for="marks in props.item.marksObtained"
  241 + v-for="(marks, index) in props.item.marksObtained"
  242 + :key="'A'+ index"
242 243 >
243 244 <v-text-field v-model="marks.marksScored"></v-text-field>
244 245 </td>
... ... @@ -448,7 +449,17 @@ export default {
448 449 }
449 450 });
450 451 },
  452 + clear() {
  453 + this.$refs.form.reset();
  454 + },
451 455 findStudents() {
  456 + this.getStudentData = [];
  457 + // for (let k = 0; k < this.headerOfMark.length; k++) {
  458 + // this.headerOfMark[k].slice(5);
  459 + // console.log(this.headerOfMark);
  460 + // }
  461 + // console.log(this.headerOfMark);
  462 +
452 463 if (this.$refs.form.validate()) {
453 464 this.showLoader = true;
454 465 http()
... ... @@ -459,6 +470,8 @@ export default {
459 470 }
460 471 })
461 472 .then(response => {
  473 + console.log(" bbbbbbbbbbbbbbbbbbb", this.headerOfMark);
  474 +
462 475 this.getStudentData = response.data.data;
463 476 this.showLoader = false;
464 477 this.showLoader = true;
... ... @@ -468,6 +481,7 @@ export default {
468 481 })
469 482 .then(response => {
470 483 this.showLoader = false;
  484 + this.headerOfMark.length = 4;
471 485 // console.log("getSectionsList=====>", response.data.data);
472 486 for (var i = 0; i < response.data.data.length; i++) {
473 487 this.headerOfMark.push({
... ... @@ -480,10 +494,10 @@ export default {
480 494 align: "center"
481 495 });
482 496 }
483   - for (var i = 0; i < this.getStudentData.length; i++) {
484   - this.getStudentData[i].marksObtained = [];
  497 + for (var n = 0; n < this.getStudentData.length; n++) {
  498 + this.getStudentData[n].marksObtained = [];
485 499 for (var j = 0; j < response.data.data.length; j++) {
486   - this.getStudentData[i].marksObtained.push({
  500 + this.getStudentData[n].marksObtained.push({
487 501 markDistributionId: response.data.data[j]._id,
488 502 marksScored: 0
489 503 });
... ... @@ -502,7 +516,6 @@ export default {
502 516 }
503 517 },
504 518 submit() {
505   - let studentsMarks = [];
506 519 for (var j = 0; j < this.getStudentData.length; j++) {
507 520 let data = {
508 521 examId: this.addMark.examId,
... ... @@ -515,6 +528,7 @@ export default {
515 528 http()
516 529 .post("/createMark", data)
517 530 .then(response => {
  531 + this.getStudentData = [];
518 532 this.snackbar = true;
519 533 this.text = response.data.message;
520 534 this.color = "green";
... ... @@ -575,4 +589,25 @@ export default {
575 589 .markTable {
576 590 max-width: 80px !important;
577 591 }
578   -</style>
579 592 \ No newline at end of file
  593 +</style>
  594 +
  595 +
  596 +
  597 +
  598 +
  599 +
  600 +
  601 +
  602 +
  603 +
  604 +
  605 +
  606 +
  607 +
  608 +
  609 +
  610 +
  611 +
  612 +
  613 +
  614 +
... ...
src/pages/Mark/viewMark.vue
Diff comments   View file @ec5677f
1 1 <template>
2 2 <v-app id="pages-dasboard">
3 3 <!-- ****** PROFILE MARK ****** -->
4   -
5 4 <v-container fluid grid-list-md>
6   - <v-flex xs12 sm12>
7   - <v-container fluid>
8   - <v-layout wrap>
9   - <v-flex xs12 sm12 md3 class="mt-4">
10   - <v-card flat>
11   - <v-toolbar dark class="fixcolors" flat>
12   - <v-spacer></v-spacer>
13   - <v-toolbar-title>
14   - <h3>Profile</h3>
15   - </v-toolbar-title>
16   - <v-spacer></v-spacer>
17   - </v-toolbar>
18   - <v-card-text>
19   - <v-container>
20   - <v-layout wrap v-for="(value, id, index) in filterData" v-if="index == 0">
21   - <v-flex xs12>
22   - <v-layout>
23   - <v-flex
24   - xs12
25   - class="text-xs-center text-sm-center text-md-center text-lg-center"
26   - >
27   - <v-avatar size="100px">
28   - <img
29   - src="/static/icon/user.png"
30   - v-if="!value[0].studentId.profilePicUrl"
31   - />
32   - <img
33   - :src="value[0].studentId.profilePicUrl"
34   - v-else-if="value[0].studentId.profilePicUrl"
35   - />
36   - </v-avatar>
37   - </v-flex>
38   - </v-layout>
39   - <v-layout>
40   - <v-flex xs12 sm12>
41   - <h3 class="text-xs-center">
42   - <b>{{ value[0].studentId.name }}</b>
43   - </h3>
44   - <p class="text-xs-center grey--text">Student</p>
45   - </v-flex>
46   - </v-layout>
47   - <v-layout style="border: 1px solid lightgrey;">
48   - <v-flex xs6 sm6>
49   - <h4 class="right py-0">
50   - <b>Roll No:</b>
51   - </h4>
52   - </v-flex>
53   - <v-flex sm6 xs6>
54   - <h4 class="py-0">{{ value[0].studentId.rollNo }}</h4>
55   - </v-flex>
56   - </v-layout>
57   - <v-layout style="border: 1px solid lightgrey;">
58   - <v-flex xs6 sm6>
59   - <h4 class="right py-0">
60   - <b>Class:</b>
61   - </h4>
62   - </v-flex>
63   - <v-flex sm6 xs6>
64   - <h4 class="py-0">{{value[0].classId.classNum }}</h4>
65   - </v-flex>
66   - </v-layout>
67   - <v-layout style="border: 1px solid lightgrey;">
68   - <v-flex xs6 sm6 class="right">
69   - <h4 class="right py-0">
70   - <b>Section:</b>
71   - </h4>
72   - </v-flex>
73   - <v-flex sm6 xs6 class="right">
74   - <h4 class="py-0">{{ value[0].sectionId.name}}</h4>
75   - </v-flex>
76   - </v-layout>
77   - </v-flex>
78   - </v-layout>
79   - </v-container>
80   - </v-card-text>
81   - </v-card>
82   - </v-flex>
  5 + <v-layout>
  6 + <v-flex xs12 sm12>
  7 + <v-btn class="grey" dark @click="print()">
  8 + Print
  9 + <v-icon right dark>print</v-icon>
  10 + </v-btn>
  11 + </v-flex>
  12 + </v-layout>
  13 + <v-flex xs12 sm12 id="printMe">
  14 + <v-layout wrap>
  15 + <v-flex xs12 sm12 md3>
  16 + <v-card class="fixcolors white--text" flat>
  17 + <v-card-actions class="pa-0">
  18 + <v-spacer></v-spacer>
  19 + <v-card-title class="pa-2">
  20 + <h3>Profile</h3>
  21 + </v-card-title>
  22 + <v-spacer></v-spacer>
  23 + </v-card-actions>
  24 + </v-card>
  25 + <v-card flat>
  26 + <v-layout
  27 + wrap
  28 + v-for="(value, id, index) in filterData"
  29 + v-if="index == 0"
  30 + :key="index"
  31 + >
  32 + <v-flex xs12 style="margin:16px;">
  33 + <v-layout>
  34 + <v-flex xs12>
  35 + <v-avatar
  36 + size="100px"
  37 + class="mx-auto"
  38 + style="margin: auto;display:block;margin-bottom:10px !important"
  39 + >
  40 + <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
  41 + <img
  42 + :src="value[0].studentId.profilePicUrl"
  43 + v-else-if="value[0].studentId.profilePicUrl"
  44 + />
  45 + </v-avatar>
  46 + </v-flex>
  47 + </v-layout>
  48 + <v-layout>
  49 + <v-flex xs12 style="text-align:center;">
  50 + <h3>
  51 + <b>{{ value[0].studentId.name }}</b>
  52 + </h3>
  53 + <p class="grey--text">Student</p>
  54 + </v-flex>
  55 + </v-layout>
  56 + <v-layout
  57 + style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
  58 + border-top-left-radius: 4px;"
  59 + >
  60 + <v-flex xs6 sm3 class="py-1">
  61 + <h4>
  62 + <b>RollNo</b>
  63 + </h4>
  64 + </v-flex>
  65 + <v-flex sm9 xs7 class="py-1">
  66 + <h4>: {{ value[0].studentId.rollNo }}</h4>
  67 + </v-flex>
  68 + </v-layout>
  69 + <v-layout style="border: 1px solid lightgrey;padding: 4px;">
  70 + <v-flex xs6 sm3 class="py-1">
  71 + <h4>
  72 + <b>Class</b>
  73 + </h4>
  74 + </v-flex>
  75 + <v-flex sm9 xs8 class="py-1">
  76 + <h4>: {{value[0].classId.classNum }}</h4>
  77 + </v-flex>
  78 + </v-layout>
  79 + <v-layout
  80 + style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
  81 + border-bottom-left-radius: 4px;"
  82 + >
  83 + <v-flex xs6 sm3 class>
  84 + <h4>
  85 + <b>Section</b>
  86 + </h4>
  87 + </v-flex>
  88 + <v-flex sm9 xs6 class>
  89 + <h4>: {{ value[0].sectionId.name}}</h4>
  90 + </v-flex>
  91 + </v-layout>
  92 + </v-flex>
  93 + </v-layout>
  94 + </v-card>
  95 + </v-flex>
83 96  
84   - <!-- ****** TABLE DATA MARK ****** -->
  97 + <!-- ****** TABLE DATA MARK ****** -->
85 98  
86   - <v-flex xs12 sm12 md9 class="mt-4">
87   - <v-toolbar dark class="fixcolors" flat>
  99 + <v-flex xs12 sm12 md9>
  100 + <v-card class="fixcolors white--text" flat>
  101 + <v-card-actions class="pa-0">
88 102 <v-spacer></v-spacer>
89   - <v-toolbar-title>
  103 + <v-card-title class="pa-2">
90 104 <h3>Mark</h3>
91   - </v-toolbar-title>
  105 + </v-card-title>
92 106 <v-spacer></v-spacer>
93   - </v-toolbar>
94   - <v-card v-for="(value, id, index) in filterData">
95   - <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
96   - <table class="mb-3 tableRsponsive feeTypeTable">
97   - <thead>
98   - <tr class="info white--text">
99   - <td rowspan="2">Subject</td>
  107 + </v-card-actions>
  108 + </v-card>
  109 + <v-card
  110 + v-for="(value, id, index) in filterData"
  111 + :key="index"
  112 + flat
  113 + style="border: 1px solid lightgrey;margin-bottom:14px;"
  114 + >
  115 + <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
  116 + <table
  117 + class="mb-5 tableRsponsive feeTypeTable"
  118 + style="border: 1px solid lightgrey;
  119 + border-collapse: collapse;!important
  120 + table-layout: auto !important;
  121 + width: 100% !important;"
  122 + >
  123 + <thead style="border: 1px solid lightgrey !important;">
  124 + <tr
  125 + class="info white--text"
  126 + style="border: 1px solid lightgrey !important;padding:4px;"
  127 + >
  128 + <td
  129 + rowspan="2"
  130 + style="border: 1px solid lightgrey !important;padding: 10px;"
  131 + >Subject</td>
  132 + <td
  133 + colspan="2"
  134 + v-for="exam in value[index].studentsMarks"
  135 + style="border: 1px solid lightgrey !important;padding: 10px;"
  136 + >{{exam.markDistributionId.distributionType}}</td>
  137 + <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
  138 + </tr>
  139 + <tr
  140 + v-for="(subject, ind) in value"
  141 + v-if="ind == 0"
  142 + style="border: 1px solid lightgrey !important;"
  143 + >
  144 + <template v-for="(exam, i) in subject.studentsMarks">
  145 + <td
  146 + class="bg-sky white--text"
  147 + style="border: 1px solid lightgrey !important;padding: 10px;"
  148 + >Mark</td>
100 149 <td
101   - colspan="2"
102   - v-for="exam in value[index].studentsMarks"
103   - >{{exam.markDistributionId.distributionType}}</td>
104   - <td>Total</td>
105   - </tr>
106   - <tr v-for="(subject, ind) in value" v-if="ind == 0">
107   - <template v-for="(exam, i) in subject.studentsMarks">
108   - <td class="bg-sky white--text">Mark</td>
109   - <td class="bg-sky-light white--text">Highest Mark</td>
110   - </template>
111   - <td class="bg-sky white--text">Mark</td>
112   - </tr>
113   - </thead>
114   - <tbody>
115   - <tr v-for="subject in value">
116   - <td>{{subject.subjectName}}</td>
117   - <template v-for="(exam, i) in subject.studentsMarks">
118   - <td>{{exam.marksScored}}</td>
119   - <td>{{exam.markDistributionId.markValue}}</td>
120   - </template>
121   - <td>{{subject.totalMarks}}</td>
122   - </tr>
123   - </tbody>
124   - </table>
125   - </v-card>
126   - </v-flex>
127   - </v-layout>
128   - </v-container>
  150 + class="bg-sky-light white--text"
  151 + style="border: 1px solid lightgrey !important;padding: 10px;"
  152 + >Highest Mark</td>
  153 + </template>
  154 + <td
  155 + class="bg-sky white--text"
  156 + style="border: 1px solid lightgrey !important;padding: 10px;"
  157 + >Mark</td>
  158 + </tr>
  159 + </thead>
  160 + <tbody style="border: 1px solid lightgrey !important;">
  161 + <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
  162 + <td
  163 + style="border: 1px solid lightgrey !important;padding: 10px;"
  164 + >{{subject.subjectName}}</td>
  165 + <template v-for="(exam, i) in subject.studentsMarks">
  166 + <td
  167 + style="border: 1px solid lightgrey !important;padding: 10px;"
  168 + >{{exam.marksScored}}</td>
  169 + <td
  170 + style="border: 1px solid lightgrey !important;padding: 10px;"
  171 + >{{exam.markDistributionId.markValue}}</td>
  172 + </template>
  173 + <td
  174 + style="border: 1px solid lightgrey !important;padding: 10px;"
  175 + >{{subject.totalMarks}}</td>
  176 + </tr>
  177 + </tbody>
  178 + </table>
  179 + </v-card>
  180 + </v-flex>
  181 + </v-layout>
129 182 </v-flex>
130 183 </v-container>
131 184 <div class="loader" v-if="showLoader">
... ... @@ -141,12 +194,14 @@ import _ from &quot;underscore&quot;;
141 194  
142 195 export default {
143 196 data: () => ({
144   - showLoader: false,
  197 + showLoader: true,
  198 + nameShow: false,
145 199 markData: [],
146 200 token: "",
147 201 markDistributions: [],
148 202 markParticularDistributionData: [],
149   - filterData: []
  203 + filterData: [],
  204 + output: null
150 205 }),
151 206 mounted() {
152 207 this.token = this.$store.state.token;
... ... @@ -154,7 +209,7 @@ export default {
154 209 },
155 210 methods: {
156 211 getMarkList() {
157   - this.showLoader = false;
  212 + this.showLoader = true;
158 213 http()
159 214 .get("/getParticularMark", {
160 215 params: { studentId: this.$route.params.markId },
... ... @@ -240,7 +295,7 @@ export default {
240 295 // }
241 296 // this.markData = aray;
242 297 // console.log("aray-2", aray);
243   - // this.showLoader = false;
  298 + this.showLoader = false;
244 299 })
245 300 .catch(error => {
246 301 // console.log("err====>", err);
... ... @@ -253,6 +308,10 @@ export default {
253 308 this.$store.dispatch("Id", null);
254 309 }
255 310 });
  311 + },
  312 + print() {
  313 + // Pass the element id here
  314 + this.$htmlToPaper("printMe");
256 315 }
257 316 }
258 317 };
... ... @@ -263,11 +322,13 @@ table {
263 322 border-collapse: collapse;
264 323 border: 1px solid #e2e7eb;
265 324 }
266   -
  325 +tbody > tr > td,
  326 +.table-bordered {
  327 + border: 1px solid #ddd;
  328 +}
267 329 th,
268 330 td {
269 331 border: 1px solid #e2e7eb;
270   - padding: 10px;
271 332 text-align: center;
272 333 }
273 334 table.feeTypeTable {
... ... @@ -286,6 +347,21 @@ table.feeTypeTable {
286 347 .bg-skyDark {
287 348 background-color: #956785;
288 349 }
  350 +.loader {
  351 + width: 100%;
  352 + height: 100%;
  353 + position: fixed;
  354 + top: 0;
  355 + left: 0;
  356 + text-align: center;
  357 + background-color: rgba(0, 0, 0, 0.5);
  358 + z-index: 999;
  359 +}
  360 +
  361 +.loader > div {
  362 + position: relative;
  363 + top: calc(50% - 16px);
  364 +}
289 365 @media screen and (max-width: 380px) {
290 366 .tableRsponsive {
291 367 display: block;
... ... @@ -293,4 +369,21 @@ table.feeTypeTable {
293 369 overflow: scroll;
294 370 }
295 371 }
296   -</style>
297 372 \ No newline at end of file
  373 +</style>
  374 +
  375 +
  376 +
  377 +
  378 +
  379 +
  380 +
  381 +
  382 +
  383 +
  384 +
  385 +
  386 +
  387 +
  388 +
  389 +
  390 +
... ...
src/pages/Report/progressCardReport.vue
Diff comments   View file @ec5677f
... ... @@ -58,7 +58,7 @@
58 58 <v-flex xs3 sm6 lg2 class="subheading mt-4">
59 59 <label class="right">Student:</label>
60 60 </v-flex>
61   - <v-flex xs9 sm6 lg8 class="ml-2">
  61 + <v-flex xs9 sm6 lg8 class="ml-2">
62 62 <v-select
63 63 :items="getStudentsList"
64 64 label="Select your student"
... ... @@ -86,130 +86,186 @@
86 86 </v-card>
87 87 <!-- ****** PROFILE MARK ****** -->
88 88  
89   - <v-container fluid grid-list-md v-if="showReport">
90   - <v-flex xs12 sm12>
91   - <v-container fluid>
92   - <v-layout wrap>
93   - <v-flex xs12 sm12 md3 class="mt-4">
94   - <v-card flat>
95   - <v-toolbar dark class="fixcolors" flat>
96   - <v-spacer></v-spacer>
97   - <v-toolbar-title>
98   - <h3>Profile</h3>
99   - </v-toolbar-title>
100   - <v-spacer></v-spacer>
101   - </v-toolbar>
102   - <v-card-text>
103   - <v-container>
104   - <v-layout wrap v-for="(value, id, index) in filterData" v-if="index == 0">
105   - <v-flex xs12>
106   - <v-layout>
107   - <v-flex
108   - xs12
109   - class="text-xs-center text-sm-center text-md-center text-lg-center"
110   - >
111   - <v-avatar size="100px">
112   - <img
113   - src="/static/icon/user.png"
114   - v-if="!value[0].studentId.profilePicUrl"
115   - />
116   - <img
117   - :src="value[0].studentId.profilePicUrl"
118   - v-else-if="value[0].studentId.profilePicUrl"
119   - />
120   - </v-avatar>
121   - </v-flex>
122   - </v-layout>
123   - <v-layout>
124   - <v-flex xs12 sm12>
125   - <h3 class="text-xs-center">
126   - <b>{{ value[0].studentId.name }}</b>
127   - </h3>
128   - <p class="text-xs-center grey--text">Student</p>
129   - </v-flex>
130   - </v-layout>
131   - <v-layout style="border: 1px solid lightgrey;">
132   - <v-flex xs6 sm6>
133   - <h4 class="right py-0">
134   - <b>Roll No:</b>
135   - </h4>
136   - </v-flex>
137   - <v-flex sm6 xs6 >
138   - <h4 class="py-0">{{ value[0].studentId.rollNo }}</h4>
139   - </v-flex>
140   - </v-layout>
141   - <v-layout style="border: 1px solid lightgrey;" >
142   - <v-flex xs6 sm6>
143   - <h4 class="right py-0">
144   - <b>Class:</b>
145   - </h4>
146   - </v-flex>
147   - <v-flex sm6 xs6>
148   - <h4 class="py-0">{{value[0].classId.classNum }}</h4>
149   - </v-flex>
150   - </v-layout>
151   - <v-layout style="border: 1px solid lightgrey;">
152   - <v-flex xs6 sm6 class="right">
153   - <h4 class="right py-0">
154   - <b>Section:</b>
155   - </h4>
156   - </v-flex>
157   - <v-flex sm6 xs6 class="right">
158   - <h4 class="py-0">{{ value[0].sectionId.name}}</h4>
159   - </v-flex>
160   - </v-layout>
161   - </v-flex>
162   - </v-layout>
163   - </v-container>
164   - </v-card-text>
165   - </v-card>
166   - </v-flex>
  89 + <v-container fluid grid-list-md v-show="showReport">
  90 + <v-layout>
  91 + <v-flex xs12 sm12>
  92 + <v-btn class="grey" dark @click="print()">
  93 + Print
  94 + <v-icon right dark>print</v-icon>
  95 + </v-btn>
  96 + </v-flex>
  97 + </v-layout>
  98 + <v-flex xs12 sm12 id="printMe">
  99 + <!-- <v-container fluid grid-list-md> -->
  100 + <v-layout wrap>
  101 + <v-flex xs12 sm12 md3>
  102 + <v-card class="fixcolors white--text" flat>
  103 + <v-card-actions class="pa-0">
  104 + <v-spacer></v-spacer>
  105 + <v-card-title class="pa-2">
  106 + <h3>Profile</h3>
  107 + </v-card-title>
  108 + <v-spacer></v-spacer>
  109 + </v-card-actions>
  110 + </v-card>
  111 + <v-card flat>
  112 + <v-layout
  113 + wrap
  114 + v-for="(value, id, index) in filterData"
  115 + v-if="index == 0"
  116 + :key="index"
  117 + >
  118 + <v-flex xs12 style="margin:16px;">
  119 + <v-layout>
  120 + <v-flex xs12>
  121 + <v-avatar
  122 + size="100px"
  123 + class="mx-auto"
  124 + style="margin: auto;display:block;margin-bottom:10px !important"
  125 + >
  126 + <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
  127 + <img
  128 + :src="value[0].studentId.profilePicUrl"
  129 + v-else-if="value[0].studentId.profilePicUrl"
  130 + />
  131 + </v-avatar>
  132 + </v-flex>
  133 + </v-layout>
  134 + <v-layout>
  135 + <v-flex xs12 style="text-align:center;">
  136 + <h3>
  137 + <b>{{ value[0].studentId.name }}</b>
  138 + </h3>
  139 + <p class="grey--text">Student</p>
  140 + </v-flex>
  141 + </v-layout>
  142 + <v-layout
  143 + style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
  144 + border-top-left-radius: 4px;"
  145 + >
  146 + <v-flex xs6 sm3 class="py-1">
  147 + <h4>
  148 + <b>RollNo</b>
  149 + </h4>
  150 + </v-flex>
  151 + <v-flex sm9 xs7 class="py-1">
  152 + <h4>: {{ value[0].studentId.rollNo }}</h4>
  153 + </v-flex>
  154 + </v-layout>
  155 + <v-layout style="border: 1px solid lightgrey;padding: 4px;">
  156 + <v-flex xs6 sm3 class="py-1">
  157 + <h4>
  158 + <b>Class</b>
  159 + </h4>
  160 + </v-flex>
  161 + <v-flex sm9 xs8 class="py-1">
  162 + <h4>: {{value[0].classId.classNum }}</h4>
  163 + </v-flex>
  164 + </v-layout>
  165 + <v-layout
  166 + style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
  167 + border-bottom-left-radius: 4px;"
  168 + >
  169 + <v-flex xs6 sm3 class>
  170 + <h4>
  171 + <b>Section</b>
  172 + </h4>
  173 + </v-flex>
  174 + <v-flex sm9 xs6 class>
  175 + <h4>: {{ value[0].sectionId.name}}</h4>
  176 + </v-flex>
  177 + </v-layout>
  178 + </v-flex>
  179 + </v-layout>
  180 + </v-card>
  181 + </v-flex>
167 182  
168   - <!-- ****** TABLE DATA MARK ****** -->
  183 + <!-- ****** TABLE DATA MARK ****** -->
169 184  
170   - <v-flex xs12 sm12 md9 class="mt-4">
171   - <v-toolbar dark class="fixcolors" flat>
  185 + <v-flex xs12 sm12 md9>
  186 + <v-card class="fixcolors white--text" flat>
  187 + <v-card-actions class="pa-0">
172 188 <v-spacer></v-spacer>
173   - <v-toolbar-title>
  189 + <v-card-title class="pa-2">
174 190 <h3>Mark</h3>
175   - </v-toolbar-title>
  191 + </v-card-title>
176 192 <v-spacer></v-spacer>
177   - </v-toolbar>
178   - <v-card v-for="(value, id, index) in filterData">
179   - <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
180   - <table class="mb-4 tableRsponsive feeTypeTable">
181   - <thead>
182   - <tr class="info white--text">
183   - <td rowspan="2">Subject</td>
  193 + </v-card-actions>
  194 + </v-card>
  195 + <v-card
  196 + v-for="(value, id, index) in filterData"
  197 + :key="index"
  198 + flat
  199 + style="border: 1px solid lightgrey;margin-bottom:14px;"
  200 + >
  201 + <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
  202 + <table
  203 + class="mb-5 tableRsponsive feeTypeTable"
  204 + style="border: 1px solid lightgrey;
  205 + border-collapse: collapse;!important
  206 + table-layout: auto !important;
  207 + width: 100% !important;"
  208 + >
  209 + <thead style="border: 1px solid lightgrey !important;">
  210 + <tr
  211 + class="info white--text"
  212 + style="border: 1px solid lightgrey !important;padding:4px;"
  213 + >
  214 + <td
  215 + rowspan="2"
  216 + style="border: 1px solid lightgrey !important;padding: 10px;"
  217 + >Subject</td>
  218 + <td
  219 + colspan="2"
  220 + v-for="exam in value[index].studentsMarks"
  221 + style="border: 1px solid lightgrey !important;padding: 10px;"
  222 + >{{exam.markDistributionId.distributionType}}</td>
  223 + <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
  224 + </tr>
  225 + <tr
  226 + v-for="(subject, ind) in value"
  227 + v-if="ind == 0"
  228 + style="border: 1px solid lightgrey !important;"
  229 + >
  230 + <template v-for="(exam, i) in subject.studentsMarks">
184 231 <td
185   - colspan="2"
186   - v-for="exam in value[index].studentsMarks"
187   - >{{exam.markDistributionId.distributionType}}</td>
188   - <td>Total</td>
189   - </tr>
190   - <tr v-for="(subject, ind) in value" v-if="ind == 0">
191   - <template v-for="(exam, i) in subject.studentsMarks">
192   - <td class="bg-sky white--text">Mark</td>
193   - <td class="bg-sky-light white--text">Highest Mark</td>
194   - </template>
195   - <td class="bg-sky white--text">Mark</td>
196   - </tr>
197   - </thead>
198   - <tbody>
199   - <tr v-for="subject in value">
200   - <td>{{subject.subjectName}}</td>
201   - <template v-for="(exam, i) in subject.studentsMarks">
202   - <td>{{exam.marksScored}}</td>
203   - <td>{{exam.markDistributionId.markValue}}</td>
204   - </template>
205   - <td>{{subject.totalMarks}}</td>
206   - </tr>
207   - </tbody>
208   - </table>
209   - </v-card>
210   - </v-flex>
211   - </v-layout>
212   - </v-container>
  232 + class="bg-sky white--text"
  233 + style="border: 1px solid lightgrey !important;padding: 10px;"
  234 + >Mark</td>
  235 + <td
  236 + class="bg-sky-light white--text"
  237 + style="border: 1px solid lightgrey !important;padding: 10px;"
  238 + >Highest Mark</td>
  239 + </template>
  240 + <td
  241 + class="bg-sky white--text"
  242 + style="border: 1px solid lightgrey !important;padding: 10px;"
  243 + >Mark</td>
  244 + </tr>
  245 + </thead>
  246 + <tbody style="border: 1px solid lightgrey !important;">
  247 + <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
  248 + <td
  249 + style="border: 1px solid lightgrey !important;padding: 10px;"
  250 + >{{subject.subjectName}}</td>
  251 + <template v-for="(exam, i) in subject.studentsMarks">
  252 + <td
  253 + style="border: 1px solid lightgrey !important;padding: 10px;"
  254 + >{{exam.marksScored}}</td>
  255 + <td
  256 + style="border: 1px solid lightgrey !important;padding: 10px;"
  257 + >{{exam.markDistributionId.markValue}}</td>
  258 + </template>
  259 + <td
  260 + style="border: 1px solid lightgrey !important;padding: 10px;"
  261 + >{{subject.totalMarks}}</td>
  262 + </tr>
  263 + </tbody>
  264 + </table>
  265 + </v-card>
  266 + </v-flex>
  267 + </v-layout>
  268 + <!-- </v-container> -->
213 269 </v-flex>
214 270 </v-container>
215 271 <div class="loader" v-if="showLoader">
... ... @@ -241,7 +297,8 @@ export default {
241 297 sectionRules: [v => !!v || "Class is required"],
242 298 studentRules: [v => !!v || "Student is required"],
243 299 getReport: {},
244   - classList: []
  300 + classList: [],
  301 + output: null
245 302 }),
246 303 mounted() {
247 304 this.token = this.$store.state.token;
... ... @@ -252,14 +309,17 @@ export default {
252 309 this.$refs.form.reset();
253 310 },
254 311 getClass() {
  312 + this.showLoader = true;
255 313 http()
256 314 .get("/getClassesList", {
257 315 headers: { Authorization: "Bearer " + this.token }
258 316 })
259 317 .then(response => {
260 318 this.classList = response.data.data;
  319 + this.showLoader = false;
261 320 })
262 321 .catch(err => {
  322 + this.showLoader = false;
263 323 // console.log("err====>", err);
264 324 });
265 325 },
... ... @@ -299,7 +359,7 @@ export default {
299 359 });
300 360 },
301 361 getMarkReportList() {
302   - this.showLoader = false;
  362 + this.showLoader = true;
303 363 this.showReport = true;
304 364 http()
305 365 .get("/getParticularMark", {
... ... @@ -312,81 +372,21 @@ export default {
312 372 newData[i].examination = newData[i].examId._id;
313 373 }
314 374 this.filterData = _.groupBy(newData, ["examination"]);
315   - console.log("check filtered data", this.filterData);
316 375 for (let data in this.filterData) {
317   - // console.log("this.filterData[data].length", this.filterData[data]);
318 376 for (let item in this.filterData[data]) {
319   - // console.log("check", this.filterData[data][item].studentsMarks);
320 377 var totalMarks = 0;
321 378 for (
322 379 let i = 0;
323 380 i < this.filterData[data][item].studentsMarks.length;
324 381 i++
325 382 ) {
326   - // console.log(
327   - // "check data",
328   - // this.filterData[data][item].studentsMarks[i]
329   - // );
330 383 totalMarks += this.filterData[data][item].studentsMarks[i]
331 384 .marksScored;
332 385 }
333 386 this.filterData[data][item].totalMarks = totalMarks;
334 387 }
335 388 }
336   - // var aray = [];
337   - // this.markData = response.data.data;
338   - // for (let i = 0; i < this.markData.length; i++) {
339   - // console.log(this.markData[i].examId.examName);
340   - // let index = -1;
341   -
342   - // aray.forEach((dat_, k) => {
343   - // if (dat_.category == this.markData[i].examId.examName) {
344   - // index = k;
345   - // }
346   - // });
347   - // if (index == -1) {
348   - // var obj = {
349   - // category: this.markData[i].examId.examName,
350   - // extraData: []
351   - // };
352   - // obj.extraData.push(this.markData[i]);
353   - // aray.push(obj);
354   - // } else {
355   - // console.log("=o", this.markData[i]);
356   - // // aray[index].extraData =
357   -
358   - // aray[index].extraData.push(this.markData[i]);
359   - // }
360   - // console.log("aray-", aray);
361   -
362   - // for (let j = 0; j < this.markData[i].studentsMarks.length; j++) {
363   - // // console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained)
364   -
365   - // this.markDistributions = this.markData[i].studentsMarks[
366   - // j
367   - // ].marksObtained;
368   - // for (
369   - // let k = 0;
370   - // k < this.markData[i].studentsMarks[j].marksObtained.length;
371   - // k++
372   - // ) {
373   - // this.markParticularDistributionData.push(
374   - // this.markData[i].studentsMarks[j].marksObtained[k].marksScored
375   - // );
376   - // this.markParticularDistributionData.push(
377   - // this.markData[i].studentsMarks[j].marksObtained[k]
378   - // .markDistributionId.markValue
379   - // );
380   - // // console.log(
381   - // // "this.markParticularDistributionData",
382   - // // this.markParticularDistributionData
383   - // // );
384   - // }
385   - // }
386   - // }
387   - // this.markData = aray;
388   - // console.log("aray-2", aray);
389   - // this.showLoader = false;
  389 + this.showLoader = false;
390 390 })
391 391 .catch(error => {
392 392 // console.log("err====>", err);
... ... @@ -399,6 +399,10 @@ export default {
399 399 this.$store.dispatch("Id", null);
400 400 }
401 401 });
  402 + },
  403 + print() {
  404 + // Pass the element id here
  405 + this.$htmlToPaper("printMe");
402 406 }
403 407 }
404 408 };
... ...
src/pages/Report/studentReport.vue
Diff comments   View file @ec5677f
... ... @@ -28,7 +28,7 @@
28 28 <label class="right">Report For :</label>
29 29 </v-flex>
30 30 <v-flex xs7 sm6 lg8 class="ml-2">
31   - <v-select
  31 + <v-autocomplete
32 32 v-model="report.form"
33 33 label="Select your report for"
34 34 :items="formList"
... ... @@ -37,7 +37,7 @@
37 37 @change="getReport(report.form)"
38 38 :rules="formRules"
39 39 required
40   - ></v-select>
  40 + ></v-autocomplete>
41 41 </v-flex>
42 42 </v-layout>
43 43 </v-flex>
... ... @@ -47,13 +47,13 @@
47 47 <label class="right">Blood Group :</label>
48 48 </v-flex>
49 49 <v-flex xs7 sm6 lg8 class="ml-2">
50   - <v-select
  50 + <v-autocomplete
51 51 v-model="report.bloodGroup"
52 52 label="Select your Blood Group "
53 53 :items="bloodGroupList"
54 54 :rules="bloodGroupRules"
55 55 required
56   - ></v-select>
  56 + ></v-autocomplete>
57 57 </v-flex>
58 58 </v-layout>
59 59 </v-flex>
... ... @@ -63,13 +63,13 @@
63 63 <label class="right">Gender:</label>
64 64 </v-flex>
65 65 <v-flex xs7 sm6 lg8 class="ml-2">
66   - <v-select
  66 + <v-autocomplete
67 67 v-model="report.gender"
68 68 label="Select your gender "
69 69 :items="gender"
70 70 :rules="genderRules"
71 71 required
72   - ></v-select>
  72 + ></v-autocomplete>
73 73 </v-flex>
74 74 </v-layout>
75 75 </v-flex>
... ... @@ -79,13 +79,13 @@
79 79 <label class="right">Route:</label>
80 80 </v-flex>
81 81 <v-flex xs7 sm6 lg8 class="ml-2">
82   - <v-select
  82 + <v-autocomplete
83 83 v-model="report.route"
84 84 label="Select your gender "
85 85 :items="route"
86 86 :rules="routeRules"
87 87 required
88   - ></v-select>
  88 + ></v-autocomplete>
89 89 </v-flex>
90 90 </v-layout>
91 91 </v-flex>
... ... @@ -95,13 +95,13 @@
95 95 <label class="right">Hostel:</label>
96 96 </v-flex>
97 97 <v-flex xs7 sm6 lg8 class="ml-2">
98   - <v-select
  98 + <v-autocomplete
99 99 v-model="report.route"
100 100 label="Select your hostel "
101 101 :items="hostelList"
102 102 :rules="hostelRules"
103 103 required
104   - ></v-select>
  104 + ></v-autocomplete>
105 105 </v-flex>
106 106 </v-layout>
107 107 </v-flex>
... ... @@ -111,13 +111,13 @@
111 111 <label class="right">Country :</label>
112 112 </v-flex>
113 113 <v-flex xs7 sm6 lg8 class="ml-2">
114   - <v-select
  114 + <v-autocomplete
115 115 v-model="report.country"
116 116 label="Select your Country "
117 117 :items="countryList"
118 118 :rules="countryRules"
119 119 required
120   - ></v-select>
  120 + ></v-autocomplete>
121 121 </v-flex>
122 122 </v-layout>
123 123 </v-flex>
... ... @@ -142,7 +142,7 @@
142 142 <label class="right">Class:</label>
143 143 </v-flex>
144 144 <v-flex xs7 sm6 lg8 class="ml-2">
145   - <v-select
  145 + <v-autocomplete
146 146 v-model="report.classId"
147 147 label="Select your class"
148 148 type="text"
... ... @@ -152,7 +152,7 @@
152 152 item-value="_id"
153 153 @change="getSections(report.classId)"
154 154 required
155   - ></v-select>
  155 + ></v-autocomplete>
156 156 </v-flex>
157 157 </v-layout>
158 158 </v-flex>
... ... @@ -162,7 +162,7 @@
162 162 <label class="right">Section:</label>
163 163 </v-flex>
164 164 <v-flex xs7 sm6 lg8 class="ml-2">
165   - <v-select
  165 + <v-autocomplete
166 166 :items="addSection"
167 167 label="Select your Section"
168 168 v-model="report.sectionId"
... ... @@ -171,7 +171,7 @@
171 171 item-value="_id"
172 172 name="Select Section"
173 173 required
174   - ></v-select>
  174 + ></v-autocomplete>
175 175 </v-flex>
176 176 </v-layout>
177 177 </v-flex>
... ... @@ -191,18 +191,6 @@
191 191 </v-flex>
192 192 </v-form>
193 193 </v-card>
194   - <!-- <v-card flat>
195   - <v-flex xs12 v-for="(student,i) in getStudentsReportList" :key="i">
196   - <v-layout>
197   - <v-flex xs12 sm12 md6>
198   - <h5 class="mt-2 ml-2">Class: {{ student.classId.classNum }}</h5>
199   - </v-flex>
200   - <v-flex xs12 sm12 md6>
201   - <h5 class="right mt-2 ml-2">Section: {{ student.sectionId.name }}</h5>
202   - </v-flex>
203   - </v-layout>
204   - </v-flex>
205   - </v-card>-->
206 194 <v-data-table
207 195 :headers="headers"
208 196 :items="getStudentsReportList"
... ... @@ -350,14 +338,17 @@ export default {
350 338 this.$refs.form.reset();
351 339 },
352 340 getClass() {
  341 + this.showLoader = true;
353 342 http()
354 343 .get("/getClassesList", {
355 344 headers: { Authorization: "Bearer " + this.token }
356 345 })
357 346 .then(response => {
358 347 this.classList = response.data.data;
  348 + this.showLoader = false;
359 349 })
360 350 .catch(err => {
  351 + this.showLoader = false;
361 352 // console.log("err====>", err);
362 353 });
363 354 },
... ...