viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 874e8a70ee8bb677aa85df46427170e380fb7dfa

Authored by Amber Dev
1 parent 82576b8a88
Exists in master and in 1 other branch ui-design

marks btn visible only if datat

Showing 1 changed file with 2 additions and 1 deletions   Show diff stats
src/pages/Mark/mark.vue
Diff comments   View file @874e8a7
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-if="showSearch"> 63 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
64 <v-layout> 64 <v-layout>
65 <v-text-field 65 <v-text-field
66 autofocus 66 autofocus
67 v-model="search" 67 v-model="search"
68 label="Search" 68 label="Search"
69 prepend-inner-icon="search" 69 prepend-inner-icon="search"
70 color="primary" 70 color="primary"
71 ></v-text-field> 71 ></v-text-field>
72 <v-icon @click="closeSearch" color="error">close</v-icon> 72 <v-icon @click="closeSearch" color="error">close</v-icon>
73 </v-layout> 73 </v-layout>
74 </v-flex> 74 </v-flex>
75 </v-toolbar> 75 </v-toolbar>
76 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only"> 76 <v-card flat class="elevation-0 transparent hidden-lg-only hidden-xl-only hidden-md-only">
77 <v-flex xs12 sm12 lg12> 77 <v-flex xs12 sm12 lg12>
78 <v-layout wrap> 78 <v-layout wrap>
79 <v-flex xs12 sm12 lg3> 79 <v-flex xs12 sm12 lg3>
80 <v-layout> 80 <v-layout>
81 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 81 <v-flex xs3 sm6 lg2 class="subheading mt-4">
82 <label class="right">Class:</label> 82 <label class="right">Class:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs12 sm12 lg8 class="ml-2"> 84 <v-flex xs12 sm12 lg8 class="ml-2">
85 <v-select 85 <v-select
86 v-model="getMark.classId" 86 v-model="getMark.classId"
87 label="Select your class" 87 label="Select your class"
88 type="text" 88 type="text"
89 :items="classList" 89 :items="classList"
90 item-text="classNum" 90 item-text="classNum"
91 item-value="_id" 91 item-value="_id"
92 @change="getSections(getMark.classId)" 92 @change="getSections(getMark.classId)"
93 required 93 required
94 ></v-select> 94 ></v-select>
95 </v-flex> 95 </v-flex>
96 </v-layout> 96 </v-layout>
97 </v-flex> 97 </v-flex>
98 <v-flex xs12 sm12 lg3> 98 <v-flex xs12 sm12 lg3>
99 <v-layout> 99 <v-layout>
100 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 100 <v-flex xs3 sm6 lg2 class="subheading mt-4">
101 <label class="right">Section:</label> 101 <label class="right">Section:</label>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm12 lg8 class="ml-2"> 103 <v-flex xs12 sm12 lg8 class="ml-2">
104 <v-select 104 <v-select
105 :items="addSection" 105 :items="addSection"
106 label="Select your Section" 106 label="Select your Section"
107 v-model="getMark.sectionId" 107 v-model="getMark.sectionId"
108 item-text="name" 108 item-text="name"
109 item-value="_id" 109 item-value="_id"
110 name="Select Section" 110 name="Select Section"
111 required 111 required
112 ></v-select> 112 ></v-select>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm12 lg6> 116 <v-flex xs12 sm12 lg6>
117 <v-btn 117 <v-btn
118 @click="getStudents" 118 @click="getStudents"
119 round 119 round
120 dark 120 dark
121 :loading="loading" 121 :loading="loading"
122 class="right mt-3 open-dialog-button" 122 class="right mt-3 open-dialog-button"
123 >Mark</v-btn> 123 >Mark</v-btn>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 </v-card> 127 </v-card>
128 <v-data-table 128 <v-data-table
129 :headers="headers" 129 :headers="headers"
130 :items="getStudentsList" 130 :items="getStudentsList"
131 :pagination.sync="pagination" 131 :pagination.sync="pagination"
132 :search="search" 132 :search="search"
133 > 133 >
134 <template slot="items" slot-scope="props"> 134 <template slot="items" slot-scope="props">
135 <tr class="tr"> 135 <tr class="tr">
136 <td class="td td-row">{{ props.index + 1}}</td> 136 <td class="td td-row">{{ props.index + 1}}</td>
137 <td class="td td-row text-xs-center"> 137 <td class="td td-row text-xs-center">
138 <v-avatar size="40"> 138 <v-avatar size="40">
139 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 139 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
140 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 140 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
141 </v-avatar> 141 </v-avatar>
142 </td> 142 </td>
143 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 143 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
144 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 144 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
145 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 145 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
146 <td class="td td-row text-xs-center"> 146 <td class="td td-row text-xs-center">
147 <span> 147 <span>
148 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }"> 148 <router-link :to="{ name:'view Mark',params: { markId:props.item._id } }">
149 <v-tooltip top> 149 <v-tooltip top>
150 <img 150 <img
151 slot="activator" 151 slot="activator"
152 style="cursor:pointer; width:25px; height:25px; " 152 style="cursor:pointer; width:25px; height:25px; "
153 src="/static/icon/view.png" 153 src="/static/icon/view.png"
154 /> 154 />
155 <span>View</span> 155 <span>View</span>
156 </v-tooltip> 156 </v-tooltip>
157 </router-link> 157 </router-link>
158 </span> 158 </span>
159 </td> 159 </td>
160 </tr> 160 </tr>
161 </template> 161 </template>
162 <v-alert 162 <v-alert
163 slot="no-results" 163 slot="no-results"
164 :value="true" 164 :value="true"
165 color="error" 165 color="error"
166 icon="warning" 166 icon="warning"
167 >Your search for "{{ search }}" found no results.</v-alert> 167 >Your search for "{{ search }}" found no results.</v-alert>
168 </v-data-table> 168 </v-data-table>
169 <!-- ****** ADD Mark Schedule ****** --> 169 <!-- ****** ADD Mark Schedule ****** -->
170 <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent> 170 <v-dialog v-model="addMarkDialog" max-width v-if="addMarkDialog" persistent>
171 <v-card flat class> 171 <v-card flat class>
172 <v-layout class="pa-3 Card-style"> 172 <v-layout class="pa-3 Card-style">
173 <v-flex xs12> 173 <v-flex xs12>
174 <label class="title text-xs-center">Add Mark</label> 174 <label class="title text-xs-center">Add Mark</label>
175 <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDialog = false">cancel</v-icon> 175 <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDialog = false">cancel</v-icon>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-form ref="form" v-model="valid" lazy-validation> 178 <v-form ref="form" v-model="valid" lazy-validation>
179 <v-container fluid> 179 <v-container fluid>
180 <v-flex xs12 sm12 lg12> 180 <v-flex xs12 sm12 lg12>
181 <v-layout wrap> 181 <v-layout wrap>
182 <v-flex xs12 sm12 lg10> 182 <v-flex xs12 sm12 lg10>
183 <v-layout wrap> 183 <v-layout wrap>
184 <v-flex xs12 sm12 lg3> 184 <v-flex xs12 sm12 lg3>
185 <v-flex xs3 sm2 lg2 class="subheading"> 185 <v-flex xs3 sm2 lg2 class="subheading">
186 <label>Exam:</label> 186 <label>Exam:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs12 sm12 lg10> 188 <v-flex xs12 sm12 lg10>
189 <v-select 189 <v-select
190 label="Select your Exam Name" 190 label="Select your Exam Name"
191 :items="examList" 191 :items="examList"
192 v-model="addMark.examId" 192 v-model="addMark.examId"
193 :rules="examRules" 193 :rules="examRules"
194 item-text="examName" 194 item-text="examName"
195 item-value="_id" 195 item-value="_id"
196 ></v-select> 196 ></v-select>
197 </v-flex> 197 </v-flex>
198 </v-flex> 198 </v-flex>
199 <v-flex xs12 sm12 lg3> 199 <v-flex xs12 sm12 lg3>
200 <v-flex xs3 sm6 lg2 class="subheading"> 200 <v-flex xs3 sm6 lg2 class="subheading">
201 <label>Class:</label> 201 <label>Class:</label>
202 </v-flex> 202 </v-flex>
203 <v-flex xs12 sm12 lg10 class> 203 <v-flex xs12 sm12 lg10 class>
204 <v-select 204 <v-select
205 v-model="addMark.classId" 205 v-model="addMark.classId"
206 label="Select your class" 206 label="Select your class"
207 type="text" 207 type="text"
208 :items="classList" 208 :items="classList"
209 item-text="classNum" 209 item-text="classNum"
210 item-value="_id" 210 item-value="_id"
211 :rules="classRules" 211 :rules="classRules"
212 @change="getSections(addMark.classId)" 212 @change="getSections(addMark.classId)"
213 required 213 required
214 ></v-select> 214 ></v-select>
215 </v-flex> 215 </v-flex>
216 </v-flex> 216 </v-flex>
217 <v-flex xs12 sm12 lg3> 217 <v-flex xs12 sm12 lg3>
218 <v-flex xs3 sm6 lg2 class="subheading"> 218 <v-flex xs3 sm6 lg2 class="subheading">
219 <label>Section:</label> 219 <label>Section:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs12 sm12 lg10 class> 221 <v-flex xs12 sm12 lg10 class>
222 <v-select 222 <v-select
223 :items="addSection" 223 :items="addSection"
224 label="Select your Section" 224 label="Select your Section"
225 v-model="addMark.sectionId" 225 v-model="addMark.sectionId"
226 item-text="name" 226 item-text="name"
227 item-value="_id" 227 item-value="_id"
228 name="Select Section" 228 name="Select Section"
229 :rules="sectionRules" 229 :rules="sectionRules"
230 required 230 required
231 ></v-select> 231 ></v-select>
232 </v-flex> 232 </v-flex>
233 </v-flex> 233 </v-flex>
234 <v-flex xs12 sm12 lg3> 234 <v-flex xs12 sm12 lg3>
235 <v-flex xs3 sm6 lg2 class="subheading"> 235 <v-flex xs3 sm6 lg2 class="subheading">
236 <label>Subject:</label> 236 <label>Subject:</label>
237 </v-flex> 237 </v-flex>
238 <v-flex xs12 sm12 lg10 class> 238 <v-flex xs12 sm12 lg10 class>
239 <v-select 239 <v-select
240 :items="subjects" 240 :items="subjects"
241 label="Select your Subject" 241 label="Select your Subject"
242 v-model="addMark.subjectId" 242 v-model="addMark.subjectId"
243 item-text="subjectName" 243 item-text="subjectName"
244 item-value="_id" 244 item-value="_id"
245 name="Select Section" 245 name="Select Section"
246 :rules="subjectRules" 246 :rules="subjectRules"
247 required 247 required
248 ></v-select> 248 ></v-select>
249 </v-flex> 249 </v-flex>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm12 lg2> 253 <v-flex xs12 sm12 lg2>
254 <v-flex xs12 sm12 lg12> 254 <v-flex xs12 sm12 lg12>
255 <v-btn 255 <v-btn
256 @click="findStudents" 256 @click="findStudents"
257 round 257 round
258 dark 258 dark
259 :loading="loading" 259 :loading="loading"
260 class="right mt-4 add-button" 260 class="right mt-4 add-button"
261 >Mark</v-btn> 261 >Mark</v-btn>
262 </v-flex> 262 </v-flex>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 </v-flex> 265 </v-flex>
266 <!-- ****** ADD MARK TABLE DATA ****** --> 266 <!-- ****** ADD MARK TABLE DATA ****** -->
267 <v-card class="mt-4 elevation-0 body-color"> 267 <v-card class="mt-4 elevation-0 body-color">
268 <v-data-table 268 <v-data-table
269 :headers="headerOfMark" 269 :headers="headerOfMark"
270 :items="getStudentData" 270 :items="getStudentData"
271 :pagination.sync="pagination" 271 :pagination.sync="pagination"
272 :search="search" 272 :search="search"
273 class="body-color" 273 class="body-color"
274 > 274 >
275 <template slot="items" slot-scope="props"> 275 <template slot="items" slot-scope="props">
276 <tr class="tr"> 276 <tr class="tr">
277 <td class="td td-row">{{ props.index + 1}}</td> 277 <td class="td td-row">{{ props.index + 1}}</td>
278 <td class="text-xs-center td td-row"> 278 <td class="text-xs-center td td-row">
279 <v-avatar size="40"> 279 <v-avatar size="40">
280 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 280 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
281 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 281 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
282 </v-avatar> 282 </v-avatar>
283 </td> 283 </td>
284 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 284 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
285 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td> 285 <td class="text-xs-center td td-row">{{ props.item.rollNo }}</td>
286 <td 286 <td
287 class="text-xs-center markTable td td-row" 287 class="text-xs-center markTable td td-row"
288 v-for="(marks, index) in props.item.marksObtained" 288 v-for="(marks, index) in props.item.marksObtained"
289 :key="'A'+ index" 289 :key="'A'+ index"
290 > 290 >
291 <v-text-field v-model="marks.marksScored"></v-text-field> 291 <v-text-field v-model="marks.marksScored"></v-text-field>
292 </td> 292 </td>
293 </tr> 293 </tr>
294 </template> 294 </template>
295 <v-alert 295 <v-alert
296 slot="no-results" 296 slot="no-results"
297 :value="true" 297 :value="true"
298 color="error" 298 color="error"
299 icon="warning" 299 icon="warning"
300 >Your search for "{{ search }}" found no results.</v-alert> 300 >Your search for "{{ search }}" found no results.</v-alert>
301 </v-data-table> 301 </v-data-table>
302 </v-card> 302 </v-card>
303 <v-layout class="mt-2"> 303 <v-layout class="mt-2" v-if="getStudentData.length > 0">
304 <v-flex xs12 sm12> 304 <v-flex xs12 sm12>
305 <v-layout> 305 <v-layout>
306 <v-flex xs12> 306 <v-flex xs12>
307 <v-btn 307 <v-btn
308 @click="submit" 308 @click="submit"
309 round 309 round
310 dark 310 dark
311 :loading="loading" 311 :loading="loading"
312 class="right add-button" 312 class="right add-button"
313 >Add Mark</v-btn> 313 >Add Mark</v-btn>
314 </v-flex> 314 </v-flex>
315 </v-layout> 315 </v-layout>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 </v-container> 318 </v-container>
319 </v-form> 319 </v-form>
320 </v-card> 320 </v-card>
321 </v-dialog> 321 </v-dialog>
322 <div class="loader" v-if="showLoader"> 322 <div class="loader" v-if="showLoader">
323 <v-progress-circular indeterminate color="white"></v-progress-circular> 323 <v-progress-circular indeterminate color="white"></v-progress-circular>
324 </div> 324 </div>
325 <v-snackbar 325 <v-snackbar
326 :timeout="timeout" 326 :timeout="timeout"
327 :top="y === 'top'" 327 :top="y === 'top'"
328 :right="x === 'right'" 328 :right="x === 'right'"
329 :vertical="mode === 'vertical'" 329 :vertical="mode === 'vertical'"
330 v-model="snackbar" 330 v-model="snackbar"
331 :color="color" 331 :color="color"
332 >{{ text }}</v-snackbar> 332 >{{ text }}</v-snackbar>
333 </v-container> 333 </v-container>
334 </template> 334 </template>
335 335
336 <script> 336 <script>
337 import http from "@/Services/http.js"; 337 import http from "@/Services/http.js";
338 import moment from "moment"; 338 import moment from "moment";
339 339
340 export default { 340 export default {
341 data: () => ({ 341 data: () => ({
342 show: true, 342 show: true,
343 showSearch: false, 343 showSearch: false,
344 snackbar: false, 344 snackbar: false,
345 date: null, 345 date: null,
346 color: "", 346 color: "",
347 y: "top", 347 y: "top",
348 x: "right", 348 x: "right",
349 mode: "", 349 mode: "",
350 timeout: 10000, 350 timeout: 10000,
351 text: "", 351 text: "",
352 loading: false, 352 loading: false,
353 search: "", 353 search: "",
354 show: true, 354 show: true,
355 showSearch: false, 355 showSearch: false,
356 showLoader: false, 356 showLoader: false,
357 dialog: false, 357 dialog: false,
358 dialog1: false, 358 dialog1: false,
359 valid: true, 359 valid: true,
360 360
361 addMarkDialog: false, 361 addMarkDialog: false,
362 addSection: [], 362 addSection: [],
363 pagination: { 363 pagination: {
364 rowsPerPage: 10, 364 rowsPerPage: 10,
365 }, 365 },
366 classRules: [(v) => !!v || "Class is required"], 366 classRules: [(v) => !!v || "Class is required"],
367 sectionRules: [(v) => !!v || "section is required"], 367 sectionRules: [(v) => !!v || "section is required"],
368 subjectRules: [(v) => !!v || "Subject is required"], 368 subjectRules: [(v) => !!v || "Subject is required"],
369 examRules: [(v) => !!v || "Exam is required"], 369 examRules: [(v) => !!v || "Exam is required"],
370 370
371 headerOfMark: [ 371 headerOfMark: [
372 { 372 {
373 align: "", 373 align: "",
374 text: "No", 374 text: "No",
375 sortable: false, 375 sortable: false,
376 value: "No", 376 value: "No",
377 }, 377 },
378 { 378 {
379 text: "Profile Pic", 379 text: "Profile Pic",
380 vaue: "profilePicUrl", 380 vaue: "profilePicUrl",
381 sortable: false, 381 sortable: false,
382 align: "center", 382 align: "center",
383 }, 383 },
384 { 384 {
385 text: "Name", 385 text: "Name",
386 vaue: "name", 386 vaue: "name",
387 sortable: false, 387 sortable: false,
388 align: "center", 388 align: "center",
389 }, 389 },
390 { 390 {
391 text: "Roll No.", 391 text: "Roll No.",
392 value: "rollNo", 392 value: "rollNo",
393 sortable: false, 393 sortable: false,
394 align: "center", 394 align: "center",
395 }, 395 },
396 ], 396 ],
397 headers: [ 397 headers: [
398 { 398 {
399 align: "", 399 align: "",
400 text: "No", 400 text: "No",
401 sortable: false, 401 sortable: false,
402 value: "No", 402 value: "No",
403 }, 403 },
404 { 404 {
405 text: "Profile Pic", 405 text: "Profile Pic",
406 vaue: "profilePicUrl", 406 vaue: "profilePicUrl",
407 sortable: false, 407 sortable: false,
408 align: "center", 408 align: "center",
409 }, 409 },
410 { 410 {
411 text: "Name", 411 text: "Name",
412 vaue: "name", 412 vaue: "name",
413 sortable: false, 413 sortable: false,
414 align: "center", 414 align: "center",
415 }, 415 },
416 { 416 {
417 text: "Roll No.", 417 text: "Roll No.",
418 value: "rollNo", 418 value: "rollNo",
419 sortable: false, 419 sortable: false,
420 align: "center", 420 align: "center",
421 }, 421 },
422 { 422 {
423 text: "Email", 423 text: "Email",
424 value: "email", 424 value: "email",
425 sortable: false, 425 sortable: false,
426 align: "center", 426 align: "center",
427 }, 427 },
428 { text: "Action", value: "", sortable: false, align: "center" }, 428 { text: "Action", value: "", sortable: false, align: "center" },
429 ], 429 ],
430 classList: [], 430 classList: [],
431 examList: [], 431 examList: [],
432 subjects: [], 432 subjects: [],
433 addMark: {}, 433 addMark: {},
434 getMark: {}, 434 getMark: {},
435 getScheduleData: {}, 435 getScheduleData: {},
436 markData: [], 436 markData: [],
437 getStudentData: [], 437 getStudentData: [],
438 getStudentsList: [], 438 getStudentsList: [],
439 token: "", 439 token: "",
440 }), 440 }),
441 watch: { 441 watch: {
442 addMarkDialog: function (val) { 442 addMarkDialog: function (val) {
443 if (!val) { 443 if (!val) {
444 this.addMark = []; 444 this.addMark = [];
445 this.getStudentData = []; 445 this.getStudentData = [];
446 } 446 }
447 }, 447 },
448 }, 448 },
449 methods: { 449 methods: {
450 getClass() { 450 getClass() {
451 this.showLoader = true; 451 this.showLoader = true;
452 http() 452 http()
453 .get("/getClassesList", { 453 .get("/getClassesList", {
454 headers: { Authorization: "Bearer " + this.token }, 454 headers: { Authorization: "Bearer " + this.token },
455 }) 455 })
456 .then((response) => { 456 .then((response) => {
457 this.classList = response.data.data; 457 this.classList = response.data.data;
458 this.showLoader = false; 458 this.showLoader = false;
459 }) 459 })
460 .catch((err) => { 460 .catch((err) => {
461 // console.log("err====>", err); 461 // console.log("err====>", err);
462 this.showLoader = false; 462 this.showLoader = false;
463 }); 463 });
464 }, 464 },
465 getSections(_id) { 465 getSections(_id) {
466 this.showLoader = true; 466 this.showLoader = true;
467 for (let i = 0; i < this.classList.length; i++) { 467 for (let i = 0; i < this.classList.length; i++) {
468 if (_id == this.classList[i]._id) { 468 if (_id == this.classList[i]._id) {
469 this.subjects = this.classList[i].subjects; 469 this.subjects = this.classList[i].subjects;
470 } 470 }
471 } 471 }
472 this.getStudentsList = []; 472 this.getStudentsList = [];
473 http() 473 http()
474 .get( 474 .get(
475 "/getSectionsList", 475 "/getSectionsList",
476 { params: { classId: _id } }, 476 { params: { classId: _id } },
477 { 477 {
478 headers: { Authorization: "Bearer " + this.token }, 478 headers: { Authorization: "Bearer " + this.token },
479 } 479 }
480 ) 480 )
481 .then((response) => { 481 .then((response) => {
482 this.addSection = response.data.data; 482 this.addSection = response.data.data;
483 this.showLoader = false; 483 this.showLoader = false;
484 }) 484 })
485 .catch((err) => { 485 .catch((err) => {
486 this.showLoader = false; 486 this.showLoader = false;
487 // console.log("err====>", err); 487 // console.log("err====>", err);
488 }); 488 });
489 }, 489 },
490 getExamList() { 490 getExamList() {
491 this.showLoader = true; 491 this.showLoader = true;
492 this.loadingSearch = true; 492 this.loadingSearch = true;
493 http() 493 http()
494 .get("/getExamsList", { 494 .get("/getExamsList", {
495 headers: { Authorization: "Bearer " + this.token }, 495 headers: { Authorization: "Bearer " + this.token },
496 }) 496 })
497 .then((response) => { 497 .then((response) => {
498 this.examList = response.data.data; 498 this.examList = response.data.data;
499 this.showLoader = false; 499 this.showLoader = false;
500 this.loadingSearch = false; 500 this.loadingSearch = false;
501 }) 501 })
502 .catch((error) => { 502 .catch((error) => {
503 // console.log("err====>", err); 503 // console.log("err====>", err);
504 this.showLoader = false; 504 this.showLoader = false;
505 this.loadingSearch = false; 505 this.loadingSearch = false;
506 this.snackbar = true; 506 this.snackbar = true;
507 this.text = error.response.data.message; 507 this.text = error.response.data.message;
508 if (error.response.status === 401) { 508 if (error.response.status === 401) {
509 this.$router.replace({ path: "/" }); 509 this.$router.replace({ path: "/" });
510 this.$store.dispatch("setToken", null); 510 this.$store.dispatch("setToken", null);
511 this.$store.dispatch("Id", null); 511 this.$store.dispatch("Id", null);
512 this.$store.dispatch("Role", null); 512 this.$store.dispatch("Role", null);
513 } 513 }
514 }); 514 });
515 }, 515 },
516 findStudents() { 516 findStudents() {
517 this.getStudentData = []; 517 this.getStudentData = [];
518 if (this.$refs.form.validate()) { 518 if (this.$refs.form.validate()) {
519 this.showLoader = true; 519 this.showLoader = true;
520 http() 520 http()
521 .get("/getStudentWithClass", { 521 .get("/getStudentWithClass", {
522 params: { 522 params: {
523 classId: this.addMark.classId, 523 classId: this.addMark.classId,
524 sectionId: this.addMark.sectionId, 524 sectionId: this.addMark.sectionId,
525 }, 525 },
526 }) 526 })
527 .then((response) => { 527 .then((response) => {
528 this.getStudentData = response.data.data; 528 this.getStudentData = response.data.data;
529 // this.showLoader = false; 529 // this.showLoader = false;
530 this.showLoader = true; 530 this.showLoader = true;
531 console.log("studentData - ",this.getStudentData)
531 http() 532 http()
532 .get("/getMarkDistributionsList", { 533 .get("/getMarkDistributionsList", {
533 params: this.addMark, 534 params: this.addMark,
534 }) 535 })
535 .then((response) => { 536 .then((response) => {
536 this.showLoader = false; 537 this.showLoader = false;
537 this.headerOfMark.length = 4; 538 this.headerOfMark.length = 4;
538 for (var i = 0; i < response.data.data.length; i++) { 539 for (var i = 0; i < response.data.data.length; i++) {
539 this.headerOfMark.push({ 540 this.headerOfMark.push({
540 text: 541 text:
541 response.data.data[i].distributionType + 542 response.data.data[i].distributionType +
542 " (" + 543 " (" +
543 response.data.data[i].markValue + 544 response.data.data[i].markValue +
544 ")", 545 ")",
545 sortable: false, 546 sortable: false,
546 align: "center", 547 align: "center",
547 }); 548 });
548 } 549 }
549 for (var n = 0; n < this.getStudentData.length; n++) { 550 for (var n = 0; n < this.getStudentData.length; n++) {
550 this.getStudentData[n].marksObtained = []; 551 this.getStudentData[n].marksObtained = [];
551 for (var j = 0; j < response.data.data.length; j++) { 552 for (var j = 0; j < response.data.data.length; j++) {
552 this.getStudentData[n].marksObtained.push({ 553 this.getStudentData[n].marksObtained.push({
553 markDistributionId: response.data.data[j]._id, 554 markDistributionId: response.data.data[j]._id,
554 marksScored: 0, 555 marksScored: 0,
555 markValue: response.data.data[j].markValue, 556 markValue: response.data.data[j].markValue,
556 distributionType: response.data.data[j].distributionType, 557 distributionType: response.data.data[j].distributionType,
557 }); 558 });
558 } 559 }
559 // if (marks.marksScored > marks.marksObtained) { 560 // if (marks.marksScored > marks.marksObtained) {
560 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; 561 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained;
561 // this.marks.marksScored = marks.marksObtained; 562 // this.marks.marksScored = marks.marksObtained;
562 // } 563 // }
563 } 564 }
564 }) 565 })
565 .catch((error) => { 566 .catch((error) => {
566 this.showLoader = false; 567 this.showLoader = false;
567 }); 568 });
568 }) 569 })
569 .catch((error) => { 570 .catch((error) => {
570 this.showLoader = false; 571 this.showLoader = false;
571 }); 572 });
572 } 573 }
573 }, 574 },
574 async submit() { 575 async submit() {
575 for (let [j, item] of this.getStudentData.entries()) { 576 for (let [j, item] of this.getStudentData.entries()) {
576 for (var k = 0; k < item.marksObtained.length; k++) { 577 for (var k = 0; k < item.marksObtained.length; k++) {
577 if ( 578 if (
578 item.marksObtained[k].marksScored > item.marksObtained[k].markValue 579 item.marksObtained[k].marksScored > item.marksObtained[k].markValue
579 ) { 580 ) {
580 this.snackbar = true; 581 this.snackbar = true;
581 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in 582 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in
582 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; 583 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`;
583 this.color = "error"; 584 this.color = "error";
584 return; 585 return;
585 } 586 }
586 } 587 }
587 let data = { 588 let data = {
588 examId: this.addMark.examId, 589 examId: this.addMark.examId,
589 classId: this.addMark.classId, 590 classId: this.addMark.classId,
590 sectionId: this.addMark.sectionId, 591 sectionId: this.addMark.sectionId,
591 subjectId: this.addMark.subjectId, 592 subjectId: this.addMark.subjectId,
592 studentId: item._id, 593 studentId: item._id,
593 studentsMarks: item.marksObtained, 594 studentsMarks: item.marksObtained,
594 }; 595 };
595 try { 596 try {
596 let response = await http().post("/createMark", data); 597 let response = await http().post("/createMark", data);
597 if (j + 1 === this.getStudentData.length) { 598 if (j + 1 === this.getStudentData.length) {
598 this.getStudentData = []; 599 this.getStudentData = [];
599 this.snackbar = true; 600 this.snackbar = true;
600 this.addMarkDialog = false; 601 this.addMarkDialog = false;
601 this.text = response.data.message; 602 this.text = response.data.message;
602 this.color = "green"; 603 this.color = "green";
603 this.$refs.form.reset(); 604 this.$refs.form.reset();
604 } 605 }
605 } catch (error) { 606 } catch (error) {
606 this.snackbar = true; 607 this.snackbar = true;
607 this.text = error.response.data.message; 608 this.text = error.response.data.message;
608 this.color = "red"; 609 this.color = "red";
609 } 610 }
610 } 611 }
611 }, 612 },
612 getStudents() { 613 getStudents() {
613 this.showLoader = true; 614 this.showLoader = true;
614 http() 615 http()
615 .get("/getStudentWithClass", { 616 .get("/getStudentWithClass", {
616 params: { 617 params: {
617 classId: this.getMark.classId, 618 classId: this.getMark.classId,
618 sectionId: this.getMark.sectionId, 619 sectionId: this.getMark.sectionId,
619 }, 620 },
620 }) 621 })
621 .then((response) => { 622 .then((response) => {
622 this.getStudentsList = response.data.data; 623 this.getStudentsList = response.data.data;
623 this.showLoader = false; 624 this.showLoader = false;
624 }) 625 })
625 .catch((error) => { 626 .catch((error) => {
626 // console.log("err====>", error); 627 // console.log("err====>", error);
627 this.showLoader = false; 628 this.showLoader = false;
628 this.snackbar = true; 629 this.snackbar = true;
629 this.color = "error"; 630 this.color = "error";
630 this.text = error.response.data.message; 631 this.text = error.response.data.message;
631 }); 632 });
632 }, 633 },
633 displaySearch() { 634 displaySearch() {
634 (this.show = false), (this.showSearch = true); 635 (this.show = false), (this.showSearch = true);
635 }, 636 },
636 closeSearch() { 637 closeSearch() {
637 this.showSearch = false; 638 this.showSearch = false;
638 this.show = true; 639 this.show = true;
639 this.search = ""; 640 this.search = "";
640 }, 641 },
641 }, 642 },
642 mounted() { 643 mounted() {
643 this.token = this.$store.state.token; 644 this.token = this.$store.state.token;
644 this.getClass(); 645 this.getClass();
645 this.getExamList(); 646 this.getExamList();
646 }, 647 },
647 }; 648 };
648 </script> 649 </script>
649 <style scoped> 650 <style scoped>
650 .markTable { 651 .markTable {
651 max-width: 80px !important; 652 max-width: 80px !important;
652 } 653 }
653 </style> 654 </style>
654 655
655 656
656 657
657 658
658 659
659 660
660 661
661 662
662 663
663 664
664 665
665 666
666 667
667 668
668 669
669 670
670 671
671 672
672 673
673 674
674 675
675 676