viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit a5585d98e8972abd39365050d38cf3c8085c852c

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

show school logo

Showing 1 changed file with 16 additions and 8 deletions   Show diff stats
src/pages/Report/studentReport.vue
Diff comments   View file @a5585d9
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Student Report TABLE****** --> 3 <!-- ****** Student Report TABLE****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 10 <v-flex xs4 sm4 lg3 class="subheading mt-4">
11 <label class="right">Report For :</label> 11 <label class="right">Report For :</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs7 sm6 lg8 class="ml-2"> 13 <v-flex xs7 sm6 lg8 class="ml-2">
14 <v-autocomplete 14 <v-autocomplete
15 v-model="report.form" 15 v-model="report.form"
16 label="Select your report for" 16 label="Select your report for"
17 :items="formList" 17 :items="formList"
18 item-text="name" 18 item-text="name"
19 item-value="value" 19 item-value="value"
20 @change="getReport(report.form)" 20 @change="getReport(report.form)"
21 :rules="formRules" 21 :rules="formRules"
22 required 22 required
23 ></v-autocomplete> 23 ></v-autocomplete>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12 lg4 v-if="bloodGroup"> 27 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
28 <v-layout> 28 <v-layout>
29 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 29 <v-flex xs4 sm4 lg4 class="subheading mt-4">
30 <label class="right">Blood Group :</label> 30 <label class="right">Blood Group :</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs7 sm6 lg8 class="ml-2"> 32 <v-flex xs7 sm6 lg8 class="ml-2">
33 <v-autocomplete 33 <v-autocomplete
34 v-model="report.bloodGroup" 34 v-model="report.bloodGroup"
35 label="Select your Blood Group " 35 label="Select your Blood Group "
36 :items="bloodGroupList" 36 :items="bloodGroupList"
37 :rules="bloodGroupRules" 37 :rules="bloodGroupRules"
38 required 38 required
39 ></v-autocomplete> 39 ></v-autocomplete>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 </v-flex> 42 </v-flex>
43 <v-flex xs12 sm12 lg4 v-if="genderShow"> 43 <v-flex xs12 sm12 lg4 v-if="genderShow">
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 45 <v-flex xs4 sm4 lg4 class="subheading mt-4">
46 <label class="right">Gender:</label> 46 <label class="right">Gender:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs7 sm6 lg8 class="ml-2"> 48 <v-flex xs7 sm6 lg8 class="ml-2">
49 <v-autocomplete 49 <v-autocomplete
50 v-model="report.gender" 50 v-model="report.gender"
51 label="Select your gender " 51 label="Select your gender "
52 :items="gender" 52 :items="gender"
53 :rules="genderRules" 53 :rules="genderRules"
54 required 54 required
55 ></v-autocomplete> 55 ></v-autocomplete>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12 sm12 lg4 v-if="TransportShow"> 59 <v-flex xs12 sm12 lg4 v-if="TransportShow">
60 <v-layout> 60 <v-layout>
61 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 61 <v-flex xs4 sm4 lg4 class="subheading mt-4">
62 <label class="right">Route:</label> 62 <label class="right">Route:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs7 sm6 lg8 class="ml-2"> 64 <v-flex xs7 sm6 lg8 class="ml-2">
65 <v-autocomplete 65 <v-autocomplete
66 v-model="report.route" 66 v-model="report.route"
67 label="Select your gender " 67 label="Select your gender "
68 :items="route" 68 :items="route"
69 :rules="routeRules" 69 :rules="routeRules"
70 required 70 required
71 ></v-autocomplete> 71 ></v-autocomplete>
72 </v-flex> 72 </v-flex>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 <v-flex xs12 sm12 lg4 v-if="HostelShow"> 75 <v-flex xs12 sm12 lg4 v-if="HostelShow">
76 <v-layout> 76 <v-layout>
77 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 77 <v-flex xs4 sm4 lg4 class="subheading mt-4">
78 <label class="right">Hostel:</label> 78 <label class="right">Hostel:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs7 sm6 lg8 class="ml-2"> 80 <v-flex xs7 sm6 lg8 class="ml-2">
81 <v-autocomplete 81 <v-autocomplete
82 v-model="report.route" 82 v-model="report.route"
83 label="Select your hostel " 83 label="Select your hostel "
84 :items="hostelList" 84 :items="hostelList"
85 :rules="hostelRules" 85 :rules="hostelRules"
86 required 86 required
87 ></v-autocomplete> 87 ></v-autocomplete>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm12 lg4 v-if="countryShow"> 91 <v-flex xs12 sm12 lg4 v-if="countryShow">
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 93 <v-flex xs4 sm4 lg4 class="subheading mt-4">
94 <label class="right">Country :</label> 94 <label class="right">Country :</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs7 sm6 lg8 class="ml-2"> 96 <v-flex xs7 sm6 lg8 class="ml-2">
97 <v-autocomplete 97 <v-autocomplete
98 v-model="report.country" 98 v-model="report.country"
99 label="Select your Country " 99 label="Select your Country "
100 :items="countryList" 100 :items="countryList"
101 :rules="countryRules" 101 :rules="countryRules"
102 required 102 required
103 ></v-autocomplete> 103 ></v-autocomplete>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow"> 107 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
108 <v-layout> 108 <v-layout>
109 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 109 <v-flex xs3 sm6 lg4 class="subheading mt-4">
110 <label class="right">Country :</label> 110 <label class="right">Country :</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs12 sm12 lg8 class="ml-2"> 112 <v-flex xs12 sm12 lg8 class="ml-2">
113 <v-select 113 <v-select
114 v-model="report.country" 114 v-model="report.country"
115 label="Select your Country " 115 label="Select your Country "
116 :items="countryList" 116 :items="countryList"
117 required 117 required
118 ></v-select> 118 ></v-select>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex>--> 121 </v-flex>-->
122 <v-flex xs12 sm12 lg4 v-if="classShow"> 122 <v-flex xs12 sm12 lg4 v-if="classShow">
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 124 <v-flex xs4 sm4 lg3 class="subheading mt-4">
125 <label class="right">Class:</label> 125 <label class="right">Class:</label>
126 </v-flex> 126 </v-flex>
127 <v-flex xs7 sm6 lg8 class="ml-2"> 127 <v-flex xs7 sm6 lg8 class="ml-2">
128 <v-autocomplete 128 <v-autocomplete
129 v-model="report.classId" 129 v-model="report.classId"
130 label="Select your class" 130 label="Select your class"
131 type="text" 131 type="text"
132 :rules="classRules" 132 :rules="classRules"
133 :items="classList" 133 :items="classList"
134 item-text="classNum" 134 item-text="classNum"
135 item-value="_id" 135 item-value="_id"
136 @change="getSections(report.classId)" 136 @change="getSections(report.classId)"
137 required 137 required
138 ></v-autocomplete> 138 ></v-autocomplete>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 </v-flex> 141 </v-flex>
142 <v-flex xs12 sm12 lg4 v-if="sectionShow"> 142 <v-flex xs12 sm12 lg4 v-if="sectionShow">
143 <v-layout> 143 <v-layout>
144 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 144 <v-flex xs4 sm4 lg3 class="subheading mt-4">
145 <label class="right">Section:</label> 145 <label class="right">Section:</label>
146 </v-flex> 146 </v-flex>
147 <v-flex xs7 sm6 lg8 class="ml-2"> 147 <v-flex xs7 sm6 lg8 class="ml-2">
148 <v-autocomplete 148 <v-autocomplete
149 :items="addSection" 149 :items="addSection"
150 label="Select your Section" 150 label="Select your Section"
151 v-model="report.sectionId" 151 v-model="report.sectionId"
152 :rules="sectionRules" 152 :rules="sectionRules"
153 item-text="name" 153 item-text="name"
154 item-value="_id" 154 item-value="_id"
155 name="Select Section" 155 name="Select Section"
156 required 156 required
157 ></v-autocomplete> 157 ></v-autocomplete>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5"> 161 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
162 <v-btn 162 <v-btn
163 @click="getStudents" 163 @click="getStudents"
164 round 164 round
165 dark 165 dark
166 :loading="loading" 166 :loading="loading"
167 class="open-dialog-button mt-3 ml-5" 167 class="open-dialog-button mt-3 ml-5"
168 >Get Report</v-btn> 168 >Get Report</v-btn>
169 </v-flex> 169 </v-flex>
170 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only"> 170 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
171 <v-btn 171 <v-btn
172 @click="getStudents" 172 @click="getStudents"
173 round 173 round
174 dark 174 dark
175 :loading="loading" 175 :loading="loading"
176 class="mt-3 right" 176 class="mt-3 right"
177 >Get Report</v-btn> 177 >Get Report</v-btn>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </v-flex> 180 </v-flex>
181 </v-form> 181 </v-form>
182 </v-card> 182 </v-card>
183 <v-layout v-show="showTable"> 183 <v-layout v-show="showTable">
184 <v-flex xs12> 184 <v-flex xs12>
185 <v-card class="transparent elevation-0"> 185 <v-card class="transparent elevation-0">
186 <v-layout> 186 <v-layout>
187 <v-flex xs12> 187 <v-flex xs12>
188 <v-btn class="open-dialog-button right" round dark @click="printStudentReport()"> 188 <v-btn class="open-dialog-button right" round dark @click="printStudentReport()">
189 Print 189 Print
190 <v-icon right dark>print</v-icon> 190 <v-icon right dark>print</v-icon>
191 </v-btn> 191 </v-btn>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <v-layout> 194 <v-layout>
195 <v-flex xs12 sm12 md12 class="text-xs-center"> 195 <v-flex xs12 sm12 md12 class="text-xs-center">
196 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> --> 196 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
197 <v-avatar> 197 <v-avatar>
198 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 198 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
199 <img src="/static/schoolIcons/INTRACK_White.png" v-else-if="!userData.schoolLogoUrl" /> 199 <img
200 src="/static/schoolIcons/INTRACK_White.png"
201 v-else-if="!userData.schoolLogoUrl"
202 />
200 </v-avatar> 203 </v-avatar>
201 <p class="title">{{ userData.name }}</p> 204 <p class="title">{{ userData.name }}</p>
202 <p>{{ userData.address }}</p> 205 <p>{{ userData.address }}</p>
203 </v-flex> 206 </v-flex>
204 <v-flex xs12 sm12 md12 class="text-xs-center" v-for="(studentReport,i) in getStudentsReportList" :key="i"> 207 <v-flex
208 xs12
209 sm12
210 md12
211 class="text-xs-center"
212 v-for="(studentReport,i) in getStudentsReportList"
213 :key="i"
214 >
205 <v-avatar> 215 <v-avatar>
206 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" /> 216 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
207 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" /> 217 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
208 </v-avatar> 218 </v-avatar>
209 <p 219 <p style="font-size:20px;margin:0px;margin-bottom:4px;">{{ studentReport.name }}</p>
210 style="font-size:20px;margin:0px;margin-bottom:4px;"
211 >{{ studentReport.name }}</p>
212 <p 220 <p
213 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;" 221 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
214 > Class : {{ studentReport.classId.classNum }}</p> 222 >Class : {{ studentReport.classId.classNum }}</p>
215 <p 223 <p
216 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;" 224 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
217 > Section : {{ studentReport.sectionId.name }}</p> 225 >Section : {{ studentReport.sectionId.name }}</p>
218 <p 226 <p
219 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;" 227 style="font-size:20px;color: #707478;margin:0px;margin-bottom:4px;"
220 > RollNo : {{ studentReport.rollNo }}</p> 228 >RollNo : {{ studentReport.rollNo }}</p>
221 </v-flex> 229 </v-flex>
222 </v-layout> 230 </v-layout>
223 <v-data-table 231 <v-data-table
224 :headers="headers" 232 :headers="headers"
225 :items="getStudentsReportList" 233 :items="getStudentsReportList"
226 :pagination.sync="pagination" 234 :pagination.sync="pagination"
227 :search="search" 235 :search="search"
228 > 236 >
229 <template slot="items" slot-scope="props"> 237 <template slot="items" slot-scope="props">
230 <tr class="tr"> 238 <tr class="tr">
231 <td class="td td-row">{{ props.index + 1}}</td> 239 <td class="td td-row">{{ props.index + 1}}</td>
232 <td id="td" class="text-xs-center"> 240 <td id="td" class="text-xs-center">
233 <v-avatar> 241 <v-avatar>
234 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 242 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
235 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 243 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
236 </v-avatar> 244 </v-avatar>
237 </td> 245 </td>
238 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 246 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
239 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 247 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
240 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 248 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
241 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 249 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
242 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td> 250 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td>
243 </tr> 251 </tr>
244 </template> 252 </template>
245 <v-alert 253 <v-alert
246 slot="no-results" 254 slot="no-results"
247 :value="true" 255 :value="true"
248 color="error" 256 color="error"
249 icon="warning" 257 icon="warning"
250 >Your search for "{{ search }}" found no results.</v-alert> 258 >Your search for "{{ search }}" found no results.</v-alert>
251 </v-data-table> 259 </v-data-table>
252 </v-card> 260 </v-card>
253 <v-flex xs12 id="printMe" v-show="hidePrintStudentReport"> 261 <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
254 <v-layout> 262 <v-layout>
255 <v-flex xs12 style="text-align:center;margin-bottom:10px"> 263 <v-flex xs12 style="text-align:center;margin-bottom:10px">
256 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 264 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
257 <p class="title">{{ userData.name }}</p> 265 <p class="title">{{ userData.name }}</p>
258 <p>{{ userData.address }}</p> 266 <p>{{ userData.address }}</p>
259 </v-flex> 267 </v-flex>
260 </v-layout> 268 </v-layout>
261 <table 269 <table
262 class="mb-5 tableRsponsive feeTypeTable" 270 class="mb-5 tableRsponsive feeTypeTable"
263 style="border: 1px solid lightgrey; 271 style="border: 1px solid lightgrey;
264 border-collapse: collapse;!important 272 border-collapse: collapse;!important
265 table-layout: auto !important; 273 table-layout: auto !important;
266 width: 100% !important;" 274 width: 100% !important;"
267 > 275 >
268 <thead style="border: 1px solid lightgrey !important;"> 276 <thead style="border: 1px solid lightgrey !important;">
269 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 277 <tr style="border: 1px solid lightgrey !important;padding:4px;">
270 <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td> 278 <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td>
271 <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td> 279 <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
272 <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td> 280 <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
273 <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td> 281 <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
274 <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td> 282 <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
275 <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td> 283 <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
276 </tr> 284 </tr>
277 </thead> 285 </thead>
278 <tbody style="border: 1px solid lightgrey !important;"> 286 <tbody style="border: 1px solid lightgrey !important;">
279 <tr v-for="(studentReport,i) in getStudentsReportList" :key="i"> 287 <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
280 <td style="border: 1px solid lightgrey !important;padding: 6px;"> 288 <td style="border: 1px solid lightgrey !important;padding: 6px;">
281 <v-avatar> 289 <v-avatar>
282 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" /> 290 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
283 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" /> 291 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
284 </v-avatar> 292 </v-avatar>
285 </td> 293 </td>
286 <td 294 <td
287 style="border: 1px solid lightgrey !important;padding: 6px;" 295 style="border: 1px solid lightgrey !important;padding: 6px;"
288 >{{ studentReport.name }}</td> 296 >{{ studentReport.name }}</td>
289 <!-- <td 297 <!-- <td
290 style="border: 1px solid lightgrey !important;padding: 6px;" 298 style="border: 1px solid lightgrey !important;padding: 6px;"
291 >{{ studentReport.rollNo }}</td>--> 299 >{{ studentReport.rollNo }}</td>-->
292 <td 300 <td
293 style="border: 1px solid lightgrey !important;padding: 6px;" 301 style="border: 1px solid lightgrey !important;padding: 6px;"
294 >{{ studentReport.email }}</td> 302 >{{ studentReport.email }}</td>
295 <td 303 <td
296 style="border: 1px solid lightgrey !important;padding: 6px;" 304 style="border: 1px solid lightgrey !important;padding: 6px;"
297 >{{ studentReport.classId.classNum }}</td> 305 >{{ studentReport.classId.classNum }}</td>
298 <td 306 <td
299 style="border: 1px solid lightgrey !important;padding: 6px;" 307 style="border: 1px solid lightgrey !important;padding: 6px;"
300 >{{ studentReport.sectionId.name }}</td> 308 >{{ studentReport.sectionId.name }}</td>
301 </tr> 309 </tr>
302 </tbody> 310 </tbody>
303 </table> 311 </table>
304 </v-flex> 312 </v-flex>
305 </v-flex> 313 </v-flex>
306 </v-layout> 314 </v-layout>
307 <div class="loader" v-if="showLoader"> 315 <div class="loader" v-if="showLoader">
308 <v-progress-circular indeterminate color="white"></v-progress-circular> 316 <v-progress-circular indeterminate color="white"></v-progress-circular>
309 </div> 317 </div>
310 </v-container> 318 </v-container>
311 </template> 319 </template>
312 320
313 <script> 321 <script>
314 import http from "@/Services/http.js"; 322 import http from "@/Services/http.js";
315 import countryList from "@/script/country.js"; 323 import countryList from "@/script/country.js";
316 324
317 import moment from "moment"; 325 import moment from "moment";
318 326
319 export default { 327 export default {
320 data: () => ({ 328 data: () => ({
321 snackbar: false, 329 snackbar: false,
322 color: "", 330 color: "",
323 y: "top", 331 y: "top",
324 x: "right", 332 x: "right",
325 mode: "", 333 mode: "",
326 timeout: 10000, 334 timeout: 10000,
327 text: "", 335 text: "",
328 loading: false, 336 loading: false,
329 valid: true, 337 valid: true,
330 search: "", 338 search: "",
331 showLoader: false, 339 showLoader: false,
332 bloodGroup: false, 340 bloodGroup: false,
333 genderShow: false, 341 genderShow: false,
334 countryShow: false, 342 countryShow: false,
335 TransportShow: false, 343 TransportShow: false,
336 HostelShow: false, 344 HostelShow: false,
337 BirthdayShow: false, 345 BirthdayShow: false,
338 sectionShow: false, 346 sectionShow: false,
339 showTable: false, 347 showTable: false,
340 classShow: true, 348 classShow: true,
341 hidePrintStudentReport: false, 349 hidePrintStudentReport: false,
342 addSection: [], 350 addSection: [],
343 pagination: { 351 pagination: {
344 rowsPerPage: 10 352 rowsPerPage: 10
345 }, 353 },
346 formRules: [v => !!v || "Form For is required"], 354 formRules: [v => !!v || "Form For is required"],
347 bloodGroupRules: [v => !!v || "Blood group is required"], 355 bloodGroupRules: [v => !!v || "Blood group is required"],
348 classRules: [v => !!v || "Class is required"], 356 classRules: [v => !!v || "Class is required"],
349 sectionRules: [v => !!v || "Class is required"], 357 sectionRules: [v => !!v || "Class is required"],
350 genderRules: [v => !!v || "Gender is required"], 358 genderRules: [v => !!v || "Gender is required"],
351 routeRules: [v => !!v || "RouteI is required"], 359 routeRules: [v => !!v || "RouteI is required"],
352 hostelRules: [v => !!v || "Hostel is required"], 360 hostelRules: [v => !!v || "Hostel is required"],
353 countryRules: [v => !!v || "Country is required"], 361 countryRules: [v => !!v || "Country is required"],
354 headers: [ 362 headers: [
355 { 363 {
356 align: "", 364 align: "",
357 text: "No", 365 text: "No",
358 sortable: false, 366 sortable: false,
359 value: "No" 367 value: "No"
360 }, 368 },
361 { 369 {
362 text: "Profile Pic", 370 text: "Profile Pic",
363 vaue: "profilePicUrl", 371 vaue: "profilePicUrl",
364 sortable: false, 372 sortable: false,
365 align: "center" 373 align: "center"
366 }, 374 },
367 { 375 {
368 text: "Name", 376 text: "Name",
369 vaue: "name", 377 vaue: "name",
370 sortable: false, 378 sortable: false,
371 align: "center" 379 align: "center"
372 }, 380 },
373 { 381 {
374 text: "Roll No.", 382 text: "Roll No.",
375 value: "rollNo", 383 value: "rollNo",
376 sortable: false, 384 sortable: false,
377 align: "center" 385 align: "center"
378 }, 386 },
379 { 387 {
380 text: "Email", 388 text: "Email",
381 value: "email", 389 value: "email",
382 sortable: false, 390 sortable: false,
383 align: "center" 391 align: "center"
384 }, 392 },
385 { 393 {
386 text: "Class", 394 text: "Class",
387 value: "classId", 395 value: "classId",
388 sortable: false, 396 sortable: false,
389 align: "center" 397 align: "center"
390 }, 398 },
391 { 399 {
392 text: "Section", 400 text: "Section",
393 value: "sectionId", 401 value: "sectionId",
394 sortable: false, 402 sortable: false,
395 align: "center" 403 align: "center"
396 } 404 }
397 ], 405 ],
398 classList: [], 406 classList: [],
399 report: {}, 407 report: {},
400 userData: {}, 408 userData: {},
401 markData: [], 409 markData: [],
402 formList: [ 410 formList: [
403 { 411 {
404 name: "Blood Group", 412 name: "Blood Group",
405 value: "bloodGroup" 413 value: "bloodGroup"
406 }, 414 },
407 "Country", 415 "Country",
408 "Gender", 416 "Gender",
409 "Transport", 417 "Transport",
410 "Hostel" 418 "Hostel"
411 // "Birthday" 419 // "Birthday"
412 ], 420 ],
413 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"], 421 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
414 gender: ["Male", "female"], 422 gender: ["Male", "female"],
415 getStudentsReportList: [], 423 getStudentsReportList: [],
416 studentReort: "", 424 studentReort: "",
417 countryList: [], 425 countryList: [],
418 route: [], 426 route: [],
419 Hostel: [], 427 Hostel: [],
420 hostelList: [], 428 hostelList: [],
421 token: "" 429 token: ""
422 }), 430 }),
423 methods: { 431 methods: {
424 clear() { 432 clear() {
425 this.$refs.form.reset(); 433 this.$refs.form.reset();
426 }, 434 },
427 getClass() { 435 getClass() {
428 this.showLoader = true; 436 this.showLoader = true;
429 http() 437 http()
430 .get("/getClassesList", { 438 .get("/getClassesList", {
431 headers: { Authorization: "Bearer " + this.token } 439 headers: { Authorization: "Bearer " + this.token }
432 }) 440 })
433 .then(response => { 441 .then(response => {
434 this.classList = response.data.data; 442 this.classList = response.data.data;
435 this.showLoader = false; 443 this.showLoader = false;
436 }) 444 })
437 .catch(err => { 445 .catch(err => {
438 this.showLoader = false; 446 this.showLoader = false;
439 if (error.response.status === 401) { 447 if (error.response.status === 401) {
440 this.$router.replace({ path: "/" }); 448 this.$router.replace({ path: "/" });
441 this.$store.dispatch("setToken", null); 449 this.$store.dispatch("setToken", null);
442 this.$store.dispatch("Id", null); 450 this.$store.dispatch("Id", null);
443 this.$store.dispatch("Role", null); 451 this.$store.dispatch("Role", null);
444 } 452 }
445 }); 453 });
446 }, 454 },
447 getReport() { 455 getReport() {
448 if (this.report.form === "bloodGroup") { 456 if (this.report.form === "bloodGroup") {
449 this.bloodGroup = true; 457 this.bloodGroup = true;
450 this.genderShow = false; 458 this.genderShow = false;
451 this.TransportShow = false; 459 this.TransportShow = false;
452 this.countryShow = false; 460 this.countryShow = false;
453 this.BirthdayShow = false; 461 this.BirthdayShow = false;
454 this.HostelShow = false; 462 this.HostelShow = false;
455 this.classShow = false; 463 this.classShow = false;
456 this.sectionShow = false; 464 this.sectionShow = false;
457 } 465 }
458 if (this.report.form === "Gender") { 466 if (this.report.form === "Gender") {
459 this.genderShow = true; 467 this.genderShow = true;
460 this.bloodGroup = false; 468 this.bloodGroup = false;
461 this.TransportShow = false; 469 this.TransportShow = false;
462 this.BirthdayShow = false; 470 this.BirthdayShow = false;
463 this.countryShow = false; 471 this.countryShow = false;
464 this.HostelShow = false; 472 this.HostelShow = false;
465 this.classShow = true; 473 this.classShow = true;
466 } 474 }
467 if (this.report.form === "Transport") { 475 if (this.report.form === "Transport") {
468 this.TransportShow = true; 476 this.TransportShow = true;
469 this.genderShow = false; 477 this.genderShow = false;
470 this.bloodGroup = false; 478 this.bloodGroup = false;
471 this.BirthdayShow = false; 479 this.BirthdayShow = false;
472 this.countryShow = false; 480 this.countryShow = false;
473 this.HostelShow = false; 481 this.HostelShow = false;
474 this.classShow = true; 482 this.classShow = true;
475 } 483 }
476 if (this.report.form === "Country") { 484 if (this.report.form === "Country") {
477 this.countryShow = true; 485 this.countryShow = true;
478 this.TransportShow = false; 486 this.TransportShow = false;
479 this.genderShow = false; 487 this.genderShow = false;
480 this.bloodGroup = false; 488 this.bloodGroup = false;
481 this.BirthdayShow = false; 489 this.BirthdayShow = false;
482 this.HostelShow = false; 490 this.HostelShow = false;
483 this.classShow = true; 491 this.classShow = true;
484 } 492 }
485 if (this.report.form === "Hostel") { 493 if (this.report.form === "Hostel") {
486 this.HostelShow = true; 494 this.HostelShow = true;
487 this.TransportShow = false; 495 this.TransportShow = false;
488 this.genderShow = false; 496 this.genderShow = false;
489 this.bloodGroup = false; 497 this.bloodGroup = false;
490 this.countryShow = false; 498 this.countryShow = false;
491 this.BirthdayShow = false; 499 this.BirthdayShow = false;
492 this.classShow = true; 500 this.classShow = true;
493 } 501 }
494 if (this.report.form === "Birthday") { 502 if (this.report.form === "Birthday") {
495 this.BirthdayShow = true; 503 this.BirthdayShow = true;
496 this.TransportShow = false; 504 this.TransportShow = false;
497 this.genderShow = false; 505 this.genderShow = false;
498 this.HostelShow = false; 506 this.HostelShow = false;
499 this.bloodGroup = false; 507 this.bloodGroup = false;
500 this.countryShow = false; 508 this.countryShow = false;
501 this.classShow = true; 509 this.classShow = true;
502 } 510 }
503 }, 511 },
504 getStudents() { 512 getStudents() {
505 if (this.$refs.form.validate()) { 513 if (this.$refs.form.validate()) {
506 this.showLoader = true; 514 this.showLoader = true;
507 http() 515 http()
508 .get("/getStudentReport", { 516 .get("/getStudentReport", {
509 params: { 517 params: {
510 bloodGroup: this.report.bloodGroup, 518 bloodGroup: this.report.bloodGroup,
511 country: this.report.country, 519 country: this.report.country,
512 gender: this.report.gender, 520 gender: this.report.gender,
513 classId: this.report.classId, 521 classId: this.report.classId,
514 sectionId: this.report.sectionId 522 sectionId: this.report.sectionId
515 }, 523 },
516 headers: { Authorization: "Bearer " + this.token } 524 headers: { Authorization: "Bearer " + this.token }
517 }) 525 })
518 .then(response => { 526 .then(response => {
519 this.getStudentsReportList = response.data.data; 527 this.getStudentsReportList = response.data.data;
520 this.showTable = true; 528 this.showTable = true;
521 this.showLoader = false; 529 this.showLoader = false;
522 this.clear(); 530 this.clear();
523 // console.log("getSectionsList=====>", response.data.data); 531 // console.log("getSectionsList=====>", response.data.data);
524 }) 532 })
525 .catch(error => { 533 .catch(error => {
526 console.log("err====>", error); 534 console.log("err====>", error);
527 this.showLoader = false; 535 this.showLoader = false;
528 }); 536 });
529 } 537 }
530 }, 538 },
531 getSections() { 539 getSections() {
532 this.sectionShow = true; 540 this.sectionShow = true;
533 this.showLoader = true; 541 this.showLoader = true;
534 http() 542 http()
535 .get( 543 .get(
536 "/getSectionsList", 544 "/getSectionsList",
537 { params: { classId: this.report.classId } }, 545 { params: { classId: this.report.classId } },
538 { 546 {
539 headers: { Authorization: "Bearer " + this.token } 547 headers: { Authorization: "Bearer " + this.token }
540 } 548 }
541 ) 549 )
542 .then(response => { 550 .then(response => {
543 this.addSection = response.data.data; 551 this.addSection = response.data.data;
544 this.showLoader = false; 552 this.showLoader = false;
545 }) 553 })
546 .catch(error => { 554 .catch(error => {
547 console.log("err====>", error); 555 console.log("err====>", error);
548 this.showLoader = false; 556 this.showLoader = false;
549 }); 557 });
550 }, 558 },
551 // getFormList() { 559 // getFormList() {
552 // this.showLoader = true; 560 // this.showLoader = true;
553 // http() 561 // http()
554 // .get("/getExamsList", { 562 // .get("/getExamsList", {
555 // headers: { Authorization: "Bearer " + this.token } 563 // headers: { Authorization: "Bearer " + this.token }
556 // }) 564 // })
557 // .then(response => { 565 // .then(response => {
558 // this.formList = response.data.data; 566 // this.formList = response.data.data;
559 // this.showLoader = false; 567 // this.showLoader = false;
560 // }) 568 // })
561 // .catch(error => { 569 // .catch(error => {
562 // // console.log("err====>", err); 570 // // console.log("err====>", err);
563 // this.showLoader = false; 571 // this.showLoader = false;
564 // this.snackbar = true; 572 // this.snackbar = true;
565 // this.text = error.response.data.message; 573 // this.text = error.response.data.message;
566 // if (error.response.status === 401) { 574 // if (error.response.status === 401) {
567 // this.$router.replace({ path: "/" }); 575 // this.$router.replace({ path: "/" });
568 // this.$store.dispatch("setToken", null); 576 // this.$store.dispatch("setToken", null);
569 // this.$store.dispatch("Id", null); 577 // this.$store.dispatch("Id", null);
570 // } 578 // }
571 // }); 579 // });
572 // } 580 // }
573 printStudentReport() { 581 printStudentReport() {
574 this.$htmlToPaper("printMe"); 582 this.$htmlToPaper("printMe");
575 }, 583 },
576 getUserData() { 584 getUserData() {
577 http() 585 http()
578 .get("/getParticularUserDetail") 586 .get("/getParticularUserDetail")
579 .then(response => { 587 .then(response => {
580 this.userData = response.data.data; 588 this.userData = response.data.data;
581 }) 589 })
582 .catch(error => { 590 .catch(error => {
583 // if (error.response.status === 401) { 591 // if (error.response.status === 401) {
584 // this.$router.replace({ path: "/" }); 592 // this.$router.replace({ path: "/" });
585 // this.$store.dispatch("setToken", null); 593 // this.$store.dispatch("setToken", null);
586 // this.$store.dispatch("Id", null); 594 // this.$store.dispatch("Id", null);
587 // } 595 // }
588 }); 596 });
589 } 597 }
590 }, 598 },
591 mounted() { 599 mounted() {
592 this.token = this.$store.state.token; 600 this.token = this.$store.state.token;
593 const getCountryList = countryList(); 601 const getCountryList = countryList();
594 this.countryList = getCountryList; 602 this.countryList = getCountryList;
595 this.getUserData(); 603 this.getUserData();
596 // console.log("getindustryList", this.countryList); 604 // console.log("getindustryList", this.countryList);
597 // this.getExamList(); 605 // this.getExamList();
598 this.getClass(); 606 this.getClass();
599 }, 607 },
600 created() { 608 created() {
601 this.$root.$on("app:search", search => { 609 this.$root.$on("app:search", search => {
602 this.search = search; 610 this.search = search;
603 }); 611 });
604 }, 612 },
605 beforeDestroy() { 613 beforeDestroy() {
606 // dont forget to remove the listener 614 // dont forget to remove the listener
607 this.$root.$off("app:search"); 615 this.$root.$off("app:search");
608 } 616 }
609 }; 617 };
610 </script> 618 </script>
611 <style scoped> 619 <style scoped>
612 .active { 620 .active {
613 background-color: gray; 621 background-color: gray;
614 color: white !important; 622 color: white !important;
615 } 623 }
616 .activebtn { 624 .activebtn {
617 color: black !important; 625 color: black !important;