viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c34b2bc04c0c91b642f1418e1dae8f658516991a

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

solved issues related to view marks and minor changes in other pages

Showing 4 changed files with 21 additions and 4 deletions   Show diff stats
src/pages/Account/viewInvoice.vue
Diff comments   View file @c34b2bc
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <v-flex xs12 sm12 id="printMe"> 13 <v-flex xs12 sm12 id="printMe">
14 <v-layout wrap> 14 <v-layout wrap>
15 <!-- ****** TABLE DATA MARK ****** --> 15 <!-- ****** TABLE DATA MARK ****** -->
16 <v-flex xs12 sm12 md12> 16 <v-flex xs12 sm12 md12>
17 <v-card> 17 <v-card>
18 <v-layout wrap> 18 <v-layout wrap>
19 <v-flex 12> 19 <v-flex 12>
20 <br /> 20 <br />
21 <v-layout> 21 <v-layout>
22 <v-flex xs12 sm12 md12 class="text-xs-center"> 22 <v-flex xs12 sm12 md12 class="text-xs-center">
23 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 23 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
24 <p class="title">{{ userData.name }}</p> 24 <p class="title">{{ userData.name }}</p>
25 <p>{{ userData.address }}</p> 25 <p>{{ userData.address }}</p>
26 </v-flex> 26 </v-flex>
27 27
28 <v-flex xs12 sm12 md12 class="text-xs-center"> 28 <v-flex xs12 sm12 md12 class="text-xs-center">
29 <v-layout> 29 <v-layout>
30 <v-flex xs4 sm2> 30 <v-flex xs4 sm2>
31 <h5 class="right my-1"> 31 <h5 class="right my-1">
32 <b>invoice:</b> 32 <b>invoice:</b>
33 </h5> 33 </h5>
34 </v-flex> 34 </v-flex>
35 <v-flex sm11 xs8> 35 <v-flex sm11 xs8>
36 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 36 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
37 </v-flex> 37 </v-flex>
38 </v-layout> 38 </v-layout>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 sm2> 40 <v-flex xs4 sm2>
41 <h5 class="right my-1"> 41 <h5 class="right my-1">
42 <b>Name:</b> 42 <b>Name:</b>
43 </h5> 43 </h5>
44 </v-flex> 44 </v-flex>
45 <v-flex sm11 xs8> 45 <v-flex sm11 xs8>
46 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 46 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
47 </v-flex> 47 </v-flex>
48 </v-layout> 48 </v-layout>
49 <v-layout> 49 <v-layout>
50 <v-flex xs4 sm2> 50 <v-flex xs4 sm2>
51 <h5 class="right my-1"> 51 <h5 class="right my-1">
52 <b>Class:</b> 52 <b>Class:</b>
53 </h5> 53 </h5>
54 </v-flex> 54 </v-flex>
55 <v-flex sm11 xs8> 55 <v-flex sm11 xs8>
56 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 56 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <!-- <v-flex xs12 sm6> --> 59 <!-- <v-flex xs12 sm6> -->
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 sm2> 61 <v-flex xs4 sm2>
62 <h5 class="right my-1"> 62 <h5 class="right my-1">
63 <b>Roll No:</b> 63 <b>Roll No:</b>
64 </h5> 64 </h5>
65 </v-flex> 65 </v-flex>
66 <v-flex sm6 xs8> 66 <v-flex sm6 xs8>
67 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 67 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 <v-layout> 70 <v-layout>
71 <v-flex xs4 sm2> 71 <v-flex xs4 sm2>
72 <h5 class="right my-1"> 72 <h5 class="right my-1">
73 <b>email:</b> 73 <b>email:</b>
74 </h5> 74 </h5>
75 </v-flex> 75 </v-flex>
76 <v-flex sm6 xs8> 76 <v-flex sm6 xs8>
77 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 77 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 <v-layout> 80 <v-layout>
81 <v-flex xs4 sm2> 81 <v-flex xs4 sm2>
82 <h5 class="right my-1"> 82 <h5 class="right my-1">
83 <b>Status :</b> 83 <b>Status :</b>
84 </h5> 84 </h5>
85 </v-flex> 85 </v-flex>
86 <v-flex sm6 xs8> 86 <v-flex sm6 xs8>
87 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5> 87 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 </v-flex> 92 </v-flex>
93 </v-layout> 93 </v-layout>
94 <table class="feeTypeTable tableRsponsive"> 94 <table class="feeTypeTable tableRsponsive">
95 <tr class="info white--text"> 95 <tr class="info white--text">
96 <th>#</th> 96 <th>#</th>
97 <th>Fee Type</th> 97 <th>Fee Type</th>
98 <th>Amount</th> 98 <th>Amount</th>
99 <th>Discount</th> 99 <th>Discount</th>
100 <th>Subtotal</th> 100 <th>Subtotal</th>
101 </tr> 101 </tr>
102 <tr 102 <tr
103 v-for="(feeType, index) in feeTypeData" 103 v-for="(feeType, index) in feeTypeData"
104 :key="index" 104 :key="index"
105 v-on:keyup="getAmmountDetails(feeType)" 105 v-on:keyup="getAmmountDetails(feeType)"
106 > 106 >
107 <td style="width:40px">{{ index + 1 }}</td> 107 <td style="width:40px">{{ index + 1 }}</td>
108 <td style="width:120px">{{ feeType.feeTypeName }}</td> 108 <td style="width:120px">{{ feeType.feeTypeName }}</td>
109 <td style="width:120px">{{ feeType.amount }}</td> 109 <td style="width:120px">{{ feeType.amount }}</td>
110 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 110 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
111 <td style="width:120px">{{ feeType.subTotal }}</td> 111 <td style="width:120px">{{ feeType.subTotal }}</td>
112 </tr> 112 </tr>
113 <!-- <tfoot> 113 <!-- <tfoot>
114 <tr> 114 <tr>
115 <td colspan="4"> 115 <td colspan="4">
116 <span class="right subheding">Total Amount (RS) :</span> 116 <span class="right subheding">Total Amount (RS) :</span>
117 </td> 117 </td>
118 <td>{{ feeType.subTotal }}</td> 118 <td>{{ feeType.subTotal }}</td>
119 </tr> 119 </tr>
120 <tr> 120 <tr>
121 <td colspan="4"> 121 <td colspan="4">
122 <span class="right subheding">Paid (RS) :</span> 122 <span class="right subheding">Paid (RS) :</span>
123 </td> 123 </td>
124 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 124 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
125 </tr> 125 </tr>
126 <tr> 126 <tr>
127 <td colspan="4"> 127 <td colspan="4">
128 <span class="right subheding">Balance (RS) :</span> 128 <span class="right subheding">Balance (RS) :</span>
129 </td> 129 </td>
130 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 130 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
131 </tr> 131 </tr>
132 </tfoot>--> 132 </tfoot>-->
133 </table> 133 </table>
134 </v-card> 134 </v-card>
135 </v-flex> 135 </v-flex>
136 </v-layout> 136 </v-layout>
137 </v-flex> 137 </v-flex>
138 </v-container> 138 </v-container>
139 <div class="loader" v-if="showLoader"> 139 <div class="loader" v-if="showLoader">
140 <v-progress-circular indeterminate color="white"></v-progress-circular> 140 <v-progress-circular indeterminate color="white"></v-progress-circular>
141 </div> 141 </div>
142 </v-app> 142 </v-app>
143 </template> 143 </template>
144 144
145 <script> 145 <script>
146 import http from "@/Services/http.js"; 146 import http from "@/Services/http.js";
147 import moment from "moment"; 147 import moment from "moment";
148 148
149 export default { 149 export default {
150 data: () => ({ 150 data: () => ({
151 showLoader: false, 151 showLoader: false,
152 feeTypes: [], 152 feeTypes: [],
153 filterData: [], 153 filterData: [],
154 invoiceData: {}, 154 invoiceData: {},
155 feeType: { 155 feeType: {
156 amount: "", 156 amount: "",
157 discount: "", 157 discount: "",
158 totalPaidAmount: "", 158 totalPaidAmount: "",
159 subTotal: "", 159 subTotal: "",
160 feeTypeName: "" 160 feeTypeName: ""
161 }, 161 },
162 feeTypeData: [], 162 feeTypeData: [],
163 token: "", 163 token: "",
164 invoiceParticularData: {}, 164 invoiceParticularData: {
165 userData: {} 165 studentId: {
166 name: ""
167 },
168 classId: {
169 classNum: ""
170 },
171 },
172 userData: {
173 name: ""
174 },
166 }), 175 }),
167 176
168 methods: { 177 methods: {
169 getInvoiceList() { 178 getInvoiceList() {
170 http() 179 http()
171 .get("/getParticularInvoice", { 180 .get("/getParticularInvoice", {
172 params: { 181 params: {
173 invoiceId: this.$route.params.viewInvoiceId, 182 invoiceId: this.$route.params.viewInvoiceId,
174 schoolId: this.$store.state.schoolId 183 schoolId: this.$store.state.schoolId
175 }, 184 },
176 headers: { Authorization: "Bearer " + this.token } 185 headers: { Authorization: "Bearer " + this.token }
177 }) 186 })
178 .then(response => { 187 .then(response => {
179 this.invoiceParticularData = response.data.data; 188 this.invoiceParticularData = response.data.data;
180 this.invoiceData = this.invoiceParticularData; 189 this.invoiceData = this.invoiceParticularData;
181 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 190 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
182 this.feeTypeData = this.invoiceParticularData.feeType; 191 this.feeTypeData = this.invoiceParticularData.feeType;
183 (this.feeType.amount = response.data.data.totalAmount), 192 (this.feeType.amount = response.data.data.totalAmount),
184 (this.feeType.discount = response.data.data.totalDiscount), 193 (this.feeType.discount = response.data.data.totalDiscount),
185 (this.feeType.subTotal = response.data.data.totalSubTotal), 194 (this.feeType.subTotal = response.data.data.totalSubTotal),
186 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); 195 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
187 this.showLoader = false; 196 this.showLoader = false;
188 }) 197 })
189 .catch(error => { 198 .catch(error => {
190 this.showLoader = false; 199 this.showLoader = false;
191 if (error.response.status === 401) { 200 if (error.response.status === 401) {
192 this.$router.replace({ path: "/" }); 201 this.$router.replace({ path: "/" });
193 this.$store.dispatch("setToken", null); 202 this.$store.dispatch("setToken", null);
194 this.$store.dispatch("Id", null); 203 this.$store.dispatch("Id", null);
195 this.$store.dispatch("Role", null); 204 this.$store.dispatch("Role", null);
196 } 205 }
197 }); 206 });
198 }, 207 },
199 getfeeType() { 208 getfeeType() {
200 http() 209 http()
201 .get("/getFeesList", { 210 .get("/getFeesList", {
202 params: { schoolId: this.$store.state.schoolId }, 211 params: { schoolId: this.$store.state.schoolId },
203 headers: { Authorization: "Bearer " + this.token } 212 headers: { Authorization: "Bearer " + this.token }
204 }) 213 })
205 .then(response => { 214 .then(response => {
206 this.feeTypes = response.data.data; 215 this.feeTypes = response.data.data;
207 }) 216 })
208 .catch(err => { 217 .catch(err => {
209 // console.log("err====>", err); 218 // console.log("err====>", err);
210 }); 219 });
211 }, 220 },
212 getAmmountDetails(feeTyp) { 221 getAmmountDetails(feeTyp) {
213 let feeType = { 222 let feeType = {
214 subTotal: "", 223 subTotal: "",
215 subParticularTotal: "", 224 subParticularTotal: "",
216 paidAmount: "" 225 paidAmount: ""
217 }; 226 };
218 // *********** SUBTOTAL *********** 227 // *********** SUBTOTAL ***********
219 feeType.subTotal = 228 feeType.subTotal =
220 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 229 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
221 this.feeType.subTotal = feeType.subTotal.toFixed(2); 230 this.feeType.subTotal = feeType.subTotal.toFixed(2);
222 // *********** PAID-AMOUNT *********** 231 // *********** PAID-AMOUNT ***********
223 feeType.paidAmount = 232 feeType.paidAmount =
224 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 233 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
225 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 234 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
226 }, 235 },
227 printInvoice() { 236 printInvoice() {
228 // Pass the element id here 237 // Pass the element id here
229 this.$htmlToPaper("printMe"); 238 this.$htmlToPaper("printMe");
230 }, 239 },
231 getUserData() { 240 getUserData() {
232 http() 241 http()
233 .get("/getParticularUserDetail") 242 .get("/getParticularUserDetail")
234 .then(response => { 243 .then(response => {
235 this.userData = response.data.data; 244 this.userData = response.data.data;
236 }) 245 })
237 .catch(error => { 246 .catch(error => {
238 // if (error.response.status === 401) { 247 // if (error.response.status === 401) {
239 // this.$router.replace({ path: "/" }); 248 // this.$router.replace({ path: "/" });
240 // this.$store.dispatch("setToken", null); 249 // this.$store.dispatch("setToken", null);
241 // this.$store.dispatch("Id", null); 250 // this.$store.dispatch("Id", null);
242 // } 251 // }
243 }); 252 });
244 } 253 }
245 }, 254 },
246 mounted() { 255 mounted() {
247 this.token = this.$store.state.token; 256 this.token = this.$store.state.token;
248 this.getInvoiceList(); 257 this.getInvoiceList();
249 this.getfeeType(); 258 this.getfeeType();
250 this.getUserData(); 259 this.getUserData();
251 260
252 }, 261 },
253 created() { 262 created() {
254 this.$root.$on("app:search", search => { 263 this.$root.$on("app:search", search => {
255 this.search = search; 264 this.search = search;
256 }); 265 });
257 }, 266 },
258 beforeDestroy() { 267 beforeDestroy() {
259 // dont forget to remove the listener 268 // dont forget to remove the listener
260 this.$root.$off("app:search"); 269 this.$root.$off("app:search");
261 } 270 }
262 }; 271 };
263 </script> 272 </script>
264 273
265 274
266 <style scoped> 275 <style scoped>
267 .active { 276 .active {
268 background-color: gray; 277 background-color: gray;
269 color: white !important; 278 color: white !important;
270 } 279 }
271 .activebtn { 280 .activebtn {
272 color: black !important; 281 color: black !important;
273 } 282 }
274 table { 283 table {
275 border-collapse: collapse; 284 border-collapse: collapse;
276 border: 1px solid #e2e7eb; 285 border: 1px solid #e2e7eb;
277 } 286 }
278 .open-dialog-button { 287 .open-dialog-button {
279 background: #827bfa !important; 288 background: #827bfa !important;
280 border-color: #827bfa !important; 289 border-color: #827bfa !important;
281 text-transform: none !important; 290 text-transform: none !important;
282 } 291 }
283 292
284 th, 293 th,
285 td { 294 td {
286 border: 1px solid #e2e7eb; 295 border: 1px solid #e2e7eb;
287 padding: 10px; 296 padding: 10px;
288 text-align: center; 297 text-align: center;
289 } 298 }
290 table.feeTypeTable { 299 table.feeTypeTable {
291 table-layout: auto !important; 300 table-layout: auto !important;
292 width: 100% !important; 301 width: 100% !important;
293 } 302 }
294 @media screen and (max-width: 380px) { 303 @media screen and (max-width: 380px) {
295 .tableRsponsive { 304 .tableRsponsive {
296 display: block; 305 display: block;
297 position: relative; 306 position: relative;
298 overflow: scroll; 307 overflow: scroll;
299 } 308 }
300 } 309 }
301 </style> 310 </style>
src/pages/Attendence/viewStudentsAttendence.vue
Diff comments   View file @c34b2bc
1 <template> 1 <template>
2 <v-container fluid grid-list-md class="body-color"> 2 <v-container fluid grid-list-md class="body-color">
3 <div v-show="hideData"> 3 <div v-show="hideData">
4 <v-layout row> 4 <v-layout row>
5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark> 5 <v-btn @click="exportPdf" round class="right open-dialog-button" dark>
6 Export Pdf 6 Export Pdf
7 <v-icon dark right size="20">save_alt</v-icon> 7 <v-icon dark right size="20">save_alt</v-icon>
8 </v-btn> 8 </v-btn>
9 <v-dialog v-model="dialogExport" max-width="500px"> 9 <v-dialog v-model="dialogExport" max-width="500px">
10 <v-btn round slot="activator" class="right open-dialog-button" dark> 10 <v-btn round slot="activator" class="right open-dialog-button" dark>
11 Export csv 11 Export csv
12 <v-icon dark right size="20">save_alt</v-icon> 12 <v-icon dark right size="20">save_alt</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-card flat class="card-style pa-2" dark> 14 <v-card flat class="card-style pa-2" dark>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12> 16 <v-flex xs12>
17 <label class="title text-xs-center">Export</label> 17 <label class="title text-xs-center">Export</label>
18 <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon> 18 <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon>
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-card-text> 21 <v-card-text>
22 <v-container grid-list-md> 22 <v-container grid-list-md>
23 <v-layout wrap> 23 <v-layout wrap>
24 <v-flex xs12> 24 <v-flex xs12>
25 <v-menu 25 <v-menu
26 ref="menuStartDate" 26 ref="menuStartDate"
27 :close-on-content-click="false" 27 :close-on-content-click="false"
28 v-model="menuStartDate" 28 v-model="menuStartDate"
29 :nudge-right="40" 29 :nudge-right="40"
30 :return-value.sync="startDate" 30 :return-value.sync="startDate"
31 lazy 31 lazy
32 transition="scale-transition" 32 transition="scale-transition"
33 offset-y 33 offset-y
34 full-width 34 full-width
35 min-width="290px" 35 min-width="290px"
36 > 36 >
37 <v-text-field 37 <v-text-field
38 slot="activator" 38 slot="activator"
39 v-model="startDate" 39 v-model="startDate"
40 label="Select Start Date" 40 label="Select Start Date"
41 prepend-icon="event" 41 prepend-icon="event"
42 readonly 42 readonly
43 ></v-text-field> 43 ></v-text-field>
44 <v-date-picker 44 <v-date-picker
45 v-model="startDate" 45 v-model="startDate"
46 @input="$refs.menuStartDate.save(startDate)" 46 @input="$refs.menuStartDate.save(startDate)"
47 ></v-date-picker> 47 ></v-date-picker>
48 </v-menu> 48 </v-menu>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12> 50 <v-flex xs12>
51 <v-menu 51 <v-menu
52 ref="menuEndDate" 52 ref="menuEndDate"
53 :close-on-content-click="false" 53 :close-on-content-click="false"
54 v-model="menuEndDate" 54 v-model="menuEndDate"
55 :nudge-right="40" 55 :nudge-right="40"
56 :return-value.sync="endDate" 56 :return-value.sync="endDate"
57 lazy 57 lazy
58 transition="scale-transition" 58 transition="scale-transition"
59 offset-y 59 offset-y
60 full-width 60 full-width
61 min-width="290px" 61 min-width="290px"
62 > 62 >
63 <v-text-field 63 <v-text-field
64 slot="activator" 64 slot="activator"
65 v-model="endDate" 65 v-model="endDate"
66 label="Select End Date" 66 label="Select End Date"
67 prepend-icon="event" 67 prepend-icon="event"
68 readonly 68 readonly
69 ></v-text-field> 69 ></v-text-field>
70 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker> 70 <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
71 </v-menu> 71 </v-menu>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12> 73 <v-flex xs12>
74 <v-card-actions> 74 <v-card-actions>
75 <v-spacer></v-spacer> 75 <v-spacer></v-spacer>
76 <download-csv :data="json_data"> 76 <download-csv :data="json_data">
77 <v-btn class="add-button" round @click.native="exportData">Export</v-btn> 77 <v-btn class="add-button" round @click.native="exportData">Export</v-btn>
78 </download-csv> 78 </download-csv>
79 </v-card-actions> 79 </v-card-actions>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-container> 82 </v-container>
83 </v-card-text> 83 </v-card-text>
84 </v-card> 84 </v-card>
85 </v-dialog> 85 </v-dialog>
86 </v-layout> 86 </v-layout>
87 <v-layout wrap> 87 <v-layout wrap>
88 <v-flex xs12 sm12 md4> 88 <v-flex xs12 sm12 md4>
89 <v-card flat> 89 <v-card flat>
90 <!-- <v-layout> 90 <!-- <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <label class="title card-style text-xs-center">Profile</label> 92 <label class="title card-style text-xs-center">Profile</label>
93 </v-flex> 93 </v-flex>
94 </v-layout>--> 94 </v-layout>-->
95 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 95 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
96 <v-card-text> 96 <v-card-text>
97 <v-container> 97 <v-container>
98 <v-layout wrap> 98 <v-layout wrap>
99 <v-flex xs12> 99 <v-flex xs12>
100 <v-layout> 100 <v-layout>
101 <v-flex 101 <v-flex
102 xs12 102 xs12
103 class="text-xs-center text-sm-center text-md-center text-lg-center" 103 class="text-xs-center text-sm-center text-md-center text-lg-center"
104 > 104 >
105 <v-avatar size="80px"> 105 <v-avatar size="80px">
106 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> 106 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
107 <img 107 <img
108 :src="studentData.profilePicUrl" 108 :src="studentData.profilePicUrl"
109 v-else-if="studentData.profilePicUrl" 109 v-else-if="studentData.profilePicUrl"
110 /> 110 />
111 </v-avatar> 111 </v-avatar>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm12> 115 <v-flex xs12 sm12>
116 <h3 class="text-xs-center"> 116 <h3 class="text-xs-center">
117 <b>{{ studentData.name }}</b> 117 <b>{{ studentData.name }}</b>
118 </h3> 118 </h3>
119 <p class="text-xs-center grey--text">Student</p> 119 <p class="text-xs-center grey--text">Student</p>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 <v-layout style="border: 1px solid lightgrey;"> 122 <v-layout style="border: 1px solid lightgrey;">
123 <v-flex xs6 sm6 class="pa-0"> 123 <v-flex xs6 sm6 class="pa-0">
124 <h4 class="right"> 124 <h4 class="right">
125 <b>Roll No :</b> 125 <b>Roll No :</b>
126 </h4> 126 </h4>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs6 class="pa-0"> 128 <v-flex sm6 xs6 class="pa-0">
129 <h4>{{ studentData.rollNo }}</h4> 129 <h4>{{ studentData.rollNo }}</h4>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout style="border: 1px solid lightgrey;"> 132 <v-layout style="border: 1px solid lightgrey;">
133 <v-flex xs6 sm6 class="pa-0"> 133 <v-flex xs6 sm6 class="pa-0">
134 <h4 class="right"> 134 <h4 class="right">
135 <b>Class :</b> 135 <b>Class :</b>
136 </h4> 136 </h4>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs6 class="right pa-0"> 138 <v-flex sm6 xs6 class="right pa-0">
139 <h4>{{ studentData.classId.classNum }}</h4> 139 <h4>{{ studentData.classId.classNum }}</h4>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 <v-layout style="border: 1px solid lightgrey;"> 142 <v-layout style="border: 1px solid lightgrey;">
143 <v-flex xs6 sm6 class="right pa-0"> 143 <v-flex xs6 sm6 class="right pa-0">
144 <h4 class="right"> 144 <h4 class="right">
145 <b>Section :</b> 145 <b>Section :</b>
146 </h4> 146 </h4>
147 </v-flex> 147 </v-flex>
148 <v-flex sm6 xs6 class="right pa-0"> 148 <v-flex sm6 xs6 class="right pa-0">
149 <h4>{{ studentData.sectionId.name}}</h4> 149 <h4>{{ studentData.sectionId.name}}</h4>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-container> 154 </v-container>
155 </v-card-text> 155 </v-card-text>
156 </v-card> 156 </v-card>
157 </v-flex> 157 </v-flex>
158 <v-flex xs12 sm12 md8> 158 <v-flex xs12 sm12 md8>
159 <v-card flat> 159 <v-card flat>
160 <h3 class="py-2 text-xs-center card-style white--text"> 160 <h3 class="py-2 text-xs-center card-style white--text">
161 Attendence 161 Attendence
162 <span class="ml-4"> 162 <span class="ml-4">
163 <v-avatar class="green caption" size="12"></v-avatar> 163 <v-avatar class="green caption" size="12"></v-avatar>
164 <span class="subheading">Present</span> 164 <span class="subheading">Present</span>
165 </span> 165 </span>
166 <span class="ml-4"> 166 <span class="ml-4">
167 <v-avatar color="red caption" size="12" class></v-avatar> 167 <v-avatar color="red caption" size="12" class></v-avatar>
168 <span class="subheading">Absent</span> 168 <span class="subheading">Absent</span>
169 </span> 169 </span>
170 </h3> 170 </h3>
171 <YearCalendar 171 <YearCalendar
172 v-model="year" 172 v-model="year"
173 :activeDates="activeDates" 173 :activeDates="activeDates"
174 prefixClass="your_customized_wrapper_class" 174 prefixClass="your_customized_wrapper_class"
175 :activeClass="activeClass" 175 :activeClass="activeClass"
176 ></YearCalendar> 176 ></YearCalendar>
177 </v-card> 177 </v-card>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </div> 180 </div>
181 <v-layout v-show="showPdfData"> 181 <v-layout v-show="showPdfData">
182 <v-container> 182 <v-container>
183 <v-flex xs12 sm12 md8 offset-sm2> 183 <v-flex xs12 sm12 md8 offset-sm2>
184 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark> 184 <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark>
185 Download 185 Download
186 <v-icon dark right size="20">save_alt</v-icon> 186 <v-icon dark right size="20">save_alt</v-icon>
187 </v-btn> 187 </v-btn>
188 </v-flex> 188 </v-flex>
189 </v-container> 189 </v-container>
190 </v-layout> 190 </v-layout>
191 <v-layout v-show="showPdfData"> 191 <v-layout v-show="showPdfData">
192 <v-container> 192 <v-container>
193 <v-layout v-show="showPdfData"> 193 <v-layout v-show="showPdfData">
194 <v-flex xs12 sm12 md8 offset-sm2> 194 <v-flex xs12 sm12 md8 offset-sm2>
195 <div ref="printMe"> 195 <div ref="printMe">
196 <v-flex xs12 class="pl-3"> 196 <v-flex xs12 class="pl-3">
197 <v-layout> 197 <v-layout>
198 <v-flex xs6 sm2 class="pa-0 mb-1"> 198 <v-flex xs6 sm2 class="pa-0 mb-1">
199 <h4> 199 <h4>
200 <b>Name</b> 200 <b>Name</b>
201 </h4> 201 </h4>
202 </v-flex> 202 </v-flex>
203 <v-flex sm10 xs6 class="pa-0"> 203 <v-flex sm10 xs6 class="pa-0">
204 <h4>: {{ studentData.name }}</h4> 204 <h4>: {{ studentData.name }}</h4>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 <v-layout> 207 <v-layout>
208 <v-flex xs6 sm2 class="pa-0 mb-1"> 208 <v-flex xs6 sm2 class="pa-0 mb-1">
209 <h4> 209 <h4>
210 <b>Type</b> 210 <b>Type</b>
211 </h4> 211 </h4>
212 </v-flex> 212 </v-flex>
213 <v-flex sm10 xs6 class="pa-0 mb-1"> 213 <v-flex sm10 xs6 class="pa-0 mb-1">
214 <h4>: Student</h4> 214 <h4>: Student</h4>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 <v-layout> 217 <v-layout>
218 <v-flex xs6 sm2 class="pa-0 mb-1"> 218 <v-flex xs6 sm2 class="pa-0 mb-1">
219 <h4> 219 <h4>
220 <b>Roll No</b> 220 <b>Roll No</b>
221 </h4> 221 </h4>
222 </v-flex> 222 </v-flex>
223 <v-flex sm10 xs6 class="pa-0 mb-1"> 223 <v-flex sm10 xs6 class="pa-0 mb-1">
224 <h4>: {{ studentData.rollNo }}</h4> 224 <h4>: {{ studentData.rollNo }}</h4>
225 </v-flex> 225 </v-flex>
226 </v-layout> 226 </v-layout>
227 <v-layout> 227 <v-layout>
228 <v-flex xs6 sm2 class="pa-0 mb-1"> 228 <v-flex xs6 sm2 class="pa-0 mb-1">
229 <h4> 229 <h4>
230 <b>Class</b> 230 <b>Class</b>
231 </h4> 231 </h4>
232 </v-flex> 232 </v-flex>
233 <v-flex sm10 xs6 class="pa-0 mb-1"> 233 <v-flex sm10 xs6 class="pa-0 mb-1">
234 <h4>: {{ studentData.classId.classNum }}</h4> 234 <h4>: {{ studentData.classId.classNum }}</h4>
235 </v-flex> 235 </v-flex>
236 </v-layout> 236 </v-layout>
237 <v-layout> 237 <v-layout>
238 <v-flex xs6 sm2 class="pa-0 mb-1"> 238 <v-flex xs6 sm2 class="pa-0 mb-1">
239 <h4> 239 <h4>
240 <b>Section</b> 240 <b>Section</b>
241 </h4> 241 </h4>
242 </v-flex> 242 </v-flex>
243 <v-flex sm10 xs6 class="pa-0 mb-3"> 243 <v-flex sm10 xs6 class="pa-0 mb-3">
244 <h4>: {{ studentData.sectionId.name}}</h4> 244 <h4>: {{ studentData.sectionId.name}}</h4>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 <v-card flat> 248 <v-card flat>
249 <h3 class="py-2 text-xs-center grey lighten-1 white--text"> 249 <h3 class="py-2 text-xs-center grey lighten-1 white--text">
250 Attendence 250 Attendence
251 <span class="ml-4"> 251 <span class="ml-4">
252 <v-avatar class="green caption" size="12"></v-avatar> 252 <v-avatar class="green caption" size="12"></v-avatar>
253 <span class="subheading">Present</span> 253 <span class="subheading">Present</span>
254 </span> 254 </span>
255 <span class="ml-4"> 255 <span class="ml-4">
256 <v-avatar color="red caption" size="12" class></v-avatar> 256 <v-avatar color="red caption" size="12" class></v-avatar>
257 <span class="subheading">Absent</span> 257 <span class="subheading">Absent</span>
258 </span> 258 </span>
259 </h3> 259 </h3>
260 <YearCalendar 260 <YearCalendar
261 v-model="year" 261 v-model="year"
262 :activeDates="activeDates" 262 :activeDates="activeDates"
263 prefixClass="your_customized_wrapper_class" 263 prefixClass="your_customized_wrapper_class"
264 :activeClass="activeClass" 264 :activeClass="activeClass"
265 ></YearCalendar> 265 ></YearCalendar>
266 </v-card> 266 </v-card>
267 </div> 267 </div>
268 </v-flex> 268 </v-flex>
269 </v-layout> 269 </v-layout>
270 </v-container> 270 </v-container>
271 </v-layout> 271 </v-layout>
272 <img :src="output" v-show="false" /> 272 <img :src="output" v-show="false" />
273 <div class="loader" v-if="showLoader"> 273 <div class="loader" v-if="showLoader">
274 <v-progress-circular indeterminate color="white"></v-progress-circular> 274 <v-progress-circular indeterminate color="white"></v-progress-circular>
275 </div> 275 </div>
276 </v-container> 276 </v-container>
277 </template> 277 </template>
278 278
279 <script lang="js"> 279 <script lang="js">
280 import moment from "moment"; 280 import moment from "moment";
281 import http from "@/Services/http.js"; 281 import http from "@/Services/http.js";
282 import YearCalendar from "vue-material-year-calendar"; 282 import YearCalendar from "vue-material-year-calendar";
283 import jsPDF from 'jspdf'; 283 import jsPDF from 'jspdf';
284 // eslint-disable-next-line 284 // eslint-disable-next-line
285 import autoTable from 'jspdf-autotable'; 285 import autoTable from 'jspdf-autotable';
286 286
287 export default { 287 export default {
288 components: { YearCalendar }, 288 components: { YearCalendar },
289 data() { 289 data() {
290 return { 290 return {
291 showPdfData:false, 291 showPdfData:false,
292 hideData:true, 292 hideData:true,
293 loadingPdf:false, 293 loadingPdf:false,
294 output:null, 294 output:null,
295 studentsList: [], 295 studentsList: [],
296 json_data: [], 296 json_data: [],
297 dialogExport: false, 297 dialogExport: false,
298 startDate: "", 298 startDate: "",
299 endDate: "", 299 endDate: "",
300 menuEndDate: false, 300 menuEndDate: false,
301 menuStartDate: false, 301 menuStartDate: false,
302 showLoader: false, 302 showLoader: false,
303 token: "", 303 token: "",
304 year: new Date().getFullYear(), 304 year: new Date().getFullYear(),
305 activeDates: [], 305 activeDates: [],
306 activeClass: "", 306 activeClass: "",
307 studentData: {} 307 studentData: {
308 classId: {
309 classNum: ""
310 },
311 sectionId: {
312 name: ""
313 },
314 },
308 }; 315 };
309 }, 316 },
310 mounted() { 317 mounted() {
311 this.token = this.$store.state.token; 318 this.token = this.$store.state.token;
312 this.getStudentAttendence(); 319 this.getStudentAttendence();
313 this.getStudentData(); 320 this.getStudentData();
314 }, 321 },
315 methods: { 322 methods: {
316 dates: function(date) { 323 dates: function(date) {
317 return moment(date).format("MMMM DD, YYYY"); 324 return moment(date).format("MMMM DD, YYYY");
318 }, 325 },
319 getStudentAttendence() { 326 getStudentAttendence() {
320 this.showLoader = true; 327 this.showLoader = true;
321 http() 328 http()
322 .get( 329 .get(
323 "/studentAttendance", 330 "/studentAttendance",
324 { params: { studentId: this.$route.params.id } }, 331 { params: { studentId: this.$route.params.id } },
325 { 332 {
326 headers: { Authorization: "Bearer " + this.token } 333 headers: { Authorization: "Bearer " + this.token }
327 } 334 }
328 ) 335 )
329 .then(response => { 336 .then(response => {
330 this.showLoader = false; 337 this.showLoader = false;
331 let array = []; 338 let array = [];
332 for (let i = 0; i < response.data.data.length; i++) { 339 for (let i = 0; i < response.data.data.length; i++) {
333 if (response.data.data[i].students[0].isPresent == true) { 340 if (response.data.data[i].students[0].isPresent == true) {
334 array.push({ 341 array.push({
335 date: response.data.data[i].date, 342 date: response.data.data[i].date,
336 className: "green" 343 className: "green"
337 }); 344 });
338 } else if (response.data.data[i].students[0].isPresent == false) { 345 } else if (response.data.data[i].students[0].isPresent == false) {
339 array.push({ 346 array.push({
340 date: response.data.data[i].date, 347 date: response.data.data[i].date,
341 className: "red" 348 className: "red"
342 }); 349 });
343 } 350 }
344 } 351 }
345 this.activeDates = array; 352 this.activeDates = array;
346 }) 353 })
347 .catch(error => { 354 .catch(error => {
348 this.showLoader = false; 355 this.showLoader = false;
349 if (error.response.status === 401) { 356 if (error.response.status === 401) {
350 this.$router.replace({ path: "/" }); 357 this.$router.replace({ path: "/" });
351 this.$store.dispatch("setToken", null); 358 this.$store.dispatch("setToken", null);
352 this.$store.dispatch("Id", null); 359 this.$store.dispatch("Id", null);
353 this.$store.dispatch("Role", null); 360 this.$store.dispatch("Role", null);
354 } 361 }
355 }); 362 });
356 }, 363 },
357 getStudentData() { 364 getStudentData() {
358 http() 365 http()
359 .get( 366 .get(
360 "/getParticularStudentDetail", 367 "/getParticularStudentDetail",
361 { params: { studentId: this.$route.params.id } }, 368 { params: { studentId: this.$route.params.id } },
362 { 369 {
363 headers: { Authorization: "Bearer " + this.token } 370 headers: { Authorization: "Bearer " + this.token }
364 } 371 }
365 ) 372 )
366 .then(response => { 373 .then(response => {
367 this.studentData = response.data.data; 374 this.studentData = response.data.data;
368 }) 375 })
369 .catch(err => { 376 .catch(err => {
370 console.log("err====>", err); 377 console.log("err====>", err);
371 // this.$router.replace({ path: '/' }); 378 // this.$router.replace({ path: '/' });
372 }); 379 });
373 }, 380 },
374 exportData() { 381 exportData() {
375 http() 382 http()
376 .get( 383 .get(
377 "/studentAttendanceByMonth", 384 "/studentAttendanceByMonth",
378 { 385 {
379 params: { 386 params: {
380 studentId: this.$route.params.id, 387 studentId: this.$route.params.id,
381 startDate: this.startDate, 388 startDate: this.startDate,
382 endDate: this.endDate 389 endDate: this.endDate
383 } 390 }
384 }, 391 },
385 { 392 {
386 headers: { Authorization: "Bearer " + this.token } 393 headers: { Authorization: "Bearer " + this.token }
387 } 394 }
388 ) 395 )
389 .then(response => { 396 .then(response => {
390 this.json_data = response.data.data; 397 this.json_data = response.data.data;
391 this.dialogExport = false; 398 this.dialogExport = false;
392 }) 399 })
393 .catch(err => { 400 .catch(err => {
394 console.log("err====>", err); 401 console.log("err====>", err);
395 // this.$router.replace({ path: '/' }); 402 // this.$router.replace({ path: '/' });
396 }); 403 });
397 }, 404 },
398 exportPdf(){ 405 exportPdf(){
399 this.hideData = false; 406 this.hideData = false;
400 this.showPdfData = true 407 this.showPdfData = true
401 }, 408 },
402 async generatePDF2Canvas(){ 409 async generatePDF2Canvas(){
403 this.loadingPdf = true 410 this.loadingPdf = true
404 const el = this.$refs.printMe; 411 const el = this.$refs.printMe;
405 // add option type to get the image version 412 // add option type to get the image version
406 // if not provided the promise will return 413 // if not provided the promise will return
407 // the canvas. 414 // the canvas.
408 const options = { 415 const options = {
409 type: 'dataURL' 416 type: 'dataURL'
410 } 417 }
411 this.output = await this.$html2canvas(el, options); 418 this.output = await this.$html2canvas(el, options);
412 if(this.output) { 419 if(this.output) {
413 this.loadingPdf = false 420 this.loadingPdf = false
414 } 421 }
415 let doc = new jsPDF(); 422 let doc = new jsPDF();
416 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280); 423 doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
417 doc.save("Attendance.pdf"); 424 doc.save("Attendance.pdf");
418 } 425 }
419 } 426 }
420 }; 427 };
421 </script> 428 </script>
422 429
423 <style lang="stylus"> 430 <style lang="stylus">
424 .your_customized_wrapper_class { 431 .your_customized_wrapper_class {
425 background-color: #0aa; 432 background-color: #0aa;
426 color: white; 433 color: white;
427 434
428 &.red { 435 &.red {
429 background-color: red; 436 background-color: red;
430 color: white; 437 color: white;
431 438
432 &:after { 439 &:after {
433 background-size: 100% 100%; 440 background-size: 100% 100%;
434 } 441 }
435 } 442 }
436 443
437 &.blue { 444 &.blue {
438 background-color: #0000aa; 445 background-color: #0000aa;
439 color: white; 446 color: white;
440 } 447 }
441 448
442 &.your_customized_classname { 449 &.your_customized_classname {
443 background-color: yellow; 450 background-color: yellow;
444 color: black; 451 color: black;
445 } 452 }
446 } 453 }
447 </style> 454 </style>
448 <style scoped> 455 <style scoped>
449 .add-button { 456 .add-button {
450 background: #feb83c !important; 457 background: #feb83c !important;
451 border-color: #feb83c !important; 458 border-color: #feb83c !important;
452 text-transform: none !important; 459 text-transform: none !important;
453 -webkit-box-shadow: none !important; 460 -webkit-box-shadow: none !important;
454 box-shadow: none !important; 461 box-shadow: none !important;
455 } 462 }
456 .card-style { 463 .card-style {
457 background: #7f62f8 !important; 464 background: #7f62f8 !important;
458 border-color: #7f62f8 !important; 465 border-color: #7f62f8 !important;
459 border-radius: 12px; 466 border-radius: 12px;
460 } 467 }
461 .open-dialog-button { 468 .open-dialog-button {
462 background: #827bfa !important; 469 background: #827bfa !important;
463 border-color: #827bfa !important; 470 border-color: #827bfa !important;
464 text-transform: none !important; 471 text-transform: none !important;
465 } 472 }
466 </style> 473 </style>
src/pages/Mark/mark.vue
Diff comments   View file @c34b2bc
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EXISTING MARK TABLE ****** --> 3 <!-- ****** EXISTING MARK TABLE ****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-btn 5 <v-btn
6 fab 6 fab
7 dark 7 dark
8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 8 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
9 small 9 small
10 @click="addMarkDialog = true" 10 @click="addMarkDialog = true"
11 > 11 >
12 <v-icon dark>add</v-icon> 12 <v-icon dark>add</v-icon>
13 </v-btn> 13 </v-btn>
14 <v-btn 14 <v-btn
15 round 15 round
16 class="open-dialog-button hidden-sm-only hidden-xs-only" 16 class="open-dialog-button hidden-sm-only hidden-xs-only"
17 dark 17 dark
18 @click="addMarkDialog = true" 18 @click="addMarkDialog = true"
19 > 19 >
20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark 20 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark
21 </v-btn> 21 </v-btn>
22 <v-layout class="hidden-sm-only hidden-xs-only"> 22 <v-layout class="hidden-sm-only hidden-xs-only">
23 <v-flex md3 lg2 class="ml-2"> 23 <v-flex md3 lg2 class="ml-2">
24 <v-select 24 <v-select
25 v-model="getMark.classId" 25 v-model="getMark.classId"
26 label="Select your class" 26 label="Select your class"
27 type="text" 27 type="text"
28 :items="classList" 28 :items="classList"
29 item-text="classNum" 29 item-text="classNum"
30 item-value="_id" 30 item-value="_id"
31 @change="getSections(getMark.classId)" 31 @change="getSections(getMark.classId)"
32 required 32 required
33 ></v-select> 33 ></v-select>
34 </v-flex> 34 </v-flex>
35 <v-flex md3 lg2 class="ml-2"> 35 <v-flex md3 lg2 class="ml-2">
36 <v-select 36 <v-select
37 :items="addSection" 37 :items="addSection"
38 label="Select your Section" 38 label="Select your Section"
39 v-model="getMark.sectionId" 39 v-model="getMark.sectionId"
40 item-text="name" 40 item-text="name"
41 item-value="_id" 41 item-value="_id"
42 name="Select Section" 42 name="Select Section"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 <v-spacer></v-spacer> 46 <v-spacer></v-spacer>
47 <v-btn 47 <v-btn
48 @click="getStudents" 48 @click="getStudents"
49 round 49 round
50 dark 50 dark
51 :loading="loading" 51 :loading="loading"
52 class="right open-dialog-button mt-2" 52 class="right open-dialog-button mt-2"
53 >Mark</v-btn> 53 >Mark</v-btn>
54 </v-layout> 54 </v-layout>
55 <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer> 55 <v-spacer class="hidden-lg-only hidden-xl-only hidden-md-only"></v-spacer>
56 <v-card-title class="body-1" v-show="show"> 56 <v-card-title class="body-1" v-show="show">
57 <v-btn icon large flat @click="displaySearch"> 57 <v-btn icon large flat @click="displaySearch">
58 <v-avatar size="27"> 58 <v-avatar size="27">
59 <img src="/static/icon/search.png" alt="icon" /> 59 <img src="/static/icon/search.png" alt="icon" />
60 </v-avatar> 60 </v-avatar>
61 </v-btn> 61 </v-btn>
62 </v-card-title> 62 </v-card-title>
63 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 63 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
64 <v-layout> 64 <v-layout>
65 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 65 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
66 <v-icon @click="closeSearch" color="error">close</v-icon> 66 <v-icon @click="closeSearch" color="error">close</v-icon>
67 </v-layout> 67 </v-layout>
68 </v-flex> 68 </v-flex>
69 </v-toolbar> 69 </v-toolbar>
70 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> 70 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only">
71 <v-flex xs12 sm12 lg12> 71 <v-flex xs12 sm12 lg12>
72 <v-layout wrap> 72 <v-layout wrap>
73 <v-flex xs12 sm12 lg3> 73 <v-flex xs12 sm12 lg3>
74 <v-layout> 74 <v-layout>
75 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 75 <v-flex xs3 sm6 lg2 class="subheading mt-4">
76 <label class="right">Class:</label> 76 <label class="right">Class:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs12 sm12 lg8 class="ml-2"> 78 <v-flex xs12 sm12 lg8 class="ml-2">
79 <v-select 79 <v-select
80 v-model="getMark.classId" 80 v-model="getMark.classId"
81 label="Select your class" 81 label="Select your class"
82 type="text" 82 type="text"
83 :items="classList" 83 :items="classList"
84 item-text="classNum" 84 item-text="classNum"
85 item-value="_id" 85 item-value="_id"
86 @change="getSections(getMark.classId)" 86 @change="getSections(getMark.classId)"
87 required 87 required
88 ></v-select> 88 ></v-select>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-flex xs12 sm12 lg3> 92 <v-flex xs12 sm12 lg3>
93 <v-layout> 93 <v-layout>
94 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 94 <v-flex xs3 sm6 lg2 class="subheading mt-4">
95 <label class="right">Section:</label> 95 <label class="right">Section:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs12 sm12 lg8 class="ml-2"> 97 <v-flex xs12 sm12 lg8 class="ml-2">
98 <v-select 98 <v-select
99 :items="addSection" 99 :items="addSection"
100 label="Select your Section" 100 label="Select your Section"
101 v-model="getMark.sectionId" 101 v-model="getMark.sectionId"
102 item-text="name" 102 item-text="name"
103 item-value="_id" 103 item-value="_id"
104 name="Select Section" 104 name="Select Section"
105 required 105 required
106 ></v-select> 106 ></v-select>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-flex> 109 </v-flex>
110 <v-flex xs12 sm12 lg6> 110 <v-flex xs12 sm12 lg6>
111 <v-btn 111 <v-btn
112 @click="getStudents" 112 @click="getStudents"
113 round 113 round
114 dark 114 dark
115 :loading="loading" 115 :loading="loading"
116 class="right mt-3 open-dialog-button" 116 class="right mt-3 open-dialog-button"
117 >Mark</v-btn> 117 >Mark</v-btn>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-flex> 120 </v-flex>
121 </v-card> 121 </v-card>
122 <v-data-table 122 <v-data-table
123 :headers="headers" 123 :headers="headers"
124 :items="getStudentsList" 124 :items="getStudentsList"
125 :pagination.sync="pagination" 125 :pagination.sync="pagination"
126 :search="search" 126 :search="search"
127 > 127 >
128 <template slot="items" slot-scope="props"> 128 <template slot="items" slot-scope="props">
129 <tr class="tr"> 129 <tr class="tr">
130 <td class="td td-row">{{ props.index + 1}}</td> 130 <td class="td td-row">{{ props.index + 1}}</td>
131 <td class="td td-row text-xs-center"> 131 <td class="td td-row text-xs-center">
132 <v-avatar size="40"> 132 <v-avatar size="40">
133 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 133 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
134 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 134 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
135 </v-avatar> 135 </v-avatar>
136 </td> 136 </td>
137 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 137 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
138 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 138 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
139 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 139 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
140 <td class="td td-row text-xs-center"> 140 <td class="td td-row text-xs-center">
141 <span> 141 <span>
142 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> 142 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }">
143 <v-tooltip top> 143 <v-tooltip top>
144 <img 144 <img
145 slot="activator" 145 slot="activator"
146 style="cursor:pointer; width:25px; height:25px; " 146 style="cursor:pointer; width:25px; height:25px; "
147 src="/static/icon/view.png" 147 src="/static/icon/view.png"
148 /> 148 />
149 <span>View</span> 149 <span>View</span>
150 </v-tooltip> 150 </v-tooltip>
151 </router-link> 151 </router-link>
152 </span> 152 </span>
153 </td> 153 </td>
154 </tr> 154 </tr>
155 </template> 155 </template>
156 <v-alert 156 <v-alert
157 slot="no-results" 157 slot="no-results"
158 :value="true" 158 :value="true"
159 color="error" 159 color="error"
160 icon="warning" 160 icon="warning"
161 >Your search for "{{ search }}" found no results.</v-alert> 161 >Your search for "{{ search }}" found no results.</v-alert>
162 </v-data-table> 162 </v-data-table>
163 <!-- ****** ADD Mark Schedule ****** --> 163 <!-- ****** ADD Mark Schedule ****** -->
164 <v-dialog v-model="addMarkDialog" max-width> 164 <v-dialog v-model="addMarkDialog" max-width>
165 <v-card flat class> 165 <v-card flat class>
166 <v-layout class="pa-3 card-style white--text"> 166 <v-layout class="pa-3 card-style white--text">
167 <v-flex xs12> 167 <v-flex xs12>
168 <label class="title text-xs-center">Add Mark</label> 168 <label class="title text-xs-center">Add Mark</label>
169 <v-icon size="24" class="right white--text" @click="addMarkDialog = false">cancel</v-icon> 169 <v-icon size="24" class="right white--text" @click="addMarkDialog = false">cancel</v-icon>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 <v-form ref="form" v-model="valid" lazy-validation> 172 <v-form ref="form" v-model="valid" lazy-validation>
173 <v-container fluid> 173 <v-container fluid>
174 <v-flex xs12 sm12 lg12> 174 <v-flex xs12 sm12 lg12>
175 <v-layout wrap> 175 <v-layout wrap>
176 <v-flex xs12 sm12 lg10> 176 <v-flex xs12 sm12 lg10>
177 <v-layout wrap> 177 <v-layout wrap>
178 <v-flex xs12 sm12 lg3> 178 <v-flex xs12 sm12 lg3>
179 <v-flex xs3 sm2 lg2 class="subheading"> 179 <v-flex xs3 sm2 lg2 class="subheading">
180 <label>Exam:</label> 180 <label>Exam:</label>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12 sm12 lg10> 182 <v-flex xs12 sm12 lg10>
183 <v-select 183 <v-select
184 label="Select your Exam Name" 184 label="Select your Exam Name"
185 :items="examList" 185 :items="examList"
186 v-model="addMark.examId" 186 v-model="addMark.examId"
187 :rules="examRules" 187 :rules="examRules"
188 item-text="examName" 188 item-text="examName"
189 item-value="_id" 189 item-value="_id"
190 ></v-select> 190 ></v-select>
191 </v-flex> 191 </v-flex>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm12 lg3> 193 <v-flex xs12 sm12 lg3>
194 <v-flex xs3 sm6 lg2 class="subheading"> 194 <v-flex xs3 sm6 lg2 class="subheading">
195 <label>Class:</label> 195 <label>Class:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs12 sm12 lg10 class> 197 <v-flex xs12 sm12 lg10 class>
198 <v-select 198 <v-select
199 v-model="addMark.classId" 199 v-model="addMark.classId"
200 label="Select your class" 200 label="Select your class"
201 type="text" 201 type="text"
202 :items="classList" 202 :items="classList"
203 item-text="classNum" 203 item-text="classNum"
204 item-value="_id" 204 item-value="_id"
205 :rules="classRules" 205 :rules="classRules"
206 @change="getSections(addMark.classId)" 206 @change="getSections(addMark.classId)"
207 required 207 required
208 ></v-select> 208 ></v-select>
209 </v-flex> 209 </v-flex>
210 </v-flex> 210 </v-flex>
211 <v-flex xs12 sm12 lg3> 211 <v-flex xs12 sm12 lg3>
212 <v-flex xs3 sm6 lg2 class="subheading"> 212 <v-flex xs3 sm6 lg2 class="subheading">
213 <label>Section:</label> 213 <label>Section:</label>
214 </v-flex> 214 </v-flex>
215 <v-flex xs12 sm12 lg10 class> 215 <v-flex xs12 sm12 lg10 class>
216 <v-select 216 <v-select
217 :items="addSection" 217 :items="addSection"
218 label="Select your Section" 218 label="Select your Section"
219 v-model="addMark.sectionId" 219 v-model="addMark.sectionId"
220 item-text="name" 220 item-text="name"
221 item-value="_id" 221 item-value="_id"
222 name="Select Section" 222 name="Select Section"
223 :rules="sectionRules" 223 :rules="sectionRules"
224 required 224 required
225 ></v-select> 225 ></v-select>
226 </v-flex> 226 </v-flex>
227 </v-flex> 227 </v-flex>
228 <v-flex xs12 sm12 lg3> 228 <v-flex xs12 sm12 lg3>
229 <v-flex xs3 sm6 lg2 class="subheading"> 229 <v-flex xs3 sm6 lg2 class="subheading">
230 <label>Subject:</label> 230 <label>Subject:</label>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm12 lg10 class> 232 <v-flex xs12 sm12 lg10 class>
233 <v-select 233 <v-select
234 :items="subjects" 234 :items="subjects"
235 label="Select your Subject" 235 label="Select your Subject"
236 v-model="addMark.subjectId" 236 v-model="addMark.subjectId"
237 item-text="subjectName" 237 item-text="subjectName"
238 item-value="_id" 238 item-value="_id"
239 name="Select Section" 239 name="Select Section"
240 :rules="subjectRules" 240 :rules="subjectRules"
241 required 241 required
242 ></v-select> 242 ></v-select>
243 </v-flex> 243 </v-flex>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12 sm12 lg2> 247 <v-flex xs12 sm12 lg2>
248 <v-flex xs12 sm12 lg12> 248 <v-flex xs12 sm12 lg12>
249 <v-btn 249 <v-btn
250 @click="findStudents" 250 @click="findStudents"
251 round 251 round
252 dark 252 dark
253 :loading="loading" 253 :loading="loading"
254 class="right mt-4 open-dialog-button" 254 class="right mt-4 open-dialog-button"
255 >Mark</v-btn> 255 >Mark</v-btn>
256 </v-flex> 256 </v-flex>
257 </v-flex> 257 </v-flex>
258 </v-layout> 258 </v-layout>
259 </v-flex> 259 </v-flex>
260 <!-- ****** ADD MARK TABLE DATA ****** --> 260 <!-- ****** ADD MARK TABLE DATA ****** -->
261 <v-card class="mt-4 elevation-0 body-color"> 261 <v-card class="mt-4 elevation-0 body-color">
262 <v-data-table 262 <v-data-table
263 :headers="headerOfMark" 263 :headers="headerOfMark"
264 :items="getStudentData" 264 :items="getStudentData"
265 :pagination.sync="pagination" 265 :pagination.sync="pagination"
266 :search="search" 266 :search="search"
267 class="body-color" 267 class="body-color"
268 > 268 >
269 <template slot="items" slot-scope="props"> 269 <template slot="items" slot-scope="props">
270 <tr class="tr"> 270 <tr class="tr">
271 <td class="td td-row">{{ props.index + 1}}</td> 271 <td class="td td-row">{{ props.index + 1}}</td>
272 <td class="text-xs-center td td-row"> 272 <td class="text-xs-center td td-row">
273 <v-avatar size="40"> 273 <v-avatar size="40">
274 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 274 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
275 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 275 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
276 </v-avatar> 276 </v-avatar>
277 </td> 277 </td>
278 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 278 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
279 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> 279 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td>
280 <td 280 <td
281 class="text-xs-center markTable td td-row" 281 class="text-xs-center markTable td td-row"
282 v-for="(marks, index) in props.item.marksObtained" 282 v-for="(marks, index) in props.item.marksObtained"
283 :key="'A'+ index" 283 :key="'A'+ index"
284 > 284 >
285 <v-text-field v-model="marks.marksScored"></v-text-field> 285 <v-text-field v-model="marks.marksScored"></v-text-field>
286 </td> 286 </td>
287 </tr> 287 </tr>
288 </template> 288 </template>
289 <v-alert 289 <v-alert
290 slot="no-results" 290 slot="no-results"
291 :value="true" 291 :value="true"
292 color="error" 292 color="error"
293 icon="warning" 293 icon="warning"
294 >Your search for "{{ search }}" found no results.</v-alert> 294 >Your search for "{{ search }}" found no results.</v-alert>
295 </v-data-table> 295 </v-data-table>
296 </v-card> 296 </v-card>
297 <v-layout class="mt-2"> 297 <v-layout class="mt-2">
298 <v-flex xs12 sm12> 298 <v-flex xs12 sm12>
299 <v-layout> 299 <v-layout>
300 <v-flex xs12> 300 <v-flex xs12>
301 <v-btn 301 <v-btn
302 @click="submit" 302 @click="submit"
303 round 303 round
304 dark 304 dark
305 :loading="loading" 305 :loading="loading"
306 class="right add-button" 306 class="right add-button"
307 >Add Mark</v-btn> 307 >Add Mark</v-btn>
308 </v-flex> 308 </v-flex>
309 </v-layout> 309 </v-layout>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-container> 312 </v-container>
313 </v-form> 313 </v-form>
314 </v-card> 314 </v-card>
315 </v-dialog> 315 </v-dialog>
316 <div class="loader" v-if="showLoader"> 316 <div class="loader" v-if="showLoader">
317 <v-progress-circular indeterminate color="white"></v-progress-circular> 317 <v-progress-circular indeterminate color="white"></v-progress-circular>
318 </div> 318 </div>
319 <v-snackbar 319 <v-snackbar
320 :timeout="timeout" 320 :timeout="timeout"
321 :top="y === 'top'" 321 :top="y === 'top'"
322 :right="x === 'right'" 322 :right="x === 'right'"
323 :vertical="mode === 'vertical'" 323 :vertical="mode === 'vertical'"
324 v-model="snackbar" 324 v-model="snackbar"
325 :color="color" 325 :color="color"
326 >{{ text }}</v-snackbar> 326 >{{ text }}</v-snackbar>
327 </v-container> 327 </v-container>
328 </template> 328 </template>
329 329
330 <script> 330 <script>
331 import http from "@/Services/http.js"; 331 import http from "@/Services/http.js";
332 import moment from "moment"; 332 import moment from "moment";
333 333
334 export default { 334 export default {
335 data: () => ({ 335 data: () => ({
336 show: true, 336 show: true,
337 showSearch: false, 337 showSearch: false,
338 snackbar: false, 338 snackbar: false,
339 date: null, 339 date: null,
340 color: "", 340 color: "",
341 y: "top", 341 y: "top",
342 x: "right", 342 x: "right",
343 mode: "", 343 mode: "",
344 timeout: 10000, 344 timeout: 10000,
345 text: "", 345 text: "",
346 loading: false, 346 loading: false,
347 search: "", 347 search: "",
348 show: true, 348 show: true,
349 showSearch: false, 349 showSearch: false,
350 showLoader: false, 350 showLoader: false,
351 dialog: false, 351 dialog: false,
352 dialog1: false, 352 dialog1: false,
353 valid: true, 353 valid: true,
354 354
355 addMarkDialog: false, 355 addMarkDialog: false,
356 addSection: [], 356 addSection: [],
357 pagination: { 357 pagination: {
358 rowsPerPage: 10 358 rowsPerPage: 10
359 }, 359 },
360 classRules: [v => !!v || "Class is required"], 360 classRules: [v => !!v || "Class is required"],
361 sectionRules: [v => !!v || "section is required"], 361 sectionRules: [v => !!v || "section is required"],
362 subjectRules: [v => !!v || "Subject is required"], 362 subjectRules: [v => !!v || "Subject is required"],
363 examRules: [v => !!v || "Exam is required"], 363 examRules: [v => !!v || "Exam is required"],
364 364
365 headerOfMark: [ 365 headerOfMark: [
366 { 366 {
367 align: "", 367 align: "",
368 text: "No", 368 text: "No",
369 sortable: false, 369 sortable: false,
370 value: "No" 370 value: "No"
371 }, 371 },
372 { 372 {
373 text: "Profile Pic", 373 text: "Profile Pic",
374 vaue: "profilePicUrl", 374 vaue: "profilePicUrl",
375 sortable: false, 375 sortable: false,
376 align: "center" 376 align: "center"
377 }, 377 },
378 { 378 {
379 text: "Name", 379 text: "Name",
380 vaue: "name", 380 vaue: "name",
381 sortable: false, 381 sortable: false,
382 align: "center" 382 align: "center"
383 }, 383 },
384 { 384 {
385 text: "Roll No.", 385 text: "Roll No.",
386 value: "rollNo", 386 value: "rollNo",
387 sortable: false, 387 sortable: false,
388 align: "center" 388 align: "center"
389 } 389 }
390 ], 390 ],
391 headers: [ 391 headers: [
392 { 392 {
393 align: "", 393 align: "",
394 text: "No", 394 text: "No",
395 sortable: false, 395 sortable: false,
396 value: "No" 396 value: "No"
397 }, 397 },
398 { 398 {
399 text: "Profile Pic", 399 text: "Profile Pic",
400 vaue: "profilePicUrl", 400 vaue: "profilePicUrl",
401 sortable: false, 401 sortable: false,
402 align: "center" 402 align: "center"
403 }, 403 },
404 { 404 {
405 text: "Name", 405 text: "Name",
406 vaue: "name", 406 vaue: "name",
407 sortable: false, 407 sortable: false,
408 align: "center" 408 align: "center"
409 }, 409 },
410 { 410 {
411 text: "Roll No.", 411 text: "Roll No.",
412 value: "rollNo", 412 value: "rollNo",
413 sortable: false, 413 sortable: false,
414 align: "center" 414 align: "center"
415 }, 415 },
416 { 416 {
417 text: "Email", 417 text: "Email",
418 value: "email", 418 value: "email",
419 sortable: false, 419 sortable: false,
420 align: "center" 420 align: "center"
421 }, 421 },
422 { text: "Action", value: "", sortable: false, align: "center" } 422 { text: "Action", value: "", sortable: false, align: "center" }
423 ], 423 ],
424 classList: [], 424 classList: [],
425 examList: [], 425 examList: [],
426 subjects: [], 426 subjects: [],
427 addMark: {}, 427 addMark: {},
428 getMark: {}, 428 getMark: {},
429 getScheduleData: {}, 429 getScheduleData: {},
430 markData: [], 430 markData: [],
431 getStudentData: [], 431 getStudentData: [],
432 getStudentsList: [], 432 getStudentsList: [],
433 token: "" 433 token: ""
434 }), 434 }),
435 methods: { 435 methods: {
436 getClass() { 436 getClass() {
437 this.showLoader = true; 437 this.showLoader = true;
438 http() 438 http()
439 .get("/getClassesList", { 439 .get("/getClassesList", {
440 headers: { Authorization: "Bearer " + this.token } 440 headers: { Authorization: "Bearer " + this.token }
441 }) 441 })
442 .then(response => { 442 .then(response => {
443 this.classList = response.data.data; 443 this.classList = response.data.data;
444 this.showLoader = false; 444 this.showLoader = false;
445 }) 445 })
446 .catch(err => { 446 .catch(err => {
447 // console.log("err====>", err); 447 // console.log("err====>", err);
448 this.showLoader = false; 448 this.showLoader = false;
449 }); 449 });
450 }, 450 },
451 getSections(_id) { 451 getSections(_id) {
452 this.showLoader = true; 452 this.showLoader = true;
453 for (let i = 0; i < this.classList.length; i++) { 453 for (let i = 0; i < this.classList.length; i++) {
454 if (_id == this.classList[i]._id) { 454 if (_id == this.classList[i]._id) {
455 this.subjects = this.classList[i].subjects; 455 this.subjects = this.classList[i].subjects;
456 } 456 }
457 } 457 }
458 http() 458 http()
459 .get( 459 .get(
460 "/getSectionsList", 460 "/getSectionsList",
461 { params: { classId: _id } }, 461 { params: { classId: _id } },
462 { 462 {
463 headers: { Authorization: "Bearer " + this.token } 463 headers: { Authorization: "Bearer " + this.token }
464 } 464 }
465 ) 465 )
466 .then(response => { 466 .then(response => {
467 this.addSection = response.data.data; 467 this.addSection = response.data.data;
468 this.showLoader = false; 468 this.showLoader = false;
469 }) 469 })
470 .catch(err => { 470 .catch(err => {
471 this.showLoader = false; 471 this.showLoader = false;
472 // console.log("err====>", err); 472 // console.log("err====>", err);
473 }); 473 });
474 }, 474 },
475 getExamList() { 475 getExamList() {
476 this.showLoader = true; 476 this.showLoader = true;
477 this.loadingSearch = true; 477 this.loadingSearch = true;
478 http() 478 http()
479 .get("/getExamsList", { 479 .get("/getExamsList", {
480 headers: { Authorization: "Bearer " + this.token } 480 headers: { Authorization: "Bearer " + this.token }
481 }) 481 })
482 .then(response => { 482 .then(response => {
483 this.examList = response.data.data; 483 this.examList = response.data.data;
484 this.showLoader = false; 484 this.showLoader = false;
485 this.loadingSearch = false; 485 this.loadingSearch = false;
486 }) 486 })
487 .catch(error => { 487 .catch(error => {
488 // console.log("err====>", err); 488 // console.log("err====>", err);
489 this.showLoader = false; 489 this.showLoader = false;
490 this.loadingSearch = false; 490 this.loadingSearch = false;
491 this.snackbar = true; 491 this.snackbar = true;
492 this.text = error.response.data.message; 492 this.text = error.response.data.message;
493 if (error.response.status === 401) { 493 if (error.response.status === 401) {
494 this.$router.replace({ path: "/" }); 494 this.$router.replace({ path: "/" });
495 this.$store.dispatch("setToken", null); 495 this.$store.dispatch("setToken", null);
496 this.$store.dispatch("Id", null); 496 this.$store.dispatch("Id", null);
497 this.$store.dispatch("Role", null); 497 this.$store.dispatch("Role", null);
498 } 498 }
499 }); 499 });
500 }, 500 },
501 findStudents() { 501 findStudents() {
502 this.getStudentData = []; 502 this.getStudentData = [];
503 if (this.$refs.form.validate()) { 503 if (this.$refs.form.validate()) {
504 this.showLoader = true; 504 this.showLoader = true;
505 http() 505 http()
506 .get("/getStudentWithClass", { 506 .get("/getStudentWithClass", {
507 params: { 507 params: {
508 classId: this.addMark.classId, 508 classId: this.addMark.classId,
509 sectionId: this.addMark.sectionId 509 sectionId: this.addMark.sectionId
510 } 510 }
511 }) 511 })
512 .then(response => { 512 .then(response => {
513 this.getStudentData = response.data.data; 513 this.getStudentData = response.data.data;
514 this.showLoader = false; 514 this.showLoader = false;
515 this.showLoader = true; 515 this.showLoader = true;
516 http() 516 http()
517 .get("/getMarkDistributionsList", { 517 .get("/getMarkDistributionsList", {
518 params: this.addMark 518 params: this.addMark
519 }) 519 })
520 .then(response => { 520 .then(response => {
521 this.showLoader = false; 521 this.showLoader = false;
522 this.headerOfMark.length = 4; 522 this.headerOfMark.length = 4;
523 for (var i = 0; i < response.data.data.length; i++) { 523 for (var i = 0; i < response.data.data.length; i++) {
524 this.headerOfMark.push({ 524 this.headerOfMark.push({
525 text: 525 text:
526 response.data.data[i].distributionType + 526 response.data.data[i].distributionType +
527 " (" + 527 " (" +
528 response.data.data[i].markValue + 528 response.data.data[i].markValue +
529 ")", 529 ")",
530 sortable: false, 530 sortable: false,
531 align: "center" 531 align: "center"
532 }); 532 });
533 } 533 }
534 for (var n = 0; n < this.getStudentData.length; n++) { 534 for (var n = 0; n < this.getStudentData.length; n++) {
535 this.getStudentData[n].marksObtained = []; 535 this.getStudentData[n].marksObtained = [];
536 for (var j = 0; j < response.data.data.length; j++) { 536 for (var j = 0; j < response.data.data.length; j++) {
537 this.getStudentData[n].marksObtained.push({ 537 this.getStudentData[n].marksObtained.push({
538 markDistributionId: response.data.data[j]._id, 538 markDistributionId: response.data.data[j]._id,
539 marksScored: "" 539 marksScored: 0
540 }); 540 });
541 } 541 }
542 // if (marks.marksScored > marks.marksObtained) { 542 // if (marks.marksScored > marks.marksObtained) {
543 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; 543 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained;
544 // this.marks.marksScored = marks.marksObtained; 544 // this.marks.marksScored = marks.marksObtained;
545 // } 545 // }
546 } 546 }
547 }) 547 })
548 .catch(error => { 548 .catch(error => {
549 this.showLoader = false; 549 this.showLoader = false;
550 }); 550 });
551 }) 551 })
552 .catch(error => { 552 .catch(error => {
553 this.showLoader = false; 553 this.showLoader = false;
554 }); 554 });
555 } 555 }
556 }, 556 },
557 submit() { 557 submit() {
558 for (var j = 0; j < this.getStudentData.length; j++) { 558 for (var j = 0; j < this.getStudentData.length; j++) {
559 let data = { 559 let data = {
560 examId: this.addMark.examId, 560 examId: this.addMark.examId,
561 classId: this.addMark.classId, 561 classId: this.addMark.classId,
562 sectionId: this.addMark.sectionId, 562 sectionId: this.addMark.sectionId,
563 subjectId: this.addMark.subjectId, 563 subjectId: this.addMark.subjectId,
564 studentId: this.getStudentData[j]._id, 564 studentId: this.getStudentData[j]._id,
565 studentsMarks: this.getStudentData[j].marksObtained 565 studentsMarks: this.getStudentData[j].marksObtained
566 }; 566 };
567 http() 567 http()
568 .post("/createMark", data) 568 .post("/createMark", data)
569 .then(response => { 569 .then(response => {
570 this.getStudentData = []; 570 this.getStudentData = [];
571 this.snackbar = true; 571 this.snackbar = true;
572 this.addMarkDialog = false; 572 this.addMarkDialog = false;
573 this.text = response.data.message; 573 this.text = response.data.message;
574 this.color = "green"; 574 this.color = "green";
575 this.loading = false; 575 this.loading = false;
576 }) 576 })
577 .catch(error => { 577 .catch(error => {
578 this.snackbar = true; 578 this.snackbar = true;
579 this.text = error.response.data.message; 579 this.text = error.response.data.message;
580 this.color = "red"; 580 this.color = "red";
581 }); 581 });
582 // if (data.marksScored > data.marksObtained) { 582 // if (data.marksScored > data.marksObtained) {
583 // this.getStudentData[j].marksScored = this.getStudentData[j].marksObtained; 583 // this.getStudentData[j].marksScored = this.getStudentData[j].marksObtained;
584 // this.data.marksScored = data.marksObtained; 584 // this.data.marksScored = data.marksObtained;
585 // } 585 // }
586 } 586 }
587 }, 587 },
588 getStudents() { 588 getStudents() {
589 this.showLoader = true; 589 this.showLoader = true;
590 http() 590 http()
591 .get("/getStudentWithClass", { 591 .get("/getStudentWithClass", {
592 params: { 592 params: {
593 classId: this.getMark.classId, 593 classId: this.getMark.classId,
594 sectionId: this.getMark.sectionId 594 sectionId: this.getMark.sectionId
595 } 595 }
596 }) 596 })
597 .then(response => { 597 .then(response => {
598 this.getStudentsList = response.data.data; 598 this.getStudentsList = response.data.data;
599 this.showLoader = false; 599 this.showLoader = false;
600 }) 600 })
601 .catch(error => { 601 .catch(error => {
602 console.log("err====>", error); 602 console.log("err====>", error);
603 this.showLoader = false; 603 this.showLoader = false;
604 }); 604 });
605 }, 605 },
606 displaySearch() { 606 displaySearch() {
607 (this.show = false), (this.showSearch = true); 607 (this.show = false), (this.showSearch = true);
608 }, 608 },
609 closeSearch() { 609 closeSearch() {
610 this.showSearch = false; 610 this.showSearch = false;
611 this.show = true; 611 this.show = true;
612 this.search = ""; 612 this.search = "";
613 } 613 }
614 }, 614 },
615 mounted() { 615 mounted() {
616 this.token = this.$store.state.token; 616 this.token = this.$store.state.token;
617 this.getClass(); 617 this.getClass();
618 this.getExamList(); 618 this.getExamList();
619 } 619 }
620 }; 620 };
621 </script> 621 </script>
622 <style scoped> 622 <style scoped>
623 .markTable { 623 .markTable {
624 max-width: 80px !important; 624 max-width: 80px !important;
625 } 625 }
626 </style> 626 </style>
627 627
628 628
629 629
630 630
631 631
632 632
633 633
634 634
635 635
636 636
637 637
638 638
639 639
640 640
641 641
642 642
643 643
644 644
645 645
646 646
647 647
648 648
src/pages/Mark/viewMark.vue
Diff comments   View file @c34b2bc
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** PROFILE MARK ****** --> 3 <!-- ****** PROFILE MARK ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="print()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="print()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 <v-flex xs12 sm4 md2 class="right"> 12 <v-flex xs12 sm4 md2 class="right">
13 <v-select 13 <v-select
14 class 14 class
15 :items="selectMark" 15 :items="selectMark"
16 label="Select" 16 label="Select"
17 v-model="selectMarkList" 17 v-model="selectMarkList"
18 @change="selectMarkData(selectMarkList)" 18 @change="selectMarkData(selectMarkList)"
19 ></v-select> 19 ></v-select>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-flex xs12 sm12 id="printMe"> 22 <v-flex xs12 sm12 id="printMe">
23 <v-layout wrap> 23 <v-layout wrap>
24 <!-- ****** TABLE DATA MARK ****** --> 24 <!-- ****** TABLE DATA MARK ****** -->
25 <v-flex xs12 sm12 md12> 25 <v-flex xs12 sm12 md12>
26 <v-card 26 <v-card
27 v-for="(value, id, index) in filterData" 27 v-for="(value, id, index) in filterData"
28 :key="index" 28 :key="index"
29 flat 29 flat
30 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 30 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
31 > 31 >
32 <v-layout> 32 <v-layout>
33 <v-flex xs12 sm12 md12 class="text-xs-center"> 33 <v-flex xs12 sm12 md12 class="text-xs-center">
34 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 34 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
35 <p class="title">{{ userData.name }}</p> 35 <p class="title">{{ userData.name }}</p>
36 <p>{{ userData.address }}</p> 36 <p>{{ userData.address }}</p>
37 </v-flex> 37 </v-flex>
38 <v-flex xs12 sm12 md12 class="text-xs-center"> 38 <v-flex xs12 sm12 md12 class="text-xs-center">
39 <v-avatar size="80px"> 39 <v-avatar size="80px">
40 <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" /> 40 <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
41 <img :src="value[0].studentId.profilePicUrl" v-else-if="value[0].studentId.profilePicUrl" /> 41 <img :src="value[0].studentId.profilePicUrl" v-else-if="value[0].studentId.profilePicUrl" />
42 </v-avatar> 42 </v-avatar>
43 <p 43 <p
44 style="font-size:20px;margin:0px;margin-bottom:4px;" 44 style="font-size:20px;margin:0px;margin-bottom:4px;"
45 >{{ value[0].studentId.name }}</p> 45 >{{ value[0].studentId.name }}</p>
46 <p 46 <p
47 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 47 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
48 > Class : {{ value[0].classId.classNum }}</p> 48 > Class : {{ value[0].classId.classNum }}</p>
49 <p 49 <p
50 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 50 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
51 > Section : {{ value[0].sectionId.name }}</p> 51 > Section : {{ value[0].sectionId.name }}</p>
52 <p 52 <p
53 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 53 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
54 > Roll No : {{ value[0].studentId.rollNo }}</p> 54 > Roll No : {{ value[0].studentId.rollNo }}</p>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
57 <table 58 <table
58 class="mb-5 tableRsponsive feeTypeTable" 59 class="mb-5 tableRsponsive feeTypeTable"
59 style="border: 1px solid lightgrey; 60 style="border: 1px solid lightgrey;
60 border-collapse: collapse;!important 61 border-collapse: collapse;!important
61 table-layout: auto !important; 62 table-layout: auto !important;
62 width: 100% !important; 63 width: 100% !important;
63 overflow: hidden;" 64 overflow: hidden;"
64 > 65 >
65 <thead style="border: 1px solid lightgrey !important;"> 66 <thead style="border: 1px solid lightgrey !important;">
66 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 67 <tr style="border: 1px solid lightgrey !important;padding:4px;">
67 <td 68 <td
68 rowspan="2" 69 rowspan="2"
69 style="border: 1px solid lightgrey !important;padding: 10px;" 70 style="border: 1px solid lightgrey !important;padding: 10px;"
70 >Subject</td> 71 >Subject</td>
71 <template v-for="studentData in value"> 72 <template v-for="studentData in value">
72 <td 73 <td
73 colspan="2" 74 colspan="2"
74 v-for="studentMark in studentData.studentsMarks" 75 v-for="studentMark in studentData.studentsMarks"
75 style="border: 1px solid lightgrey !important;padding: 10px;" 76 style="border: 1px solid lightgrey !important;padding: 10px;"
76 >{{studentMark.markDistributionId.distributionType}}</td> 77 >{{studentMark.markDistributionId.distributionType}}</td>
77 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td> 78 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td>
78 </template> 79 </template>
79 </tr> 80 </tr>
80 <tr 81 <tr
81 v-for="(subject, ind) in value" 82 v-for="(subject, ind) in value"
82 v-if="ind == 0" 83 v-if="ind == 0"
83 style="border: 1px solid lightgrey !important;" 84 style="border: 1px solid lightgrey !important;"
84 > 85 >
85 <template v-for="(exam, i) in subject.studentsMarks"> 86 <template v-for="(exam, i) in subject.studentsMarks">
86 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td> 87 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td>
87 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Marks</td> 88 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Marks</td>
88 </template> 89 </template>
89 <!-- <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> --> 90 <!-- <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> -->
90 </tr> 91 </tr>
91 </thead> 92 </thead>
92 <tbody style="border: 1px solid lightgrey !important;"> 93 <tbody style="border: 1px solid lightgrey !important;">
93 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;"> 94 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
94 <td 95 <td
95 style="border: 1px solid lightgrey !important;padding: 10px;" 96 style="border: 1px solid lightgrey !important;padding: 10px;"
96 >{{subject.subjectName}}</td> 97 >{{subject.subjectName}}</td>
97 <template v-for="(exam, i) in subject.studentsMarks"> 98 <template v-for="(exam, i) in subject.studentsMarks">
98 <td 99 <td
99 style="border: 1px solid lightgrey !important;padding: 10px;" 100 style="border: 1px solid lightgrey !important;padding: 10px;"
100 >{{exam.marksScored}}</td> 101 >{{exam.marksScored}}</td>
101 <td 102 <td
102 style="border: 1px solid lightgrey !important;padding: 10px;" 103 style="border: 1px solid lightgrey !important;padding: 10px;"
103 >{{exam.markDistributionId.markValue}}</td> 104 >{{exam.markDistributionId.markValue}}</td>
104 </template> 105 </template>
105 <td 106 <td
106 style="border: 1px solid lightgrey !important;padding: 10px;" 107 style="border: 1px solid lightgrey !important;padding: 10px;"
107 >{{subject.totalMarks}}</td> 108 >{{subject.totalMarks}}</td>
108 </tr> 109 </tr>
109 </tbody> 110 </tbody>
110 </table> 111 </table>
111 </v-card> 112 </v-card>
112 </v-flex> 113 </v-flex>
113 </v-layout> 114 </v-layout>
114 </v-flex> 115 </v-flex>
115 </v-container> 116 </v-container>
116 <div class="loader" v-if="showLoader"> 117 <div class="loader" v-if="showLoader">
117 <v-progress-circular indeterminate color="white"></v-progress-circular> 118 <v-progress-circular indeterminate color="white"></v-progress-circular>
118 </div> 119 </div>
119 </v-app> 120 </v-app>
120 </template> 121 </template>
121 122
122 <script> 123 <script>
123 import http from "@/Services/http.js"; 124 import http from "@/Services/http.js";
124 import moment from "moment"; 125 import moment from "moment";
125 import _ from "underscore"; 126 import _ from "underscore";
126 127
127 export default { 128 export default {
128 data: () => ({ 129 data: () => ({
129 showLoader: true, 130 showLoader: true,
130 nameShow: false, 131 nameShow: false,
131 showMark: true, 132 showMark: true,
132 showGrade: false, 133 showGrade: false,
133 markData: [], 134 markData: [],
134 token: "", 135 token: "",
135 markDistributions: [], 136 markDistributions: [],
136 markParticularDistributionData: [], 137 markParticularDistributionData: [],
137 filterData: [], 138 filterData: [],
138 output: null, 139 output: null,
139 gradeAPlus: "A+", 140 gradeAPlus: "A+",
140 gradeA: "A", 141 gradeA: "A",
141 gradeBPlus: "B+", 142 gradeBPlus: "B+",
142 gradeB: "B", 143 gradeB: "B",
143 gradeCPlus: "C+", 144 gradeCPlus: "C+",
144 gradeC: "C", 145 gradeC: "C",
145 selectMarkList: "Mark", 146 selectMarkList: "Mark",
146 selectMark: ["Mark", "Grade"], 147 selectMark: ["Mark", "Grade"],
147 MarkData: "", 148 MarkData: "",
148 userData: {} 149 userData: {}
149 }), 150 }),
150 mounted() { 151 mounted() {
151 this.token = this.$store.state.token; 152 this.token = this.$store.state.token;
152 this.getMarkList(); 153 this.getMarkList();
153 this.getUserData(); 154 this.getUserData();
154 }, 155 },
155 methods: { 156 methods: {
156 getMarkList() { 157 getMarkList() {
157 this.showLoader = true; 158 this.showLoader = true;
158 http() 159 http()
159 .get("/getParticularMark", { 160 .get("/getParticularMark", {
160 params: { studentId: this.$route.params.markId }, 161 params: { studentId: this.$route.params.markId },
161 headers: { Authorization: "Bearer " + this.token } 162 headers: { Authorization: "Bearer " + this.token }
162 }) 163 })
163 .then(response => { 164 .then(response => {
164 this.markData = response.data.data; 165 this.markData = response.data.data;
165 let newData = response.data.data; 166 let newData = response.data.data;
166 // console.log("newData", newData); 167 // console.log("newData", newData);
167 for (var i = 0; i < newData.length; i++) { 168 for (var i = 0; i < newData.length; i++) {
168 newData[i].examination = newData[i].examId._id; 169 newData[i].examination = newData[i].examId._id;
169 } 170 }
170 this.filterData = _.groupBy(newData, ["examination"]); 171 this.filterData = _.groupBy(newData, ["examination"]);
171 // console.log("this.filterData", this.filterData); 172 // console.log("this.filterData", this.filterData);
172 for (let data in this.filterData) { 173 for (let data in this.filterData) {
173 for (let item in this.filterData[data]) { 174 for (let item in this.filterData[data]) {
174 var totalMarks = 0; 175 var totalMarks = 0;
175 for ( 176 for (
176 let i = 0; 177 let i = 0;
177 i < this.filterData[data][item].studentsMarks.length; 178 i < this.filterData[data][item].studentsMarks.length;
178 i++ 179 i++
179 ) { 180 ) {
180 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i] 181 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
181 // .marksScored) 182 // .marksScored)
182 totalMarks += this.filterData[data][item].studentsMarks[i] 183 totalMarks += this.filterData[data][item].studentsMarks[i]
183 .marksScored; 184 .marksScored;
184 } 185 }
185 this.filterData[data][item].totalMarks = totalMarks; 186 this.filterData[data][item].totalMarks = totalMarks;
186 187
187 if (totalMarks > 90) { 188 if (totalMarks > 90) {
188 this.filterData[data][item].grade = this.gradeAPlus; 189 this.filterData[data][item].grade = this.gradeAPlus;
189 } else if (totalMarks > 80 && totalMarks < 90) { 190 } else if (totalMarks > 80 && totalMarks < 90) {
190 this.filterData[data][item].grade = this.gradeA; 191 this.filterData[data][item].grade = this.gradeA;
191 } else if (totalMarks > 70 && totalMarks < 80) { 192 } else if (totalMarks > 70 && totalMarks < 80) {
192 this.filterData[data][item].grade = this.gradeBPlus; 193 this.filterData[data][item].grade = this.gradeBPlus;
193 } else if (totalMarks > 60 && totalMarks < 70) { 194 } else if (totalMarks > 60 && totalMarks < 70) {
194 this.filterData[data][item].grade = this.gradeB; 195 this.filterData[data][item].grade = this.gradeB;
195 } else if (totalMarks > 50 && totalMarks < 60) { 196 } else if (totalMarks > 50 && totalMarks < 60) {
196 this.filterData[data][item].grade = this.gradeCPlus; 197 this.filterData[data][item].grade = this.gradeCPlus;
197 } else if (totalMarks > 40 && totalMarks < 50) { 198 } else if (totalMarks > 40 && totalMarks < 50) {
198 this.filterData[data][item].grade = this.gradeC; 199 this.filterData[data][item].grade = this.gradeC;
199 } 200 }
200 } 201 }
201 } 202 }
202 this.showLoader = false; 203 this.showLoader = false;
203 }) 204 })
204 .catch(error => { 205 .catch(error => {
205 this.showLoader = false; 206 this.showLoader = false;
206 this.snackbar = true; 207 this.snackbar = true;
207 this.text = error.response.data.message; 208 this.text = error.response.data.message;
208 if (error.response.status === 401) { 209 if (error.response.status === 401) {
209 this.$router.replace({ path: "/" }); 210 this.$router.replace({ path: "/" });
210 this.$store.dispatch("setToken", null); 211 this.$store.dispatch("setToken", null);
211 this.$store.dispatch("Id", null); 212 this.$store.dispatch("Id", null);
212 } 213 }
213 }); 214 });
214 }, 215 },
215 print() { 216 print() {
216 // Pass the element id here 217 // Pass the element id here
217 this.$htmlToPaper("printMe"); 218 this.$htmlToPaper("printMe");
218 }, 219 },
219 getUserData() { 220 getUserData() {
220 http() 221 http()
221 .get("/getParticularUserDetail") 222 .get("/getParticularUserDetail")
222 .then(response => { 223 .then(response => {
223 this.userData = response.data.data; 224 this.userData = response.data.data;
224 }) 225 })
225 .catch(error => { 226 .catch(error => {
226 // if (error.response.status === 401) { 227 // if (error.response.status === 401) {
227 // this.$router.replace({ path: "/" }); 228 // this.$router.replace({ path: "/" });
228 // this.$store.dispatch("setToken", null); 229 // this.$store.dispatch("setToken", null);
229 // this.$store.dispatch("Id", null); 230 // this.$store.dispatch("Id", null);
230 // } 231 // }
231 }); 232 });
232 }, 233 },
233 selectMarkData(select) { 234 selectMarkData(select) {
234 if (select == "Mark") { 235 if (select == "Mark") {
235 this.showMark = true; 236 this.showMark = true;
236 this.showGrade = false; 237 this.showGrade = false;
237 } else if (select == "Grade") { 238 } else if (select == "Grade") {
238 this.showGrade = true; 239 this.showGrade = true;
239 this.showMark = false; 240 this.showMark = false;
240 } 241 }
241 } 242 }
242 } 243 }
243 }; 244 };
244 </script> 245 </script>
245 246
246 <style scoped> 247 <style scoped>
247 .add-button { 248 .add-button {
248 background: #feb83c !important; 249 background: #feb83c !important;
249 border-color: #feb83c !important; 250 border-color: #feb83c !important;
250 text-transform: none !important; 251 text-transform: none !important;
251 -webkit-box-shadow: none !important; 252 -webkit-box-shadow: none !important;
252 box-shadow: none !important; 253 box-shadow: none !important;
253 } 254 }
254 .card-styles { 255 .card-styles {
255 background: #7f62f8 !important; 256 background: #7f62f8 !important;
256 border-color: #7f62f8 !important; 257 border-color: #7f62f8 !important;
257 } 258 }
258 .open-dialog-button { 259 .open-dialog-button {
259 background: #827bfa !important; 260 background: #827bfa !important;
260 border-color: #827bfa !important; 261 border-color: #827bfa !important;
261 text-transform: none !important; 262 text-transform: none !important;
262 } 263 }
263 table { 264 table {
264 border-collapse: collapse; 265 border-collapse: collapse;
265 border: 1px solid #e2e7eb; 266 border: 1px solid #e2e7eb;
266 } 267 }
267 th, 268 th,
268 td { 269 td {
269 border: 1px solid #e2e7eb; 270 border: 1px solid #e2e7eb;
270 text-align: center; 271 text-align: center;
271 } 272 }
272 table.feeTypeTable { 273 table.feeTypeTable {
273 table-layout: auto !important; 274 table-layout: auto !important;
274 width: 100% !important; 275 width: 100% !important;
275 } 276 }
276 .bg-sky { 277 .bg-sky {
277 background-color: #98b2cc !important; 278 background-color: #98b2cc !important;
278 } 279 }
279 .bg-sky-light { 280 .bg-sky-light {
280 background-color: #89a0b8; 281 background-color: #89a0b8;
281 } 282 }
282 .bg-purple { 283 .bg-purple {
283 background-color: #9583ac; 284 background-color: #9583ac;
284 } 285 }
285 .bg-skyDark { 286 .bg-skyDark {
286 background-color: #956785; 287 background-color: #956785;
287 } 288 }
288 .loader { 289 .loader {
289 width: 100%; 290 width: 100%;
290 height: 100%; 291 height: 100%;
291 position: fixed; 292 position: fixed;
292 top: 0; 293 top: 0;
293 left: 0; 294 left: 0;
294 text-align: center; 295 text-align: center;
295 background-color: rgba(0, 0, 0, 0.5); 296 background-color: rgba(0, 0, 0, 0.5);
296 z-index: 999; 297 z-index: 999;
297 } 298 }
298 299
299 .loader > div { 300 .loader > div {
300 position: relative; 301 position: relative;
301 top: calc(50% - 16px); 302 top: calc(50% - 16px);
302 } 303 }
303 @media screen and (max-width: 380px) { 304 @media screen and (max-width: 380px) {
304 .tableRsponsive { 305 .tableRsponsive {
305 /* display: block; */ 306 /* display: block; */
306 position: relative; 307 position: relative;
307 overflow: scroll; 308 overflow: scroll;
308 } 309 }
309 } 310 }
310 </style> 311 </style>
311 312
312 313
313 314
314 315
315 316
316 317
317 318
318 319
319 320
320 321
321 322
322 323
323 324
324 325
325 326
326 327
327 328
328 329