viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 115a1b77bd124267025279d1a77ed13ca621a67b

Authored by Shikha Mishra
1 parent 4ecd35af27
Exists in master and in 2 other branches amber-development, ui-design

show action bar in subjects while admin login

Showing 1 changed file with 13 additions and 3 deletions   Show diff stats
src/pages/Academic/subject.vue
Diff comments   View file @115a1b7
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" persistent> 4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent>
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" persistent> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent>
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" v-if="role === 'ADMIN' ">
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" v-if="addSubjectDialog" persistent> 368 <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent>
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 373 <v-icon
374 size="24" 374 size="24"
375 class="right" 375 class="right"
376 @click="$refs.form.reset();addSubjectDialog = false" 376 @click="$refs.form.reset();addSubjectDialog = false"
377 >cancel</v-icon> 377 >cancel</v-icon>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 <v-container fluid fill-height> 380 <v-container fluid fill-height>
381 <v-layout align-center> 381 <v-layout align-center>
382 <v-flex xs12> 382 <v-flex xs12>
383 <v-form ref="form" v-model="valid" lazy-validation> 383 <v-form ref="form" v-model="valid" lazy-validation>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 sm4 class="pt-4 subheading"> 385 <v-flex xs4 sm4 class="pt-4 subheading">
386 <label class="right">Class Name :</label> 386 <label class="right">Class Name :</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm8 class="ml-3"> 388 <v-flex xs8 sm8 class="ml-3">
389 <v-select 389 <v-select
390 v-model="addSubject.classId" 390 v-model="addSubject.classId"
391 label="Select your class" 391 label="Select your class"
392 type="text" 392 type="text"
393 :items="classList" 393 :items="classList"
394 item-text="classNum" 394 item-text="classNum"
395 item-value="_id" 395 item-value="_id"
396 :rules="classRules" 396 :rules="classRules"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs4 sm4 class="pt-4 subheading"> 402 <v-flex xs4 sm4 class="pt-4 subheading">
403 <label class="right">Teacher Name :</label> 403 <label class="right">Teacher Name :</label>
404 </v-flex> 404 </v-flex>
405 <v-flex xs8 sm8 class="ml-3"> 405 <v-flex xs8 sm8 class="ml-3">
406 <v-select 406 <v-select
407 v-model="addSubject.teacherId" 407 v-model="addSubject.teacherId"
408 label="Select your teacher" 408 label="Select your teacher"
409 type="text" 409 type="text"
410 :items="teacherList" 410 :items="teacherList"
411 item-text="name" 411 item-text="name"
412 item-value="_id" 412 item-value="_id"
413 :rules="teacherRules" 413 :rules="teacherRules"
414 required 414 required
415 ></v-select> 415 ></v-select>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 sm4 class="pt-4 sybheading"> 419 <v-flex xs4 sm4 class="pt-4 sybheading">
420 <label class="right">Type :</label> 420 <label class="right">Type :</label>
421 </v-flex> 421 </v-flex>
422 <v-flex xs8 sm8 class="ml-3"> 422 <v-flex xs8 sm8 class="ml-3">
423 <v-select 423 <v-select
424 v-model="addSubject.type" 424 v-model="addSubject.type"
425 :items="type" 425 :items="type"
426 label="Select your Type" 426 label="Select your Type"
427 :rules="typeRules" 427 :rules="typeRules"
428 required 428 required
429 ></v-select> 429 ></v-select>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs4 sm4 class="pt-4 subheading"> 433 <v-flex xs4 sm4 class="pt-4 subheading">
434 <label class="right">Pass Mark :</label> 434 <label class="right">Pass Mark :</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs8 sm8 class="ml-3"> 436 <v-flex xs8 sm8 class="ml-3">
437 <v-text-field 437 <v-text-field
438 label="Fill your Pass Mark" 438 label="Fill your Pass Mark"
439 name="name" 439 name="name"
440 type="text" 440 type="text"
441 :rules="markRules" 441 :rules="markRules"
442 v-model="addSubject.passMarks" 442 v-model="addSubject.passMarks"
443 required 443 required
444 ></v-text-field> 444 ></v-text-field>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 <v-layout> 447 <v-layout>
448 <v-flex xs4 sm4 class="pt-4 subheading"> 448 <v-flex xs4 sm4 class="pt-4 subheading">
449 <label class="right">Final Mark :</label> 449 <label class="right">Final Mark :</label>
450 </v-flex> 450 </v-flex>
451 <v-flex xs8 sm8 class="ml-3"> 451 <v-flex xs8 sm8 class="ml-3">
452 <v-text-field 452 <v-text-field
453 label="Fill your final mark" 453 label="Fill your final mark"
454 name="name" 454 name="name"
455 type="text" 455 type="text"
456 :rules="finalRules" 456 :rules="finalRules"
457 v-model="addSubject.finalMarks" 457 v-model="addSubject.finalMarks"
458 required 458 required
459 ></v-text-field> 459 ></v-text-field>
460 </v-flex> 460 </v-flex>
461 </v-layout> 461 </v-layout>
462 <v-layout> 462 <v-layout>
463 <v-flex xs4 sm4 class="pt-4 subheading"> 463 <v-flex xs4 sm4 class="pt-4 subheading">
464 <label class="right">Subject :</label> 464 <label class="right">Subject :</label>
465 </v-flex> 465 </v-flex>
466 <v-flex xs8 sm8 class="ml-3"> 466 <v-flex xs8 sm8 class="ml-3">
467 <v-text-field 467 <v-text-field
468 v-model="addSubject.subjectName" 468 v-model="addSubject.subjectName"
469 placeholder="fill your Subject Name" 469 placeholder="fill your Subject Name"
470 name="name" 470 name="name"
471 type="text" 471 type="text"
472 :rules="subjectRules" 472 :rules="subjectRules"
473 required 473 required
474 ></v-text-field> 474 ></v-text-field>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 <v-layout> 477 <v-layout>
478 <v-flex xs4 sm4 class="pt-4 subheading"> 478 <v-flex xs4 sm4 class="pt-4 subheading">
479 <label class="right">Subject Author :</label> 479 <label class="right">Subject Author :</label>
480 </v-flex> 480 </v-flex>
481 <v-flex xs8 sm8 class="ml-3"> 481 <v-flex xs8 sm8 class="ml-3">
482 <v-text-field 482 <v-text-field
483 v-model="addSubject.subjectAuthor" 483 v-model="addSubject.subjectAuthor"
484 placeholder="fill your Subject Author" 484 placeholder="fill your Subject Author"
485 name="name" 485 name="name"
486 type="text" 486 type="text"
487 ></v-text-field> 487 ></v-text-field>
488 </v-flex> 488 </v-flex>
489 </v-layout> 489 </v-layout>
490 <v-layout> 490 <v-layout>
491 <v-flex xs4 sm4 class="pt-4 subheading"> 491 <v-flex xs4 sm4 class="pt-4 subheading">
492 <label class="right">Subject Code:</label> 492 <label class="right">Subject Code:</label>
493 </v-flex> 493 </v-flex>
494 <v-flex xs8 sm8 class="ml-3"> 494 <v-flex xs8 sm8 class="ml-3">
495 <v-text-field 495 <v-text-field
496 v-model="addSubject.subjectCode" 496 v-model="addSubject.subjectCode"
497 placeholder="fill your Subject Code" 497 placeholder="fill your Subject Code"
498 name="name" 498 name="name"
499 type="text" 499 type="text"
500 ></v-text-field> 500 ></v-text-field>
501 </v-flex> 501 </v-flex>
502 </v-layout> 502 </v-layout>
503 <v-layout> 503 <v-layout>
504 <v-flex xs12 sm12> 504 <v-flex xs12 sm12>
505 <v-card-actions> 505 <v-card-actions>
506 <v-spacer></v-spacer> 506 <v-spacer></v-spacer>
507 <v-btn 507 <v-btn
508 @click="submit" 508 @click="submit"
509 round 509 round
510 dark 510 dark
511 :loading="addLoading" 511 :loading="addLoading"
512 class="add-button" 512 class="add-button"
513 >Add Subject</v-btn> 513 >Add Subject</v-btn>
514 </v-card-actions> 514 </v-card-actions>
515 </v-flex> 515 </v-flex>
516 </v-layout> 516 </v-layout>
517 </v-form> 517 </v-form>
518 </v-flex> 518 </v-flex>
519 </v-layout> 519 </v-layout>
520 </v-container> 520 </v-container>
521 </v-card> 521 </v-card>
522 </v-dialog> 522 </v-dialog>
523 <div class="loader" v-if="showLoader"> 523 <div class="loader" v-if="showLoader">
524 <v-progress-circular indeterminate color="white"></v-progress-circular> 524 <v-progress-circular indeterminate color="white"></v-progress-circular>
525 </div> 525 </div>
526 </v-container> 526 </v-container>
527 </template> 527 </template>
528 528
529 <script> 529 <script>
530 import http from "@/Services/http.js"; 530 import http from "@/Services/http.js";
531 import Util from "@/util"; 531 import Util from "@/util";
532 532
533 export default { 533 export default {
534 data: () => ({ 534 data: () => ({
535 snackbar: false, 535 snackbar: false,
536 y: "top", 536 y: "top",
537 x: "right", 537 x: "right",
538 role: "", 538 role: "",
539 mode: "", 539 mode: "",
540 timeout: 3000, 540 timeout: 3000,
541 text: "", 541 text: "",
542 color: "", 542 color: "",
543 show: true, 543 show: true,
544 showSearch: false, 544 showSearch: false,
545 showLoader: false, 545 showLoader: false,
546 loading: false, 546 loading: false,
547 editLoading: false, 547 editLoading: false,
548 addLoading: false, 548 addLoading: false,
549 date: null, 549 date: null,
550 search: "", 550 search: "",
551 viewSubjectDialog: false, 551 viewSubjectDialog: false,
552 editSubjectDialog: false, 552 editSubjectDialog: false,
553 valid: true, 553 valid: true,
554 validEditSubject: true, 554 validEditSubject: true,
555 addSubjectDialog: false, 555 addSubjectDialog: false,
556 // isActive: true, 556 // isActive: true,
557 // newActive: false, 557 // newActive: false,
558 type: ["Optional", "Mandatory"], 558 type: ["Optional", "Mandatory"],
559 pagination: { 559 pagination: {
560 rowsPerPage: 10, 560 rowsPerPage: 10,
561 }, 561 },
562 token: "", 562 token: "",
563 classRules: [(v) => !!v || " Class Name is required"], 563 classRules: [(v) => !!v || " Class Name is required"],
564 teacherRules: [(v) => !!v || " Teacher Name is required"], 564 teacherRules: [(v) => !!v || " Teacher Name is required"],
565 typeRules: [(v) => !!v || "Type is required"], 565 typeRules: [(v) => !!v || "Type is required"],
566 markRules: [(v) => !!v || " Pass Mark is required"], 566 markRules: [(v) => !!v || " Pass Mark is required"],
567 finalRules: [(v) => !!v || "Final MArk is required"], 567 finalRules: [(v) => !!v || "Final MArk is required"],
568 subjectRules: [(v) => !!v || " Subject Name is required"], 568 subjectRules: [(v) => !!v || " Subject Name is required"],
569 headers: [ 569 headers: [
570 { 570 {
571 text: "No", 571 text: "No",
572 align: "", 572 align: "",
573 sortable: false, 573 sortable: false,
574 value: "No", 574 value: "No",
575 }, 575 },
576 { 576 {
577 text: "Subject Name", 577 text: "Subject Name",
578 value: "subjectName", 578 value: "subjectName",
579 sortable: false, 579 sortable: false,
580 align: "center", 580 align: "center",
581 }, 581 },
582 { 582 {
583 text: "Subject Author", 583 text: "Subject Author",
584 value: "subjectAuthor", 584 value: "subjectAuthor",
585 sortable: false, 585 sortable: false,
586 align: "center", 586 align: "center",
587 }, 587 },
588 { 588 {
589 text: "Subject Code", 589 text: "Subject Code",
590 value: "subjectCode", 590 value: "subjectCode",
591 sortable: false, 591 sortable: false,
592 align: "center", 592 align: "center",
593 }, 593 },
594 // { 594 // {
595 // text: "Teacher", 595 // text: "Teacher",
596 // value: "teacherId", 596 // value: "teacherId",
597 // sortable: false, 597 // sortable: false,
598 // align: "center" 598 // align: "center"
599 // }, 599 // },
600 { 600 {
601 text: "Pass Marks", 601 text: "Pass Marks",
602 value: "passMarks", 602 value: "passMarks",
603 sortable: false, 603 sortable: false,
604 align: "center", 604 align: "center",
605 }, 605 },
606 { 606 {
607 text: "Final Marks", 607 text: "Final Marks",
608 value: "finalMarks", 608 value: "finalMarks",
609 sortable: false, 609 sortable: false,
610 align: "center", 610 align: "center",
611 }, 611 },
612 { 612 {
613 text: "Type", 613 text: "Type",
614 value: "type", 614 value: "type",
615 sortable: false, 615 sortable: false,
616 align: "center", 616 align: "center",
617 }, 617 },
618 // { text: "Action", value: "", sortable: false, align: "center" }
619 ], 618 ],
620 subjectList: [], 619 subjectList: [],
621 classList: [], 620 classList: [],
622 teacherList: [], 621 teacherList: [],
623 editedIndex: -1, 622 editedIndex: -1,
624 addSubject: {}, 623 addSubject: {},
625 getSubject: {}, 624 getSubject: {},
626 625
627 editedItem: { 626 editedItem: {
628 // subjectName: "", 627 // subjectName: "",
629 // subjectAuthor: "" 628 // subjectAuthor: ""
630 }, 629 },
631 }), 630 }),
632 watch: { 631 watch: {
633 addSubjectDialog: function (val) { 632 addSubjectDialog: function (val) {
634 if (!val) { 633 if (!val) {
635 // this.addSubject = []; 634 // this.addSubject = [];
636 } 635 }
637 }, 636 },
638 }, 637 },
639 methods: { 638 methods: {
639 addActionInHeaders() {
640 if (this.role === "ADMIN") {
641 this.headers.push({
642 text: "Action",
643 value: "",
644 sortable: false,
645 align: "center",
646 });
647 }
648 },
640 pickFile() { 649 pickFile() {
641 this.$refs.image.click(); 650 this.$refs.image.click();
642 }, 651 },
643 editItem(item) { 652 editItem(item) {
644 this.editedIndex = this.subjectList.subjects; 653 this.editedIndex = this.subjectList.subjects;
645 this.editedItem = Object.assign({}, item); 654 this.editedItem = Object.assign({}, item);
646 this.dialog = true; 655 this.dialog = true;
647 this.editSubjectDialog = true; 656 this.editSubjectDialog = true;
648 }, 657 },
649 profile(item) { 658 profile(item) {
650 this.editedIndex = this.subjectList.subjects; 659 this.editedIndex = this.subjectList.subjects;
651 this.editedItem = Object.assign({}, item); 660 this.editedItem = Object.assign({}, item);
652 this.dialog1 = true; 661 this.dialog1 = true;
653 this.viewSubjectDialog = true; 662 this.viewSubjectDialog = true;
654 }, 663 },
655 deleteItem(item) { 664 deleteItem(item) {
656 let deleteSubject = { 665 let deleteSubject = {
657 classId: this.addSubject.classId, 666 classId: this.addSubject.classId,
658 subjectId: item._id, 667 subjectId: item._id,
659 }; 668 };
660 http() 669 http()
661 .delete( 670 .delete(
662 "/deleteSubject", 671 "/deleteSubject",
663 confirm("Are you sure you want to delete this?") && { 672 confirm("Are you sure you want to delete this?") && {
664 params: deleteSubject, 673 params: deleteSubject,
665 } 674 }
666 ) 675 )
667 .then((response) => { 676 .then((response) => {
668 this.snackbar = true; 677 this.snackbar = true;
669 this.color = "green"; 678 this.color = "green";
670 this.text = "Successfully delete Existing Subject"; 679 this.text = "Successfully delete Existing Subject";
671 this.getClassSubject(this.addSubject.classId); 680 this.getClassSubject(this.addSubject.classId);
672 }) 681 })
673 .catch((error) => { 682 .catch((error) => {
674 this.snackbar = true; 683 this.snackbar = true;
675 this.text = error.response.data.message; 684 this.text = error.response.data.message;
676 this.color = "error"; 685 this.color = "error";
677 // console.log("error", error); 686 // console.log("error", error);
678 }); 687 });
679 }, 688 },
680 close() { 689 close() {
681 this.editSubjectDialog = false; 690 this.editSubjectDialog = false;
682 }, 691 },
683 close1() { 692 close1() {
684 this.viewSubjectDialog = false; 693 this.viewSubjectDialog = false;
685 }, 694 },
686 submit() { 695 submit() {
687 if (this.$refs.form.validate()) { 696 if (this.$refs.form.validate()) {
688 this.addLoading = true; 697 this.addLoading = true;
689 http() 698 http()
690 .post("/addSubject", this.addSubject) 699 .post("/addSubject", this.addSubject)
691 .then((response) => { 700 .then((response) => {
692 this.snackbar = true; 701 this.snackbar = true;
693 this.text = "New Subject added successfully"; 702 this.text = "New Subject added successfully";
694 this.color = "green"; 703 this.color = "green";
695 this.addLoading = false; 704 this.addLoading = false;
696 this.$refs.form.reset(); 705 this.$refs.form.reset();
697 this.addSubjectDialog = false; 706 this.addSubjectDialog = false;
698 this.getClassSubject(_id); 707 this.getClassSubject(_id);
699 }) 708 })
700 .catch((error) => { 709 .catch((error) => {
701 this.addLoading = false; 710 this.addLoading = false;
702 }); 711 });
703 } 712 }
704 }, 713 },
705 clear() { 714 clear() {
706 this.$refs.form.reset(); 715 this.$refs.form.reset();
707 }, 716 },
708 save() { 717 save() {
709 if (this.$refs.formEditSubject.validate()) { 718 if (this.$refs.formEditSubject.validate()) {
710 let editSubject = { 719 let editSubject = {
711 classId: this.editedItem.classId, 720 classId: this.editedItem.classId,
712 subjectId: this.editedItem._id, 721 subjectId: this.editedItem._id,
713 teacherId: this.editedItem.teacherId, 722 teacherId: this.editedItem.teacherId,
714 type: this.editedItem.type, 723 type: this.editedItem.type,
715 passMarks: this.editedItem.passMarks, 724 passMarks: this.editedItem.passMarks,
716 finalMarks: this.editedItem.finalMarks, 725 finalMarks: this.editedItem.finalMarks,
717 subjectAuthor: this.editedItem.subjectAuthor, 726 subjectAuthor: this.editedItem.subjectAuthor,
718 subjectCode: this.editedItem.subjectCode, 727 subjectCode: this.editedItem.subjectCode,
719 subjectName: this.editedItem.subjectName, 728 subjectName: this.editedItem.subjectName,
720 }; 729 };
721 this.editLoading = true; 730 this.editLoading = true;
722 http() 731 http()
723 .put("/updateSubject", editSubject) 732 .put("/updateSubject", editSubject)
724 .then((response) => { 733 .then((response) => {
725 this.snackbar = true; 734 this.snackbar = true;
726 this.text = "Successfully Edit Existing Subject"; 735 this.text = "Successfully Edit Existing Subject";
727 this.color = "green"; 736 this.color = "green";
728 this.editLoading = false; 737 this.editLoading = false;
729 this.editSubjectDialog = false; 738 this.editSubjectDialog = false;
730 this.getClassSubject(this.editedItem.classId); 739 this.getClassSubject(this.editedItem.classId);
731 }) 740 })
732 .catch((error) => { 741 .catch((error) => {
733 this.editLoading = false; 742 this.editLoading = false;
734 743
735 // console.log(error); 744 // console.log(error);
736 }); 745 });
737 } 746 }
738 }, 747 },
739 getClassSubject(_id) { 748 getClassSubject(_id) {
740 this.showLoader = true; 749 this.showLoader = true;
741 // console.log("class", _id); 750 // console.log("class", _id);
742 // this.classId = this.classId; 751 // this.classId = this.classId;
743 http() 752 http()
744 .get( 753 .get(
745 "/getParticularClass", 754 "/getParticularClass",
746 { params: { classId: _id } }, 755 { params: { classId: _id } },
747 { 756 {
748 headers: { Authorization: "Bearer " + this.token }, 757 headers: { Authorization: "Bearer " + this.token },
749 } 758 }
750 ) 759 )
751 .then((response) => { 760 .then((response) => {
752 this.subjectList = response.data.data; 761 this.subjectList = response.data.data;
753 this.showLoader = false; 762 this.showLoader = false;
754 }) 763 })
755 .catch((err) => { 764 .catch((err) => {
756 this.showLoader = false; 765 this.showLoader = false;
757 }); 766 });
758 }, 767 },
759 getClass() { 768 getClass() {
760 http() 769 http()
761 .get("/getClassesList", { 770 .get("/getClassesList", {
762 headers: { Authorization: "Bearer " + this.token }, 771 headers: { Authorization: "Bearer " + this.token },
763 }) 772 })
764 .then((response) => { 773 .then((response) => {
765 this.classList = response.data.data; 774 this.classList = response.data.data;
766 }) 775 })
767 .catch((error) => { 776 .catch((error) => {
768 if (error.response.status === 401) { 777 if (error.response.status === 401) {
769 this.$router.replace({ path: "/" }); 778 this.$router.replace({ path: "/" });
770 this.$store.dispatch("setToken", null); 779 this.$store.dispatch("setToken", null);
771 this.$store.dispatch("Id", null); 780 this.$store.dispatch("Id", null);
772 } 781 }
773 }); 782 });
774 }, 783 },
775 getTeacherList() { 784 getTeacherList() {
776 this.showLoader = true; 785 this.showLoader = true;
777 var token = this.$store.state.token; 786 var token = this.$store.state.token;
778 http() 787 http()
779 .get("/getTeachersList", { 788 .get("/getTeachersList", {
780 headers: { Authorization: "Bearer " + token }, 789 headers: { Authorization: "Bearer " + token },
781 }) 790 })
782 .then((response) => { 791 .then((response) => {
783 this.teacherList = response.data.data; 792 this.teacherList = response.data.data;
784 this.showLoader = false; 793 this.showLoader = false;
785 // console.log("getTeacherList=====>",this.desserts) 794 // console.log("getTeacherList=====>",this.desserts)
786 }) 795 })
787 .catch((error) => { 796 .catch((error) => {
788 this.showLoader = false; 797 this.showLoader = false;
789 if (error.response.status === 401) { 798 if (error.response.status === 401) {
790 this.$router.replace({ path: "/" }); 799 this.$router.replace({ path: "/" });
791 this.$store.dispatch("setToken", null); 800 this.$store.dispatch("setToken", null);
792 this.$store.dispatch("Id", null); 801 this.$store.dispatch("Id", null);
793 } 802 }
794 }); 803 });
795 }, 804 },
796 displaySearch() { 805 displaySearch() {
797 (this.show = false), (this.showSearch = true); 806 (this.show = false), (this.showSearch = true);
798 }, 807 },
799 closeSearch() { 808 closeSearch() {
800 this.showSearch = false; 809 this.showSearch = false;
801 this.show = true; 810 this.show = true;
802 this.search = ""; 811 this.search = "";
803 }, 812 },
804 }, 813 },
805 mounted() { 814 mounted() {
806 this.token = this.$store.state.token; 815 this.token = this.$store.state.token;
807 // this.getNoticeDataList(); 816 // this.getNoticeDataList();
808 this.getClass(); 817 this.getClass();
809 this.getTeacherList(); 818 this.getTeacherList();
810 this.role = this.$store.state.role; 819 this.role = this.$store.state.role;
820 this.addActionInHeaders();
811 }, 821 },
812 }; 822 };