viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit dcbf19cba49fd73536b8af68cc61fa35a86c7caa

Authored by Amber Dev
1 parent 7efe027624
Exists in master and in 2 other branches amber-development, ui-design

further reset forms

Showing 3 changed files with 5 additions and 3 deletions   Show diff stats
src/pages/Academic/subject.vue
Diff comments   View file @dcbf19c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editSubjectDialog" max-width="600px"> 4 <v-dialog v-model="editSubjectDialog" max-width="600px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Subject</label> 8 <label class="title text-xs-center">Edit Subject</label>
9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> 13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Class:</label> 16 <label class="right">Class:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-select 19 <v-select
20 v-model="editedItem.classId" 20 v-model="editedItem.classId"
21 label="Select your class" 21 label="Select your class"
22 type="text" 22 type="text"
23 :items="classList" 23 :items="classList"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 :rules="classRules" 26 :rules="classRules"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm4 class="pt-4 subheading"> 32 <v-flex xs4 sm4 class="pt-4 subheading">
33 <label class="right">Teacher Name :</label> 33 <label class="right">Teacher Name :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-3"> 35 <v-flex xs8 sm8 class="ml-3">
36 <v-select 36 <v-select
37 v-model="editedItem.teacherId" 37 v-model="editedItem.teacherId"
38 label="Select your teacher" 38 label="Select your teacher"
39 type="text" 39 type="text"
40 :items="teacherList" 40 :items="teacherList"
41 item-text="name" 41 item-text="name"
42 item-value="_id" 42 item-value="_id"
43 :rules="teacherRules" 43 :rules="teacherRules"
44 required 44 required
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs4 sm4 class="pt-4 sybheading"> 49 <v-flex xs4 sm4 class="pt-4 sybheading">
50 <label class="right">Type :</label> 50 <label class="right">Type :</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8 sm8 class="ml-3"> 52 <v-flex xs8 sm8 class="ml-3">
53 <v-select 53 <v-select
54 v-model="editedItem.type" 54 v-model="editedItem.type"
55 :items="type" 55 :items="type"
56 label="Select your Type" 56 label="Select your Type"
57 :rules="typeRules" 57 :rules="typeRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 sm4 class="pt-4 subheading"> 63 <v-flex xs4 sm4 class="pt-4 subheading">
64 <label class="right">Pass Mark :</label> 64 <label class="right">Pass Mark :</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm8 class="ml-3"> 66 <v-flex xs8 sm8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 label="Fill your Pass Mark" 68 label="Fill your Pass Mark"
69 name="name" 69 name="name"
70 type="text" 70 type="text"
71 :rules="markRules" 71 :rules="markRules"
72 v-model="editedItem.passMarks" 72 v-model="editedItem.passMarks"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm4 class="pt-4 subheading"> 78 <v-flex xs4 sm4 class="pt-4 subheading">
79 <label class="right">Final Mark :</label> 79 <label class="right">Final Mark :</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs8 sm8 class="ml-3"> 81 <v-flex xs8 sm8 class="ml-3">
82 <v-text-field 82 <v-text-field
83 label="Fill your final mark" 83 label="Fill your final mark"
84 name="name" 84 name="name"
85 type="text" 85 type="text"
86 :rules="finalRules" 86 :rules="finalRules"
87 v-model="editedItem.finalMarks" 87 v-model="editedItem.finalMarks"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Subject:</label> 94 <label class="right">Subject:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 class="ml-3"> 96 <v-flex xs8 class="ml-3">
97 <v-text-field 97 <v-text-field
98 placeholder="fill your Subject" 98 placeholder="fill your Subject"
99 v-model="editedItem.subjectName" 99 v-model="editedItem.subjectName"
100 :rules="subjectRules" 100 :rules="subjectRules"
101 type="text" 101 type="text"
102 name="email" 102 name="email"
103 required 103 required
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 sm4 class="pt-4 subheading"> 108 <v-flex xs4 sm4 class="pt-4 subheading">
109 <label class="right">Subject Author :</label> 109 <label class="right">Subject Author :</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm8 class="ml-3"> 111 <v-flex xs8 sm8 class="ml-3">
112 <v-text-field 112 <v-text-field
113 v-model="editedItem.subjectAuthor" 113 v-model="editedItem.subjectAuthor"
114 placeholder="fill your Subject Author" 114 placeholder="fill your Subject Author"
115 name="name" 115 name="name"
116 type="text" 116 type="text"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 sm4 class="pt-4 subheading"> 121 <v-flex xs4 sm4 class="pt-4 subheading">
122 <label class="right">Subject Code:</label> 122 <label class="right">Subject Code:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8 sm8 class="ml-3"> 124 <v-flex xs8 sm8 class="ml-3">
125 <v-text-field 125 <v-text-field
126 v-model="editedItem.subjectCode" 126 v-model="editedItem.subjectCode"
127 placeholder="fill your Subject Code" 127 placeholder="fill your Subject Code"
128 name="name" 128 name="name"
129 type="text" 129 type="text"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-flex xs12 sm12> 133 <v-flex xs12 sm12>
134 <v-card-actions> 134 <v-card-actions>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-btn 136 <v-btn
137 round 137 round
138 dark 138 dark
139 @click="save" 139 @click="save"
140 :loading="editLoading" 140 :loading="editLoading"
141 class="add-button" 141 class="add-button"
142 >Update Subject</v-btn> 142 >Update Subject</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-form> 145 </v-form>
146 </v-container> 146 </v-container>
147 </v-card> 147 </v-card>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
151 151
152 <v-dialog v-model="viewSubjectDialog" max-width="500px"> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px">
153 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12> 155 <v-flex xs12>
156 <label class="title text-xs-center">View Subject</label> 156 <label class="title text-xs-center">View Subject</label>
157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> 157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-card-text> 160 <v-card-text>
161 <v-container grid-list-md> 161 <v-container grid-list-md>
162 <v-layout wrap> 162 <v-layout wrap>
163 <v-flex> 163 <v-flex>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <h5 class="right my-1"> 166 <h5 class="right my-1">
167 <b>Subject Name:</b> 167 <b>Subject Name:</b>
168 </h5> 168 </h5>
169 </v-flex> 169 </v-flex>
170 <v-flex sm8 xs6> 170 <v-flex sm8 xs6>
171 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 171 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout> 174 <v-layout>
175 <v-flex xs6 sm4> 175 <v-flex xs6 sm4>
176 <h5 class="right my-1"> 176 <h5 class="right my-1">
177 <b>Subject Author:</b> 177 <b>Subject Author:</b>
178 </h5> 178 </h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm8 xs6> 180 <v-flex sm8 xs6>
181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> 181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs6 sm4> 185 <v-flex xs6 sm4>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Subject :</b> 187 <b>Subject :</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm8 xs6> 190 <v-flex sm8 xs6>
191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <!-- <v-layout> 194 <!-- <v-layout>
195 <v-flex xs6 sm4> 195 <v-flex xs6 sm4>
196 <h5 class="right my-1"> 196 <h5 class="right my-1">
197 <b>Teacher :</b> 197 <b>Teacher :</b>
198 </h5> 198 </h5>
199 </v-flex> 199 </v-flex>
200 <v-flex sm8 xs6> 200 <v-flex sm8 xs6>
201 <h5 class="my-1">{{ editedItem.teacherId }}</h5> 201 <h5 class="my-1">{{ editedItem.teacherId }}</h5>
202 </v-flex> 202 </v-flex>
203 </v-layout>--> 203 </v-layout>-->
204 <v-layout> 204 <v-layout>
205 <v-flex xs6 sm4> 205 <v-flex xs6 sm4>
206 <h5 class="right my-1"> 206 <h5 class="right my-1">
207 <b>Pass Marks :</b> 207 <b>Pass Marks :</b>
208 </h5> 208 </h5>
209 </v-flex> 209 </v-flex>
210 <v-flex sm8 xs6> 210 <v-flex sm8 xs6>
211 <h5 class="my-1">{{ editedItem.passMarks }}</h5> 211 <h5 class="my-1">{{ editedItem.passMarks }}</h5>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout> 214 <v-layout>
215 <v-flex xs6 sm4> 215 <v-flex xs6 sm4>
216 <h5 class="right my-1"> 216 <h5 class="right my-1">
217 <b>Final Marks :</b> 217 <b>Final Marks :</b>
218 </h5> 218 </h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm8 xs6> 220 <v-flex sm8 xs6>
221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5> 221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <h5 class="right my-1"> 226 <h5 class="right my-1">
227 <b>Type :</b> 227 <b>Type :</b>
228 </h5> 228 </h5>
229 </v-flex> 229 </v-flex>
230 <v-flex sm8 xs6> 230 <v-flex sm8 xs6>
231 <h5 class="my-1">{{ editedItem.type }}</h5> 231 <h5 class="my-1">{{ editedItem.type }}</h5>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-container> 236 </v-container>
237 </v-card-text> 237 </v-card-text>
238 </v-card> 238 </v-card>
239 </v-dialog> 239 </v-dialog>
240 240
241 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 241 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
242 <v-toolbar color="transparent" flat> 242 <v-toolbar color="transparent" flat>
243 <v-btn 243 <v-btn
244 fab 244 fab
245 dark 245 dark
246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
247 small 247 small
248 @click="addSubjectDialog = true" 248 @click="addSubjectDialog = true"
249 > 249 >
250 <v-icon dark>add</v-icon> 250 <v-icon dark>add</v-icon>
251 </v-btn> 251 </v-btn>
252 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 252 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
253 <v-btn 253 <v-btn
254 round 254 round
255 class="open-dialog-button" 255 class="open-dialog-button"
256 dark 256 dark
257 @click="addSubjectDialog = true" 257 @click="addSubjectDialog = true"
258 v-if="role != 'TEACHER' " 258 v-if="role != 'TEACHER' "
259 > 259 >
260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject 260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
261 </v-btn> 261 </v-btn>
262 </v-flex> 262 </v-flex>
263 <v-spacer></v-spacer> 263 <v-spacer></v-spacer>
264 <v-flex lg2 md2 xs12 v-show="show"> 264 <v-flex lg2 md2 xs12 v-show="show">
265 <v-select 265 <v-select
266 :items="classList" 266 :items="classList"
267 label="Select Your Class" 267 label="Select Your Class"
268 v-model="getSubject.classId" 268 v-model="getSubject.classId"
269 item-text="classNum" 269 item-text="classNum"
270 item-value="_id" 270 item-value="_id"
271 name="Select Class" 271 name="Select Class"
272 :rules="classRules" 272 :rules="classRules"
273 @change="getClassSubject" 273 @change="getClassSubject"
274 class="pl-2" 274 class="pl-2"
275 required 275 required
276 ></v-select> 276 ></v-select>
277 </v-flex> 277 </v-flex>
278 <v-card-title class="body-1" v-show="show"> 278 <v-card-title class="body-1" v-show="show">
279 <v-btn icon flat @click="displaySearch"> 279 <v-btn icon flat @click="displaySearch">
280 <v-avatar size="27"> 280 <v-avatar size="27">
281 <img src="/static/icon/search.png" alt="icon" /> 281 <img src="/static/icon/search.png" alt="icon" />
282 </v-avatar> 282 </v-avatar>
283 </v-btn> 283 </v-btn>
284 </v-card-title> 284 </v-card-title>
285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
286 <v-layout> 286 <v-layout>
287 <v-text-field 287 <v-text-field
288 autofocus 288 autofocus
289 v-model="search" 289 v-model="search"
290 label="Search" 290 label="Search"
291 prepend-inner-icon="search" 291 prepend-inner-icon="search"
292 color="primary" 292 color="primary"
293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
294 ></v-text-field> 294 ></v-text-field>
295 <v-icon @click="closeSearch" color="error">close</v-icon> 295 <v-icon @click="closeSearch" color="error">close</v-icon>
296 </v-layout> 296 </v-layout>
297 </v-flex> 297 </v-flex>
298 </v-toolbar> 298 </v-toolbar>
299 <v-data-table 299 <v-data-table
300 :headers="headers" 300 :headers="headers"
301 :items="subjectList.subjects" 301 :items="subjectList.subjects"
302 :pagination.sync="pagination" 302 :pagination.sync="pagination"
303 :search="search" 303 :search="search"
304 > 304 >
305 <template slot="items" slot-scope="props"> 305 <template slot="items" slot-scope="props">
306 <tr class="tr"> 306 <tr class="tr">
307 <td class="td-row td">{{ props.index + 1 }}</td> 307 <td class="td-row td">{{ props.index + 1 }}</td>
308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> 308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> 309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> 310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> 311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> 312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> 313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
314 <td class="text-xs-center td td-row">{{ props.item.type }}</td> 314 <td class="text-xs-center td td-row">{{ props.item.type }}</td>
315 315
316 <!-- <td class="text-xs-center td td-row"> 316 <!-- <td class="text-xs-center td td-row">
317 <span> 317 <span>
318 <v-tooltip top> 318 <v-tooltip top>
319 <img 319 <img
320 slot="activator" 320 slot="activator"
321 style="cursor:pointer; width:25px; height:25px; " 321 style="cursor:pointer; width:25px; height:25px; "
322 class="mr-3" 322 class="mr-3"
323 @click="profile(props.item)" 323 @click="profile(props.item)"
324 src="/static/icon/view.png" 324 src="/static/icon/view.png"
325 /> 325 />
326 <span>View</span> 326 <span>View</span>
327 </v-tooltip> 327 </v-tooltip>
328 <v-tooltip top> 328 <v-tooltip top>
329 <img 329 <img
330 slot="activator" 330 slot="activator"
331 style="cursor:pointer; width:20px; height:18px; " 331 style="cursor:pointer; width:20px; height:18px; "
332 class="mr-3" 332 class="mr-3"
333 @click="editItem(props.item)" 333 @click="editItem(props.item)"
334 src="/static/icon/edit.png" 334 src="/static/icon/edit.png"
335 /> 335 />
336 <span>Edit</span> 336 <span>Edit</span>
337 </v-tooltip> 337 </v-tooltip>
338 <v-tooltip top> 338 <v-tooltip top>
339 <img 339 <img
340 slot="activator" 340 slot="activator"
341 style="cursor:pointer; width:20px; height:20px; " 341 style="cursor:pointer; width:20px; height:20px; "
342 class="mr-3" 342 class="mr-3"
343 @click="deleteItem(props.item)" 343 @click="deleteItem(props.item)"
344 src="/static/icon/delete.png" 344 src="/static/icon/delete.png"
345 /> 345 />
346 <span>Delete</span> 346 <span>Delete</span>
347 </v-tooltip> 347 </v-tooltip>
348 </span> 348 </span>
349 </td>--> 349 </td>-->
350 </tr> 350 </tr>
351 </template> 351 </template>
352 <v-alert 352 <v-alert
353 slot="no-results" 353 slot="no-results"
354 :value="true" 354 :value="true"
355 color="error" 355 color="error"
356 icon="warning" 356 icon="warning"
357 >Your search for "{{ search }}" found no results.</v-alert> 357 >Your search for "{{ search }}" found no results.</v-alert>
358 </v-data-table> 358 </v-data-table>
359 <!-- ****** ADD MULTIPLE Subject ****** --> 359 <!-- ****** ADD MULTIPLE Subject ****** -->
360 <v-snackbar 360 <v-snackbar
361 :timeout="timeout" 361 :timeout="timeout"
362 :top="y === 'top'" 362 :top="y === 'top'"
363 :right="x === 'right'" 363 :right="x === 'right'"
364 :vertical="mode === 'vertical'" 364 :vertical="mode === 'vertical'"
365 v-model="snackbar" 365 v-model="snackbar"
366 :color="color" 366 :color="color"
367 >{{ text }}</v-snackbar> 367 >{{ text }}</v-snackbar>
368 <v-dialog v-model="addSubjectDialog" max-width="600px"> 368 <v-dialog v-model="addSubjectDialog" max-width="600px">
369 <v-card flat class="card-style pa-2" dark> 369 <v-card flat class="card-style pa-2" dark>
370 <v-layout> 370 <v-layout>
371 <v-flex xs12> 371 <v-flex xs12>
372 <label class="title text-xs-center">Add Subject</label> 372 <label class="title text-xs-center">Add Subject</label>
373 <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> 373 <v-icon size="24" class="right" @click="$refs.form.reset();addSubjectDialog = false">cancel</v-icon>
374 </v-flex> 374 </v-flex>
375 </v-layout> 375 </v-layout>
376 <v-container fluid fill-height> 376 <v-container fluid fill-height>
377 <v-layout align-center> 377 <v-layout align-center>
378 <v-flex xs12> 378 <v-flex xs12>
379 <v-form ref="form" v-model="valid" lazy-validation> 379 <v-form ref="form" v-model="valid" lazy-validation>
380 <v-layout> 380 <v-layout>
381 <v-flex xs4 sm4 class="pt-4 subheading"> 381 <v-flex xs4 sm4 class="pt-4 subheading">
382 <label class="right">Class Name :</label> 382 <label class="right">Class Name :</label>
383 </v-flex> 383 </v-flex>
384 <v-flex xs8 sm8 class="ml-3"> 384 <v-flex xs8 sm8 class="ml-3">
385 <v-select 385 <v-select
386 v-model="addSubject.classId" 386 v-model="addSubject.classId"
387 label="Select your class" 387 label="Select your class"
388 type="text" 388 type="text"
389 :items="classList" 389 :items="classList"
390 item-text="classNum" 390 item-text="classNum"
391 item-value="_id" 391 item-value="_id"
392 :rules="classRules" 392 :rules="classRules"
393 required 393 required
394 ></v-select> 394 ></v-select>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 <v-layout> 397 <v-layout>
398 <v-flex xs4 sm4 class="pt-4 subheading"> 398 <v-flex xs4 sm4 class="pt-4 subheading">
399 <label class="right">Teacher Name :</label> 399 <label class="right">Teacher Name :</label>
400 </v-flex> 400 </v-flex>
401 <v-flex xs8 sm8 class="ml-3"> 401 <v-flex xs8 sm8 class="ml-3">
402 <v-select 402 <v-select
403 v-model="addSubject.teacherId" 403 v-model="addSubject.teacherId"
404 label="Select your teacher" 404 label="Select your teacher"
405 type="text" 405 type="text"
406 :items="teacherList" 406 :items="teacherList"
407 item-text="name" 407 item-text="name"
408 item-value="_id" 408 item-value="_id"
409 :rules="teacherRules" 409 :rules="teacherRules"
410 required 410 required
411 ></v-select> 411 ></v-select>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 <v-layout> 414 <v-layout>
415 <v-flex xs4 sm4 class="pt-4 sybheading"> 415 <v-flex xs4 sm4 class="pt-4 sybheading">
416 <label class="right">Type :</label> 416 <label class="right">Type :</label>
417 </v-flex> 417 </v-flex>
418 <v-flex xs8 sm8 class="ml-3"> 418 <v-flex xs8 sm8 class="ml-3">
419 <v-select 419 <v-select
420 v-model="addSubject.type" 420 v-model="addSubject.type"
421 :items="type" 421 :items="type"
422 label="Select your Type" 422 label="Select your Type"
423 :rules="typeRules" 423 :rules="typeRules"
424 required 424 required
425 ></v-select> 425 ></v-select>
426 </v-flex> 426 </v-flex>
427 </v-layout> 427 </v-layout>
428 <v-layout> 428 <v-layout>
429 <v-flex xs4 sm4 class="pt-4 subheading"> 429 <v-flex xs4 sm4 class="pt-4 subheading">
430 <label class="right">Pass Mark :</label> 430 <label class="right">Pass Mark :</label>
431 </v-flex> 431 </v-flex>
432 <v-flex xs8 sm8 class="ml-3"> 432 <v-flex xs8 sm8 class="ml-3">
433 <v-text-field 433 <v-text-field
434 label="Fill your Pass Mark" 434 label="Fill your Pass Mark"
435 name="name" 435 name="name"
436 type="text" 436 type="text"
437 :rules="markRules" 437 :rules="markRules"
438 v-model="addSubject.passMarks" 438 v-model="addSubject.passMarks"
439 required 439 required
440 ></v-text-field> 440 ></v-text-field>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 <v-layout> 443 <v-layout>
444 <v-flex xs4 sm4 class="pt-4 subheading"> 444 <v-flex xs4 sm4 class="pt-4 subheading">
445 <label class="right">Final Mark :</label> 445 <label class="right">Final Mark :</label>
446 </v-flex> 446 </v-flex>
447 <v-flex xs8 sm8 class="ml-3"> 447 <v-flex xs8 sm8 class="ml-3">
448 <v-text-field 448 <v-text-field
449 label="Fill your final mark" 449 label="Fill your final mark"
450 name="name" 450 name="name"
451 type="text" 451 type="text"
452 :rules="finalRules" 452 :rules="finalRules"
453 v-model="addSubject.finalMarks" 453 v-model="addSubject.finalMarks"
454 required 454 required
455 ></v-text-field> 455 ></v-text-field>
456 </v-flex> 456 </v-flex>
457 </v-layout> 457 </v-layout>
458 <v-layout> 458 <v-layout>
459 <v-flex xs4 sm4 class="pt-4 subheading"> 459 <v-flex xs4 sm4 class="pt-4 subheading">
460 <label class="right">Subject :</label> 460 <label class="right">Subject :</label>
461 </v-flex> 461 </v-flex>
462 <v-flex xs8 sm8 class="ml-3"> 462 <v-flex xs8 sm8 class="ml-3">
463 <v-text-field 463 <v-text-field
464 v-model="addSubject.subjectName" 464 v-model="addSubject.subjectName"
465 placeholder="fill your Subject Name" 465 placeholder="fill your Subject Name"
466 name="name" 466 name="name"
467 type="text" 467 type="text"
468 :rules="subjectRules" 468 :rules="subjectRules"
469 required 469 required
470 ></v-text-field> 470 ></v-text-field>
471 </v-flex> 471 </v-flex>
472 </v-layout> 472 </v-layout>
473 <v-layout> 473 <v-layout>
474 <v-flex xs4 sm4 class="pt-4 subheading"> 474 <v-flex xs4 sm4 class="pt-4 subheading">
475 <label class="right">Subject Author :</label> 475 <label class="right">Subject Author :</label>
476 </v-flex> 476 </v-flex>
477 <v-flex xs8 sm8 class="ml-3"> 477 <v-flex xs8 sm8 class="ml-3">
478 <v-text-field 478 <v-text-field
479 v-model="addSubject.subjectAuthor" 479 v-model="addSubject.subjectAuthor"
480 placeholder="fill your Subject Author" 480 placeholder="fill your Subject Author"
481 name="name" 481 name="name"
482 type="text" 482 type="text"
483 ></v-text-field> 483 ></v-text-field>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 <v-layout> 486 <v-layout>
487 <v-flex xs4 sm4 class="pt-4 subheading"> 487 <v-flex xs4 sm4 class="pt-4 subheading">
488 <label class="right">Subject Code:</label> 488 <label class="right">Subject Code:</label>
489 </v-flex> 489 </v-flex>
490 <v-flex xs8 sm8 class="ml-3"> 490 <v-flex xs8 sm8 class="ml-3">
491 <v-text-field 491 <v-text-field
492 v-model="addSubject.subjectCode" 492 v-model="addSubject.subjectCode"
493 placeholder="fill your Subject Code" 493 placeholder="fill your Subject Code"
494 name="name" 494 name="name"
495 type="text" 495 type="text"
496 ></v-text-field> 496 ></v-text-field>
497 </v-flex> 497 </v-flex>
498 </v-layout> 498 </v-layout>
499 <v-layout> 499 <v-layout>
500 <v-flex xs12 sm12> 500 <v-flex xs12 sm12>
501 <v-card-actions> 501 <v-card-actions>
502 <v-spacer></v-spacer> 502 <v-spacer></v-spacer>
503 <v-btn 503 <v-btn
504 @click="submit" 504 @click="submit"
505 round 505 round
506 dark 506 dark
507 :loading="addLoading" 507 :loading="addLoading"
508 class="add-button" 508 class="add-button"
509 >Add Subject</v-btn> 509 >Add Subject</v-btn>
510 </v-card-actions> 510 </v-card-actions>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 </v-form> 513 </v-form>
514 </v-flex> 514 </v-flex>
515 </v-layout> 515 </v-layout>
516 </v-container> 516 </v-container>
517 </v-card> 517 </v-card>
518 </v-dialog> 518 </v-dialog>
519 <div class="loader" v-if="showLoader"> 519 <div class="loader" v-if="showLoader">
520 <v-progress-circular indeterminate color="white"></v-progress-circular> 520 <v-progress-circular indeterminate color="white"></v-progress-circular>
521 </div> 521 </div>
522 </v-container> 522 </v-container>
523 </template> 523 </template>
524 524
525 <script> 525 <script>
526 import http from "@/Services/http.js"; 526 import http from "@/Services/http.js";
527 import Util from "@/util"; 527 import Util from "@/util";
528 528
529 export default { 529 export default {
530 data: () => ({ 530 data: () => ({
531 snackbar: false, 531 snackbar: false,
532 y: "top", 532 y: "top",
533 x: "right", 533 x: "right",
534 role: "", 534 role: "",
535 mode: "", 535 mode: "",
536 timeout: 3000, 536 timeout: 3000,
537 text: "", 537 text: "",
538 color: "", 538 color: "",
539 show: true, 539 show: true,
540 showSearch: false, 540 showSearch: false,
541 showLoader: false, 541 showLoader: false,
542 loading: false, 542 loading: false,
543 editLoading: false, 543 editLoading: false,
544 addLoading: false, 544 addLoading: false,
545 date: null, 545 date: null,
546 search: "", 546 search: "",
547 viewSubjectDialog: false, 547 viewSubjectDialog: false,
548 editSubjectDialog: false, 548 editSubjectDialog: false,
549 valid: true, 549 valid: true,
550 validEditSubject: true, 550 validEditSubject: true,
551 addSubjectDialog: false, 551 addSubjectDialog: false,
552 // isActive: true, 552 // isActive: true,
553 // newActive: false, 553 // newActive: false,
554 type: ["Optional", "Mandatory"], 554 type: ["Optional", "Mandatory"],
555 pagination: { 555 pagination: {
556 rowsPerPage: 10, 556 rowsPerPage: 10,
557 }, 557 },
558 token: "", 558 token: "",
559 classRules: [(v) => !!v || " Class Name is required"], 559 classRules: [(v) => !!v || " Class Name is required"],
560 teacherRules: [(v) => !!v || " Teacher Name is required"], 560 teacherRules: [(v) => !!v || " Teacher Name is required"],
561 typeRules: [(v) => !!v || "Type is required"], 561 typeRules: [(v) => !!v || "Type is required"],
562 markRules: [(v) => !!v || " Pass Mark is required"], 562 markRules: [(v) => !!v || " Pass Mark is required"],
563 finalRules: [(v) => !!v || "Final MArk is required"], 563 finalRules: [(v) => !!v || "Final MArk is required"],
564 subjectRules: [(v) => !!v || " Subject Name is required"], 564 subjectRules: [(v) => !!v || " Subject Name is required"],
565 headers: [ 565 headers: [
566 { 566 {
567 text: "No", 567 text: "No",
568 align: "", 568 align: "",
569 sortable: false, 569 sortable: false,
570 value: "No", 570 value: "No",
571 }, 571 },
572 { 572 {
573 text: "Subject Name", 573 text: "Subject Name",
574 value: "subjectName", 574 value: "subjectName",
575 sortable: false, 575 sortable: false,
576 align: "center", 576 align: "center",
577 }, 577 },
578 { 578 {
579 text: "Subject Author", 579 text: "Subject Author",
580 value: "subjectAuthor", 580 value: "subjectAuthor",
581 sortable: false, 581 sortable: false,
582 align: "center", 582 align: "center",
583 }, 583 },
584 { 584 {
585 text: "Subject Code", 585 text: "Subject Code",
586 value: "subjectCode", 586 value: "subjectCode",
587 sortable: false, 587 sortable: false,
588 align: "center", 588 align: "center",
589 }, 589 },
590 // { 590 // {
591 // text: "Teacher", 591 // text: "Teacher",
592 // value: "teacherId", 592 // value: "teacherId",
593 // sortable: false, 593 // sortable: false,
594 // align: "center" 594 // align: "center"
595 // }, 595 // },
596 { 596 {
597 text: "Pass Marks", 597 text: "Pass Marks",
598 value: "passMarks", 598 value: "passMarks",
599 sortable: false, 599 sortable: false,
600 align: "center", 600 align: "center",
601 }, 601 },
602 { 602 {
603 text: "Final Marks", 603 text: "Final Marks",
604 value: "finalMarks", 604 value: "finalMarks",
605 sortable: false, 605 sortable: false,
606 align: "center", 606 align: "center",
607 }, 607 },
608 { 608 {
609 text: "Type", 609 text: "Type",
610 value: "type", 610 value: "type",
611 sortable: false, 611 sortable: false,
612 align: "center", 612 align: "center",
613 }, 613 },
614 // { text: "Action", value: "", sortable: false, align: "center" } 614 // { text: "Action", value: "", sortable: false, align: "center" }
615 ], 615 ],
616 subjectList: [], 616 subjectList: [],
617 classList: [], 617 classList: [],
618 teacherList: [], 618 teacherList: [],
619 editedIndex: -1, 619 editedIndex: -1,
620 addSubject: {}, 620 addSubject: {},
621 getSubject: {}, 621 getSubject: {},
622 622
623 editedItem: { 623 editedItem: {
624 // subjectName: "", 624 // subjectName: "",
625 // subjectAuthor: "" 625 // subjectAuthor: ""
626 }, 626 },
627 }), 627 }),
628 methods: { 628 methods: {
629 pickFile() { 629 pickFile() {
630 this.$refs.image.click(); 630 this.$refs.image.click();
631 }, 631 },
632 editItem(item) { 632 editItem(item) {
633 this.editedIndex = this.subjectList.subjects; 633 this.editedIndex = this.subjectList.subjects;
634 this.editedItem = Object.assign({}, item); 634 this.editedItem = Object.assign({}, item);
635 this.dialog = true; 635 this.dialog = true;
636 this.editSubjectDialog = true; 636 this.editSubjectDialog = true;
637 }, 637 },
638 profile(item) { 638 profile(item) {
639 this.editedIndex = this.subjectList.subjects; 639 this.editedIndex = this.subjectList.subjects;
640 this.editedItem = Object.assign({}, item); 640 this.editedItem = Object.assign({}, item);
641 this.dialog1 = true; 641 this.dialog1 = true;
642 this.viewSubjectDialog = true; 642 this.viewSubjectDialog = true;
643 }, 643 },
644 deleteItem(item) { 644 deleteItem(item) {
645 let deleteSubject = { 645 let deleteSubject = {
646 classId: this.addSubject.classId, 646 classId: this.addSubject.classId,
647 subjectId: item._id, 647 subjectId: item._id,
648 }; 648 };
649 http() 649 http()
650 .delete( 650 .delete(
651 "/deleteSubject", 651 "/deleteSubject",
652 confirm("Are you sure you want to delete this?") && { 652 confirm("Are you sure you want to delete this?") && {
653 params: deleteSubject, 653 params: deleteSubject,
654 } 654 }
655 ) 655 )
656 .then((response) => { 656 .then((response) => {
657 this.snackbar = true; 657 this.snackbar = true;
658 this.color = "green"; 658 this.color = "green";
659 this.text = "Successfully delete Existing Subject"; 659 this.text = "Successfully delete Existing Subject";
660 this.getClassSubject(this.addSubject.classId); 660 this.getClassSubject(this.addSubject.classId);
661 }) 661 })
662 .catch((error) => { 662 .catch((error) => {
663 // this.snackbar = true; 663 // this.snackbar = true;
664 // this.text = error.response.data.message; 664 // this.text = error.response.data.message;
665 // this.color = "error"; 665 // this.color = "error";
666 console.log("error", error); 666 console.log("error", error);
667 }); 667 });
668 }, 668 },
669 close() { 669 close() {
670 this.editSubjectDialog = false; 670 this.editSubjectDialog = false;
671 }, 671 },
672 close1() { 672 close1() {
673 this.viewSubjectDialog = false; 673 this.viewSubjectDialog = false;
674 }, 674 },
675 submit() { 675 submit() {
676 if (this.$refs.form.validate()) { 676 if (this.$refs.form.validate()) {
677 this.addLoading = true; 677 this.addLoading = true;
678 http() 678 http()
679 .post("/addSubject", this.addSubject) 679 .post("/addSubject", this.addSubject)
680 .then((response) => { 680 .then((response) => {
681 this.snackbar = true; 681 this.snackbar = true;
682 this.text = "New Subject added successfully"; 682 this.text = "New Subject added successfully";
683 this.color = "green"; 683 this.color = "green";
684 this.addLoading = false; 684 this.addLoading = false;
685 this.$refs.form.reset()
685 this.addSubjectDialog = false; 686 this.addSubjectDialog = false;
686 this.getClassSubject(_id); 687 this.getClassSubject(_id);
687 }) 688 })
688 .catch((error) => { 689 .catch((error) => {
689 this.addLoading = false; 690 this.addLoading = false;
690 }); 691 });
691 } 692 }
692 }, 693 },
693 clear() { 694 clear() {
694 this.$refs.form.reset(); 695 this.$refs.form.reset();
695 }, 696 },
696 save() { 697 save() {
697 if (this.$refs.formEditSubject.validate()) { 698 if (this.$refs.formEditSubject.validate()) {
698 let editSubject = { 699 let editSubject = {
699 classId: this.editedItem.classId, 700 classId: this.editedItem.classId,
700 subjectId: this.editedItem._id, 701 subjectId: this.editedItem._id,
701 teacherId: this.editedItem.teacherId, 702 teacherId: this.editedItem.teacherId,
702 type: this.editedItem.type, 703 type: this.editedItem.type,
703 passMarks: this.editedItem.passMarks, 704 passMarks: this.editedItem.passMarks,
704 finalMarks: this.editedItem.finalMarks, 705 finalMarks: this.editedItem.finalMarks,
705 subjectAuthor: this.editedItem.subjectAuthor, 706 subjectAuthor: this.editedItem.subjectAuthor,
706 subjectCode: this.editedItem.subjectCode, 707 subjectCode: this.editedItem.subjectCode,
707 subjectName: this.editedItem.subjectName, 708 subjectName: this.editedItem.subjectName,
708 }; 709 };
709 this.editLoading = true; 710 this.editLoading = true;
710 http() 711 http()
711 .put("/updateSubject", editSubject) 712 .put("/updateSubject", editSubject)
712 .then((response) => { 713 .then((response) => {
713 this.snackbar = true; 714 this.snackbar = true;
714 this.text = "Successfully Edit Existing Subject"; 715 this.text = "Successfully Edit Existing Subject";
715 this.color = "green"; 716 this.color = "green";
716 this.editLoading = false; 717 this.editLoading = false;
717 this.editSubjectDialog = false; 718 this.editSubjectDialog = false;
718 this.getClassSubject(this.editedItem.classId); 719 this.getClassSubject(this.editedItem.classId);
719 }) 720 })
720 .catch((error) => { 721 .catch((error) => {
721 this.editLoading = false; 722 this.editLoading = false;
722 723
723 // console.log(error); 724 // console.log(error);
724 }); 725 });
725 } 726 }
726 }, 727 },
727 getClassSubject(_id) { 728 getClassSubject(_id) {
728 this.showLoader = true; 729 this.showLoader = true;
729 console.log("class", _id); 730 console.log("class", _id);
730 // this.classId = this.classId; 731 // this.classId = this.classId;
731 http() 732 http()
732 .get( 733 .get(
733 "/getParticularClass", 734 "/getParticularClass",
734 { params: { classId: _id } }, 735 { params: { classId: _id } },
735 { 736 {
736 headers: { Authorization: "Bearer " + this.token }, 737 headers: { Authorization: "Bearer " + this.token },
737 } 738 }
738 ) 739 )
739 .then((response) => { 740 .then((response) => {
740 this.subjectList = response.data.data; 741 this.subjectList = response.data.data;
741 this.showLoader = false; 742 this.showLoader = false;
742 }) 743 })
743 .catch((err) => { 744 .catch((err) => {
744 this.showLoader = false; 745 this.showLoader = false;
745 }); 746 });
746 }, 747 },
747 getClass() { 748 getClass() {
748 http() 749 http()
749 .get("/getClassesList", { 750 .get("/getClassesList", {
750 headers: { Authorization: "Bearer " + this.token }, 751 headers: { Authorization: "Bearer " + this.token },
751 }) 752 })
752 .then((response) => { 753 .then((response) => {
753 this.classList = response.data.data; 754 this.classList = response.data.data;
754 }) 755 })
755 .catch((error) => { 756 .catch((error) => {
756 if (error.response.status === 401) { 757 if (error.response.status === 401) {
757 this.$router.replace({ path: "/" }); 758 this.$router.replace({ path: "/" });
758 this.$store.dispatch("setToken", null); 759 this.$store.dispatch("setToken", null);
759 this.$store.dispatch("Id", null); 760 this.$store.dispatch("Id", null);
760 } 761 }
761 }); 762 });
762 }, 763 },
763 getTeacherList() { 764 getTeacherList() {
764 this.showLoader = true; 765 this.showLoader = true;
765 var token = this.$store.state.token; 766 var token = this.$store.state.token;
766 http() 767 http()
767 .get("/getTeachersList", { 768 .get("/getTeachersList", {
768 headers: { Authorization: "Bearer " + token }, 769 headers: { Authorization: "Bearer " + token },
769 }) 770 })
770 .then((response) => { 771 .then((response) => {
771 this.teacherList = response.data.data; 772 this.teacherList = response.data.data;
772 this.showLoader = false; 773 this.showLoader = false;
773 // console.log("getTeacherList=====>",this.desserts) 774 // console.log("getTeacherList=====>",this.desserts)
774 }) 775 })
775 .catch((error) => { 776 .catch((error) => {
776 this.showLoader = false; 777 this.showLoader = false;
777 if (error.response.status === 401) { 778 if (error.response.status === 401) {
778 this.$router.replace({ path: "/" }); 779 this.$router.replace({ path: "/" });
779 this.$store.dispatch("setToken", null); 780 this.$store.dispatch("setToken", null);
780 this.$store.dispatch("Id", null); 781 this.$store.dispatch("Id", null);
781 } 782 }
782 }); 783 });
783 }, 784 },
784 displaySearch() { 785 displaySearch() {
785 (this.show = false), (this.showSearch = true); 786 (this.show = false), (this.showSearch = true);
786 }, 787 },
787 closeSearch() { 788 closeSearch() {
788 this.showSearch = false; 789 this.showSearch = false;
789 this.show = true; 790 this.show = true;
790 this.search = ""; 791 this.search = "";
791 }, 792 },
792 }, 793 },
793 mounted() { 794 mounted() {
794 this.token = this.$store.state.token; 795 this.token = this.$store.state.token;
795 // this.getNoticeDataList(); 796 // this.getNoticeDataList();
796 this.getClass(); 797 this.getClass();
797 this.getTeacherList(); 798 this.getTeacherList();
798 this.role = this.$store.state.role; 799 this.role = this.$store.state.role;
799 }, 800 },
800 }; 801 };
801 </script> 802 </script>
src/pages/Mark/mark.vue
Diff comments   View file @dcbf19c
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 autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 65 <v-text-field autofocus 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="$refs.form.reset();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: 0, 539 marksScored: 0,
540 markValue: response.data.data[j].markValue, 540 markValue: response.data.data[j].markValue,
541 distributionType: response.data.data[j].distributionType 541 distributionType: response.data.data[j].distributionType
542 }); 542 });
543 } 543 }
544 // if (marks.marksScored > marks.marksObtained) { 544 // if (marks.marksScored > marks.marksObtained) {
545 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained; 545 // this.getStudentData[n].marksScored = this.getStudentData[n].marksObtained;
546 // this.marks.marksScored = marks.marksObtained; 546 // this.marks.marksScored = marks.marksObtained;
547 // } 547 // }
548 } 548 }
549 }) 549 })
550 .catch(error => { 550 .catch(error => {
551 this.showLoader = false; 551 this.showLoader = false;
552 }); 552 });
553 }) 553 })
554 .catch(error => { 554 .catch(error => {
555 this.showLoader = false; 555 this.showLoader = false;
556 }); 556 });
557 } 557 }
558 }, 558 },
559 async submit() { 559 async submit() {
560 for (let [j, item] of this.getStudentData.entries()) { 560 for (let [j, item] of this.getStudentData.entries()) {
561 for (var k = 0; k < item.marksObtained.length; k++) { 561 for (var k = 0; k < item.marksObtained.length; k++) {
562 if ( 562 if (
563 item.marksObtained[k].marksScored > item.marksObtained[k].markValue 563 item.marksObtained[k].marksScored > item.marksObtained[k].markValue
564 ) { 564 ) {
565 this.snackbar = true; 565 this.snackbar = true;
566 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in 566 this.text = `Student (${item.name}) marks (${item.marksObtained[k].marksScored}) in
567 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`; 567 "${item.marksObtained[k].distributionType}" should not be greater than Total Marks (${item.marksObtained[k].markValue})`;
568 this.color = "error"; 568 this.color = "error";
569 return; 569 return;
570 } 570 }
571 } 571 }
572 let data = { 572 let data = {
573 examId: this.addMark.examId, 573 examId: this.addMark.examId,
574 classId: this.addMark.classId, 574 classId: this.addMark.classId,
575 sectionId: this.addMark.sectionId, 575 sectionId: this.addMark.sectionId,
576 subjectId: this.addMark.subjectId, 576 subjectId: this.addMark.subjectId,
577 studentId: item._id, 577 studentId: item._id,
578 studentsMarks: item.marksObtained 578 studentsMarks: item.marksObtained
579 }; 579 };
580 try { 580 try {
581 let response = await http().post("/createMark", data); 581 let response = await http().post("/createMark", data);
582 if (j + 1 === this.getStudentData.length) { 582 if (j + 1 === this.getStudentData.length) {
583 this.getStudentData = []; 583 this.getStudentData = [];
584 this.snackbar = true; 584 this.snackbar = true;
585 this.addMarkDialog = false; 585 this.addMarkDialog = false;
586 this.text = response.data.message; 586 this.text = response.data.message;
587 this.color = "green"; 587 this.color = "green";
588 this.$refs.form.reset()
588 } 589 }
589 } catch (error) { 590 } catch (error) {
590 this.snackbar = true; 591 this.snackbar = true;
591 this.text = error.response.data.message; 592 this.text = error.response.data.message;
592 this.color = "red"; 593 this.color = "red";
593 } 594 }
594 } 595 }
595 }, 596 },
596 getStudents() { 597 getStudents() {
597 this.showLoader = true; 598 this.showLoader = true;
598 http() 599 http()
599 .get("/getStudentWithClass", { 600 .get("/getStudentWithClass", {
600 params: { 601 params: {
601 classId: this.getMark.classId, 602 classId: this.getMark.classId,
602 sectionId: this.getMark.sectionId 603 sectionId: this.getMark.sectionId
603 } 604 }
604 }) 605 })
605 .then(response => { 606 .then(response => {
606 this.getStudentsList = response.data.data; 607 this.getStudentsList = response.data.data;
607 this.showLoader = false; 608 this.showLoader = false;
608 }) 609 })
609 .catch(error => { 610 .catch(error => {
610 console.log("err====>", error); 611 console.log("err====>", error);
611 this.showLoader = false; 612 this.showLoader = false;
612 }); 613 });
613 }, 614 },
614 displaySearch() { 615 displaySearch() {
615 (this.show = false), (this.showSearch = true); 616 (this.show = false), (this.showSearch = true);
616 }, 617 },
617 closeSearch() { 618 closeSearch() {
618 this.showSearch = false; 619 this.showSearch = false;
619 this.show = true; 620 this.show = true;
620 this.search = ""; 621 this.search = "";
621 } 622 }
622 }, 623 },
623 mounted() { 624 mounted() {
624 this.token = this.$store.state.token; 625 this.token = this.$store.state.token;
625 this.getClass(); 626 this.getClass();
626 this.getExamList(); 627 this.getExamList();
627 } 628 }
628 }; 629 };
629 </script> 630 </script>
630 <style scoped> 631 <style scoped>
631 .markTable { 632 .markTable {
632 max-width: 80px !important; 633 max-width: 80px !important;
633 } 634 }
634 </style> 635 </style>
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 649
649 650
650 651
651 652
652 653
653 654
654 655
655 656
656 657
src/pages/Mark/markDistribution.vue
Diff comments   View file @dcbf19c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Mark Distribution ****** --> 3 <!-- ****** EDIT Mark Distribution ****** -->
4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px"> 4 <v-dialog v-model="editMarkDistributionDialog" max-width="500px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Mark Distribution</label> 8 <label class="title text-xs-center">Edit Mark Distribution</label>
9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-form ref="form"> 12 <v-form ref="form">
13 <v-container fluid> 13 <v-container fluid>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs4 class="pt-4 subheading"> 16 <v-flex xs4 class="pt-4 subheading">
17 <label class="right">Mark Distribution:</label> 17 <label class="right">Mark Distribution:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm6 class="ml-3"> 19 <v-flex xs8 sm6 class="ml-3">
20 <v-text-field 20 <v-text-field
21 v-model="editedItem.distributionType" 21 v-model="editedItem.distributionType"
22 placeholder="fill your Distribution Type" 22 placeholder="fill your Distribution Type"
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 </v-flex> 26 </v-flex>
27 <v-flex xs12 sm12> 27 <v-flex xs12 sm12>
28 <v-layout> 28 <v-layout>
29 <v-flex xs4 class="pt-4 subheading"> 29 <v-flex xs4 class="pt-4 subheading">
30 <label class="right">Mark Value:</label> 30 <label class="right">Mark Value:</label>
31 </v-flex> 31 </v-flex>
32 <v-flex xs8 sm6 class="ml-3"> 32 <v-flex xs8 sm6 class="ml-3">
33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field> 33 <v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field>
34 </v-flex> 34 </v-flex>
35 </v-layout> 35 </v-layout>
36 </v-flex> 36 </v-flex>
37 <v-layout> 37 <v-layout>
38 <v-flex xs12 sm11> 38 <v-flex xs12 sm11>
39 <v-card-actions> 39 <v-card-actions>
40 <v-spacer></v-spacer> 40 <v-spacer></v-spacer>
41 <v-btn round dark @click="save" class="add-button">Save</v-btn> 41 <v-btn round dark @click="save" class="add-button">Save</v-btn>
42 </v-card-actions> 42 </v-card-actions>
43 </v-flex> 43 </v-flex>
44 </v-layout> 44 </v-layout>
45 </v-container> 45 </v-container>
46 </v-form> 46 </v-form>
47 </v-card> 47 </v-card>
48 </v-dialog> 48 </v-dialog>
49 <!-- ****** MARK DISTRIBUTATION TABLE ****** --> 49 <!-- ****** MARK DISTRIBUTATION TABLE ****** -->
50 <v-toolbar color="transparent" flat> 50 <v-toolbar color="transparent" flat>
51 <v-btn 51 <v-btn
52 fab 52 fab
53 dark 53 dark
54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 54 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
55 small 55 small
56 @click="addMarkDistributionDialog = true" 56 @click="addMarkDistributionDialog = true"
57 > 57 >
58 <v-icon dark>add</v-icon> 58 <v-icon dark>add</v-icon>
59 </v-btn> 59 </v-btn>
60 <v-btn 60 <v-btn
61 round 61 round
62 class="open-dialog-button hidden-sm-only hidden-xs-only" 62 class="open-dialog-button hidden-sm-only hidden-xs-only"
63 dark 63 dark
64 @click="addMarkDistributionDialog = true" 64 @click="addMarkDistributionDialog = true"
65 > 65 >
66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution 66 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution
67 </v-btn> 67 </v-btn>
68 <v-spacer></v-spacer> 68 <v-spacer></v-spacer>
69 <v-card-title class="body-1" v-show="show"> 69 <v-card-title class="body-1" v-show="show">
70 <v-btn icon large flat @click="displaySearch"> 70 <v-btn icon large flat @click="displaySearch">
71 <v-avatar size="27"> 71 <v-avatar size="27">
72 <img src="/static/icon/search.png" alt="icon" /> 72 <img src="/static/icon/search.png" alt="icon" />
73 </v-avatar> 73 </v-avatar>
74 </v-btn> 74 </v-btn>
75 </v-card-title> 75 </v-card-title>
76 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 76 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
77 <v-layout> 77 <v-layout>
78 <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 78 <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
79 <v-icon @click="closeSearch" color="error">close</v-icon> 79 <v-icon @click="closeSearch" color="error">close</v-icon>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 </v-toolbar> 82 </v-toolbar>
83 <v-data-table 83 <v-data-table
84 :headers="headers" 84 :headers="headers"
85 :items="markList" 85 :items="markList"
86 :pagination.sync="pagination" 86 :pagination.sync="pagination"
87 :search="search" 87 :search="search"
88 > 88 >
89 <template slot="items" slot-scope="props"> 89 <template slot="items" slot-scope="props">
90 <tr class="tr"> 90 <tr class="tr">
91 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> 91 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
92 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td> 92 <td class="td td-row text-xs-center">{{ props.item.distributionType }}</td>
93 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td> 93 <td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td>
94 <td class="td td-row text-xs-center"> 94 <td class="td td-row text-xs-center">
95 <span> 95 <span>
96 <img 96 <img
97 style="cursor:pointer; width:20px; height:18px; " 97 style="cursor:pointer; width:20px; height:18px; "
98 class="mr-3" 98 class="mr-3"
99 @click="editItem(props.item)" 99 @click="editItem(props.item)"
100 src="/static/icon/edit.png" 100 src="/static/icon/edit.png"
101 /> 101 />
102 <img 102 <img
103 style="cursor:pointer; width:20px; height:20px; " 103 style="cursor:pointer; width:20px; height:20px; "
104 @click="deleteItem(props.item)" 104 @click="deleteItem(props.item)"
105 src="/static/icon/delete.png" 105 src="/static/icon/delete.png"
106 /> 106 />
107 </span> 107 </span>
108 </td> 108 </td>
109 </tr> 109 </tr>
110 </template> 110 </template>
111 <v-alert 111 <v-alert
112 slot="no-results" 112 slot="no-results"
113 :value="true" 113 :value="true"
114 color="error" 114 color="error"
115 icon="warning" 115 icon="warning"
116 >Your search for "{{ search }}" found no results.</v-alert> 116 >Your search for "{{ search }}" found no results.</v-alert>
117 </v-data-table> 117 </v-data-table>
118 <!-- ****** ADD MULTIPLE REMINDER ****** --> 118 <!-- ****** ADD MULTIPLE REMINDER ****** -->
119 <v-dialog v-model="addMarkDistributionDialog" max-width="500px"> 119 <v-dialog v-model="addMarkDistributionDialog" max-width="500px">
120 <v-card flat class="card-style pa-2" dark> 120 <v-card flat class="card-style pa-2" dark>
121 <v-layout> 121 <v-layout>
122 <v-flex xs12> 122 <v-flex xs12>
123 <label class="title text-xs-center">Add Mark Distribution</label> 123 <label class="title text-xs-center">Add Mark Distribution</label>
124 <v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon> 124 <v-icon size="24" class="right" @click="$refs.form.reset();addMarkDistributionDialog = false">cancel</v-icon>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 <v-form ref="form" v-model="valid" lazy-validation> 127 <v-form ref="form" v-model="valid" lazy-validation>
128 <v-container fluid> 128 <v-container fluid>
129 <v-flex xs12> 129 <v-flex xs12>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 131 <v-flex xs12 sm12 md4 class="pt-4 subheading">
132 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label> 132 <label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label>
133 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label> 133 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label>
134 </v-flex> 134 </v-flex>
135 <v-flex xs12 sm12 md7 class="ml-3"> 135 <v-flex xs12 sm12 md7 class="ml-3">
136 <v-text-field 136 <v-text-field
137 v-model="mark.distributionType" 137 v-model="mark.distributionType"
138 placeholder="fill your Mark Distribution" 138 placeholder="fill your Mark Distribution"
139 :rules="markDistributionRules" 139 :rules="markDistributionRules"
140 ></v-text-field> 140 ></v-text-field>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12> 144 <v-flex xs12>
145 <v-layout wrap> 145 <v-layout wrap>
146 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 146 <v-flex xs12 sm12 md4 class="pt-4 subheading">
147 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label> 147 <label class="right hidden-xs-only hidden-sm-only">Mark Value:</label>
148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label> 148 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm12 md7 class="ml-3"> 150 <v-flex xs12 sm12 md7 class="ml-3">
151 <v-text-field 151 <v-text-field
152 placeholder="fill your Mark Value" 152 placeholder="fill your Mark Value"
153 :rules="markValueRules" 153 :rules="markValueRules"
154 v-model="mark.markValue" 154 v-model="mark.markValue"
155 type="text" 155 type="text"
156 required 156 required
157 ></v-text-field> 157 ></v-text-field>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-flex> 160 </v-flex>
161 <v-layout> 161 <v-layout>
162 <v-flex xs12 sm12> 162 <v-flex xs12 sm12>
163 <v-layout> 163 <v-layout>
164 <v-spacer></v-spacer> 164 <v-spacer></v-spacer>
165 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn> 165 <v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
166 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 166 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
167 </v-layout> 167 </v-layout>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-container> 170 </v-container>
171 </v-form> 171 </v-form>
172 </v-card> 172 </v-card>
173 </v-dialog> 173 </v-dialog>
174 <v-snackbar 174 <v-snackbar
175 :timeout="timeout" 175 :timeout="timeout"
176 :top="y === 'top'" 176 :top="y === 'top'"
177 :right="x === 'right'" 177 :right="x === 'right'"
178 :vertical="mode === 'vertical'" 178 :vertical="mode === 'vertical'"
179 v-model="snackbar" 179 v-model="snackbar"
180 :color="color" 180 :color="color"
181 >{{ text }}</v-snackbar> 181 >{{ text }}</v-snackbar>
182 <div class="loader" v-if="showLoader"> 182 <div class="loader" v-if="showLoader">
183 <v-progress-circular indeterminate color="white"></v-progress-circular> 183 <v-progress-circular indeterminate color="white"></v-progress-circular>
184 </div> 184 </div>
185 </v-container> 185 </v-container>
186 </template> 186 </template>
187 187
188 <script> 188 <script>
189 import http from "@/Services/http.js"; 189 import http from "@/Services/http.js";
190 import Util from "@/util"; 190 import Util from "@/util";
191 191
192 export default { 192 export default {
193 data: () => ({ 193 data: () => ({
194 snackbar: false, 194 snackbar: false,
195 y: "top", 195 y: "top",
196 x: "right", 196 x: "right",
197 mode: "", 197 mode: "",
198 color: "", 198 color: "",
199 timeout: 5000, 199 timeout: 5000,
200 text: "", 200 text: "",
201 loading: false, 201 loading: false,
202 search: "", 202 search: "",
203 showLoader: false, 203 showLoader: false,
204 show: true, 204 show: true,
205 showSearch: false, 205 showSearch: false,
206 editMarkDistributionDialog: false, 206 editMarkDistributionDialog: false,
207 addMarkDistributionDialog: false, 207 addMarkDistributionDialog: false,
208 valid: true, 208 valid: true,
209 isActive: true, 209 isActive: true,
210 newActive: false, 210 newActive: false,
211 pagination: { 211 pagination: {
212 rowsPerPage: 15 212 rowsPerPage: 15
213 }, 213 },
214 markDistributionRules: [v => !!v || " Mark Distribution type is required"], 214 markDistributionRules: [v => !!v || " Mark Distribution type is required"],
215 markValueRules: [v => !!v || "Mark Value is required"], 215 markValueRules: [v => !!v || "Mark Value is required"],
216 headers: [ 216 headers: [
217 { 217 {
218 text: "No", 218 text: "No",
219 align: "center", 219 align: "center",
220 sortable: false, 220 sortable: false,
221 value: "No" 221 value: "No"
222 }, 222 },
223 { 223 {
224 text: " Mark Distribution Type", 224 text: " Mark Distribution Type",
225 value: " distributionType", 225 value: " distributionType",
226 sortable: false, 226 sortable: false,
227 align: "center" 227 align: "center"
228 }, 228 },
229 { 229 {
230 text: " Mark Value", 230 text: " Mark Value",
231 value: "markValue", 231 value: "markValue",
232 sortable: false, 232 sortable: false,
233 align: "center" 233 align: "center"
234 }, 234 },
235 { text: "Action", value: "", sortable: false, align: "center" } 235 { text: "Action", value: "", sortable: false, align: "center" }
236 ], 236 ],
237 markList: [], 237 markList: [],
238 editedIndex: -1, 238 editedIndex: -1,
239 mark: {}, 239 mark: {},
240 editedItem: {}, 240 editedItem: {},
241 token: "" 241 token: ""
242 }), 242 }),
243 methods: { 243 methods: {
244 getMarkDistributions() { 244 getMarkDistributions() {
245 this.showLoader = true; 245 this.showLoader = true;
246 http() 246 http()
247 .get("/getMarkDistributionsList", { 247 .get("/getMarkDistributionsList", {
248 headers: { Authorization: "Bearer " + this.token } 248 headers: { Authorization: "Bearer " + this.token }
249 }) 249 })
250 .then(response => { 250 .then(response => {
251 this.markList = response.data.data; 251 this.markList = response.data.data;
252 this.showLoader = false; 252 this.showLoader = false;
253 }) 253 })
254 .catch(error => { 254 .catch(error => {
255 this.showLoader = false; 255 this.showLoader = false;
256 // if (error.response.status === 401) { 256 // if (error.response.status === 401) {
257 // this.$router.replace({ path: "/" }); 257 // this.$router.replace({ path: "/" });
258 // this.$store.dispatch("setToken", null); 258 // this.$store.dispatch("setToken", null);
259 // this.$store.dispatch("Id", null); 259 // this.$store.dispatch("Id", null);
260 // } 260 // }
261 }); 261 });
262 }, 262 },
263 editItem(item) { 263 editItem(item) {
264 this.editedIndex = this.markList.indexOf(item); 264 this.editedIndex = this.markList.indexOf(item);
265 this.editedItem = Object.assign({}, item); 265 this.editedItem = Object.assign({}, item);
266 this.editMarkDistributionDialog = true; 266 this.editMarkDistributionDialog = true;
267 }, 267 },
268 deleteItem(item) { 268 deleteItem(item) {
269 let deleteParticularMark = { 269 let deleteParticularMark = {
270 markDistributionId: item._id 270 markDistributionId: item._id
271 }; 271 };
272 http() 272 http()
273 .delete( 273 .delete(
274 "/deleteMarkDistribution", 274 "/deleteMarkDistribution",
275 confirm("Are you sure you want to delete this?") && { 275 confirm("Are you sure you want to delete this?") && {
276 params: deleteParticularMark 276 params: deleteParticularMark
277 } 277 }
278 ) 278 )
279 .then(response => { 279 .then(response => {
280 this.snackbar = true; 280 this.snackbar = true;
281 this.text = response.data.message; 281 this.text = response.data.message;
282 this.getMarkDistributions(); 282 this.getMarkDistributions();
283 }) 283 })
284 .catch(error => { 284 .catch(error => {
285 console.log(error); 285 console.log(error);
286 }); 286 });
287 }, 287 },
288 close() { 288 close() {
289 this.editMarkDistributionDialog = false; 289 this.editMarkDistributionDialog = false;
290 }, 290 },
291 submit() { 291 submit() {
292 if (this.$refs.form.validate()) { 292 if (this.$refs.form.validate()) {
293 this.loading = true; 293 this.loading = true;
294 http() 294 http()
295 .post("/createMarkDistribution", this.mark) 295 .post("/createMarkDistribution", this.mark)
296 .then(response => { 296 .then(response => {
297 this.snackbar = true; 297 this.snackbar = true;
298 this.text = response.data.message; 298 this.text = response.data.message;
299 this.getMarkDistributions(); 299 this.getMarkDistributions();
300 this.clear(); 300 this.clear();
301 this.addMarkDistributionDialog = false; 301 this.addMarkDistributionDialog = false;
302 this.loading = false; 302 this.loading = false;
303 }) 303 })
304 .catch(error => { 304 .catch(error => {
305 this.snackbar = true; 305 this.snackbar = true;
306 this.text = error.response.data.message; 306 this.text = error.response.data.message;
307 this.loading = false; 307 this.loading = false;
308 }); 308 });
309 } 309 }
310 }, 310 },
311 clear() { 311 clear() {
312 this.$refs.form.reset(); 312 this.$refs.form.reset();
313 }, 313 },
314 save() { 314 save() {
315 (this.editedItem.markDistributionId = this.editedItem._id), 315 (this.editedItem.markDistributionId = this.editedItem._id),
316 http() 316 http()
317 .put("/updateMarkDistribution", this.editedItem) 317 .put("/updateMarkDistribution", this.editedItem)
318 .then(response => { 318 .then(response => {
319 this.snackbar = true; 319 this.snackbar = true;
320 this.text = "Successfully Edit Notification"; 320 this.text = "Successfully Edit Notification";
321 this.color = "green"; 321 this.color = "green";
322 this.getMarkDistributions(); 322 this.getMarkDistributions();
323 this.close(); 323 this.close();
324 }) 324 })
325 .catch(error => { 325 .catch(error => {
326 console.log(error); 326 console.log(error);
327 this.snackbar = true; 327 this.snackbar = true;
328 this.text = error.response.data.message; 328 this.text = error.response.data.message;
329 this.color = "red"; 329 this.color = "red";
330 }); 330 });
331 }, 331 },
332 displaySearch() { 332 displaySearch() {
333 (this.show = false), (this.showSearch = true); 333 (this.show = false), (this.showSearch = true);
334 }, 334 },
335 closeSearch() { 335 closeSearch() {
336 this.showSearch = false; 336 this.showSearch = false;
337 this.show = true; 337 this.show = true;
338 this.search = ""; 338 this.search = "";
339 } 339 }
340 }, 340 },
341 mounted() { 341 mounted() {
342 this.token = this.$store.state.token; 342 this.token = this.$store.state.token;
343 this.getMarkDistributions(); 343 this.getMarkDistributions();
344 } 344 }
345 }; 345 };
346 </script> 346 </script>
347 <style scoped> 347 <style scoped>