viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit f31c3fd76f3eedb45845824bb3ee90e8de4cca59

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

add subject was throwing an error while adding it without refreshing is now work… 

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