viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit dd61212bd4cab7554f5727457d1fcaf80effc8a3

Authored by Amber Dev
2 parents 91df7a13de 6934d066ea
Exists in master and in 2 other branches amber-development, ui-design

Merge branch 'master' of http://git.viithiisys.com/viithiisys/school-management-dashboard

Showing 11 changed files   Show diff stats
src/pages/Academic/assignment.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Assignment ****** --> 3 <!-- ****** EDIT Assignment ****** -->
4 <v-dialog v-model="editAssignmentDialog" max-width="400px"> 4 <v-dialog v-model="editAssignmentDialog" max-width="400px">
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 Assignment</label> 8 <label class="title text-xs-center">Edit Assignment</label>
9 <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editAssignmentDialog = 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="formEditAssignment" v-model="validEditAssignment" lazy-validation> 13 <v-form ref="formEditAssignment" v-model="validEditAssignment" 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">Title:</label> 16 <label class="right">Title:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field> 19 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-layout> 22 <v-layout>
23 <v-flex xs4 class="pt-4 subheading"> 23 <v-flex xs4 class="pt-4 subheading">
24 <label class="right">Description:</label> 24 <label class="right">Description:</label>
25 </v-flex> 25 </v-flex>
26 <v-flex xs8 class="ml-3"> 26 <v-flex xs8 class="ml-3">
27 <v-text-field 27 <v-text-field
28 v-model="editedItem.description" 28 v-model="editedItem.description"
29 type="text" 29 type="text"
30 :rules="deadlineRules" 30 :rules="deadlineRules"
31 required 31 required
32 ></v-text-field> 32 ></v-text-field>
33 </v-flex> 33 </v-flex>
34 </v-layout> 34 </v-layout>
35 <v-layout> 35 <v-layout>
36 <v-flex xs4 class="pt-4 subheading"> 36 <v-flex xs4 class="pt-4 subheading">
37 <label class="right">Deadline:</label> 37 <label class="right">Deadline:</label>
38 </v-flex> 38 </v-flex>
39 <v-flex xs8 class="ml-3"> 39 <v-flex xs8 class="ml-3">
40 <v-menu 40 <v-menu
41 ref="menu1" 41 ref="menu1"
42 :close-on-content-click="false" 42 :close-on-content-click="false"
43 v-model="menu1" 43 v-model="menu1"
44 :nudge-right="40" 44 :nudge-right="40"
45 :return-value.sync="menu1" 45 :return-value.sync="menu1"
46 lazy 46 lazy
47 transition="scale-transition" 47 transition="scale-transition"
48 offset-y 48 offset-y
49 full-width 49 full-width
50 min-width="290px" 50 min-width="290px"
51 > 51 >
52 <v-text-field 52 <v-text-field
53 slot="activator" 53 slot="activator"
54 v-model="editedItem.deadline" 54 v-model="editedItem.deadline"
55 placeholder="Select Date" 55 placeholder="Select Date"
56 :rules="deadlineRules" 56 :rules="deadlineRules"
57 append-icon="event" 57 append-icon="event"
58 required 58 required
59 ></v-text-field> 59 ></v-text-field>
60 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker> 60 <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
61 </v-menu> 61 </v-menu>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 <v-layout> 64 <v-layout>
65 <v-flex xs4 class="pt-4 subheading"> 65 <v-flex xs4 class="pt-4 subheading">
66 <label class="right">Class:</label> 66 <label class="right">Class:</label>
67 </v-flex> 67 </v-flex>
68 <v-flex xs8 class="ml-3"> 68 <v-flex xs8 class="ml-3">
69 <v-select 69 <v-select
70 :items="classList" 70 :items="classList"
71 item-text="classNum" 71 item-text="classNum"
72 item-value="_id" 72 item-value="_id"
73 :rules="classRules" 73 :rules="classRules"
74 v-model="editedItem.classId" 74 v-model="editedItem.classId"
75 @change="getSections(editedItem.classId)" 75 @change="getSections(editedItem.classId)"
76 required 76 required
77 ></v-select> 77 ></v-select>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 <v-layout> 80 <v-layout>
81 <v-flex xs4 class="pt-4 subheading"> 81 <v-flex xs4 class="pt-4 subheading">
82 <label class="right">Section:</label> 82 <label class="right">Section:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8 class="ml-3"> 84 <v-flex xs8 class="ml-3">
85 <v-select 85 <v-select
86 :items="addSection" 86 :items="addSection"
87 item-text="name" 87 item-text="name"
88 item-value="_id" 88 item-value="_id"
89 v-model="editedItem.sectionId" 89 v-model="editedItem.sectionId"
90 :rules="sectionRules" 90 :rules="sectionRules"
91 @change="getClassSubject(editedItem.classId)" 91 @change="getClassSubject(editedItem.classId)"
92 required 92 required
93 ></v-select> 93 ></v-select>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <v-layout> 96 <v-layout>
97 <v-flex xs4 class="pt-4 subheading"> 97 <v-flex xs4 class="pt-4 subheading">
98 <label class="right">Subject</label> 98 <label class="right">Subject</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8 class="ml-3"> 100 <v-flex xs8 class="ml-3">
101 <v-select 101 <v-select
102 :items="subjectList.subjects" 102 :items="subjectList.subjects"
103 v-model="editedItem.subjectName" 103 v-model="editedItem.subjectName"
104 item-text="subjectName" 104 item-text="subjectName"
105 item-value="_id" 105 item-value="_id"
106 :rules="subjectRules" 106 :rules="subjectRules"
107 required 107 required
108 ></v-select> 108 ></v-select>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> 113 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
114 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label> 114 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>
115 </v-flex> 115 </v-flex>
116 <v-flex xs8 sm8 class="ml-3"> 116 <v-flex xs8 sm8 class="ml-3">
117 <v-text-field 117 <v-text-field
118 label="Select File" 118 label="Select File"
119 @click="pickFile" 119 @click="pickFile"
120 v-model="imageName" 120 v-model="imageName"
121 append-icon="attach_file" 121 append-icon="attach_file"
122 ></v-text-field> 122 ></v-text-field>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 <v-flex xs12 sm12> 125 <v-flex xs12 sm12>
126 <v-card-actions> 126 <v-card-actions>
127 <v-spacer></v-spacer> 127 <v-spacer></v-spacer>
128 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 128 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
129 </v-card-actions> 129 </v-card-actions>
130 </v-flex> 130 </v-flex>
131 </v-form> 131 </v-form>
132 </v-container> 132 </v-container>
133 </v-card> 133 </v-card>
134 </v-dialog> 134 </v-dialog>
135 135
136 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 136 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
137 <v-dialog v-model="viewAssignmentDialog" max-width="500px"> 137 <v-dialog v-model="viewAssignmentDialog" max-width="500px">
138 <v-card flat class="card-style pa-3" dark> 138 <v-card flat class="card-style pa-3" dark>
139 <v-layout> 139 <v-layout>
140 <v-flex xs12> 140 <v-flex xs12>
141 <label class="title text-xs-center">View Attendence</label> 141 <label class="title text-xs-center">View Attendence</label>
142 <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon> 142 <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 <v-card-text> 145 <v-card-text>
146 <v-container grid-list-md> 146 <v-container grid-list-md>
147 <v-layout wrap> 147 <v-layout wrap>
148 <v-flex> 148 <v-flex>
149 <v-layout> 149 <v-layout>
150 <v-flex xs6 sm4> 150 <v-flex xs6 sm4>
151 <h5 class="right my-1"> 151 <h5 class="right my-1">
152 <b>Title:</b> 152 <b>Title:</b>
153 </h5> 153 </h5>
154 </v-flex> 154 </v-flex>
155 <v-flex sm8 xs6> 155 <v-flex sm8 xs6>
156 <h5 class="my-1">{{ editedItem.title }}</h5> 156 <h5 class="my-1">{{ editedItem.title }}</h5>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 <v-layout> 159 <v-layout>
160 <v-flex xs6 sm4> 160 <v-flex xs6 sm4>
161 <h5 class="right my-1"> 161 <h5 class="right my-1">
162 <b>Description:</b> 162 <b>Description:</b>
163 </h5> 163 </h5>
164 </v-flex> 164 </v-flex>
165 <v-flex sm8 xs6> 165 <v-flex sm8 xs6>
166 <h5 class="my-1">{{ editedItem.description }}</h5> 166 <h5 class="my-1">{{ editedItem.description }}</h5>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 <v-layout> 169 <v-layout>
170 <v-flex xs6 sm4> 170 <v-flex xs6 sm4>
171 <h5 class="right my-1"> 171 <h5 class="right my-1">
172 <b>Deadline:</b> 172 <b>Deadline:</b>
173 </h5> 173 </h5>
174 </v-flex> 174 </v-flex>
175 <v-flex sm8 xs6> 175 <v-flex sm8 xs6>
176 <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5> 176 <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 </v-container> 181 </v-container>
182 </v-card-text> 182 </v-card-text>
183 </v-card> 183 </v-card>
184 </v-dialog> 184 </v-dialog>
185 185
186 <!-- ****** EXISTING ASSIGNMENT TABLE ****** --> 186 <!-- ****** EXISTING ASSIGNMENT TABLE ****** -->
187 <v-toolbar color="transparent" flat> 187 <v-toolbar color="transparent" flat>
188 <v-btn 188 <v-btn
189 fab 189 fab
190 dark 190 dark
191 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 191 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
192 small 192 small
193 @click="addAssignmentDialog = true" 193 @click="addAssignmentDialog = true"
194 > 194 >
195 <v-icon dark>add</v-icon> 195 <v-icon dark>add</v-icon>
196 </v-btn> 196 </v-btn>
197 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 197 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
198 <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true"> 198 <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true">
199 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment 199 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment
200 </v-btn> 200 </v-btn>
201 </v-flex> 201 </v-flex>
202 <v-spacer></v-spacer> 202 <v-spacer></v-spacer>
203 <v-flex lg2 md2 xs12 v-show="show"> 203 <v-flex lg2 md2 xs12 v-show="show">
204 <v-select 204 <v-select
205 :items="classList" 205 :items="classList"
206 placeholder="Select Your Class" 206 placeholder="Select Your Class"
207 v-model="showAssignment.classId" 207 v-model="showAssignment.classId"
208 item-text="classNum" 208 item-text="classNum"
209 item-value="_id" 209 item-value="_id"
210 name="Select Class" 210 name="Select Class"
211 :rules="classRules" 211 :rules="classRules"
212 @change="getAssignmentList()" 212 @change="getAssignmentList()"
213 class="pl-2" 213 class="pl-2"
214 required 214 required
215 ></v-select> 215 ></v-select>
216 </v-flex> 216 </v-flex>
217 <v-card-title class="body-1" v-show="show"> 217 <v-card-title class="body-1" v-show="show">
218 <v-btn icon flat @click="displaySearch"> 218 <v-btn icon flat @click="displaySearch">
219 <v-avatar size="27"> 219 <v-avatar size="27">
220 <img src="/static/icon/search.png" alt="icon" /> 220 <img src="/static/icon/search.png" alt="icon" />
221 </v-avatar> 221 </v-avatar>
222 </v-btn> 222 </v-btn>
223 </v-card-title> 223 </v-card-title>
224 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> 224 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
225 <v-layout> 225 <v-layout>
226 <v-text-field 226 <v-text-field
227 v-model="search" 227 v-model="search"
228 placeholder="Search" 228 placeholder="Search"
229 prepend-inner-icon="search" 229 prepend-inner-icon="search"
230 color="primary" 230 color="primary"
231 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 231 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
232 ></v-text-field> 232 ></v-text-field>
233 <v-icon @click="closeSearch" color="error">close</v-icon> 233 <v-icon @click="closeSearch" color="error">close</v-icon>
234 </v-layout> 234 </v-layout>
235 </v-flex> 235 </v-flex>
236 </v-toolbar> 236 </v-toolbar>
237 <v-data-table 237 <v-data-table
238 :headers="headers" 238 :headers="headers"
239 :items="assignmentData" 239 :items="assignmentData"
240 :pagination.sync="pagination" 240 :pagination.sync="pagination"
241 :search="search" 241 :search="search"
242 > 242 >
243 <template slot="items" slot-scope="props"> 243 <template slot="items" slot-scope="props">
244 <tr class="tr"> 244 <tr class="tr">
245 <td class="td-row td">{{ props.index + 1 }}</td> 245 <td class="td-row td">{{ props.index + 1 }}</td>
246 <td class="text-xs-center td td-row">{{ props.item.title }}</td> 246 <td class="text-xs-center td td-row">{{ props.item.title }}</td>
247 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 247 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
248 <td class="text-xs-center td td-row">{{ props.item.deadline }}</td> 248 <td class="text-xs-center td td-row">{{ props.item.deadline }}</td>
249 <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td> 249 <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>
250 <td 250 <td
251 class="text-xs-center td td-row" 251 class="text-xs-center td td-row"
252 v-if="role != 'ADMIN' " 252 v-if="role != 'TEACHER' "
253 >{{ props.item.teacherId.name }}</td> 253 >{{ props.item.teacherId.name }}</td>
254 <td 254 <td
255 class="text-xs-center td td-row" 255 class="text-xs-center td td-row"
256 v-if="role != 'TEACHER' " 256 v-if="role != 'ADMIN'"
257 >{{ props.item.schoolId .name }}</td> 257 >{{ props.item.schoolId .name }}</td>
258 <td class="text-xs-center td td-row"> 258 <td class="text-xs-center td td-row">
259 <v-btn 259 <v-btn
260 class="add-button" 260 class="add-button"
261 @click="generatePDF2Canvas(props.item)" 261 @click="generatePDF2Canvas(props.item)"
262 :loading="loadingPdf" 262 :loading="loadingPdf"
263 dark 263 dark
264 >{{ props.item.fileType }}</v-btn> 264 >{{ props.item.fileType }}</v-btn>
265 </td> 265 </td>
266 <td class="text-xs-center td td-row"> 266 <td class="text-xs-center td td-row">
267 <span> 267 <span>
268 <v-tooltip top> 268 <v-tooltip top>
269 <img 269 <img
270 slot="activator" 270 slot="activator"
271 style="cursor:pointer; width:25px; height:25px; " 271 style="cursor:pointer; width:25px; height:25px; "
272 class="mr-3" 272 class="mr-3"
273 @click="profile(props.item)" 273 @click="profile(props.item)"
274 src="/static/icon/view.png" 274 src="/static/icon/view.png"
275 /> 275 />
276 <span>View</span> 276 <span>View</span>
277 </v-tooltip> 277 </v-tooltip>
278 <v-tooltip top> 278 <v-tooltip top>
279 <img 279 <img
280 slot="activator" 280 slot="activator"
281 style="cursor:pointer; width:20px; height:18px; " 281 style="cursor:pointer; width:20px; height:18px; "
282 class="mr-3" 282 class="mr-3"
283 @click="editItem(props.item)" 283 @click="editItem(props.item)"
284 src="/static/icon/edit.png" 284 src="/static/icon/edit.png"
285 /> 285 />
286 <span>Edit</span> 286 <span>Edit</span>
287 </v-tooltip> 287 </v-tooltip>
288 <v-tooltip top> 288 <v-tooltip top>
289 <img 289 <img
290 slot="activator" 290 slot="activator"
291 style="cursor:pointer; width:20px; height:20px; " 291 style="cursor:pointer; width:20px; height:20px; "
292 class="mr-3" 292 class="mr-3"
293 @click="deleteItem(props.item)" 293 @click="deleteItem(props.item)"
294 src="/static/icon/delete.png" 294 src="/static/icon/delete.png"
295 /> 295 />
296 <span>Delete</span> 296 <span>Delete</span>
297 </v-tooltip> 297 </v-tooltip>
298 </span> 298 </span>
299 </td> 299 </td>
300 </tr> 300 </tr>
301 </template> 301 </template>
302 <v-alert 302 <v-alert
303 slot="no-results" 303 slot="no-results"
304 :value="true" 304 :value="true"
305 color="error" 305 color="error"
306 icon="warning" 306 icon="warning"
307 >Your search for "{{ search }}" found no results.</v-alert> 307 >Your search for "{{ search }}" found no results.</v-alert>
308 </v-data-table> 308 </v-data-table>
309 <!-- ****** ADD MULTIPLE Subject ****** --> 309 <!-- ****** ADD MULTIPLE Subject ****** -->
310 <v-snackbar 310 <v-snackbar
311 :timeout="timeout" 311 :timeout="timeout"
312 :top="y === 'top'" 312 :top="y === 'top'"
313 :right="x === 'right'" 313 :right="x === 'right'"
314 :vertical="mode === 'vertical'" 314 :vertical="mode === 'vertical'"
315 v-model="snackbar" 315 v-model="snackbar"
316 :color="color" 316 :color="color"
317 >{{ text }}</v-snackbar> 317 >{{ text }}</v-snackbar>
318 <v-dialog v-model="addAssignmentDialog" max-width="400px"> 318 <v-dialog v-model="addAssignmentDialog" max-width="400px">
319 <v-card flat class="card-style pa-2" dark> 319 <v-card flat class="card-style pa-2" dark>
320 <v-layout> 320 <v-layout>
321 <v-flex xs12> 321 <v-flex xs12>
322 <label class="title text-xs-center">Add Assignment</label> 322 <label class="title text-xs-center">Add Assignment</label>
323 <v-icon size="24" class="right" @click="addAssignmentDialog = false">cancel</v-icon> 323 <v-icon size="24" class="right" @click="addAssignmentDialog = false">cancel</v-icon>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 <v-container fluid fill-height> 326 <v-container fluid fill-height>
327 <v-layout align-center> 327 <v-layout align-center>
328 <v-flex xs12> 328 <v-flex xs12>
329 <v-form ref="form" v-model="valid" lazy-validation> 329 <v-form ref="form" v-model="valid" lazy-validation>
330 <v-layout> 330 <v-layout>
331 <v-flex xs4 sm4 class="pt-4 subheading"> 331 <v-flex xs4 sm4 class="pt-4 subheading">
332 <label class="right">Title :</label> 332 <label class="right">Title :</label>
333 </v-flex> 333 </v-flex>
334 <v-flex xs8 sm8 class="ml-3"> 334 <v-flex xs8 sm8 class="ml-3">
335 <v-text-field 335 <v-text-field
336 name="name" 336 name="name"
337 type="text" 337 type="text"
338 placeholder="Select Title" 338 placeholder="Select Title"
339 :rules="titleRules" 339 :rules="titleRules"
340 v-model="addAssignment.title" 340 v-model="addAssignment.title"
341 required 341 required
342 ></v-text-field> 342 ></v-text-field>
343 </v-flex> 343 </v-flex>
344 </v-layout> 344 </v-layout>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 sm4 class="pt-4 subheading"> 346 <v-flex xs4 sm4 class="pt-4 subheading">
347 <label class="right">Description :</label> 347 <label class="right">Description :</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs8 sm8 class="ml-3"> 349 <v-flex xs8 sm8 class="ml-3">
350 <v-text-field 350 <v-text-field
351 name="name" 351 name="name"
352 type="text" 352 type="text"
353 placeholder="Select Description" 353 placeholder="Select Description"
354 :rules="descriptionRules" 354 :rules="descriptionRules"
355 v-model="addAssignment.description" 355 v-model="addAssignment.description"
356 required 356 required
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 <v-layout> 360 <v-layout>
361 <v-flex xs4 sm4 class="pt-4 subheading"> 361 <v-flex xs4 sm4 class="pt-4 subheading">
362 <label class="right">Deadline :</label> 362 <label class="right">Deadline :</label>
363 </v-flex> 363 </v-flex>
364 <v-flex xs8 sm7 class="ml-3"> 364 <v-flex xs8 sm7 class="ml-3">
365 <v-menu 365 <v-menu
366 ref="menu2" 366 ref="menu2"
367 :close-on-content-click="false" 367 :close-on-content-click="false"
368 v-model="menu2" 368 v-model="menu2"
369 :nudge-right="40" 369 :nudge-right="40"
370 :return-value.sync="addAssignment.date" 370 :return-value.sync="addAssignment.date"
371 lazy 371 lazy
372 transition="scale-transition" 372 transition="scale-transition"
373 offset-y 373 offset-y
374 full-width 374 full-width
375 min-width="290px" 375 min-width="290px"
376 > 376 >
377 <v-text-field 377 <v-text-field
378 slot="activator" 378 slot="activator"
379 v-model="addAssignment.deadline" 379 v-model="addAssignment.deadline"
380 :rules="deadlineRules" 380 :rules="deadlineRules"
381 placeholder="Select Date" 381 placeholder="Select Date"
382 append-icon="event" 382 append-icon="event"
383 readonly 383 readonly
384 ></v-text-field> 384 ></v-text-field>
385 <v-date-picker 385 <v-date-picker
386 v-model="addAssignment.deadline" 386 v-model="addAssignment.deadline"
387 @input="$refs.menu2.save(addAssignment.date)" 387 @input="$refs.menu2.save(addAssignment.date)"
388 ></v-date-picker> 388 ></v-date-picker>
389 </v-menu> 389 </v-menu>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 <v-layout> 392 <v-layout>
393 <v-flex xs4 sm4 class="pt-4 subheading"> 393 <v-flex xs4 sm4 class="pt-4 subheading">
394 <label class="right">Class :</label> 394 <label class="right">Class :</label>
395 </v-flex> 395 </v-flex>
396 <v-flex xs8 sm8 class="ml-3"> 396 <v-flex xs8 sm8 class="ml-3">
397 <v-select 397 <v-select
398 :items="classList" 398 :items="classList"
399 placeholder="Select Class" 399 placeholder="Select Class"
400 item-text="classNum" 400 item-text="classNum"
401 item-value="_id" 401 item-value="_id"
402 v-model="addAssignment.classId" 402 v-model="addAssignment.classId"
403 name="Select Class" 403 name="Select Class"
404 :rules="classRules" 404 :rules="classRules"
405 @change="getSections(addAssignment.classId)" 405 @change="getSections(addAssignment.classId)"
406 class="pl-2" 406 class="pl-2"
407 required 407 required
408 ></v-select> 408 ></v-select>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs4 sm4 class="pt-4 subheading"> 412 <v-flex xs4 sm4 class="pt-4 subheading">
413 <label class="right">Section :</label> 413 <label class="right">Section :</label>
414 </v-flex> 414 </v-flex>
415 <v-flex xs8 sm8 class="ml-3"> 415 <v-flex xs8 sm8 class="ml-3">
416 <v-select 416 <v-select
417 :items="addSection" 417 :items="addSection"
418 placeholder="Select Section" 418 placeholder="Select Section"
419 item-text="name" 419 item-text="name"
420 item-value="_id" 420 item-value="_id"
421 v-model="addAssignment.sectionId" 421 v-model="addAssignment.sectionId"
422 name="Select Section" 422 name="Select Section"
423 :rules="sectionRules" 423 :rules="sectionRules"
424 @change="getClassSubject(addAssignment.classId)" 424 @change="getClassSubject(addAssignment.classId)"
425 class="px-2" 425 class="px-2"
426 required 426 required
427 ></v-select> 427 ></v-select>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 <v-layout> 430 <v-layout>
431 <v-flex xs3 sm4 class="pt-4 subheading"> 431 <v-flex xs3 sm4 class="pt-4 subheading">
432 <label class="right">Subject :</label> 432 <label class="right">Subject :</label>
433 </v-flex> 433 </v-flex>
434 <v-flex xs8 sm8 class="ml-2"> 434 <v-flex xs8 sm8 class="ml-2">
435 <v-select 435 <v-select
436 :items="subjectList.subjects" 436 :items="subjectList.subjects"
437 placeholder="Select your subject" 437 placeholder="Select your subject"
438 v-model="addAssignment.subjectName" 438 v-model="addAssignment.subjectName"
439 item-text="subjectName" 439 item-text="subjectName"
440 item-value="_id" 440 item-value="_id"
441 :rules="subjectRules" 441 :rules="subjectRules"
442 required 442 required
443 ></v-select> 443 ></v-select>
444 </v-flex> 444 </v-flex>
445 </v-layout> 445 </v-layout>
446 <v-layout> 446 <v-layout>
447 <v-flex xs4 class="pt-4 subheading"> 447 <v-flex xs4 class="pt-4 subheading">
448 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label> 448 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
449 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label> 449 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>
450 </v-flex> 450 </v-flex>
451 <v-flex xs8 class="ml-3"> 451 <v-flex xs8 class="ml-3">
452 <v-text-field 452 <v-text-field
453 placeholder="Select File" 453 placeholder="Select File"
454 @click="pickFile" 454 @click="pickFile"
455 v-model="imageName" 455 v-model="imageName"
456 append-icon="attach_file" 456 append-icon="attach_file"
457 ></v-text-field> 457 ></v-text-field>
458 <input 458 <input
459 type="file" 459 type="file"
460 style="display:none" 460 style="display:none"
461 ref="image" 461 ref="image"
462 accept="image/*" 462 accept="image/*"
463 @change="onFilePicked" 463 @change="onFilePicked"
464 /> 464 />
465 </v-flex> 465 </v-flex>
466 </v-layout> 466 </v-layout>
467 <v-layout> 467 <v-layout>
468 <v-flex xs12 sm12> 468 <v-flex xs12 sm12>
469 <v-card-actions> 469 <v-card-actions>
470 <v-spacer></v-spacer> 470 <v-spacer></v-spacer>
471 <v-btn 471 <v-btn
472 @click="submit" 472 @click="submit"
473 round 473 round
474 dark 474 dark
475 :loading="loading" 475 :loading="loading"
476 class="add-button" 476 class="add-button"
477 >Add Assignment</v-btn> 477 >Add Assignment</v-btn>
478 </v-card-actions> 478 </v-card-actions>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 </v-form> 481 </v-form>
482 </v-flex> 482 </v-flex>
483 </v-layout> 483 </v-layout>
484 </v-container> 484 </v-container>
485 </v-card> 485 </v-card>
486 </v-dialog> 486 </v-dialog>
487 <div class="loader" v-if="showLoader"> 487 <div class="loader" v-if="showLoader">
488 <v-progress-circular indeterminate color="white"></v-progress-circular> 488 <v-progress-circular indeterminate color="white"></v-progress-circular>
489 </div> 489 </div>
490 </v-container> 490 </v-container>
491 </template> 491 </template>
492 492
493 <script> 493 <script>
494 import http from "@/Services/http.js"; 494 import http from "@/Services/http.js";
495 import Util from "@/util"; 495 import Util from "@/util";
496 import moment from "moment"; 496 import moment from "moment";
497 import jsPDF from "jspdf"; 497 import jsPDF from "jspdf";
498 import { saveAs } from "file-saver"; 498 import { saveAs } from "file-saver";
499 499
500 export default { 500 export default {
501 data: () => ({ 501 data: () => ({
502 snackbar: false, 502 snackbar: false,
503 role: "", 503 role: "",
504 menu1: false, 504 menu1: false,
505 menu2: false, 505 menu2: false,
506 y: "top", 506 y: "top",
507 x: "right", 507 x: "right",
508 mode: "", 508 mode: "",
509 timeout: 3000, 509 timeout: 3000,
510 text: "", 510 text: "",
511 color: "", 511 color: "",
512 show: true, 512 show: true,
513 showSearch: false, 513 showSearch: false,
514 showLoader: false, 514 showLoader: false,
515 loading: false, 515 loading: false,
516 editLoading: false, 516 editLoading: false,
517 date: null, 517 date: null,
518 search: "", 518 search: "",
519 viewAssignmentDialog: false, 519 viewAssignmentDialog: false,
520 editAssignmentDialog: false, 520 editAssignmentDialog: false,
521 valid: true, 521 valid: true,
522 validEditAssignment: true, 522 validEditAssignment: true,
523 addAssignmentDialog: false, 523 addAssignmentDialog: false,
524 524
525 pagination: { 525 pagination: {
526 rowsPerPage: 10 526 rowsPerPage: 10,
527 }, 527 },
528 token: "", 528 token: "",
529 headers: [ 529 headers: [
530 { 530 {
531 text: "No", 531 text: "No",
532 align: "", 532 align: "",
533 sortable: false, 533 sortable: false,
534 value: "No" 534 value: "No",
535 }, 535 },
536 { 536 {
537 text: "Title", 537 text: "Title",
538 value: "title", 538 value: "title",
539 sortable: false, 539 sortable: false,
540 align: "center" 540 align: "center",
541 }, 541 },
542 { 542 {
543 text: "Description", 543 text: "Description",
544 value: "description", 544 value: "description",
545 sortable: false, 545 sortable: false,
546 align: "center" 546 align: "center",
547 }, 547 },
548 { 548 {
549 text: "Deadline", 549 text: "Deadline",
550 value: "deadline", 550 value: "deadline",
551 sortable: false, 551 sortable: false,
552 align: "center" 552 align: "center",
553 }, 553 },
554 { 554 {
555 text: "Section", 555 text: "Section",
556 value: "name", 556 value: "name",
557 sortable: false, 557 sortable: false,
558 align: "center" 558 align: "center",
559 }, 559 },
560 { 560 {
561 text: "Uploader", 561 text: "Uploader",
562 value: "name", 562 value: "name",
563 sortable: false, 563 sortable: false,
564 align: "center" 564 align: "center",
565 }, 565 },
566 { 566 {
567 text: "File", 567 text: "File",
568 value: "file", 568 value: "file",
569 sortable: false, 569 sortable: false,
570 align: "center" 570 align: "center",
571 }, 571 },
572 { text: "Action", value: "", sortable: false, align: "center" } 572 { text: "Action", value: "", sortable: false, align: "center" },
573 ], 573 ],
574 574
575 showPdfData: false, 575 showPdfData: false,
576 loadingPdf: false, 576 loadingPdf: false,
577 hideData: true, 577 hideData: true,
578 578
579 assignmentData: [], 579 assignmentData: [],
580 subjectList: [], 580 subjectList: [],
581 classList: [], 581 classList: [],
582 addSection: [], 582 addSection: [],
583 editedIndex: -1, 583 editedIndex: -1,
584 addSubject: {}, 584 addSubject: {},
585 585
586 editedItem: { 586 editedItem: {
587 title: "", 587 title: "",
588 description: "", 588 description: "",
589 deadline: "", 589 deadline: "",
590 classId: "", 590 classId: "",
591 sectionId: "", 591 sectionId: "",
592 subjectName: "", 592 subjectName: "",
593 fileType: "" 593 fileType: "",
594 }, 594 },
595 addAssignment: {}, 595 addAssignment: {},
596 showAssignment: {}, 596 showAssignment: {},
597 597
598 imageData: {}, 598 imageData: {},
599 imageName: "", 599 imageName: "",
600 imageUrl: "", 600 imageUrl: "",
601 imageFile: "", 601 imageFile: "",
602 602
603 titleRules: [v => !!v || " Title is required"], 603 titleRules: [(v) => !!v || " Title is required"],
604 descriptionRules: [v => !!v || " Description is required"], 604 descriptionRules: [(v) => !!v || " Description is required"],
605 deadlineRules: [v => !!v || " Deadline is required"], 605 deadlineRules: [(v) => !!v || " Deadline is required"],
606 classRules: [v => !!v || "Class is required"], 606 classRules: [(v) => !!v || "Class is required"],
607 sectionRules: [v => !!v || "Section is required"], 607 sectionRules: [(v) => !!v || "Section is required"],
608 subjectRules: [v => !!v || "Student is required"], 608 subjectRules: [(v) => !!v || "Student is required"],
609 fileRules: [v => !!v || "File is required"] 609 fileRules: [(v) => !!v || "File is required"],
610 }), 610 }),
611 methods: { 611 methods: {
612 dates: function(date) { 612 dates: function (date) {
613 return moment(date).format("MMMM DD, YYYY"); 613 return moment(date).format("MMMM DD, YYYY");
614 }, 614 },
615 pickFile() { 615 pickFile() {
616 this.$refs.image.click(); 616 this.$refs.image.click();
617 }, 617 },
618 editItem(item) { 618 editItem(item) {
619 this.editedIndex = this.assignmentData; 619 this.editedIndex = this.assignmentData;
620 this.editedItem = Object.assign({}, item); 620 this.editedItem = Object.assign({}, item);
621 this.dialog = true; 621 this.dialog = true;
622 this.editAssignmentDialog = true; 622 this.editAssignmentDialog = true;
623 }, 623 },
624 profile(item) { 624 profile(item) {
625 this.editedIndex = this.assignmentData; 625 this.editedIndex = this.assignmentData;
626 this.editedItem = Object.assign({}, item); 626 this.editedItem = Object.assign({}, item);
627 this.dialog1 = true; 627 this.dialog1 = true;
628 this.viewAssignmentDialog = true; 628 this.viewAssignmentDialog = true;
629 }, 629 },
630 deleteItem(item) { 630 deleteItem(item) {
631 let deleteAssignment = { 631 let deleteAssignment = {
632 assignmentId: item._id 632 assignmentId: item._id,
633 }; 633 };
634 http() 634 http()
635 .delete( 635 .delete(
636 "/deleteAssignment", 636 "/deleteAssignment",
637 confirm("Are you sure you want to delete this?") && { 637 confirm("Are you sure you want to delete this?") && {
638 params: deleteAssignment 638 params: deleteAssignment,
639 }, 639 },
640 { 640 {
641 headers: { Authorization: "Bearer " + this.token } 641 headers: { Authorization: "Bearer " + this.token },
642 } 642 }
643 ) 643 )
644 .then(response => { 644 .then((response) => {
645 this.getAssignmentList(); 645 this.getAssignmentList();
646 this.snackbar = true; 646 this.snackbar = true;
647 this.text = "Successfully delete Existing Assignment"; 647 this.text = "Successfully delete Existing Assignment";
648 this.color = "green"; 648 this.color = "green";
649 }) 649 })
650 .catch(error => { 650 .catch((error) => {
651 this.snackbar = true; 651 this.snackbar = true;
652 this.text = error.response.data.message; 652 this.text = error.response.data.message;
653 this.color = "error"; 653 this.color = "error";
654 }); 654 });
655 }, 655 },
656 close() { 656 close() {
657 this.editAssignmentDialog = false; 657 this.editAssignmentDialog = false;
658 }, 658 },
659 close1() { 659 close1() {
660 this.viewAssignmentDialog = false; 660 this.viewAssignmentDialog = false;
661 }, 661 },
662 submit() { 662 submit() {
663 var addAssignment = { 663 var addAssignment = {
664 title: this.addAssignment.title, 664 title: this.addAssignment.title,
665 description: this.addAssignment.description, 665 description: this.addAssignment.description,
666 deadline: this.addAssignment.deadline, 666 deadline: this.addAssignment.deadline,
667 classId: this.addAssignment.classId, 667 classId: this.addAssignment.classId,
668 sectionId: this.addAssignment.sectionId, 668 sectionId: this.addAssignment.sectionId,
669 subjectName: this.addAssignment.subjectName, 669 subjectName: this.addAssignment.subjectName,
670 file: this.addAssignment.imageName, 670 file: this.addAssignment.imageName,
671 fileName: this.imageName 671 fileName: this.imageName,
672 }; 672 };
673 var signatures = { 673 var signatures = {
674 JVBERi0: "other", 674 JVBERi0: "other",
675 iVBORw0KGgo: "image", 675 iVBORw0KGgo: "image",
676 UEsDBBQ: "other", 676 UEsDBBQ: "other",
677 "/": "image", 677 "/": "image",
678 AAABAA: "image", 678 AAABAA: "image",
679 IywiV2hhdC: "other", 679 IywiV2hhdC: "other",
680 bmFtZSxl: "other" 680 bmFtZSxl: "other",
681 }; 681 };
682 function detectMimeType(b64) { 682 function detectMimeType(b64) {
683 for (var s in signatures) { 683 for (var s in signatures) {
684 if (b64.indexOf(s) === 0) { 684 if (b64.indexOf(s) === 0) {
685 return signatures[s]; 685 return signatures[s];
686 } 686 }
687 } 687 }
688 } 688 }
689 if (this.$refs.form.validate()) { 689 if (this.$refs.form.validate()) {
690 if (this.imageUrl) { 690 if (this.imageUrl) {
691 var str = this.imageUrl; 691 var str = this.imageUrl;
692 const [baseUrl, imageUrl] = str.split(/,/); 692 const [baseUrl, imageUrl] = str.split(/,/);
693 addAssignment.upload = imageUrl; 693 addAssignment.upload = imageUrl;
694 addAssignment.fileType = detectMimeType(imageUrl); 694 addAssignment.fileType = detectMimeType(imageUrl);
695 } 695 }
696 console.log("data===>", addAssignment); 696 console.log("data===>", addAssignment);
697 http() 697 http()
698 .post("/createAssignment", addAssignment) 698 .post("/createAssignment", addAssignment)
699 .then(response => { 699 .then((response) => {
700 this.getAssignmentList(); 700 this.getAssignmentList();
701 this.snackbar = true; 701 this.snackbar = true;
702 this.text = "Syllabus added successfully"; 702 this.text = "Syllabus added successfully";
703 this.color = "green"; 703 this.color = "green";
704 this.addAssignmentDialog = false; 704 this.addAssignmentDialog = false;
705 this.clear(); 705 this.clear();
706 }) 706 })
707 .catch(error => { 707 .catch((error) => {
708 // console.log(error); 708 // console.log(error);
709 this.snackbar = true; 709 this.snackbar = true;
710 this.text = error.response.data.message; 710 this.text = error.response.data.message;
711 this.color = "red"; 711 this.color = "red";
712 }); 712 });
713 } 713 }
714 }, 714 },
715 getAssignmentList() { 715 getAssignmentList() {
716 if (this.addAssignment.classId) { 716 if (this.addAssignment.classId) {
717 this.addAssignment.classId = this.addAssignment.classId; 717 this.addAssignment.classId = this.addAssignment.classId;
718 } 718 }
719 this.showLoader = true; 719 this.showLoader = true;
720 http() 720 http()
721 .get( 721 .get(
722 "/getAssignmentList", 722 "/getAssignmentList",
723 { 723 {
724 params: { classId: this.showAssignment.classId } 724 params: { classId: this.showAssignment.classId },
725 }, 725 },
726 { 726 {
727 headers: { Authorization: "Bearer " + this.token } 727 headers: { Authorization: "Bearer " + this.token },
728 } 728 }
729 ) 729 )
730 .then(response => { 730 .then((response) => {
731 this.assignmentData = response.data.data; 731 this.assignmentData = response.data.data;
732 this.showLoader = false; 732 this.showLoader = false;
733 this.loadingSearch = false; 733 this.loadingSearch = false;
734 }) 734 })
735 .catch(error => { 735 .catch((error) => {
736 // console.log("err====>", err); 736 // console.log("err====>", err);
737 this.showLoader = false; 737 this.showLoader = false;
738 this.loadingSearch = false; 738 this.loadingSearch = false;
739 this.snackbar = true; 739 this.snackbar = true;
740 this.text = error.response.data.message; 740 this.text = error.response.data.message;
741 if (error.response.status === 401) { 741 if (error.response.status === 401) {
742 this.$router.replace({ path: "/" }); 742 this.$router.replace({ path: "/" });
743 this.$store.dispatch("setToken", null); 743 this.$store.dispatch("setToken", null);
744 this.$store.dispatch("Id", null); 744 this.$store.dispatch("Id", null);
745 } 745 }
746 }); 746 });
747 }, 747 },
748 clear() { 748 clear() {
749 this.$refs.form.reset(); 749 this.$refs.form.reset();
750 }, 750 },
751 save() { 751 save() {
752 if (this.$refs.formEditAssignment.validate()) { 752 if (this.$refs.formEditAssignment.validate()) {
753 let editAssignment = { 753 let editAssignment = {
754 assignmentId: this.editedItem._id, 754 assignmentId: this.editedItem._id,
755 title: this.addAssignment.title, 755 title: this.addAssignment.title,
756 description: this.addAssignment.description, 756 description: this.addAssignment.description,
757 deadline: this.addAssignment.deadline, 757 deadline: this.addAssignment.deadline,
758 classId: this.addAssignment.classId, 758 classId: this.addAssignment.classId,
759 sectionId: this.addAssignment.sectionId, 759 sectionId: this.addAssignment.sectionId,
760 subjectName: this.addAssignment.subjectName, 760 subjectName: this.addAssignment.subjectName,
761 file: this.addAssignment.imageName, 761 file: this.addAssignment.imageName,
762 fileName: this.imageName 762 fileName: this.imageName,
763 }; 763 };
764 this.editLoading = true; 764 this.editLoading = true;
765 var signatures = { 765 var signatures = {
766 JVBERi0: "other", 766 JVBERi0: "other",
767 iVBORw0KGgo: "image", 767 iVBORw0KGgo: "image",
768 UEsDBBQ: "other", 768 UEsDBBQ: "other",
769 "/": "image", 769 "/": "image",
770 AAABAA: "image", 770 AAABAA: "image",
771 IywiV2hhdC: "other", 771 IywiV2hhdC: "other",
772 bmFtZSxl: "other" 772 bmFtZSxl: "other",
773 }; 773 };
774 function detectMimeType(b64) { 774 function detectMimeType(b64) {
775 for (var s in signatures) { 775 for (var s in signatures) {
776 if (b64.indexOf(s) === 0) { 776 if (b64.indexOf(s) === 0) {
777 return signatures[s]; 777 return signatures[s];
778 } 778 }
779 } 779 }
780 } 780 }
781 if (this.imageUrl) { 781 if (this.imageUrl) {
782 var str = this.imageUrl; 782 var str = this.imageUrl;
783 const [baseUrl, imageUrl] = str.split(/,/); 783 const [baseUrl, imageUrl] = str.split(/,/);
784 editAssignment.upload = imageUrl; 784 editAssignment.upload = imageUrl;
785 editAssignment.fileType = detectMimeType(imageUrl); 785 editAssignment.fileType = detectMimeType(imageUrl);
786 } 786 }
787 http() 787 http()
788 .put("/updateAssignment", editAssignment) 788 .put("/updateAssignment", editAssignment)
789 .then(response => { 789 .then((response) => {
790 this.snackbar = true; 790 this.snackbar = true;
791 this.text = "Successfully Edit Existing Assignment"; 791 this.text = "Successfully Edit Existing Assignment";
792 this.color = "green"; 792 this.color = "green";
793 this.getAssignmentList();
793 this.editLoading = false; 794 this.editLoading = false;
794 this.editAssignmentDialog = false; 795 this.editAssignmentDialog = false;
795 this.getAssignmentList();
796 }) 796 })
797 .catch(error => { 797 .catch((error) => {
798 this.editLoading = false; 798 this.editLoading = false;
799 // console.log(error); 799 // console.log(error);
800 }); 800 });
801 } 801 }
802 }, 802 },
803 getClass() { 803 getClass() {
804 http() 804 http()
805 .get("/getClassesList", { 805 .get("/getClassesList", {
806 headers: { Authorization: "Bearer " + this.token } 806 headers: { Authorization: "Bearer " + this.token },
807 }) 807 })
808 .then(response => { 808 .then((response) => {
809 this.classList = response.data.data; 809 this.classList = response.data.data;
810 }) 810 })
811 .catch(error => { 811 .catch((error) => {
812 if (error.response.status === 401) { 812 if (error.response.status === 401) {
813 this.$router.replace({ path: "/" }); 813 this.$router.replace({ path: "/" });
814 this.$store.dispatch("setToken", null); 814 this.$store.dispatch("setToken", null);
815 this.$store.dispatch("Id", null); 815 this.$store.dispatch("Id", null);
816 } 816 }
817 }); 817 });
818 }, 818 },
819 getSections(_id) { 819 getSections(_id) {
820 var token = this.$store.state.token; 820 var token = this.$store.state.token;
821 this.showLoader = true; 821 this.showLoader = true;
822 http() 822 http()
823 .get( 823 .get(
824 "/getSectionsList", 824 "/getSectionsList",
825 { params: { classId: _id } }, 825 { params: { classId: _id } },
826 { 826 {
827 headers: { Authorization: "Bearer " + token } 827 headers: { Authorization: "Bearer " + token },
828 } 828 }
829 ) 829 )
830 .then(response => { 830 .then((response) => {
831 this.addSection = response.data.data; 831 this.addSection = response.data.data;
832 this.showLoader = false; 832 this.showLoader = false;
833 }) 833 })
834 .catch(err => { 834 .catch((err) => {
835 this.showLoader = false; 835 this.showLoader = false;
836 }); 836 });
837 }, 837 },
838 getClassSubject(_id) { 838 getClassSubject(_id) {
839 this.showLoader = true; 839 this.showLoader = true;
840 // this.classId = this.classId; 840 // this.classId = this.classId;
841 http() 841 http()
842 .get( 842 .get(
843 "/getParticularClass", 843 "/getParticularClass",
844 { params: { classId: _id } }, 844 { params: { classId: _id } },
845 { 845 {
846 headers: { Authorization: "Bearer " + this.token } 846 headers: { Authorization: "Bearer " + this.token },
847 } 847 }
848 ) 848 )
849 .then(response => { 849 .then((response) => {
850 this.subjectList = response.data.data; 850 this.subjectList = response.data.data;
851 this.showLoader = false; 851 this.showLoader = false;
852 }) 852 })
853 .catch(err => { 853 .catch((err) => {
854 this.showLoader = false; 854 this.showLoader = false;
855 }); 855 });
856 }, 856 },
857 onFilePicked(e) { 857 onFilePicked(e) {
858 const files = e.target.files; 858 const files = e.target.files;
859 this.upload = e.target.files[0]; 859 this.upload = e.target.files[0];
860 if (files[0] !== undefined) { 860 if (files[0] !== undefined) {
861 this.imageName = files[0].name; 861 this.imageName = files[0].name;
862 if (this.imageName.lastIndexOf(".") <= 0) { 862 if (this.imageName.lastIndexOf(".") <= 0) {
863 return; 863 return;
864 } 864 }
865 const fr = new FileReader(); 865 const fr = new FileReader();
866 fr.readAsDataURL(files[0]); 866 fr.readAsDataURL(files[0]);
867 fr.addEventListener("load", () => { 867 fr.addEventListener("load", () => {
868 this.imageUrl = fr.result; 868 this.imageUrl = fr.result;
869 this.imageFile = files[0]; // this is an image file that can be sent to server... 869 this.imageFile = files[0]; // this is an image file that can be sent to server...
870 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 870 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
871 }); 871 });
872 console.log("this.imageName", this.imageName); 872 // console.log("this.imageName", this.imageName);
873 } else { 873 } else {
874 this.imageName = ""; 874 this.imageName = "";
875 this.imageFile = ""; 875 this.imageFile = "";
876 this.imageUrl = ""; 876 this.imageUrl = "";
877 } 877 }
878 }, 878 },
879 displaySearch() { 879 displaySearch() {
880 (this.show = false), (this.showSearch = true); 880 (this.show = false), (this.showSearch = true);
881 }, 881 },
882 closeSearch() { 882 closeSearch() {
883 this.showSearch = false; 883 this.showSearch = false;
884 this.show = true; 884 this.show = true;
885 this.search = ""; 885 this.search = "";
886 }, 886 },
887 887
888 async generatePDF2Canvas(item) { 888 async generatePDF2Canvas(item) {
889 var dataType = ""; 889 var dataType = "";
890 var type = ""; 890 var type = "";
891 if (item.fileType == "image") { 891 if (item.fileType == "image") {
892 dataType = "file.jpg"; 892 dataType = "file.jpg";
893 } else if (item.fileType == "other") { 893 } else if (item.fileType == "other") {
894 dataType = "file.pdf"; 894 dataType = "file.pdf";
895 type = "application/pdf"; 895 type = "application/pdf";
896 } 896 }
897 var FileSaver = require("file-saver"); 897 var FileSaver = require("file-saver");
898 FileSaver.saveAs(item.file, "image.jpg"); 898 FileSaver.saveAs(item.file, "image.jpg");
899 } 899 },
900 }, 900 },
901 mounted() { 901 mounted() {
902 this.token = this.$store.state.token; 902 this.token = this.$store.state.token;
903 this.role = this.$store.state.role; 903 this.role = this.$store.state.role;
904 this.getClass(); 904 this.getClass();
905 } 905 },
906 }; 906 };
src/pages/Academic/routine.vue
Diff comments   View file @dd61212
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="editRoutineDialog" max-width="600px" persistent> 4 <v-dialog v-model="editRoutineDialog" 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 Routine</label> 8 <label class="title text-xs-center">Edit Routine</label>
9 <v-icon size="24" class="right" @click="editRoutineDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editRoutineDialog = 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="formEditRoutine" v-model="validEditRoutine" lazy-validation> 13 <v-form ref="formEditRoutine" v-model="validEditRoutine" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs3 sm4 class="pt-4 subheading"> 15 <v-flex xs3 sm4 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 sm8 class="ml-2"> 18 <v-flex xs8 sm8 class="ml-2">
19 <v-select 19 <v-select
20 :items="classList" 20 :items="classList"
21 label="Select your Class" 21 label="Select your Class"
22 v-model="editedItem.classId" 22 v-model="editedItem.classId"
23 item-text="classNum" 23 item-text="classNum"
24 item-value="_id" 24 item-value="_id"
25 :rules="classRules" 25 :rules="classRules"
26 @change="getClassSubject(addRoutine.classId)" 26 @change="getClassSubject(addRoutine.classId)"
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 xs3 sm4 class="pt-4 subheading"> 32 <v-flex xs3 sm4 class="pt-4 subheading">
33 <label class="right">Subject :</label> 33 <label class="right">Subject :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-2"> 35 <v-flex xs8 sm8 class="ml-2">
36 <v-select 36 <v-select
37 :items="subjectList.subjects" 37 :items="subjectList.subjects"
38 label="Select your subject" 38 label="Select your subject"
39 v-model="editedItem.subjectName" 39 v-model="editedItem.subjectName"
40 item-text="subjectName" 40 item-text="subjectName"
41 item-value="_id" 41 item-value="_id"
42 :rules="subjectRules" 42 :rules="subjectRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 <v-layout> 47 <v-layout>
48 <v-flex xs4 sm4 class="pt-4 subheading"> 48 <v-flex xs4 sm4 class="pt-4 subheading">
49 <label class="right">Teacher Name :</label> 49 <label class="right">Teacher Name :</label>
50 </v-flex> 50 </v-flex>
51 <v-flex xs8 sm8 class="ml-3"> 51 <v-flex xs8 sm8 class="ml-3">
52 <v-select 52 <v-select
53 :items="teacherList" 53 :items="teacherList"
54 label="Select your teacher" 54 label="Select your teacher"
55 v-model="editedItem.teacherId" 55 v-model="editedItem.teacherId"
56 item-text="name" 56 item-text="name"
57 item-value="_id" 57 item-value="_id"
58 :rules="teacherRules" 58 :rules="teacherRules"
59 required 59 required
60 ></v-select> 60 ></v-select>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 <v-flex xs5 sm4 class="pt-4 subheading"> 64 <v-flex xs5 sm4 class="pt-4 subheading">
65 <label class="right">Starting time:</label> 65 <label class="right">Starting time:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs7 sm6 class="ml-3"> 67 <v-flex xs7 sm6 class="ml-3">
68 <v-menu 68 <v-menu
69 ref="menuC" 69 ref="menuC"
70 :close-on-content-click="false" 70 :close-on-content-click="false"
71 v-model="menu4" 71 v-model="menu4"
72 :nudge-right="40" 72 :nudge-right="40"
73 lazy 73 lazy
74 transition="scale-transition" 74 transition="scale-transition"
75 offset-y 75 offset-y
76 full-width 76 full-width
77 max-width="290px" 77 max-width="290px"
78 min-width="290px" 78 min-width="290px"
79 > 79 >
80 <v-text-field 80 <v-text-field
81 slot="activator" 81 slot="activator"
82 v-model="editedItem.startingTime" 82 v-model="editedItem.startingTime"
83 placeholder="Select your starting time" 83 placeholder="Select your starting time"
84 append-icon="access_time" 84 append-icon="access_time"
85 readonly 85 readonly
86 ></v-text-field> 86 ></v-text-field>
87 <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker> 87 <v-time-picker v-model="editedItem.startingTime" @change="menu4= false"></v-time-picker>
88 </v-menu> 88 </v-menu>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 <v-layout> 91 <v-layout>
92 <v-flex xs5 sm4 class="pt-4 subheading"> 92 <v-flex xs5 sm4 class="pt-4 subheading">
93 <label class="right">Ending Time:</label> 93 <label class="right">Ending Time:</label>
94 </v-flex> 94 </v-flex>
95 <v-flex xs7 sm6 class="ml-3"> 95 <v-flex xs7 sm6 class="ml-3">
96 <v-menu 96 <v-menu
97 ref="menuB" 97 ref="menuB"
98 :close-on-content-click="false" 98 :close-on-content-click="false"
99 v-model="menu3" 99 v-model="menu3"
100 :nudge-right="40" 100 :nudge-right="40"
101 lazy 101 lazy
102 transition="scale-transition" 102 transition="scale-transition"
103 offset-y 103 offset-y
104 full-width 104 full-width
105 max-width="290px" 105 max-width="290px"
106 min-width="290px" 106 min-width="290px"
107 > 107 >
108 <v-text-field 108 <v-text-field
109 slot="activator" 109 slot="activator"
110 v-model="editedItem.endingTime" 110 v-model="editedItem.endingTime"
111 placeholder="Select your end time" 111 placeholder="Select your end time"
112 append-icon="access_time" 112 append-icon="access_time"
113 readonly 113 readonly
114 ></v-text-field> 114 ></v-text-field>
115 <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker> 115 <v-time-picker v-model="editedItem.endingTime" @change="menu3 = false"></v-time-picker>
116 </v-menu> 116 </v-menu>
117 </v-flex> 117 </v-flex>
118 </v-layout> 118 </v-layout>
119 <v-layout> 119 <v-layout>
120 <v-flex xs4 sm4 class="pt-4 subheading"> 120 <v-flex xs4 sm4 class="pt-4 subheading">
121 <label class="right">Room:</label> 121 <label class="right">Room:</label>
122 </v-flex> 122 </v-flex>
123 <v-flex xs8 sm8 class="ml-3"> 123 <v-flex xs8 sm8 class="ml-3">
124 <v-text-field 124 <v-text-field
125 label="fill your room" 125 label="fill your room"
126 :rules="roomRules" 126 :rules="roomRules"
127 v-model="editedItem.room" 127 v-model="editedItem.room"
128 @keyup.enter="submit" 128 @keyup.enter="submit"
129 ></v-text-field> 129 ></v-text-field>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs4 sm4 class="pt-4 subheading"> 133 <v-flex xs4 sm4 class="pt-4 subheading">
134 <label class="right">Period:</label> 134 <label class="right">Period:</label>
135 </v-flex> 135 </v-flex>
136 <v-flex xs8 sm8 class="ml-3"> 136 <v-flex xs8 sm8 class="ml-3">
137 <v-text-field 137 <v-text-field
138 label="fill your period" 138 label="fill your period"
139 :rules="periodRules" 139 :rules="periodRules"
140 v-model="editedItem.period" 140 v-model="editedItem.period"
141 @keyup.enter="submit" 141 @keyup.enter="submit"
142 ></v-text-field> 142 ></v-text-field>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 <v-layout> 145 <v-layout>
146 <v-flex xs12 sm12> 146 <v-flex xs12 sm12>
147 <v-card-actions> 147 <v-card-actions>
148 <v-spacer></v-spacer> 148 <v-spacer></v-spacer>
149 <v-btn 149 <v-btn
150 @click="update" 150 @click="update"
151 round 151 round
152 dark 152 dark
153 :loading="loading" 153 :loading="loading"
154 class="add-button" 154 class="add-button"
155 >Update Routine</v-btn> 155 >Update Routine</v-btn>
156 </v-card-actions> 156 </v-card-actions>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-form> 159 </v-form>
160 </v-container> 160 </v-container>
161 </v-card> 161 </v-card>
162 </v-dialog> 162 </v-dialog>
163 163
164 <!-- ****** EXISTING ROUTINE TABLE ****** --> 164 <!-- ****** EXISTING ROUTINE TABLE ****** -->
165 <v-toolbar color="transparent" flat> 165 <v-toolbar color="transparent" flat>
166 <v-btn 166 <v-btn
167 fab 167 fab
168 dark 168 dark
169 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 169 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
170 small 170 small
171 @click="addRoutineDialog = true" 171 @click="addRoutineDialog = true"
172 > 172 >
173 <v-icon dark>add</v-icon> 173 <v-icon dark>add</v-icon>
174 </v-btn> 174 </v-btn>
175 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 175 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
176 <v-btn 176 <v-btn
177 round 177 round
178 class="open-dialog-button" 178 class="open-dialog-button"
179 dark 179 dark
180 @click="addRoutineDialog = true" 180 @click="addRoutineDialog = true"
181 v-if="role != 'TEACHER' " 181 v-if="role != 'TEACHER' "
182 > 182 >
183 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine 183 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Routine
184 </v-btn> 184 </v-btn>
185 </v-flex> 185 </v-flex>
186 <v-spacer></v-spacer> 186 <v-spacer></v-spacer>
187 <v-flex lg2 md2 xs12 v-show="show"> 187 <v-flex lg2 md2 xs12 v-show="show">
188 <v-select 188 <v-select
189 :items="classList" 189 :items="classList"
190 label="Select Your Class" 190 label="Select Your Class"
191 v-model="addRoutine.classId" 191 v-model="addRoutineList.classId"
192 item-text="classNum" 192 item-text="classNum"
193 item-value="_id" 193 item-value="_id"
194 name="Select Class" 194 name="Select Class"
195 :rules="classRules" 195 :rules="classRules"
196 @change="getSections(addRoutine.classId)" 196 @change="getSections(addRoutineList.classId)"
197 class="pl-2" 197 class="pl-2"
198 required 198 required
199 ></v-select> 199 ></v-select>
200 </v-flex> 200 </v-flex>
201 <v-flex xs8 sm3 md2 class="mr-3"> 201 <v-flex xs8 sm3 md2 class="mr-3">
202 <v-select 202 <v-select
203 v-model="addRoutine.sectionId" 203 v-model="addRoutineList.sectionId"
204 label="Select your section" 204 label="Select your section"
205 :items="addSection" 205 :items="addSection"
206 item-text="name" 206 item-text="name"
207 item-value="_id" 207 item-value="_id"
208 name="Select Section" 208 name="Select Section"
209 :rules="sectionRules" 209 :rules="sectionRules"
210 @change="getRoutineList()" 210 @change="getRoutineList()"
211 class="pl-2" 211 class="pl-2"
212 required 212 required
213 ></v-select> 213 ></v-select>
214 </v-flex> 214 </v-flex>
215 <v-card-title class="body-1" v-show="show"> 215 <v-card-title class="body-1" v-show="show">
216 <v-btn icon flat @click="displaySearch"> 216 <v-btn icon flat @click="displaySearch">
217 <v-avatar size="27"> 217 <v-avatar size="27">
218 <img src="/static/icon/search.png" alt="icon" /> 218 <img src="/static/icon/search.png" alt="icon" />
219 </v-avatar> 219 </v-avatar>
220 </v-btn> 220 </v-btn>
221 </v-card-title> 221 </v-card-title>
222 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> 222 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
223 <v-layout> 223 <v-layout>
224 <v-text-field 224 <v-text-field
225 v-model="search" 225 v-model="search"
226 label="Search" 226 label="Search"
227 prepend-inner-icon="search" 227 prepend-inner-icon="search"
228 color="primary" 228 color="primary"
229 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 229 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
230 ></v-text-field> 230 ></v-text-field>
231 <v-icon @click="closeSearch" color="error">close</v-icon> 231 <v-icon @click="closeSearch" color="error">close</v-icon>
232 </v-layout> 232 </v-layout>
233 </v-flex> 233 </v-flex>
234 </v-toolbar> 234 </v-toolbar>
235 235
236 <div class="col-sm-12"> 236 <div class="col-sm-12">
237 <div class="box-body"> 237 <div class="box-body">
238 <div class="row"> 238 <div class="row">
239 <div class="col-sm-12"> 239 <div class="col-sm-12">
240 <div class="nav-tabs-custom"> 240 <div class="nav-tabs-custom">
241 <ul class="nav nav-tabs"> 241 <ul class="nav nav-tabs">
242 <li class="active"> 242 <li class="active">
243 <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a> 243 <a data-toggle="tab" href="#all" aria-expanded="true">All Routines</a>
244 </li> 244 </li>
245 </ul> 245 </ul>
246 246
247 <div class="tab-content" v-show="hideTable"> 247 <div class="tab-content" v-show="hideTable">
248 <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar"> 248 <div id="all" class="tab-pane active mCustomScrollbar _mCS_1 mCS_no_scrollbar">
249 <div 249 <div
250 id="mCSB_1" 250 id="mCSB_1"
251 class="mCustomScrollBox mCS-light" 251 class="mCustomScrollBox mCS-light"
252 style="max-height: none;" 252 style="max-height: none;"
253 tabindex="0" 253 tabindex="0"
254 > 254 >
255 <div 255 <div
256 id="mCSB_1_container" 256 id="mCSB_1_container"
257 class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x" 257 class="mCSB_container mCS_x_hidden mCS_no_scrollbar_x"
258 style="position: relative; top: 0px; left: 0px; width: 100%;" 258 style="position: relative; top: 0px; left: 0px; width: 100%;"
259 dir="ltr" 259 dir="ltr"
260 > 260 >
261 <div id="hide-table-2"> 261 <div id="hide-table-2">
262 <table id="table" class="table table-striped"> 262 <table id="table" class="table table-striped">
263 <tbody> 263 <tbody>
264 <tr> 264 <tr>
265 <td>MONDAY</td> 265 <td>MONDAY</td>
266 </tr> 266 </tr>
267 <tr> 267 <tr>
268 <td>TUESDAY</td> 268 <td>TUESDAY</td>
269 </tr> 269 </tr>
270 <tr> 270 <tr>
271 <td>WEDNESDAY</td> 271 <td>WEDNESDAY</td>
272 </tr> 272 </tr>
273 <tr> 273 <tr>
274 <td>THURSDAY</td> 274 <td>THURSDAY</td>
275 </tr> 275 </tr>
276 <tr> 276 <tr>
277 <td>FRIDAY</td> 277 <td>FRIDAY</td>
278 </tr> 278 </tr>
279 <tr> 279 <tr>
280 <td>SATURDAY</td> 280 <td>SATURDAY</td>
281 </tr> 281 </tr>
282 </tbody> 282 </tbody>
283 </table> 283 </table>
284 </div> 284 </div>
285 </div> 285 </div>
286 <div 286 <div
287 id="mCSB_1_scrollbar_horizontal" 287 id="mCSB_1_scrollbar_horizontal"
288 class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal" 288 class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_horizontal"
289 style="display: none;" 289 style="display: none;"
290 > 290 >
291 <div class="mCSB_draggerContainer"> 291 <div class="mCSB_draggerContainer">
292 <div 292 <div
293 id="mCSB_1_dragger_horizontal" 293 id="mCSB_1_dragger_horizontal"
294 class="mCSB_dragger" 294 class="mCSB_dragger"
295 style="position: absolute; min-width: 30px; width: 0px; left: 0px;" 295 style="position: absolute; min-width: 30px; width: 0px; left: 0px;"
296 > 296 >
297 <div class="mCSB_dragger_bar"></div> 297 <div class="mCSB_dragger_bar"></div>
298 </div> 298 </div>
299 <div class="mCSB_draggerRail"></div> 299 <div class="mCSB_draggerRail"></div>
300 </div> 300 </div>
301 </div> 301 </div>
302 </div> 302 </div>
303 </div> 303 </div>
304 </div> 304 </div>
305 <div> 305 <div>
306 <table id="table" class="table table-bordered" v-show="showTable"> 306 <table id="table" class="table table-bordered" v-show="showTable">
307 <tbody> 307 <tbody>
308 <div class="nav-tabs-custom"> 308 <div class="nav-tabs-custom">
309 <div class="tab-content" id="scrolling"> 309 <div class="tab-content" id="scrolling">
310 <div id="hide-table-2"> 310 <div id="hide-table-2">
311 <v-data-table :items="routineList"> 311 <v-data-table :items="routineList">
312 <template slot="items" slot-scope="props"> 312 <template slot="items" slot-scope="props">
313 <tr class="tr"> 313 <tr class="tr">
314 <td>{{ props.item.day }}</td> 314 <td>{{ props.item.day }}</td>
315 <td class="text-center" v-for="list in props.item.lectureRoutine"> 315 <td class="text-center" v-for="list in props.item.lectureRoutine">
316 {{ props.item.classId.classNum }} 316 {{ props.item.classId.classNum }}
317 <br /> 317 <br />
318 {{ props.item.sectionId.name }} 318 {{ props.item.sectionId.name }}
319 <br /> 319 <br />
320 {{ list.startingTime }} - {{ list.endingTime }} 320 {{ list.startingTime }} - {{ list.endingTime }}
321 <br /> 321 <br />
322 {{ list.room }} 322 {{ list.room }}
323 <br /> 323 <br />
324 {{ list.subjectName }} 324 {{ list.subjectName }}
325 <br /> 325 <br />
326 {{ list.teacherId.name}} 326 {{ list.teacherId.name}}
327 <br /> 327 <br />
328 <span> 328 <span>
329 <v-tooltip top> 329 <v-tooltip top>
330 <img 330 <img
331 slot="activator" 331 slot="activator"
332 style="cursor:pointer; width:20px; height:18px; " 332 style="cursor:pointer; width:20px; height:18px; "
333 class="mr-3" 333 class="mr-3"
334 @click="editItem(list, props.item)" 334 @click="editItem(list, props.item)"
335 src="/static/icon/edit.png" 335 src="/static/icon/edit.png"
336 /> 336 />
337 <span>Edit</span> 337 <span>Edit</span>
338 </v-tooltip> 338 </v-tooltip>
339 <v-tooltip top> 339 <v-tooltip top>
340 <img 340 <img
341 slot="activator" 341 slot="activator"
342 style="cursor:pointer; width:20px; height:18px; " 342 style="cursor:pointer; width:20px; height:18px; "
343 class="mr-3" 343 class="mr-3"
344 @click="deleteItem(props.item)" 344 @click="deleteItem(props.item)"
345 src="/static/icon/delete.png" 345 src="/static/icon/delete.png"
346 /> 346 />
347 <span>Delete</span> 347 <span>Delete</span>
348 </v-tooltip> 348 </v-tooltip>
349 </span> 349 </span>
350 </td> 350 </td>
351 </tr> 351 </tr>
352 </template> 352 </template>
353 </v-data-table> 353 </v-data-table>
354 </div> 354 </div>
355 </div> 355 </div>
356 </div> 356 </div>
357 </tbody> 357 </tbody>
358 </table> 358 </table>
359 </div> 359 </div>
360 </div> 360 </div>
361 </div> 361 </div>
362 </div> 362 </div>
363 </div> 363 </div>
364 </div> 364 </div>
365 <!-- ****** ADD MULTIPLE Subject ****** --> 365 <!-- ****** ADD MULTIPLE Subject ****** -->
366 <v-snackbar 366 <v-snackbar
367 :timeout="timeout" 367 :timeout="timeout"
368 :top="y === 'top'" 368 :top="y === 'top'"
369 :right="x === 'right'" 369 :right="x === 'right'"
370 :vertical="mode === 'vertical'" 370 :vertical="mode === 'vertical'"
371 v-model="snackbar" 371 v-model="snackbar"
372 :color="color" 372 :color="color"
373 >{{ text }}</v-snackbar> 373 >{{ text }}</v-snackbar>
374 <v-dialog v-model="addRoutineDialog" max-width="600px"> 374 <v-dialog v-model="addRoutineDialog" max-width="600px">
375 <v-card flat class="card-style pa-2" dark> 375 <v-card flat class="card-style pa-2" dark>
376 <v-layout> 376 <v-layout>
377 <v-flex xs12> 377 <v-flex xs12>
378 <label class="title text-xs-center">Add Routine</label> 378 <label class="title text-xs-center">Add Routine</label>
379 <v-icon size="24" class="right" @click="addRoutineDialog = false">cancel</v-icon> 379 <v-icon size="24" class="right" @click="addRoutineDialog = false">cancel</v-icon>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-container fluid fill-height> 382 <v-container fluid fill-height>
383 <v-layout align-center> 383 <v-layout align-center>
384 <v-flex xs12> 384 <v-flex xs12>
385 <v-form ref="form" v-model="valid" lazy-validation> 385 <v-form ref="form" v-model="valid" lazy-validation>
386 <v-layout> 386 <v-layout>
387 <v-flex xs4 sm4 class="pt-4 subheading"> 387 <v-flex xs4 sm4 class="pt-4 subheading">
388 <label class="right">School Year :</label> 388 <label class="right">School Year :</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs8 sm8 class="ml-3"> 390 <v-flex xs8 sm8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 label="fill your year" 392 label="fill your year"
393 :rules="schoolRules" 393 :rules="schoolRules"
394 v-model="addRoutine.schoolYear" 394 v-model="addRoutine.schoolYear"
395 ></v-text-field> 395 ></v-text-field>
396 </v-flex> 396 </v-flex>
397 </v-layout> 397 </v-layout>
398 <v-layout> 398 <v-layout>
399 <v-flex xs4 sm4 class="pt-4 subheading"> 399 <v-flex xs4 sm4 class="pt-4 subheading">
400 <label class="right">Class :</label> 400 <label class="right">Class :</label>
401 </v-flex> 401 </v-flex>
402 <v-flex xs8 sm8 class="ml-3"> 402 <v-flex xs8 sm8 class="ml-3">
403 <v-select 403 <v-select
404 :items="classList" 404 :items="classList"
405 item-text="classNum" 405 item-text="classNum"
406 item-value="_id" 406 item-value="_id"
407 v-model="addRoutine.classId" 407 v-model="addRoutine.classId"
408 label="Select Class" 408 label="Select Class"
409 :rules="classRules" 409 :rules="classRules"
410 @change="getSections(addRoutine.classId)" 410 @change="getSections(addRoutine.classId)"
411 class="pl-2" 411 class="pl-2"
412 required 412 required
413 ></v-select> 413 ></v-select>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs4 sm4 class="pt-4 subheading"> 417 <v-flex xs4 sm4 class="pt-4 subheading">
418 <label class="right">Section :</label> 418 <label class="right">Section :</label>
419 </v-flex> 419 </v-flex>
420 <v-flex xs8 sm8 class="ml-3"> 420 <v-flex xs8 sm8 class="ml-3">
421 <v-select 421 <v-select
422 :items="addSection" 422 :items="addSection"
423 item-text="name" 423 item-text="name"
424 item-value="_id" 424 item-value="_id"
425 v-model="addRoutine.sectionId" 425 v-model="addRoutine.sectionId"
426 label="Select Section" 426 label="Select Section"
427 :rules="sectionRules" 427 :rules="sectionRules"
428 @change="getClassSubject(addRoutine.classId)" 428 @change="getClassSubject(addRoutine.classId)"
429 class="px-2" 429 class="px-2"
430 required 430 required
431 ></v-select> 431 ></v-select>
432 </v-flex> 432 </v-flex>
433 </v-layout> 433 </v-layout>
434 <v-layout> 434 <v-layout>
435 <v-flex xs3 sm4 class="pt-4 subheading"> 435 <v-flex xs3 sm4 class="pt-4 subheading">
436 <label class="right">Subject :</label> 436 <label class="right">Subject :</label>
437 </v-flex> 437 </v-flex>
438 <v-flex xs8 sm8 class="ml-2"> 438 <v-flex xs8 sm8 class="ml-2">
439 <v-select 439 <v-select
440 :items="subjectList.subjects" 440 :items="subjectList.subjects"
441 label="Select your subject" 441 label="Select your subject"
442 v-model="addRoutine.subjectName" 442 v-model="addRoutine.subjectName"
443 item-text="subjectName" 443 item-text="subjectName"
444 item-value="subjectName" 444 item-value="subjectName"
445 :rules="subjectRules" 445 :rules="subjectRules"
446 required 446 required
447 ></v-select> 447 ></v-select>
448 </v-flex> 448 </v-flex>
449 </v-layout> 449 </v-layout>
450 <v-layout> 450 <v-layout>
451 <v-flex xs3 sm4 class="pt-4 subheading"> 451 <v-flex xs3 sm4 class="pt-4 subheading">
452 <label class="right">Day :</label> 452 <label class="right">Day :</label>
453 </v-flex> 453 </v-flex>
454 <v-flex xs8 sm8 class="ml-2"> 454 <v-flex xs8 sm8 class="ml-2">
455 <v-select 455 <v-select
456 :items="day" 456 :items="day"
457 label="Select your day" 457 label="Select your day"
458 v-model="addRoutine.day" 458 v-model="addRoutine.day"
459 item-text="text" 459 item-text="text"
460 :rules="dayRules" 460 :rules="dayRules"
461 required 461 required
462 ></v-select> 462 ></v-select>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 <v-layout> 465 <v-layout>
466 <v-flex xs4 sm4 class="pt-4 subheading"> 466 <v-flex xs4 sm4 class="pt-4 subheading">
467 <label class="right">Teacher Name :</label> 467 <label class="right">Teacher Name :</label>
468 </v-flex> 468 </v-flex>
469 <v-flex xs8 sm8 class="ml-3"> 469 <v-flex xs8 sm8 class="ml-3">
470 <v-select 470 <v-select
471 v-model="addRoutine.teacherId" 471 v-model="addRoutine.teacherId"
472 label="Select your teacher" 472 label="Select your teacher"
473 type="text" 473 type="text"
474 :items="teacherList" 474 :items="teacherList"
475 item-text="name" 475 item-text="name"
476 item-value="_id" 476 item-value="_id"
477 :rules="teacherRules" 477 :rules="teacherRules"
478 required 478 required
479 ></v-select> 479 ></v-select>
480 </v-flex> 480 </v-flex>
481 </v-layout> 481 </v-layout>
482 <v-layout> 482 <v-layout>
483 <v-flex xs4 class="pt-4 subheading"> 483 <v-flex xs4 class="pt-4 subheading">
484 <label class="right">Starting time:</label> 484 <label class="right">Starting time:</label>
485 </v-flex> 485 </v-flex>
486 <v-flex xs8 sm6 class="ml-3"> 486 <v-flex xs8 sm6 class="ml-3">
487 <v-menu 487 <v-menu
488 ref="menuA" 488 ref="menuA"
489 :close-on-content-click="false" 489 :close-on-content-click="false"
490 v-model="menu2" 490 v-model="menu2"
491 :nudge-right="40" 491 :nudge-right="40"
492 :return-value.sync="addRoutine.startingTime" 492 :return-value.sync="addRoutine.startingTime"
493 lazy 493 lazy
494 transition="scale-transition" 494 transition="scale-transition"
495 offset-y 495 offset-y
496 full-width 496 full-width
497 max-width="290px" 497 max-width="290px"
498 min-width="290px" 498 min-width="290px"
499 > 499 >
500 <v-text-field 500 <v-text-field
501 slot="activator" 501 slot="activator"
502 v-model="addRoutine.startingTime" 502 v-model="addRoutine.startingTime"
503 label="Select your starting time" 503 label="Select your starting time"
504 append-icon="access_time" 504 append-icon="access_time"
505 :rules="timeInRules" 505 :rules="timeInRules"
506 readonly 506 readonly
507 ></v-text-field> 507 ></v-text-field>
508 <v-time-picker 508 <v-time-picker
509 v-model="addRoutine.startingTime" 509 v-model="addRoutine.startingTime"
510 @change="$refs.menuA.save(addRoutine.startingTime)" 510 @change="$refs.menuA.save(addRoutine.startingTime)"
511 ></v-time-picker> 511 ></v-time-picker>
512 </v-menu> 512 </v-menu>
513 </v-flex> 513 </v-flex>
514 </v-layout> 514 </v-layout>
515 <v-layout> 515 <v-layout>
516 <v-flex xs4 class="pt-4 subheading"> 516 <v-flex xs4 class="pt-4 subheading">
517 <label class="right">Ending Time:</label> 517 <label class="right">Ending Time:</label>
518 </v-flex> 518 </v-flex>
519 <v-flex xs8 sm6 class="ml-3"> 519 <v-flex xs8 sm6 class="ml-3">
520 <v-menu 520 <v-menu
521 ref="menu" 521 ref="menu"
522 :close-on-content-click="false" 522 :close-on-content-click="false"
523 v-model="menu1" 523 v-model="menu1"
524 :nudge-right="40" 524 :nudge-right="40"
525 :return-value.sync="addRoutine.endingTime" 525 :return-value.sync="addRoutine.endingTime"
526 lazy 526 lazy
527 transition="scale-transition" 527 transition="scale-transition"
528 offset-y 528 offset-y
529 full-width 529 full-width
530 max-width="290px" 530 max-width="290px"
531 min-width="290px" 531 min-width="290px"
532 > 532 >
533 <v-text-field 533 <v-text-field
534 slot="activator" 534 slot="activator"
535 v-model="addRoutine.endingTime" 535 v-model="addRoutine.endingTime"
536 label="Select your end time" 536 label="Select your end time"
537 append-icon="access_time" 537 append-icon="access_time"
538 :rules="timeOutRules" 538 :rules="timeOutRules"
539 readonly 539 readonly
540 ></v-text-field> 540 ></v-text-field>
541 <v-time-picker 541 <v-time-picker
542 v-model="addRoutine.endingTime" 542 v-model="addRoutine.endingTime"
543 @change="$refs.menu.save(addRoutine.endingTime)" 543 @change="$refs.menu.save(addRoutine.endingTime)"
544 ></v-time-picker> 544 ></v-time-picker>
545 </v-menu> 545 </v-menu>
546 </v-flex> 546 </v-flex>
547 </v-layout> 547 </v-layout>
548 <v-layout> 548 <v-layout>
549 <v-flex xs4 sm4 class="pt-4 subheading"> 549 <v-flex xs4 sm4 class="pt-4 subheading">
550 <label class="right">Room:</label> 550 <label class="right">Room:</label>
551 </v-flex> 551 </v-flex>
552 <v-flex xs8 sm8 class="ml-3"> 552 <v-flex xs8 sm8 class="ml-3">
553 <v-text-field 553 <v-text-field
554 label="fill your room" 554 label="fill your room"
555 :rules="roomRules" 555 :rules="roomRules"
556 v-model="addRoutine.room" 556 v-model="addRoutine.room"
557 @keyup.enter="submit" 557 @keyup.enter="submit"
558 ></v-text-field> 558 ></v-text-field>
559 </v-flex> 559 </v-flex>
560 </v-layout> 560 </v-layout>
561 <v-layout> 561 <v-layout>
562 <v-flex xs4 sm4 class="pt-4 subheading"> 562 <v-flex xs4 sm4 class="pt-4 subheading">
563 <label class="right">Period:</label> 563 <label class="right">Period:</label>
564 </v-flex> 564 </v-flex>
565 <v-flex xs8 sm8 class="ml-3"> 565 <v-flex xs8 sm8 class="ml-3">
566 <v-text-field 566 <v-text-field
567 label="fill your period" 567 label="fill your period"
568 :rules="periodRules" 568 :rules="periodRules"
569 v-model="addRoutine.period" 569 v-model="addRoutine.period"
570 @keyup.enter="submit" 570 @keyup.enter="submit"
571 ></v-text-field> 571 ></v-text-field>
572 </v-flex> 572 </v-flex>
573 </v-layout> 573 </v-layout>
574 <v-layout> 574 <v-layout>
575 <v-flex xs12 sm12> 575 <v-flex xs12 sm12>
576 <v-card-actions> 576 <v-card-actions>
577 <v-spacer></v-spacer> 577 <v-spacer></v-spacer>
578 <v-btn 578 <v-btn
579 @click="create" 579 @click="create"
580 round 580 round
581 dark 581 dark
582 :loading="loading" 582 :loading="loading"
583 class="add-button" 583 class="add-button"
584 >Add Routine</v-btn> 584 >Add Routine</v-btn>
585 </v-card-actions> 585 </v-card-actions>
586 </v-flex> 586 </v-flex>
587 </v-layout> 587 </v-layout>
588 </v-form> 588 </v-form>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 </v-container> 591 </v-container>
592 </v-card> 592 </v-card>
593 </v-dialog> 593 </v-dialog>
594 <div class="loader" v-if="showLoader"> 594 <div class="loader" v-if="showLoader">
595 <v-progress-circular indeterminate color="white"></v-progress-circular> 595 <v-progress-circular indeterminate color="white"></v-progress-circular>
596 </div> 596 </div>
597 </v-container> 597 </v-container>
598 </template> 598 </template>
599 599
600 <script> 600 <script>
601 import http from "@/Services/http.js"; 601 import http from "@/Services/http.js";
602 import Util from "@/util"; 602 import Util from "@/util";
603 603
604 export default { 604 export default {
605 data: () => ({ 605 data: () => ({
606 snackbar: false, 606 snackbar: false,
607 y: "top", 607 y: "top",
608 x: "right", 608 x: "right",
609 role: "", 609 role: "",
610 mode: "", 610 mode: "",
611 timeout: 3000, 611 timeout: 3000,
612 text: "", 612 text: "",
613 color: "", 613 color: "",
614 show: true, 614 show: true,
615 showSearch: false, 615 showSearch: false,
616 showLoader: false, 616 showLoader: false,
617 loading: false, 617 loading: false,
618 editLoading: false, 618 editLoading: false,
619 date: null, 619 date: null,
620 search: "", 620 search: "",
621 editRoutineDialog: false, 621 editRoutineDialog: false,
622 valid: true, 622 valid: true,
623 validEditRoutine: true, 623 validEditRoutine: true,
624 addRoutineDialog: false, 624 addRoutineDialog: false,
625 showTable: false, 625 showTable: false,
626 hideTable: true, 626 hideTable: true,
627 name: "", 627 name: "",
628 628
629 day: [ 629 day: [
630 "Monday", 630 "Monday",
631 "Tuesday", 631 "Tuesday",
632 "Wednesday", 632 "Wednesday",
633 "Thursday", 633 "Thursday",
634 "Friday", 634 "Friday",
635 "Saturday", 635 "Saturday",
636 "Sunday" 636 "Sunday",
637 ], 637 ],
638 638
639 token: "", 639 token: "",
640 640
641 menu1: false, 641 menu1: false,
642 menu2: false, 642 menu2: false,
643 menu4: false, 643 menu4: false,
644 menu3: false, 644 menu3: false,
645 645
646 schoolRules: [v => !!v || "School Year is required"], 646 schoolRules: [(v) => !!v || "School Year is required"],
647 classRules: [v => !!v || " Class Name is required"], 647 classRules: [(v) => !!v || " Class Name is required"],
648 teacherRules: [v => !!v || " Teacher Name is required"], 648 teacherRules: [(v) => !!v || " Teacher Name is required"],
649 sectionRules: [v => !!v || "Section is required"], 649 sectionRules: [(v) => !!v || "Section is required"],
650 studentRules: [v => !!v || " Student is required"], 650 studentRules: [(v) => !!v || " Student is required"],
651 finalRules: [v => !!v || "Final MArk is required"], 651 finalRules: [(v) => !!v || "Final MArk is required"],
652 subjectRules: [v => !!v || " Subject Name is required"], 652 subjectRules: [(v) => !!v || " Subject Name is required"],
653 dayRules: [v => !!v || "Day is required"], 653 dayRules: [(v) => !!v || "Day is required"],
654 timeInRules: [v => !!v || "Start Time is required"], 654 timeInRules: [(v) => !!v || "Start Time is required"],
655 timeOutRules: [v => !!v || "End Time is required"], 655 timeOutRules: [(v) => !!v || "End Time is required"],
656 roomRules: [v => !!v || "Room is required"], 656 roomRules: [(v) => !!v || "Room is required"],
657 periodRules: [v => !!v || "Period is required"], 657 periodRules: [(v) => !!v || "Period is required"],
658 658
659 classList: [], 659 classList: [],
660 addSection: [], 660 addSection: [],
661 subjectList: [], 661 subjectList: [],
662 teacherList: [], 662 teacherList: [],
663 titleRules: [], 663 titleRules: [],
664 markRules: [], 664 markRules: [],
665 typeRules: [], 665 typeRules: [],
666 routineList: [], 666 routineList: [],
667 editedIndex: -1, 667 editedIndex: -1,
668 addRoutine: {}, 668 addRoutine: {},
669 addRoutineList: {},
669 startingTime: "", 670 startingTime: "",
670 editedItem: {} 671 editedItem: {},
671
672 }), 672 }),
673 methods: { 673 methods: {
674 editItem(item, routineData) { 674 editItem(item, routineData) {
675 console.log("routineData", routineData) 675 console.log("routineData", routineData);
676 console.log("item", item) 676 console.log("item", item);
677 this.editedIndex = this.routineList; 677 this.editedIndex = this.routineList;
678 this.editedItem = Object.assign({}, item); 678 this.editedItem = Object.assign({}, item);
679 this.editedItem.lectureRoutineId = item._id; 679 this.editedItem.lectureRoutineId = item._id;
680 this.editedItem.routineId = routineData._id; 680 this.editedItem.routineId = routineData._id;
681 this.dialog = true; 681 this.dialog = true;
682 this.editRoutineDialog = true; 682 this.editRoutineDialog = true;
683 }, 683 },
684 deleteItem(item) { 684 deleteItem(item) {
685 let deleteLecture = { 685 let deleteLecture = {
686 routineId: item._id, 686 routineId: item._id,
687 lectureId: item.lectureRoutine[0]._id 687 lectureId: item.lectureRoutine[0]._id,
688 }; 688 };
689 http() 689 http()
690 .delete( 690 .delete(
691 "/deleteRoutineLecture", 691 "/deleteRoutineLecture",
692 confirm("Are you sure you want to delete this?") && { 692 confirm("Are you sure you want to delete this?") && {
693 params: deleteLecture 693 params: deleteLecture,
694 } 694 }
695 ) 695 )
696 .then(response => { 696 .then((response) => {
697 this.snackbar = true; 697 this.snackbar = true;
698 this.text = "Successfully delete Existing Routine"; 698 this.text = "Successfully delete Existing Routine";
699 this.color = "green"; 699 this.color = "green";
700 this.getRoutineList(); 700 this.getRoutineList();
701 }) 701 })
702 .catch(error => { 702 .catch((error) => {
703 this.snackbar = true; 703 this.snackbar = true;
704 this.text = error.response.data.message; 704 this.text = error.response.data.message;
705 this.color = "error"; 705 this.color = "error";
706 }); 706 });
707 }, 707 },
708 close() { 708 close() {
709 this.editRoutineDialog = false; 709 this.editRoutineDialog = false;
710 }, 710 },
711 711
712 create() { 712 create() {
713 var routineData = { 713 var routineData = {
714 schoolYear: this.addRoutine.schoolYear, 714 schoolYear: this.addRoutine.schoolYear,
715 classId: this.addRoutine.classId, 715 classId: this.addRoutine.classId,
716 sectionId: this.addRoutine.sectionId, 716 sectionId: this.addRoutine.sectionId,
717 day: this.addRoutine.day, 717 day: this.addRoutine.day,
718 lectureRoutine: [] 718 lectureRoutine: [],
719 }; 719 };
720 if (this.$refs.form.validate()) { 720 if (this.$refs.form.validate()) {
721 routineData.lectureRoutine.push({ 721 routineData.lectureRoutine.push({
722 teacherId: this.addRoutine.teacherId, 722 teacherId: this.addRoutine.teacherId,
723 startingTime: this.addRoutine.startingTime, 723 startingTime: this.addRoutine.startingTime,
724 endingTime: this.addRoutine.endingTime, 724 endingTime: this.addRoutine.endingTime,
725 room: this.addRoutine.room, 725 room: this.addRoutine.room,
726 period: this.addRoutine.period, 726 period: this.addRoutine.period,
727 subjectName: this.addRoutine.subjectName 727 subjectName: this.addRoutine.subjectName,
728 }); 728 });
729 http() 729 http()
730 .post("/createRoutine", routineData) 730 .post("/createRoutine", routineData)
731 .then(response => { 731 .then((response) => {
732 this.getRoutineList(); 732 this.getRoutineList();
733 this.text = "Routine added successfully"; 733 this.text = "Routine added successfully";
734 this.clear(); 734 this.clear();
735 this.snackbar = true; 735 this.snackbar = true;
736 this.color = "green"; 736 this.color = "green";
737 this.addRoutineDialog = false; 737 this.addRoutineDialog = false;
738 }) 738 })
739 .catch(error => { 739 .catch((error) => {
740 // console.log(error); 740 // console.log(error);
741 this.snackbar = true; 741 this.snackbar = true;
742 this.text = error.response.data.message; 742 this.text = error.response.data.message;
743 this.color = "error"; 743 this.color = "error";
744 }); 744 });
745 } 745 }
746 }, 746 },
747 clear() { 747 clear() {
748 this.$refs.form.reset(); 748 this.$refs.form.reset();
749 }, 749 },
750 750
751 update() { 751 update() {
752 if (this.$refs.formEditRoutine.validate()) { 752 if (this.$refs.formEditRoutine.validate()) {
753 let editRoutine = { 753 let editRoutine = {
754 routineId: this.editedItem.routineId, 754 routineId: this.editedItem.routineId,
755 lectureRoutineId: this.editedItem.lectureRoutineId, 755 lectureRoutineId: this.editedItem.lectureRoutineId,
756 subjectName: this.editedItem.subjectName, 756 subjectName: this.editedItem.subjectName,
757 teacherId: this.editedItem.teacherId._id, 757 teacherId: this.editedItem.teacherId._id,
758 startingTime: this.editedItem.startingTime, 758 startingTime: this.editedItem.startingTime,
759 endingTime: this.editedItem.endingTime, 759 endingTime: this.editedItem.endingTime,
760 room: this.editedItem.room, 760 room: this.editedItem.room,
761 period: this.editedItem.period 761 period: this.editedItem.period,
762 }; 762 };
763 this.editLoading = true; 763 this.editLoading = true;
764 http() 764 http()
765 .put("/updateRoutine", editRoutine) 765 .put("/updateRoutine", editRoutine)
766 .then(response => { 766 .then((response) => {
767 this.snackbar = true; 767 this.snackbar = true;
768 this.text = "Successfully Edit Existing Routine"; 768 this.text = "Successfully Edit Existing Routine";
769 this.color = "green"; 769 this.color = "green";
770 this.editLoading = false; 770 this.editLoading = false;
771 this.editRoutineDialog = false; 771 this.editRoutineDialog = false;
772 this.getRoutineList(); 772 this.getRoutineList();
773 // http() 773 // http()
774 // .get( 774 // .get(
775 // "/getRoutineList", 775 // "/getRoutineList",
776 // { 776 // {
777 // params: { 777 // params: {
778 // classId: this.addRoutine.classId, 778 // classId: this.addRoutine.classId,
779 // sectionId: this.addRoutine.sectionId 779 // sectionId: this.addRoutine.sectionId
780 // } 780 // }
781 // }, 781 // },
782 // { 782 // {
783 // headers: { Authorization: "Bearer " + this.token } 783 // headers: { Authorization: "Bearer " + this.token }
784 // } 784 // }
785 // ) 785 // )
786 // .then(response => { 786 // .then(response => {
787 // this.routineList = response.data.data; 787 // this.routineList = response.data.data;
788 // this.showLoader = false; 788 // this.showLoader = false;
789 // this.showTable = true; 789 // this.showTable = true;
790 // this.hideTable = false; 790 // this.hideTable = false;
791 // }) 791 // })
792 // .catch(err => { 792 // .catch(err => {
793 // console.log("err====>", err); 793 // console.log("err====>", err);
794 // }); 794 // });
795 }) 795 })
796 .catch(error => { 796 .catch((error) => {
797 this.editLoading = false; 797 this.editLoading = false;
798 }); 798 });
799 } 799 }
800 }, 800 },
801 getClass() { 801 getClass() {
802 http() 802 http()
803 .get("/getClassesList", { 803 .get("/getClassesList", {
804 headers: { Authorization: "Bearer " + this.token } 804 headers: { Authorization: "Bearer " + this.token },
805 }) 805 })
806 .then(response => { 806 .then((response) => {
807 this.classList = response.data.data; 807 this.classList = response.data.data;
808 }) 808 })
809 .catch(error => { 809 .catch((error) => {
810 if (error.response.status === 401) { 810 if (error.response.status === 401) {
811 this.$router.replace({ path: "/" }); 811 this.$router.replace({ path: "/" });
812 this.$store.dispatch("setToken", null); 812 this.$store.dispatch("setToken", null);
813 this.$store.dispatch("Id", null); 813 this.$store.dispatch("Id", null);
814 } 814 }
815 }); 815 });
816 }, 816 },
817 getSections(_id) { 817 getSections(_id) {
818 var token = this.$store.state.token; 818 var token = this.$store.state.token;
819 this.showLoader = true; 819 this.showLoader = true;
820 http() 820 http()
821 .get( 821 .get(
822 "/getSectionsList", 822 "/getSectionsList",
823 { params: { classId: _id } }, 823 { params: { classId: _id } },
824 { 824 {
825 headers: { Authorization: "Bearer " + token } 825 headers: { Authorization: "Bearer " + token },
826 } 826 }
827 ) 827 )
828 .then(response => { 828 .then((response) => {
829 this.addSection = response.data.data; 829 this.addSection = response.data.data;
830 this.showLoader = false; 830 this.showLoader = false;
831 }) 831 })
832 .catch(err => { 832 .catch((err) => {
833 this.showLoader = false; 833 this.showLoader = false;
834 }); 834 });
835 }, 835 },
836 getClassSubject(_id) { 836 getClassSubject(_id) {
837 this.showLoader = true; 837 this.showLoader = true;
838 // this.classId = this.classId; 838 // this.classId = this.classId;
839 http() 839 http()
840 .get( 840 .get(
841 "/getParticularClass", 841 "/getParticularClass",
842 { params: { classId: _id } }, 842 { params: { classId: _id } },
843 { 843 {
844 headers: { Authorization: "Bearer " + this.token } 844 headers: { Authorization: "Bearer " + this.token },
845 } 845 }
846 ) 846 )
847 .then(response => { 847 .then((response) => {
848 this.subjectList = response.data.data; 848 this.subjectList = response.data.data;
849 this.showLoader = false; 849 this.showLoader = false;
850 }) 850 })
851 .catch(err => { 851 .catch((err) => {
852 this.showLoader = false; 852 this.showLoader = false;
853 }); 853 });
854 }, 854 },
855 getTeacherList() { 855 getTeacherList() {
856 this.showLoader = true; 856 this.showLoader = true;
857 var token = this.$store.state.token; 857 var token = this.$store.state.token;
858 http() 858 http()
859 .get("/getTeachersList", { 859 .get("/getTeachersList", {
860 headers: { Authorization: "Bearer " + token } 860 headers: { Authorization: "Bearer " + token },
861 }) 861 })
862 .then(response => { 862 .then((response) => {
863 this.teacherList = response.data.data; 863 this.teacherList = response.data.data;
864 this.showLoader = false; 864 this.showLoader = false;
865 // console.log("getTeacherList=====>",this.desserts) 865 // console.log("getTeacherList=====>",this.desserts)
866 }) 866 })
867 .catch(error => { 867 .catch((error) => {
868 this.showLoader = false; 868 this.showLoader = false;
869 if (error.response.status === 401) { 869 if (error.response.status === 401) {
870 this.$router.replace({ path: "/" }); 870 this.$router.replace({ path: "/" });
871 this.$store.dispatch("setToken", null); 871 this.$store.dispatch("setToken", null);
872 this.$store.dispatch("Id", null); 872 this.$store.dispatch("Id", null);
873 } 873 }
874 }); 874 });
875 }, 875 },
876 getRoutineList() { 876 getRoutineList() {
877 this.showLoader = true; 877 this.showLoader = true;
878 http() 878 http()
879 .get( 879 .get(
880 "/getRoutineList", 880 "/getRoutineList",
881 { 881 {
882 params: { 882 params: {
883 classId: this.addRoutine.classId, 883 classId: this.addRoutineList.classId,
884 sectionId: this.addRoutine.sectionId 884 sectionId: this.addRoutineList.sectionId,
885 } 885 },
886 }, 886 },
887 { 887 {
888 headers: { Authorization: "Bearer " + this.token } 888 headers: { Authorization: "Bearer " + this.token },
889 } 889 }
890 ) 890 )
891 .then(response => { 891 .then((response) => {
892 this.routineList = response.data.data; 892 this.routineList = response.data.data;
893 this.showLoader = false; 893 this.showLoader = false;
894 this.showTable = true; 894 this.showTable = true;
895 this.hideTable = false; 895 this.hideTable = false;
896 }) 896 })
897 .catch(err => { 897 .catch((err) => {
898 this.showLoader = false; 898 this.showLoader = false;
899 }); 899 });
900 }, 900 },
901 displaySearch() { 901 displaySearch() {
902 (this.show = false), (this.showSearch = true); 902 (this.show = false), (this.showSearch = true);
903 }, 903 },
904 closeSearch() { 904 closeSearch() {
905 this.showSearch = false; 905 this.showSearch = false;
906 this.show = true; 906 this.show = true;
907 this.search = ""; 907 this.search = "";
908 } 908 },
909 }, 909 },
910 mounted() { 910 mounted() {
911 this.token = this.$store.state.token; 911 this.token = this.$store.state.token;
912 this.getClass(); 912 this.getClass();
913 this.getTeacherList(); 913 this.getTeacherList();
914 this.role = this.$store.state.role; 914 this.role = this.$store.state.role;
915 } 915 },
916 }; 916 };
917 </script> 917 </script>
918 918
919 <style scoped> 919 <style scoped>
920 html, 920 html,
921 body { 921 body {
922 font-family: "OpenSans Regular"; 922 font-family: "OpenSans Regular";
923 } 923 }
924 .box .box-body { 924 .box .box-body {
925 padding: 15px; 925 padding: 15px;
926 border-top-left-radius: 0; 926 border-top-left-radius: 0;
927 border-top-right-radius: 0; 927 border-top-right-radius: 0;
928 border-bottom-right-radius: 3px; 928 border-bottom-right-radius: 3px;
929 border-bottom-left-radius: 3px; 929 border-bottom-left-radius: 3px;
930 } 930 }
931 .nav-tabs-custom { 931 .nav-tabs-custom {
932 margin-bottom: 20px; 932 margin-bottom: 20px;
933 background: #fff; 933 background: #fff;
934 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 934 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
935 } 935 }
936 .nav-tabs { 936 .nav-tabs {
937 border-bottom: 1px solid #ddd; 937 border-bottom: 1px solid #ddd;
938 } 938 }
939 .nav { 939 .nav {
940 padding-left: 0; 940 padding-left: 0;
941 list-style: none; 941 list-style: none;
942 } 942 }
943 .tab-content > .active { 943 .tab-content > .active {
944 display: block; 944 display: block;
945 } 945 }
946 .nav-tabs-custom > .nav-tabs > li.active > a { 946 .nav-tabs-custom > .nav-tabs > li.active > a {
947 border-top: 0; 947 border-top: 0;
948 border-left-color: #09a3a3; 948 border-left-color: #09a3a3;
949 border-right-color: #09a3a3; 949 border-right-color: #09a3a3;
950 } 950 }
951 .nav-tabs-custom > .nav-tabs { 951 .nav-tabs-custom > .nav-tabs {
952 background-color: #e5e5e5; 952 background-color: #e5e5e5;
953 margin: 0; 953 margin: 0;
954 border-bottom-color: #e5e5e5; 954 border-bottom-color: #e5e5e5;
955 } 955 }
956 .nav-tabs-custom > .nav-tabs > li:first-of-type { 956 .nav-tabs-custom > .nav-tabs > li:first-of-type {
957 margin-left: 0px; 957 margin-left: 0px;
958 } 958 }
959 .nav-tabs-custom > .nav-tabs > li.active { 959 .nav-tabs-custom > .nav-tabs > li.active {
960 border-bottom-color: #09a3a3; 960 border-bottom-color: #09a3a3;
961 } 961 }
962 .nav-tabs-custom > .nav-tabs > li { 962 .nav-tabs-custom > .nav-tabs > li {
963 border-bottom: 2px solid transparent; 963 border-bottom: 2px solid transparent;
964 border-top: 3px solid transparent; 964 border-top: 3px solid transparent;
965 margin-bottom: -2px; 965 margin-bottom: -2px;
966 margin-right: 5px; 966 margin-right: 5px;
967 } 967 }
968 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a { 968 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
969 border-left-width: 0; 969 border-left-width: 0;
970 } 970 }
971 .nav-tabs-custom > .nav-tabs > li.active > a { 971 .nav-tabs-custom > .nav-tabs > li.active > a {
972 border-top: 0; 972 border-top: 0;
973 border-bottom-color: #09a3a3; 973 border-bottom-color: #09a3a3;
974 } 974 }
975 .nav-tabs-custom > .nav-tabs > li.active > a, 975 .nav-tabs-custom > .nav-tabs > li.active > a,
976 .nav-tabs-custom > .nav-tabs > li.active:hover > a { 976 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
977 background-color: #e5e5e5; 977 background-color: #e5e5e5;
978 border: 0px; 978 border: 0px;
979 color: #000000db; 979 color: #000000db;
980 } 980 }
981 .nav-tabs-custom > .nav-tabs > li > a, 981 .nav-tabs-custom > .nav-tabs > li > a,
982 .nav-tabs-custom > .nav-tabs > li > a:hover { 982 .nav-tabs-custom > .nav-tabs > li > a:hover {
983 border-radius: 0 !important; 983 border-radius: 0 !important;
984 } 984 }
985 .nav-tabs-custom > .tab-content { 985 .nav-tabs-custom > .tab-content {
986 background: #fff; 986 background: #fff;
987 padding: 10px; 987 padding: 10px;
988 } 988 }
989 .page-header { 989 .page-header {
990 margin: 10px 0 20px 0; 990 margin: 10px 0 20px 0;
991 padding: 0px 0px 16px; 991 padding: 0px 0px 16px;
992 font-size: 22px; 992 font-size: 22px;
993 border: none; 993 border: none;
994 } 994 }
995 .table { 995 .table {
996 width: 100%; 996 width: 100%;
997 border-collapse: collapse; 997 border-collapse: collapse;
998 border-spacing: 0; 998 border-spacing: 0;
999 } 999 }
1000 .table > tbody > tr > th, 1000 .table > tbody > tr > th,
1001 .table > tfoot > tr > th, 1001 .table > tfoot > tr > th,
1002 .table > tbody > tr > td, 1002 .table > tbody > tr > td,
1003 .table > tfoot > tr > td { 1003 .table > tfoot > tr > td {
1004 padding: 8px; 1004 padding: 8px;
1005 line-height: 1.428571429; 1005 line-height: 1.428571429;
1006 vertical-align: top; 1006 vertical-align: top;
1007 border-top: 1px solid #ddd; 1007 border-top: 1px solid #ddd;
1008 } 1008 }
1009 .nav::before, 1009 .nav::before,
1010 .nav::after { 1010 .nav::after {
1011 display: table; 1011 display: table;
1012 content: ""; 1012 content: "";
1013 } 1013 }
1014 .box .box-body .table { 1014 .box .box-body .table {
1015 margin-bottom: 0; 1015 margin-bottom: 0;
1016 } 1016 }
1017 .table-bordered { 1017 .table-bordered {
1018 border: 1px solid #e2e7eb; 1018 border: 1px solid #e2e7eb;
1019 } 1019 }
1020 .table-striped > tbody > tr:nth-child(2n + 1) > td, 1020 .table-striped > tbody > tr:nth-child(2n + 1) > td,
1021 .table-striped > tbody > tr:nth-child(2n + 1) > th { 1021 .table-striped > tbody > tr:nth-child(2n + 1) > th {
1022 background-color: #f0f3f5; 1022 background-color: #f0f3f5;
1023 } 1023 }
1024 .table-bordered > tbody > v-data-table > template > tr > th, 1024 .table-bordered > tbody > v-data-table > template > tr > th,
1025 .table-bordered > tbody > tr > td { 1025 .table-bordered > tbody > tr > td {
1026 border-color: #e2e7eb; 1026 border-color: #e2e7eb;
1027 font-size: 12px; 1027 font-size: 12px;
1028 } 1028 }
1029 .table-bordered > tbody > tr > td { 1029 .table-bordered > tbody > tr > td {
1030 color: #707070; 1030 color: #707070;
1031 } 1031 }
1032 /* 1032 /*
1033 .table-bordered > tbody > tr > th, 1033 .table-bordered > tbody > tr > th,
1034 .table-bordered > tfoot > tr > th, 1034 .table-bordered > tfoot > tr > th,
1035 .table-bordered > tbody > tr > td, 1035 .table-bordered > tbody > tr > td,
1036 .table-bordered > tfoot > tr > td { 1036 .table-bordered > tfoot > tr > td {
1037 border: 1px solid #ddd; 1037 border: 1px solid #ddd;
1038 } */ 1038 } */
1039 .mCustomScrollbar.mCS_no_scrollbar, 1039 .mCustomScrollbar.mCS_no_scrollbar,
1040 .mCustomScrollbar.mCS_touch_action { 1040 .mCustomScrollbar.mCS_touch_action {
1041 touch-action: auto; 1041 touch-action: auto;
1042 } 1042 }
1043 .mCSB_scrollTools.mCSB_scrollTools_horizontal { 1043 .mCSB_scrollTools.mCSB_scrollTools_horizontal {
1044 width: auto; 1044 width: auto;
1045 height: 16px; 1045 height: 16px;
1046 top: auto; 1046 top: auto;
1047 right: 0; 1047 right: 0;
1048 bottom: 0; 1048 bottom: 0;
1049 left: 0; 1049 left: 0;
1050 } 1050 }
1051 .mCSB_scrollTools { 1051 .mCSB_scrollTools {
1052 opacity: 0.75; 1052 opacity: 0.75;
1053 } 1053 }
1054 .mCSB_scrollTools .mCSB_draggerContainer { 1054 .mCSB_scrollTools .mCSB_draggerContainer {
1055 position: absolute; 1055 position: absolute;
1056 height: auto; 1056 height: auto;
1057 top: 0; 1057 top: 0;
1058 left: 0; 1058 left: 0;
1059 bottom: 0; 1059 bottom: 0;
1060 right: 0; 1060 right: 0;
1061 } 1061 }
1062 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { 1062 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
1063 height: 100%; 1063 height: 100%;
1064 } 1064 }
1065 .mCSB_scrollTools .mCSB_dragger { 1065 .mCSB_scrollTools .mCSB_dragger {
1066 cursor: pointer; 1066 cursor: pointer;
1067 z-index: 1; 1067 z-index: 1;
1068 } 1068 }
1069 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { 1069 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
1070 width: 100%; 1070 width: 100%;
1071 height: 4px; 1071 height: 4px;
1072 margin: 6px auto; 1072 margin: 6px auto;
1073 } 1073 }
1074 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { 1074 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
1075 background-color: rgba(255, 255, 255, 0.75); 1075 background-color: rgba(255, 255, 255, 0.75);
1076 } 1076 }
1077 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { 1077 .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
1078 width: 100%; 1078 width: 100%;
1079 height: 2px; 1079 height: 2px;
1080 margin: 7px 0; 1080 margin: 7px 0;
1081 } 1081 }
1082 .mCSB_scrollTools .mCSB_draggerRail { 1082 .mCSB_scrollTools .mCSB_draggerRail {
1083 background-color: rgba(0, 0, 0, 0.4); 1083 background-color: rgba(0, 0, 0, 0.4);
1084 border-radius: 16px; 1084 border-radius: 16px;
1085 } 1085 }
1086 .mCustomScrollBox { 1086 .mCustomScrollBox {
1087 position: relative; 1087 position: relative;
1088 overflow: hidden; 1088 overflow: hidden;
1089 height: 100%; 1089 height: 100%;
1090 max-width: 100%; 1090 max-width: 100%;
1091 outline: none; 1091 outline: none;
1092 direction: ltr; 1092 direction: ltr;
1093 } 1093 }
1094 /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { 1094 /* .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
1095 margin-bottom: 0; 1095 margin-bottom: 0;
1096 } 1096 }
1097 .mCSB_horizontal.mCSB_inside > .mCSB_container { 1097 .mCSB_horizontal.mCSB_inside > .mCSB_container {
1098 margin-right: 0; 1098 margin-right: 0;
1099 } */ 1099 } */
1100 .mCSB_container { 1100 .mCSB_container {
1101 overflow: hidden; 1101 overflow: hidden;
1102 height: auto; 1102 height: auto;
1103 } 1103 }
1104 1104
1105 @media (min-width: 768px) { 1105 @media (min-width: 768px) {
1106 .col-sm-12 { 1106 .col-sm-12 {
1107 width: 100%; 1107 width: 100%;
1108 } 1108 }
1109 } 1109 }
src/pages/Academic/subject.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editSubjectDialog" max-width="600px"> 4 <v-dialog v-model="editSubjectDialog" max-width="600px">
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Subject</label> 8 <label class="title text-xs-center">Edit Subject</label>
9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> 13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Class:</label> 16 <label class="right">Class:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-select 19 <v-select
20 v-model="editedItem.classId" 20 v-model="editedItem.classId"
21 label="Select your class" 21 label="Select your class"
22 type="text" 22 type="text"
23 :items="classList" 23 :items="classList"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 :rules="classRules" 26 :rules="classRules"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm4 class="pt-4 subheading"> 32 <v-flex xs4 sm4 class="pt-4 subheading">
33 <label class="right">Teacher Name :</label> 33 <label class="right">Teacher Name :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-3"> 35 <v-flex xs8 sm8 class="ml-3">
36 <v-select 36 <v-select
37 v-model="editedItem.teacherId" 37 v-model="editedItem.teacherId"
38 label="Select your teacher" 38 label="Select your teacher"
39 type="text" 39 type="text"
40 :items="teacherList" 40 :items="teacherList"
41 item-text="name" 41 item-text="name"
42 item-value="_id" 42 item-value="_id"
43 :rules="teacherRules" 43 :rules="teacherRules"
44 required 44 required
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs4 sm4 class="pt-4 sybheading"> 49 <v-flex xs4 sm4 class="pt-4 sybheading">
50 <label class="right">Type :</label> 50 <label class="right">Type :</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8 sm8 class="ml-3"> 52 <v-flex xs8 sm8 class="ml-3">
53 <v-select 53 <v-select
54 v-model="editedItem.type" 54 v-model="editedItem.type"
55 :items="type" 55 :items="type"
56 label="Select your Type" 56 label="Select your Type"
57 :rules="typeRules" 57 :rules="typeRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 sm4 class="pt-4 subheading"> 63 <v-flex xs4 sm4 class="pt-4 subheading">
64 <label class="right">Pass Mark :</label> 64 <label class="right">Pass Mark :</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm8 class="ml-3"> 66 <v-flex xs8 sm8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 label="Fill your Pass Mark" 68 label="Fill your Pass Mark"
69 name="name" 69 name="name"
70 type="text" 70 type="text"
71 :rules="markRules" 71 :rules="markRules"
72 v-model="editedItem.passMarks" 72 v-model="editedItem.passMarks"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm4 class="pt-4 subheading"> 78 <v-flex xs4 sm4 class="pt-4 subheading">
79 <label class="right">Final Mark :</label> 79 <label class="right">Final Mark :</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs8 sm8 class="ml-3"> 81 <v-flex xs8 sm8 class="ml-3">
82 <v-text-field 82 <v-text-field
83 label="Fill your final mark" 83 label="Fill your final mark"
84 name="name" 84 name="name"
85 type="text" 85 type="text"
86 :rules="finalRules" 86 :rules="finalRules"
87 v-model="editedItem.finalMarks" 87 v-model="editedItem.finalMarks"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Subject:</label> 94 <label class="right">Subject:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 class="ml-3"> 96 <v-flex xs8 class="ml-3">
97 <v-text-field 97 <v-text-field
98 placeholder="fill your Subject" 98 placeholder="fill your Subject"
99 v-model="editedItem.subjectName" 99 v-model="editedItem.subjectName"
100 :rules="subjectRules" 100 :rules="subjectRules"
101 type="text" 101 type="text"
102 name="email" 102 name="email"
103 required 103 required
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 sm4 class="pt-4 subheading"> 108 <v-flex xs4 sm4 class="pt-4 subheading">
109 <label class="right">Subject Author :</label> 109 <label class="right">Subject Author :</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm8 class="ml-3"> 111 <v-flex xs8 sm8 class="ml-3">
112 <v-text-field 112 <v-text-field
113 v-model="editedItem.subjectAuthor" 113 v-model="editedItem.subjectAuthor"
114 placeholder="fill your Subject Author" 114 placeholder="fill your Subject Author"
115 name="name" 115 name="name"
116 type="text" 116 type="text"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 sm4 class="pt-4 subheading"> 121 <v-flex xs4 sm4 class="pt-4 subheading">
122 <label class="right">Subject Code:</label> 122 <label class="right">Subject Code:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8 sm8 class="ml-3"> 124 <v-flex xs8 sm8 class="ml-3">
125 <v-text-field 125 <v-text-field
126 v-model="editedItem.subjectCode" 126 v-model="editedItem.subjectCode"
127 placeholder="fill your Subject Code" 127 placeholder="fill your Subject Code"
128 name="name" 128 name="name"
129 type="text" 129 type="text"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-flex xs12 sm12> 133 <v-flex xs12 sm12>
134 <v-card-actions> 134 <v-card-actions>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Update Subject</v-btn> 136 <v-btn
137 round
138 dark
139 @click="save"
140 :loading="editLoading"
141 class="add-button"
142 >Update Subject</v-btn>
137 </v-card-actions> 143 </v-card-actions>
138 </v-flex> 144 </v-flex>
139 </v-form> 145 </v-form>
140 </v-container> 146 </v-container>
141 </v-card> 147 </v-card>
142 </v-dialog> 148 </v-dialog>
143 149
144 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
145 151
146 <v-dialog v-model="viewSubjectDialog" max-width="500px"> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px">
147 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
148 <v-layout> 154 <v-layout>
149 <v-flex xs12> 155 <v-flex xs12>
150 <label class="title text-xs-center">View Subject</label> 156 <label class="title text-xs-center">View Subject</label>
151 <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>
152 </v-flex> 158 </v-flex>
153 </v-layout> 159 </v-layout>
154 <v-card-text> 160 <v-card-text>
155 <v-container grid-list-md> 161 <v-container grid-list-md>
156 <v-layout wrap> 162 <v-layout wrap>
157 <v-flex> 163 <v-flex>
158 <v-layout> 164 <v-layout>
159 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
160 <h5 class="right my-1"> 166 <h5 class="right my-1">
161 <b>Subject Name:</b> 167 <b>Subject Name:</b>
162 </h5> 168 </h5>
163 </v-flex> 169 </v-flex>
164 <v-flex sm8 xs6> 170 <v-flex sm8 xs6>
165 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 171 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
166 </v-flex> 172 </v-flex>
167 </v-layout> 173 </v-layout>
168 <v-layout> 174 <v-layout>
169 <v-flex xs6 sm4> 175 <v-flex xs6 sm4>
170 <h5 class="right my-1"> 176 <h5 class="right my-1">
171 <b>Subject Author:</b> 177 <b>Subject Author:</b>
172 </h5> 178 </h5>
173 </v-flex> 179 </v-flex>
174 <v-flex sm8 xs6> 180 <v-flex sm8 xs6>
175 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> 181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
176 </v-flex> 182 </v-flex>
177 </v-layout> 183 </v-layout>
178 <v-layout> 184 <v-layout>
179 <v-flex xs6 sm4> 185 <v-flex xs6 sm4>
180 <h5 class="right my-1"> 186 <h5 class="right my-1">
181 <b>Subject :</b> 187 <b>Subject :</b>
182 </h5> 188 </h5>
183 </v-flex> 189 </v-flex>
184 <v-flex sm8 xs6> 190 <v-flex sm8 xs6>
185 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
186 </v-flex> 192 </v-flex>
187 </v-layout> 193 </v-layout>
188 <!-- <v-layout> 194 <!-- <v-layout>
189 <v-flex xs6 sm4> 195 <v-flex xs6 sm4>
190 <h5 class="right my-1"> 196 <h5 class="right my-1">
191 <b>Teacher :</b> 197 <b>Teacher :</b>
192 </h5> 198 </h5>
193 </v-flex> 199 </v-flex>
194 <v-flex sm8 xs6> 200 <v-flex sm8 xs6>
195 <h5 class="my-1">{{ editedItem.teacherId }}</h5> 201 <h5 class="my-1">{{ editedItem.teacherId }}</h5>
196 </v-flex> 202 </v-flex>
197 </v-layout>--> 203 </v-layout>-->
198 <v-layout> 204 <v-layout>
199 <v-flex xs6 sm4> 205 <v-flex xs6 sm4>
200 <h5 class="right my-1"> 206 <h5 class="right my-1">
201 <b>Pass Marks :</b> 207 <b>Pass Marks :</b>
202 </h5> 208 </h5>
203 </v-flex> 209 </v-flex>
204 <v-flex sm8 xs6> 210 <v-flex sm8 xs6>
205 <h5 class="my-1">{{ editedItem.passMarks }}</h5> 211 <h5 class="my-1">{{ editedItem.passMarks }}</h5>
206 </v-flex> 212 </v-flex>
207 </v-layout> 213 </v-layout>
208 <v-layout> 214 <v-layout>
209 <v-flex xs6 sm4> 215 <v-flex xs6 sm4>
210 <h5 class="right my-1"> 216 <h5 class="right my-1">
211 <b>Final Marks :</b> 217 <b>Final Marks :</b>
212 </h5> 218 </h5>
213 </v-flex> 219 </v-flex>
214 <v-flex sm8 xs6> 220 <v-flex sm8 xs6>
215 <h5 class="my-1">{{ editedItem.finalMarks }}</h5> 221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
216 </v-flex> 222 </v-flex>
217 </v-layout> 223 </v-layout>
218 <v-layout> 224 <v-layout>
219 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
220 <h5 class="right my-1"> 226 <h5 class="right my-1">
221 <b>Type :</b> 227 <b>Type :</b>
222 </h5> 228 </h5>
223 </v-flex> 229 </v-flex>
224 <v-flex sm8 xs6> 230 <v-flex sm8 xs6>
225 <h5 class="my-1">{{ editedItem.type }}</h5> 231 <h5 class="my-1">{{ editedItem.type }}</h5>
226 </v-flex> 232 </v-flex>
227 </v-layout> 233 </v-layout>
228 </v-flex> 234 </v-flex>
229 </v-layout> 235 </v-layout>
230 </v-container> 236 </v-container>
231 </v-card-text> 237 </v-card-text>
232 </v-card> 238 </v-card>
233 </v-dialog> 239 </v-dialog>
234 240
235 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 241 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
236 <v-toolbar color="transparent" flat> 242 <v-toolbar color="transparent" flat>
237 <v-btn 243 <v-btn
238 fab 244 fab
239 dark 245 dark
240 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"
241 small 247 small
242 @click="addSubjectDialog = true" 248 @click="addSubjectDialog = true"
243 > 249 >
244 <v-icon dark>add</v-icon> 250 <v-icon dark>add</v-icon>
245 </v-btn> 251 </v-btn>
246 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 252 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
247 <v-btn 253 <v-btn
248 round 254 round
249 class="open-dialog-button" 255 class="open-dialog-button"
250 dark 256 dark
251 @click="addSubjectDialog = true" 257 @click="addSubjectDialog = true"
252 v-if="role != 'TEACHER' " 258 v-if="role != 'TEACHER' "
253 > 259 >
254 <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
255 </v-btn> 261 </v-btn>
256 </v-flex> 262 </v-flex>
257 <v-spacer></v-spacer> 263 <v-spacer></v-spacer>
258 <v-flex lg2 md2 xs12 v-show="show"> 264 <v-flex lg2 md2 xs12 v-show="show">
259 <v-select 265 <v-select
260 :items="classList" 266 :items="classList"
261 label="Select Your Class" 267 label="Select Your Class"
262 v-model="addSubject.classId" 268 v-model="getSubject.classId"
263 item-text="classNum" 269 item-text="classNum"
264 item-value="_id" 270 item-value="_id"
265 name="Select Class" 271 name="Select Class"
266 :rules="classRules" 272 :rules="classRules"
267 @change="getClassSubject" 273 @change="getClassSubject"
268 class="pl-2" 274 class="pl-2"
269 required 275 required
270 ></v-select> 276 ></v-select>
271 </v-flex> 277 </v-flex>
272 <v-card-title class="body-1" v-show="show"> 278 <v-card-title class="body-1" v-show="show">
273 <v-btn icon flat @click="displaySearch"> 279 <v-btn icon flat @click="displaySearch">
274 <v-avatar size="27"> 280 <v-avatar size="27">
275 <img src="/static/icon/search.png" alt="icon" /> 281 <img src="/static/icon/search.png" alt="icon" />
276 </v-avatar> 282 </v-avatar>
277 </v-btn> 283 </v-btn>
278 </v-card-title> 284 </v-card-title>
279 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch"> 285 <v-flex xs9 sm9 md2 lg2 xl2 v-show="showSearch">
280 <v-layout> 286 <v-layout>
281 <v-text-field 287 <v-text-field
282 v-model="search" 288 v-model="search"
283 label="Search" 289 label="Search"
284 prepend-inner-icon="search" 290 prepend-inner-icon="search"
285 color="primary" 291 color="primary"
286 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 292 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
287 ></v-text-field> 293 ></v-text-field>
288 <v-icon @click="closeSearch" color="error">close</v-icon> 294 <v-icon @click="closeSearch" color="error">close</v-icon>
289 </v-layout> 295 </v-layout>
290 </v-flex> 296 </v-flex>
291 </v-toolbar> 297 </v-toolbar>
292 <v-data-table 298 <v-data-table
293 :headers="headers" 299 :headers="headers"
294 :items="subjectList.subjects" 300 :items="subjectList.subjects"
295 :pagination.sync="pagination" 301 :pagination.sync="pagination"
296 :search="search" 302 :search="search"
297 > 303 >
298 <template slot="items" slot-scope="props"> 304 <template slot="items" slot-scope="props">
299 <tr class="tr"> 305 <tr class="tr">
300 <td class="td-row td">{{ props.index + 1 }}</td> 306 <td class="td-row td">{{ props.index + 1 }}</td>
301 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> 307 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
302 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> 308 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
303 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> 309 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
304 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> 310 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
305 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> 311 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
306 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> 312 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
307 <td class="text-xs-center td td-row">{{ props.item.type }}</td> 313 <td class="text-xs-center td td-row">{{ props.item.type }}</td>
308 314
309 <!-- <td class="text-xs-center td td-row"> 315 <!-- <td class="text-xs-center td td-row">
310 <span> 316 <span>
311 <v-tooltip top> 317 <v-tooltip top>
312 <img 318 <img
313 slot="activator" 319 slot="activator"
314 style="cursor:pointer; width:25px; height:25px; " 320 style="cursor:pointer; width:25px; height:25px; "
315 class="mr-3" 321 class="mr-3"
316 @click="profile(props.item)" 322 @click="profile(props.item)"
317 src="/static/icon/view.png" 323 src="/static/icon/view.png"
318 /> 324 />
319 <span>View</span> 325 <span>View</span>
320 </v-tooltip> 326 </v-tooltip>
321 <v-tooltip top> 327 <v-tooltip top>
322 <img 328 <img
323 slot="activator" 329 slot="activator"
324 style="cursor:pointer; width:20px; height:18px; " 330 style="cursor:pointer; width:20px; height:18px; "
325 class="mr-3" 331 class="mr-3"
326 @click="editItem(props.item)" 332 @click="editItem(props.item)"
327 src="/static/icon/edit.png" 333 src="/static/icon/edit.png"
328 /> 334 />
329 <span>Edit</span> 335 <span>Edit</span>
330 </v-tooltip> 336 </v-tooltip>
331 <v-tooltip top> 337 <v-tooltip top>
332 <img 338 <img
333 slot="activator" 339 slot="activator"
334 style="cursor:pointer; width:20px; height:20px; " 340 style="cursor:pointer; width:20px; height:20px; "
335 class="mr-3" 341 class="mr-3"
336 @click="deleteItem(props.item)" 342 @click="deleteItem(props.item)"
337 src="/static/icon/delete.png" 343 src="/static/icon/delete.png"
338 /> 344 />
339 <span>Delete</span> 345 <span>Delete</span>
340 </v-tooltip> 346 </v-tooltip>
341 </span> 347 </span>
342 </td> --> 348 </td>-->
343 </tr> 349 </tr>
344 </template> 350 </template>
345 <v-alert 351 <v-alert
346 slot="no-results" 352 slot="no-results"
347 :value="true" 353 :value="true"
348 color="error" 354 color="error"
349 icon="warning" 355 icon="warning"
350 >Your search for "{{ search }}" found no results.</v-alert> 356 >Your search for "{{ search }}" found no results.</v-alert>
351 </v-data-table> 357 </v-data-table>
352 <!-- ****** ADD MULTIPLE Subject ****** --> 358 <!-- ****** ADD MULTIPLE Subject ****** -->
353 <v-snackbar 359 <v-snackbar
354 :timeout="timeout" 360 :timeout="timeout"
355 :top="y === 'top'" 361 :top="y === 'top'"
356 :right="x === 'right'" 362 :right="x === 'right'"
357 :vertical="mode === 'vertical'" 363 :vertical="mode === 'vertical'"
358 v-model="snackbar" 364 v-model="snackbar"
359 :color="color" 365 :color="color"
360 >{{ text }}</v-snackbar> 366 >{{ text }}</v-snackbar>
361 <v-dialog v-model="addSubjectDialog" max-width="600px"> 367 <v-dialog v-model="addSubjectDialog" max-width="600px">
362 <v-card flat class="card-style pa-2" dark> 368 <v-card flat class="card-style pa-2" dark>
363 <v-layout> 369 <v-layout>
364 <v-flex xs12> 370 <v-flex xs12>
365 <label class="title text-xs-center">Add Subject</label> 371 <label class="title text-xs-center">Add Subject</label>
366 <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon> 372 <v-icon size="24" class="right" @click="addSubjectDialog = false">cancel</v-icon>
367 </v-flex> 373 </v-flex>
368 </v-layout> 374 </v-layout>
369 <v-container fluid fill-height> 375 <v-container fluid fill-height>
370 <v-layout align-center> 376 <v-layout align-center>
371 <v-flex xs12> 377 <v-flex xs12>
372 <v-form ref="form" v-model="valid" lazy-validation> 378 <v-form ref="form" v-model="valid" lazy-validation>
373 <v-layout> 379 <v-layout>
374 <v-flex xs4 sm4 class="pt-4 subheading"> 380 <v-flex xs4 sm4 class="pt-4 subheading">
375 <label class="right">Class Name :</label> 381 <label class="right">Class Name :</label>
376 </v-flex> 382 </v-flex>
377 <v-flex xs8 sm8 class="ml-3"> 383 <v-flex xs8 sm8 class="ml-3">
378 <v-select 384 <v-select
379 v-model="addSubject.classId" 385 v-model="addSubject.classId"
380 label="Select your class" 386 label="Select your class"
381 type="text" 387 type="text"
382 :items="classList" 388 :items="classList"
383 item-text="classNum" 389 item-text="classNum"
384 item-value="_id" 390 item-value="_id"
385 :rules="classRules" 391 :rules="classRules"
386 required 392 required
387 ></v-select> 393 ></v-select>
388 </v-flex> 394 </v-flex>
389 </v-layout> 395 </v-layout>
390 <v-layout> 396 <v-layout>
391 <v-flex xs4 sm4 class="pt-4 subheading"> 397 <v-flex xs4 sm4 class="pt-4 subheading">
392 <label class="right">Teacher Name :</label> 398 <label class="right">Teacher Name :</label>
393 </v-flex> 399 </v-flex>
394 <v-flex xs8 sm8 class="ml-3"> 400 <v-flex xs8 sm8 class="ml-3">
395 <v-select 401 <v-select
396 v-model="addSubject.teacherId" 402 v-model="addSubject.teacherId"
397 label="Select your teacher" 403 label="Select your teacher"
398 type="text" 404 type="text"
399 :items="teacherList" 405 :items="teacherList"
400 item-text="name" 406 item-text="name"
401 item-value="_id" 407 item-value="_id"
402 :rules="teacherRules" 408 :rules="teacherRules"
403 required 409 required
404 ></v-select> 410 ></v-select>
405 </v-flex> 411 </v-flex>
406 </v-layout> 412 </v-layout>
407 <v-layout> 413 <v-layout>
408 <v-flex xs4 sm4 class="pt-4 sybheading"> 414 <v-flex xs4 sm4 class="pt-4 sybheading">
409 <label class="right">Type :</label> 415 <label class="right">Type :</label>
410 </v-flex> 416 </v-flex>
411 <v-flex xs8 sm8 class="ml-3"> 417 <v-flex xs8 sm8 class="ml-3">
412 <v-select 418 <v-select
413 v-model="addSubject.type" 419 v-model="addSubject.type"
414 :items="type" 420 :items="type"
415 label="Select your Type" 421 label="Select your Type"
416 :rules="typeRules" 422 :rules="typeRules"
417 required 423 required
418 ></v-select> 424 ></v-select>
419 </v-flex> 425 </v-flex>
420 </v-layout> 426 </v-layout>
421 <v-layout> 427 <v-layout>
422 <v-flex xs4 sm4 class="pt-4 subheading"> 428 <v-flex xs4 sm4 class="pt-4 subheading">
423 <label class="right">Pass Mark :</label> 429 <label class="right">Pass Mark :</label>
424 </v-flex> 430 </v-flex>
425 <v-flex xs8 sm8 class="ml-3"> 431 <v-flex xs8 sm8 class="ml-3">
426 <v-text-field 432 <v-text-field
427 label="Fill your Pass Mark" 433 label="Fill your Pass Mark"
428 name="name" 434 name="name"
429 type="text" 435 type="text"
430 :rules="markRules" 436 :rules="markRules"
431 v-model="addSubject.passMarks" 437 v-model="addSubject.passMarks"
432 required 438 required
433 ></v-text-field> 439 ></v-text-field>
434 </v-flex> 440 </v-flex>
435 </v-layout> 441 </v-layout>
436 <v-layout> 442 <v-layout>
437 <v-flex xs4 sm4 class="pt-4 subheading"> 443 <v-flex xs4 sm4 class="pt-4 subheading">
438 <label class="right">Final Mark :</label> 444 <label class="right">Final Mark :</label>
439 </v-flex> 445 </v-flex>
440 <v-flex xs8 sm8 class="ml-3"> 446 <v-flex xs8 sm8 class="ml-3">
441 <v-text-field 447 <v-text-field
442 label="Fill your final mark" 448 label="Fill your final mark"
443 name="name" 449 name="name"
444 type="text" 450 type="text"
445 :rules="finalRules" 451 :rules="finalRules"
446 v-model="addSubject.finalMarks" 452 v-model="addSubject.finalMarks"
447 required 453 required
448 ></v-text-field> 454 ></v-text-field>
449 </v-flex> 455 </v-flex>
450 </v-layout> 456 </v-layout>
451 <v-layout> 457 <v-layout>
452 <v-flex xs4 sm4 class="pt-4 subheading"> 458 <v-flex xs4 sm4 class="pt-4 subheading">
453 <label class="right">Subject :</label> 459 <label class="right">Subject :</label>
454 </v-flex> 460 </v-flex>
455 <v-flex xs8 sm8 class="ml-3"> 461 <v-flex xs8 sm8 class="ml-3">
456 <v-text-field 462 <v-text-field
457 v-model="addSubject.subjectName" 463 v-model="addSubject.subjectName"
458 placeholder="fill your Subject Name" 464 placeholder="fill your Subject Name"
459 name="name" 465 name="name"
460 type="text" 466 type="text"
461 :rules="subjectRules" 467 :rules="subjectRules"
462 required 468 required
463 ></v-text-field> 469 ></v-text-field>
464 </v-flex> 470 </v-flex>
465 </v-layout> 471 </v-layout>
466 <v-layout> 472 <v-layout>
467 <v-flex xs4 sm4 class="pt-4 subheading"> 473 <v-flex xs4 sm4 class="pt-4 subheading">
468 <label class="right">Subject Author :</label> 474 <label class="right">Subject Author :</label>
469 </v-flex> 475 </v-flex>
470 <v-flex xs8 sm8 class="ml-3"> 476 <v-flex xs8 sm8 class="ml-3">
471 <v-text-field 477 <v-text-field
472 v-model="addSubject.subjectAuthor" 478 v-model="addSubject.subjectAuthor"
473 placeholder="fill your Subject Author" 479 placeholder="fill your Subject Author"
474 name="name" 480 name="name"
475 type="text" 481 type="text"
476 ></v-text-field> 482 ></v-text-field>
477 </v-flex> 483 </v-flex>
478 </v-layout> 484 </v-layout>
479 <v-layout> 485 <v-layout>
480 <v-flex xs4 sm4 class="pt-4 subheading"> 486 <v-flex xs4 sm4 class="pt-4 subheading">
481 <label class="right">Subject Code:</label> 487 <label class="right">Subject Code:</label>
482 </v-flex> 488 </v-flex>
483 <v-flex xs8 sm8 class="ml-3"> 489 <v-flex xs8 sm8 class="ml-3">
484 <v-text-field 490 <v-text-field
485 v-model="addSubject.subjectCode" 491 v-model="addSubject.subjectCode"
486 placeholder="fill your Subject Code" 492 placeholder="fill your Subject Code"
487 name="name" 493 name="name"
488 type="text" 494 type="text"
489 ></v-text-field> 495 ></v-text-field>
490 </v-flex> 496 </v-flex>
491 </v-layout> 497 </v-layout>
492 <v-layout> 498 <v-layout>
493 <v-flex xs12 sm12> 499 <v-flex xs12 sm12>
494 <v-card-actions> 500 <v-card-actions>
495 <v-spacer></v-spacer> 501 <v-spacer></v-spacer>
496 <v-btn 502 <v-btn
497 @click="submit" 503 @click="submit"
498 round 504 round
499 dark 505 dark
500 :loading="addLoading" 506 :loading="addLoading"
501 class="add-button" 507 class="add-button"
502 >Add Subject</v-btn> 508 >Add Subject</v-btn>
503 </v-card-actions> 509 </v-card-actions>
504 </v-flex> 510 </v-flex>
505 </v-layout> 511 </v-layout>
506 </v-form> 512 </v-form>
507 </v-flex> 513 </v-flex>
508 </v-layout> 514 </v-layout>
509 </v-container> 515 </v-container>
510 </v-card> 516 </v-card>
511 </v-dialog> 517 </v-dialog>
512 <div class="loader" v-if="showLoader"> 518 <div class="loader" v-if="showLoader">
513 <v-progress-circular indeterminate color="white"></v-progress-circular> 519 <v-progress-circular indeterminate color="white"></v-progress-circular>
514 </div> 520 </div>
515 </v-container> 521 </v-container>
516 </template> 522 </template>
517 523
518 <script> 524 <script>
519 import http from "@/Services/http.js"; 525 import http from "@/Services/http.js";
520 import Util from "@/util"; 526 import Util from "@/util";
521 527
522 export default { 528 export default {
523 data: () => ({ 529 data: () => ({
524 snackbar: false, 530 snackbar: false,
525 y: "top", 531 y: "top",
526 x: "right", 532 x: "right",
527 role: "", 533 role: "",
528 mode: "", 534 mode: "",
529 timeout: 3000, 535 timeout: 3000,
530 text: "", 536 text: "",
531 color: "", 537 color: "",
532 show: true, 538 show: true,
533 showSearch: false, 539 showSearch: false,
534 showLoader: false, 540 showLoader: false,
535 loading: false, 541 loading: false,
536 editLoading: false, 542 editLoading: false,
537 addLoading: false, 543 addLoading: false,
538 date: null, 544 date: null,
539 search: "", 545 search: "",
540 viewSubjectDialog: false, 546 viewSubjectDialog: false,
541 editSubjectDialog: false, 547 editSubjectDialog: false,
542 valid: true, 548 valid: true,
543 validEditSubject: true, 549 validEditSubject: true,
544 addSubjectDialog: false, 550 addSubjectDialog: false,
545 // isActive: true, 551 // isActive: true,
546 // newActive: false, 552 // newActive: false,
547 type: ["Optional", "Mandatory"], 553 type: ["Optional", "Mandatory"],
548 pagination: { 554 pagination: {
549 rowsPerPage: 10 555 rowsPerPage: 10,
550 }, 556 },
551 token: "", 557 token: "",
552 classRules: [v => !!v || " Class Name is required"], 558 classRules: [(v) => !!v || " Class Name is required"],
553 teacherRules: [v => !!v || " Teacher Name is required"], 559 teacherRules: [(v) => !!v || " Teacher Name is required"],
554 typeRules: [v => !!v || "Type is required"], 560 typeRules: [(v) => !!v || "Type is required"],
555 markRules: [v => !!v || " Pass Mark is required"], 561 markRules: [(v) => !!v || " Pass Mark is required"],
556 finalRules: [v => !!v || "Final MArk is required"], 562 finalRules: [(v) => !!v || "Final MArk is required"],
557 subjectRules: [v => !!v || " Subject Name is required"], 563 subjectRules: [(v) => !!v || " Subject Name is required"],
558 headers: [ 564 headers: [
559 { 565 {
560 text: "No", 566 text: "No",
561 align: "", 567 align: "",
562 sortable: false, 568 sortable: false,
563 value: "No" 569 value: "No",
564 }, 570 },
565 { 571 {
566 text: "Subject Name", 572 text: "Subject Name",
567 value: "subjectName", 573 value: "subjectName",
568 sortable: false, 574 sortable: false,
569 align: "center" 575 align: "center",
570 }, 576 },
571 { 577 {
572 text: "Subject Author", 578 text: "Subject Author",
573 value: "subjectAuthor", 579 value: "subjectAuthor",
574 sortable: false, 580 sortable: false,
575 align: "center" 581 align: "center",
576 }, 582 },
577 { 583 {
578 text: "Subject Code", 584 text: "Subject Code",
579 value: "subjectCode", 585 value: "subjectCode",
580 sortable: false, 586 sortable: false,
581 align: "center" 587 align: "center",
582 }, 588 },
583 // { 589 // {
584 // text: "Teacher", 590 // text: "Teacher",
585 // value: "teacherId", 591 // value: "teacherId",
586 // sortable: false, 592 // sortable: false,
587 // align: "center" 593 // align: "center"
588 // }, 594 // },
589 { 595 {
590 text: "Pass Marks", 596 text: "Pass Marks",
591 value: "passMarks", 597 value: "passMarks",
592 sortable: false, 598 sortable: false,
593 align: "center" 599 align: "center",
594 }, 600 },
595 { 601 {
596 text: "Final Marks", 602 text: "Final Marks",
597 value: "finalMarks", 603 value: "finalMarks",
598 sortable: false, 604 sortable: false,
599 align: "center" 605 align: "center",
600 }, 606 },
601 { 607 {
602 text: "Type", 608 text: "Type",
603 value: "type", 609 value: "type",
604 sortable: false, 610 sortable: false,
605 align: "center" 611 align: "center",
606 }, 612 },
607 // { text: "Action", value: "", sortable: false, align: "center" } 613 // { text: "Action", value: "", sortable: false, align: "center" }
608 ], 614 ],
609 subjectList: [], 615 subjectList: [],
610 classList: [], 616 classList: [],
611 teacherList: [], 617 teacherList: [],
612 editedIndex: -1, 618 editedIndex: -1,
613 addSubject: {}, 619 addSubject: {},
620 getSubject: {},
614 621
615 editedItem: { 622 editedItem: {
616 // subjectName: "", 623 // subjectName: "",
617 // subjectAuthor: "" 624 // subjectAuthor: ""
618 } 625 },
619 }), 626 }),
620 methods: { 627 methods: {
621 pickFile() { 628 pickFile() {
622 this.$refs.image.click(); 629 this.$refs.image.click();
623 }, 630 },
624 editItem(item) { 631 editItem(item) {
625 this.editedIndex = this.subjectList.subjects; 632 this.editedIndex = this.subjectList.subjects;
626 this.editedItem = Object.assign({}, item); 633 this.editedItem = Object.assign({}, item);
627 this.dialog = true; 634 this.dialog = true;
628 this.editSubjectDialog = true; 635 this.editSubjectDialog = true;
629 }, 636 },
630 profile(item) { 637 profile(item) {
631 this.editedIndex = this.subjectList.subjects; 638 this.editedIndex = this.subjectList.subjects;
632 this.editedItem = Object.assign({}, item); 639 this.editedItem = Object.assign({}, item);
633 this.dialog1 = true; 640 this.dialog1 = true;
634 this.viewSubjectDialog = true; 641 this.viewSubjectDialog = true;
635 }, 642 },
636 deleteItem(item) { 643 deleteItem(item) {
637 let deleteSubject = { 644 let deleteSubject = {
638 classId: this.addSubject.classId, 645 classId: this.addSubject.classId,
639 subjectId: item._id 646 subjectId: item._id,
640 }; 647 };
641 http() 648 http()
642 .delete( 649 .delete(
643 "/deleteSubject", 650 "/deleteSubject",
644 confirm("Are you sure you want to delete this?") && { 651 confirm("Are you sure you want to delete this?") && {
645 params: deleteSubject 652 params: deleteSubject,
646 } 653 }
647 ) 654 )
648 .then(response => { 655 .then((response) => {
649 this.snackbar = true; 656 this.snackbar = true;
650 this.color = "green"; 657 this.color = "green";
651 this.text = "Successfully delete Existing Subject"; 658 this.text = "Successfully delete Existing Subject";
652 this.getClassSubject(this.addSubject.classId); 659 this.getClassSubject(this.addSubject.classId);
653 }) 660 })
654 .catch(error => { 661 .catch((error) => {
655 // this.snackbar = true; 662 // this.snackbar = true;
656 // this.text = error.response.data.message; 663 // this.text = error.response.data.message;
657 // this.color = "error"; 664 // this.color = "error";
658 console.log("error", error); 665 console.log("error", error);
659 }); 666 });
660 }, 667 },
661 close() { 668 close() {
662 this.editSubjectDialog = false; 669 this.editSubjectDialog = false;
663 }, 670 },
664 close1() { 671 close1() {
665 this.viewSubjectDialog = false; 672 this.viewSubjectDialog = false;
666 }, 673 },
667 submit() { 674 submit() {
668 if (this.$refs.form.validate()) { 675 if (this.$refs.form.validate()) {
669 this.addLoading = true; 676 this.addLoading = true;
670 http() 677 http()
671 .post("/addSubject", this.addSubject) 678 .post("/addSubject", this.addSubject)
672 .then(response => { 679 .then((response) => {
673 this.snackbar = true; 680 this.snackbar = true;
674 this.text = "New Subject added successfully"; 681 this.text = "New Subject added successfully";
675 this.color = "green"; 682 this.color = "green";
676 this.addLoading = false; 683 this.addLoading = false;
677 this.addSubjectDialog = false; 684 this.addSubjectDialog = false;
678 this.getClassSubject(_id); 685 this.getClassSubject(_id);
679 }) 686 })
680 .catch(error => { 687 .catch((error) => {
681 this.addLoading = false; 688 this.addLoading = false;
682 }); 689 });
683 } 690 }
684 }, 691 },
685 clear() { 692 clear() {
686 this.$refs.form.reset(); 693 this.$refs.form.reset();
687 }, 694 },
688 save() { 695 save() {
689 if (this.$refs.formEditSubject.validate()) { 696 if (this.$refs.formEditSubject.validate()) {
690 let editSubject = { 697 let editSubject = {
691 classId: this.editedItem.classId, 698 classId: this.editedItem.classId,
692 subjectId: this.editedItem._id, 699 subjectId: this.editedItem._id,
693 teacherId: this.editedItem.teacherId, 700 teacherId: this.editedItem.teacherId,
694 type: this.editedItem.type, 701 type: this.editedItem.type,
695 passMarks: this.editedItem.passMarks, 702 passMarks: this.editedItem.passMarks,
696 finalMarks: this.editedItem.finalMarks, 703 finalMarks: this.editedItem.finalMarks,
697 subjectAuthor: this.editedItem.subjectAuthor, 704 subjectAuthor: this.editedItem.subjectAuthor,
698 subjectCode: this.editedItem.subjectCode, 705 subjectCode: this.editedItem.subjectCode,
699 subjectName: this.editedItem.subjectName 706 subjectName: this.editedItem.subjectName,
700 }; 707 };
701 this.editLoading = true; 708 this.editLoading = true;
702 http() 709 http()
703 .put("/updateSubject", editSubject) 710 .put("/updateSubject", editSubject)
704 .then(response => { 711 .then((response) => {
705 this.snackbar = true; 712 this.snackbar = true;
706 this.text = "Successfully Edit Existing Subject"; 713 this.text = "Successfully Edit Existing Subject";
707 this.color = "green"; 714 this.color = "green";
708 this.editLoading = false; 715 this.editLoading = false;
709 this.editSubjectDialog = false; 716 this.editSubjectDialog = false;
710 this.getClassSubject(this.editedItem.classId); 717 this.getClassSubject(this.editedItem.classId);
711 }) 718 })
712 .catch(error => { 719 .catch((error) => {
713 this.editLoading = false; 720 this.editLoading = false;
714 721
715 // console.log(error); 722 // console.log(error);
716 }); 723 });
717 } 724 }
718 }, 725 },
719 getClassSubject(_id) { 726 getClassSubject(_id) {
720 this.showLoader = true; 727 this.showLoader = true;
721 console.log("class", _id); 728 console.log("class", _id);
722 // this.classId = this.classId; 729 // this.classId = this.classId;
723 http() 730 http()
724 .get( 731 .get(
725 "/getParticularClass", 732 "/getParticularClass",
726 { params: { classId: _id } }, 733 { params: { classId: _id } },
727 { 734 {
728 headers: { Authorization: "Bearer " + this.token } 735 headers: { Authorization: "Bearer " + this.token },
729 } 736 }
730 ) 737 )
731 .then(response => { 738 .then((response) => {
732 this.subjectList = response.data.data; 739 this.subjectList = response.data.data;
733 this.showLoader = false; 740 this.showLoader = false;
734 }) 741 })
735 .catch(err => { 742 .catch((err) => {
736 this.showLoader = false; 743 this.showLoader = false;
737 }); 744 });
738 }, 745 },
739 getClass() { 746 getClass() {
740 http() 747 http()
741 .get("/getClassesList", { 748 .get("/getClassesList", {
742 headers: { Authorization: "Bearer " + this.token } 749 headers: { Authorization: "Bearer " + this.token },
743 }) 750 })
744 .then(response => { 751 .then((response) => {
745 this.classList = response.data.data; 752 this.classList = response.data.data;
746 }) 753 })
747 .catch(error => { 754 .catch((error) => {
748 if (error.response.status === 401) { 755 if (error.response.status === 401) {
749 this.$router.replace({ path: "/" }); 756 this.$router.replace({ path: "/" });
750 this.$store.dispatch("setToken", null); 757 this.$store.dispatch("setToken", null);
751 this.$store.dispatch("Id", null); 758 this.$store.dispatch("Id", null);
752 } 759 }
753 }); 760 });
754 }, 761 },
755 getTeacherList() { 762 getTeacherList() {
756 this.showLoader = true; 763 this.showLoader = true;
757 var token = this.$store.state.token; 764 var token = this.$store.state.token;
758 http() 765 http()
759 .get("/getTeachersList", { 766 .get("/getTeachersList", {
760 headers: { Authorization: "Bearer " + token } 767 headers: { Authorization: "Bearer " + token },
761 }) 768 })
762 .then(response => { 769 .then((response) => {
763 this.teacherList = response.data.data; 770 this.teacherList = response.data.data;
764 this.showLoader = false; 771 this.showLoader = false;
765 // console.log("getTeacherList=====>",this.desserts) 772 // console.log("getTeacherList=====>",this.desserts)
766 }) 773 })
767 .catch(error => { 774 .catch((error) => {
768 this.showLoader = false; 775 this.showLoader = false;
769 if (error.response.status === 401) { 776 if (error.response.status === 401) {
770 this.$router.replace({ path: "/" }); 777 this.$router.replace({ path: "/" });
771 this.$store.dispatch("setToken", null); 778 this.$store.dispatch("setToken", null);
772 this.$store.dispatch("Id", null); 779 this.$store.dispatch("Id", null);
773 } 780 }
774 }); 781 });
775 }, 782 },
776 displaySearch() { 783 displaySearch() {
777 (this.show = false), (this.showSearch = true); 784 (this.show = false), (this.showSearch = true);
778 }, 785 },
779 closeSearch() { 786 closeSearch() {
780 this.showSearch = false; 787 this.showSearch = false;
781 this.show = true; 788 this.show = true;
782 this.search = ""; 789 this.search = "";
783 } 790 },
784 }, 791 },
785 mounted() { 792 mounted() {
786 this.token = this.$store.state.token; 793 this.token = this.$store.state.token;
787 // this.getNoticeDataList(); 794 // this.getNoticeDataList();
788 this.getClass(); 795 this.getClass();
789 this.getTeacherList(); 796 this.getTeacherList();
790 this.role = this.$store.state.role; 797 this.role = this.$store.state.role;
791 } 798 },
792 }; 799 };
793 </script> 800 </script>
src/pages/Annoucement/annoucement.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS COURSES DETAILS ****** --> 3 <!-- ****** EDITS COURSES DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable> 4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable>
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 Annoucement</label> 8 <label class="title text-xs-center">Edit Annoucement</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.attachementUrl" 21 :src="editedItem.attachementUrl"
22 v-else-if="editedItem.attachementUrl && !editImageUrl" 22 v-else-if="editedItem.attachementUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 sm5 class="pt-4 subheading"> 43 <v-flex xs4 sm5 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm7 class="ml-3"> 47 <v-flex xs8 sm7 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 sm5 class="pt-4 subheading"> 60 <v-flex xs4 sm5 class="pt-4 subheading">
61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm7 class="ml-3"> 64 <v-flex xs8 sm7 class="ml-3">
65 <v-select 65 <v-select
66 :items="courseData" 66 :items="courseData"
67 item-text="courseName" 67 item-text="courseName"
68 item-value="_id" 68 item-value="_id"
69 v-model="editedItem.courseName" 69 v-model="editedItem.courseName"
70 placeholder="fill your Course name" 70 placeholder="fill your Course name"
71 type="text" 71 type="text"
72 :rules="courseRules" 72 :rules="courseRules"
73 required 73 required
74 ></v-select> 74 ></v-select>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm5 class="pt-4 subheading"> 78 <v-flex xs4 sm5 class="pt-4 subheading">
79 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> 79 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
80 <label 80 <label
81 class="right hidden-lg-only hidden-md-only hidden-xl-only" 81 class="right hidden-lg-only hidden-md-only hidden-xl-only"
82 >DiscussionType:</label> 82 >DiscussionType:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8 sm7 class="ml-3"> 84 <v-flex xs8 sm7 class="ml-3">
85 <v-text-field 85 <v-text-field
86 v-model="editedItem.discussionType" 86 v-model="editedItem.discussionType"
87 placeholder="fill your Course Name" 87 placeholder="fill your Course Name"
88 type="text" 88 type="text"
89 required 89 required
90 ></v-text-field> 90 ></v-text-field>
91 </v-flex> 91 </v-flex>
92 </v-layout> 92 </v-layout>
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 sm5 class="pt-4 subheading"> 94 <v-flex xs4 sm5 class="pt-4 subheading">
95 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 95 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
96 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 96 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
97 </v-flex> 97 </v-flex>
98 <v-flex xs8 sm7 class="ml-3"> 98 <v-flex xs8 sm7 class="ml-3">
99 <v-text-field 99 <v-text-field
100 label="Select Image" 100 label="Select Image"
101 @click="pickEditFile" 101 @click="pickEditFile"
102 v-model="editImageName" 102 v-model="editImageName"
103 append-icon="attach_file" 103 append-icon="attach_file"
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 <v-layout> 109 <v-layout>
110 <v-flex xs12 sm12 class="px-0 mx-0"> 110 <v-flex xs12 sm12 class="px-0 mx-0">
111 <v-layout class="right"> 111 <v-layout class="right">
112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 112 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
113 </v-layout> 113 </v-layout>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-container> 116 </v-container>
117 </v-form> 117 </v-form>
118 </v-card-text> 118 </v-card-text>
119 </v-card> 119 </v-card>
120 </v-dialog> 120 </v-dialog>
121 121
122 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 122 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
123 123
124 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable> 124 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable>
125 <v-card flat class="card-style pa-3" dark> 125 <v-card flat class="card-style pa-3" dark>
126 <v-layout> 126 <v-layout>
127 <v-flex xs12> 127 <v-flex xs12>
128 <label class="title text-xs-center">View Annoucement</label> 128 <label class="title text-xs-center">View Annoucement</label>
129 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 129 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-card-text> 132 <v-card-text>
133 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 133 <v-flex align-center justify-center layout text-xs-center class="mt-3">
134 <v-avatar size="100px"> 134 <v-avatar size="100px">
135 <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" /> 135 <img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" />
136 <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" /> 136 <img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" />
137 </v-avatar> 137 </v-avatar>
138 </v-flex> 138 </v-flex>
139 <v-container grid-list-md> 139 <v-container grid-list-md>
140 <v-layout wrap> 140 <v-layout wrap>
141 <v-flex xs12> 141 <v-flex xs12>
142 <v-layout> 142 <v-layout>
143 <v-flex xs6 sm6> 143 <v-flex xs6 sm6>
144 <h5 class="right my-1"> 144 <h5 class="right my-1">
145 <b>Discussion Type :</b> 145 <b>Discussion Type :</b>
146 </h5> 146 </h5>
147 </v-flex> 147 </v-flex>
148 <v-flex sm6 xs6> 148 <v-flex sm6 xs6>
149 <h5 class="my-1 left">{{ editedItem.discussionType }}</h5> 149 <h5 class="my-1 left">{{ editedItem.discussionType }}</h5>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-container> 154 </v-container>
155 </v-card-text> 155 </v-card-text>
156 </v-card> 156 </v-card>
157 </v-dialog> 157 </v-dialog>
158 158
159 <!-- ****** Annoucement TABLE ****** --> 159 <!-- ****** Annoucement TABLE ****** -->
160 <v-toolbar color="transparent" flat> 160 <v-toolbar color="transparent" flat>
161 <v-btn 161 <v-btn
162 fab 162 fab
163 dark 163 dark
164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 164 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
165 small 165 small
166 @click="addAnnoucementDialog = true" 166 @click="addAnnoucementDialog = true"
167 > 167 >
168 <v-icon dark>add</v-icon> 168 <v-icon dark>add</v-icon>
169 </v-btn> 169 </v-btn>
170 <v-btn 170 <v-btn
171 round 171 round
172 class="open-dialog-button hidden-sm-only hidden-xs-only" 172 class="open-dialog-button hidden-sm-only hidden-xs-only"
173 dark 173 dark
174 @click="addAnnoucementDialog = true" 174 @click="addAnnoucementDialog = true"
175 > 175 >
176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement 176 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement
177 </v-btn> 177 </v-btn>
178 <v-card-actions class="hidden-xs-only hidden-sm-only"> 178 <v-card-actions class="hidden-xs-only hidden-sm-only">
179 <v-flex md13 lg12> 179 <v-flex md13 lg12>
180 <v-layout> 180 <v-layout>
181 <v-flex lg6 md12> 181 <v-flex lg6 md12>
182 <v-layout> 182 <v-layout>
183 <v-select 183 <v-select
184 :items="addclass" 184 :items="addclass"
185 label="Select Class" 185 label="Select Class"
186 v-model="selectAnnoucement.classId" 186 v-model="selectAnnoucement.classId"
187 item-text="classNum" 187 item-text="classNum"
188 item-value="_id" 188 item-value="_id"
189 name="Select Class" 189 name="Select Class"
190 :rules="classRules" 190 :rules="classRules"
191 required 191 required
192 class="ml-2" 192 class="ml-2"
193 @change="getCourses(selectAnnoucement.classId)" 193 @change="getCourses(selectAnnoucement.classId)"
194 ></v-select> 194 ></v-select>
195 <v-select 195 <v-select
196 :items="courseData" 196 :items="courseData"
197 label="Select Course" 197 label="Select Course"
198 v-model="selectAnnoucement.courseId" 198 v-model="selectAnnoucement.courseId"
199 item-text="courseName" 199 item-text="courseName"
200 item-value="_id" 200 item-value="_id"
201 :rules="courseRules" 201 :rules="courseRules"
202 required 202 required
203 class="ml-4" 203 class="ml-4"
204 ></v-select> 204 ></v-select>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-flex> 208 </v-flex>
209 </v-card-actions> 209 </v-card-actions>
210 <v-spacer></v-spacer> 210 <v-spacer></v-spacer>
211 <v-btn 211 <v-btn
212 @click="getAnnoucementes()" 212 @click="getAnnoucementes()"
213 round 213 round
214 dark 214 dark
215 :loading="loading" 215 :loading="loading"
216 class="add-button hidden-xs-only hidden-sm-only" 216 class="open-dialog-button hidden-xs-only hidden-sm-only"
217 >Find</v-btn> 217 >Find</v-btn>
218 <v-card-title class="body-1" v-show="show"> 218 <v-card-title class="body-1" v-show="show">
219 <v-btn icon large flat @click="displaySearch"> 219 <v-btn icon large flat @click="displaySearch">
220 <v-avatar size="27"> 220 <v-avatar size="27">
221 <img src="/static/icon/search.png" alt="icon" /> 221 <img src="/static/icon/search.png" alt="icon" />
222 </v-avatar> 222 </v-avatar>
223 </v-btn> 223 </v-btn>
224 </v-card-title> 224 </v-card-title>
225 <v-flex xs8 sm7 lg2 md3 v-show="showSearch"> 225 <v-flex xs8 sm7 lg2 md3 v-show="showSearch">
226 <v-layout> 226 <v-layout>
227 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 227 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
228 <v-icon @click="closeSearch" color="error">close</v-icon> 228 <v-icon @click="closeSearch" color="error">close</v-icon>
229 </v-layout> 229 </v-layout>
230 </v-flex> 230 </v-flex>
231 </v-toolbar> 231 </v-toolbar>
232 <v-card flat class="elevation-0 transparent"> 232 <v-card flat class="elevation-0 transparent">
233 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 233 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
234 <v-layout> 234 <v-layout>
235 <v-flex xs12> 235 <v-flex xs12>
236 <v-select 236 <v-select
237 :items="addclass" 237 :items="addclass"
238 label="Select Class" 238 label="Select Class"
239 v-model="selectAnnoucement.select" 239 v-model="selectAnnoucement.select"
240 item-text="classNum" 240 item-text="classNum"
241 item-value="_id" 241 item-value="_id"
242 name="Select Class" 242 name="Select Class"
243 :rules="classRules" 243 :rules="classRules"
244 class="px-2" 244 class="px-2"
245 ></v-select> 245 ></v-select>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 <v-layout> 248 <v-layout>
249 <v-flex xs5 class="mx-auto mb-2"> 249 <v-flex xs5 class="mx-auto mb-2">
250 <v-btn 250 <v-btn
251 @click="getAnnoucementes()" 251 @click="getAnnoucementes()"
252 block 252 block
253 round 253 round
254 dark 254 dark
255 :loading="loading" 255 :loading="loading"
256 class="add-button" 256 class="add-button"
257 >Find</v-btn> 257 >Find</v-btn>
258 </v-flex> 258 </v-flex>
259 </v-layout> 259 </v-layout>
260 </v-flex> 260 </v-flex>
261 </v-card> 261 </v-card>
262 <v-data-table 262 <v-data-table
263 :headers="headers" 263 :headers="headers"
264 :items="annoucementData" 264 :items="annoucementData"
265 :pagination.sync="pagination" 265 :pagination.sync="pagination"
266 :search="search" 266 :search="search"
267 > 267 >
268 <template slot="items" slot-scope="props"> 268 <template slot="items" slot-scope="props">
269 <tr class="tr row-click" @click="rowAnnoucement(props.item._id)"> 269 <tr class="tr row-click" @click="rowAnnoucement(props.item._id)">
270 <td class="text-xs-center td td-row"> 270 <td class="text-xs-center td td-row">
271 <v-avatar size="40"> 271 <v-avatar size="40">
272 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" /> 272 <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
273 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" /> 273 <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
274 </v-avatar> 274 </v-avatar>
275 </td> 275 </td>
276 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td> 276 <td class="text-xs-center td td-row">{{ props.item.discussionType}}</td>
277 <td class="text-xs-center td td-row"> 277 <td class="text-xs-center td td-row">
278 <span> 278 <span>
279 <v-tooltip top> 279 <v-tooltip top>
280 <img 280 <img
281 slot="activator" 281 slot="activator"
282 style="cursor:pointer; width:25px; height:25px; " 282 style="cursor:pointer; width:25px; height:25px; "
283 class="mr-3" 283 class="mr-3"
284 @click="profile(props.item)" 284 @click="profile(props.item)"
285 src="/static/icon/view.png" 285 src="/static/icon/view.png"
286 /> 286 />
287 <span>View</span> 287 <span>View</span>
288 </v-tooltip> 288 </v-tooltip>
289 <v-tooltip top> 289 <v-tooltip top>
290 <img 290 <img
291 slot="activator" 291 slot="activator"
292 style="cursor:pointer; width:20px; height:18px; " 292 style="cursor:pointer; width:20px; height:18px; "
293 class="mr-3" 293 class="mr-3"
294 @click="editItem(props.item)" 294 @click="editItem(props.item)"
295 src="/static/icon/edit.png" 295 src="/static/icon/edit.png"
296 /> 296 />
297 <span>Edit</span> 297 <span>Edit</span>
298 </v-tooltip> 298 </v-tooltip>
299 <v-tooltip top> 299 <v-tooltip top>
300 <img 300 <img
301 slot="activator" 301 slot="activator"
302 style="cursor:pointer; width:20px; height:20px; " 302 style="cursor:pointer; width:20px; height:20px; "
303 class="mr-3" 303 class="mr-3"
304 @click="deleteItem(props.item)" 304 @click="deleteItem(props.item)"
305 src="/static/icon/delete.png" 305 src="/static/icon/delete.png"
306 /> 306 />
307 <span>Delete</span> 307 <span>Delete</span>
308 </v-tooltip> 308 </v-tooltip>
309 </span> 309 </span>
310 </td> 310 </td>
311 </tr> 311 </tr>
312 </template> 312 </template>
313 <v-alert 313 <v-alert
314 slot="no-results" 314 slot="no-results"
315 :value="true" 315 :value="true"
316 color="error" 316 color="error"
317 icon="warning" 317 icon="warning"
318 >Your search for "{{ search }}" found no results.</v-alert> 318 >Your search for "{{ search }}" found no results.</v-alert>
319 </v-data-table> 319 </v-data-table>
320 <!-- ****** Add Annoucement DETAILS******--> 320 <!-- ****** Add Annoucement DETAILS******-->
321 <v-dialog v-model="addAnnoucementDialog" max-width="500"> 321 <v-dialog v-model="addAnnoucementDialog" max-width="500">
322 <v-card flat class="card-style pa-2" dark> 322 <v-card flat class="card-style pa-2" dark>
323 <v-layout> 323 <v-layout>
324 <v-flex xs12> 324 <v-flex xs12>
325 <label class="title text-xs-center">Add Annoucement</label> 325 <label class="title text-xs-center">Add Annoucement</label>
326 <v-icon size="24" class="right" @click="addAnnoucementDialog = false">cancel</v-icon> 326 <v-icon size="24" class="right" @click="addAnnoucementDialog = false">cancel</v-icon>
327 </v-flex> 327 </v-flex>
328 </v-layout> 328 </v-layout>
329 <v-container fluid> 329 <v-container fluid>
330 <v-layout align-center> 330 <v-layout align-center>
331 <v-flex xs12> 331 <v-flex xs12>
332 <v-flex xs12 sm12> 332 <v-flex xs12 sm12>
333 <v-form ref="form" v-model="valid" lazy-validation> 333 <v-form ref="form" v-model="valid" lazy-validation>
334 <v-layout> 334 <v-layout>
335 <v-flex 335 <v-flex
336 xs12 336 xs12
337 class="text-xs-center text-sm-center text-md-center text-lg-center" 337 class="text-xs-center text-sm-center text-md-center text-lg-center"
338 > 338 >
339 <v-avatar size="100px" v-if="!imageUrl"> 339 <v-avatar size="100px" v-if="!imageUrl">
340 <img src="/static/icon/user.png" /> 340 <img src="/static/icon/user.png" />
341 </v-avatar> 341 </v-avatar>
342 <input 342 <input
343 type="file" 343 type="file"
344 style="display: none" 344 style="display: none"
345 ref="image" 345 ref="image"
346 accept="image/*" 346 accept="image/*"
347 @change="onFilePicked" 347 @change="onFilePicked"
348 /> 348 />
349 <img 349 <img
350 :src="imageData.imageUrl" 350 :src="imageData.imageUrl"
351 height="150" 351 height="150"
352 width="150" 352 width="150"
353 v-if="imageUrl" 353 v-if="imageUrl"
354 style="border-radius:50%; width:200px" 354 style="border-radius:50%; width:200px"
355 /> 355 />
356 </v-flex> 356 </v-flex>
357 </v-layout> 357 </v-layout>
358 <v-layout wrap> 358 <v-layout wrap>
359 <v-flex xs12 sm12> 359 <v-flex xs12 sm12>
360 <v-layout> 360 <v-layout>
361 <v-flex x4 sm4 class="pt-4 subheading"> 361 <v-flex x4 sm4 class="pt-4 subheading">
362 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 362 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
363 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 363 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs8 sm8 class="ml-3"> 365 <v-flex xs8 sm8 class="ml-3">
366 <v-select 366 <v-select
367 :items="addclass" 367 :items="addclass"
368 label="Select Class" 368 label="Select Class"
369 v-model="addAnnoucement.select" 369 v-model="addAnnoucement.select"
370 item-text="classNum" 370 item-text="classNum"
371 item-value="_id" 371 item-value="_id"
372 name="Select Class" 372 name="Select Class"
373 :rules="classRules" 373 :rules="classRules"
374 @change="getCourses(addAnnoucement.select)" 374 @change="getCourses(addAnnoucement.select)"
375 required 375 required
376 ></v-select> 376 ></v-select>
377 </v-flex> 377 </v-flex>
378 </v-layout> 378 </v-layout>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout wrap> 381 <v-layout wrap>
382 <v-flex xs12 sm12> 382 <v-flex xs12 sm12>
383 <v-layout> 383 <v-layout>
384 <v-flex xs4 sm4 class="pt-4 subheading"> 384 <v-flex xs4 sm4 class="pt-4 subheading">
385 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 385 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
386 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 386 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</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 :items="courseData" 390 :items="courseData"
391 item-text="courseName" 391 item-text="courseName"
392 item-value="_id" 392 item-value="_id"
393 v-model="addAnnoucement.courseName" 393 v-model="addAnnoucement.courseName"
394 placeholder="fill your Course name" 394 placeholder="fill your Course name"
395 type="text" 395 type="text"
396 :rules="courseRules" 396 :rules="courseRules"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 </v-flex> 401 </v-flex>
402 <v-flex xs12 sm12> 402 <v-flex xs12 sm12>
403 <v-layout> 403 <v-layout>
404 <v-flex xs4 sm4 class="pt-4 subheading"> 404 <v-flex xs4 sm4 class="pt-4 subheading">
405 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label> 405 <label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
406 <label 406 <label
407 class="right hidden-lg-only hidden-md-only hidden-xl-only" 407 class="right hidden-lg-only hidden-md-only hidden-xl-only"
408 >DiscussionType:</label> 408 >DiscussionType:</label>
409 </v-flex> 409 </v-flex>
410 <v-flex xs8 sm8 class="ml-3"> 410 <v-flex xs8 sm8 class="ml-3">
411 <v-text-field 411 <v-text-field
412 v-model="addAnnoucement.discussionType" 412 v-model="addAnnoucement.discussionType"
413 placeholder="fill your Course name" 413 placeholder="fill your Course name"
414 type="text" 414 type="text"
415 :rules="courseRules" 415 :rules="courseRules"
416 required 416 required
417 ></v-text-field> 417 ></v-text-field>
418 </v-flex> 418 </v-flex>
419 </v-layout> 419 </v-layout>
420 </v-flex> 420 </v-flex>
421 <v-flex xs12 sm12> 421 <v-flex xs12 sm12>
422 <v-layout> 422 <v-layout>
423 <v-flex xs4 class="pt-4 subheading"> 423 <v-flex xs4 class="pt-4 subheading">
424 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 424 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
425 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 425 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
426 </v-flex> 426 </v-flex>
427 <v-flex xs8 class="ml-3"> 427 <v-flex xs8 class="ml-3">
428 <v-text-field 428 <v-text-field
429 label="Select Image" 429 label="Select Image"
430 @click="pickFile" 430 @click="pickFile"
431 v-model="imageName" 431 v-model="imageName"
432 append-icon="attach_file" 432 append-icon="attach_file"
433 ></v-text-field> 433 ></v-text-field>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 </v-flex> 436 </v-flex>
437 </v-layout> 437 </v-layout>
438 <v-layout> 438 <v-layout>
439 <v-flex xs12 sm12> 439 <v-flex xs12 sm12>
440 <v-layout class="right"> 440 <v-layout class="right">
441 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 441 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
442 </v-layout> 442 </v-layout>
443 </v-flex> 443 </v-flex>
444 </v-layout> 444 </v-layout>
445 </v-form> 445 </v-form>
446 </v-flex> 446 </v-flex>
447 </v-flex> 447 </v-flex>
448 </v-layout> 448 </v-layout>
449 </v-container> 449 </v-container>
450 </v-card> 450 </v-card>
451 </v-dialog> 451 </v-dialog>
452 <v-snackbar 452 <v-snackbar
453 :timeout="timeout" 453 :timeout="timeout"
454 :top="y === 'top'" 454 :top="y === 'top'"
455 :right="x === 'right'" 455 :right="x === 'right'"
456 :vertical="mode === 'vertical'" 456 :vertical="mode === 'vertical'"
457 v-model="snackbar" 457 v-model="snackbar"
458 :color="color" 458 :color="color"
459 >{{ text }}</v-snackbar> 459 >{{ text }}</v-snackbar>
460 <div class="loader" v-if="showLoader"> 460 <div class="loader" v-if="showLoader">
461 <v-progress-circular indeterminate color="white"></v-progress-circular> 461 <v-progress-circular indeterminate color="white"></v-progress-circular>
462 </div> 462 </div>
463 </v-container> 463 </v-container>
464 </template> 464 </template>
465 465
466 <script> 466 <script>
467 import http from "@/Services/http.js"; 467 import http from "@/Services/http.js";
468 import moment from "moment"; 468 import moment from "moment";
469 import countryList from "@/script/country.js"; 469 import countryList from "@/script/country.js";
470 import parent from "@/script/parents.js"; 470 import parent from "@/script/parents.js";
471 471
472 export default { 472 export default {
473 data: () => ({ 473 data: () => ({
474 showNext: false, 474 showNext: false,
475 snackbar: false, 475 snackbar: false,
476 y: "top", 476 y: "top",
477 x: "right", 477 x: "right",
478 role: "", 478 role: "",
479 mode: "", 479 mode: "",
480 append: "", 480 append: "",
481 timeout: 3000, 481 timeout: 3000,
482 text: "", 482 text: "",
483 show: true, 483 show: true,
484 color: "", 484 color: "",
485 showSearch: false, 485 showSearch: false,
486 showLoader: false, 486 showLoader: false,
487 loading: false, 487 loading: false,
488 editLoading: false, 488 editLoading: false,
489 date: null, 489 date: null,
490 search: "", 490 search: "",
491 menu: false, 491 menu: false,
492 menu1: false, 492 menu1: false,
493 editStudentDialog: false, 493 editStudentDialog: false,
494 profileStudentDialog: false, 494 profileStudentDialog: false,
495 addAnnoucementDialog: false, 495 addAnnoucementDialog: false,
496 valid: true, 496 valid: true,
497 addclass: [], 497 addclass: [],
498 addSection: [], 498 addSection: [],
499 pagination: { 499 pagination: {
500 rowsPerPage: 10 500 rowsPerPage: 10,
501 }, 501 },
502 imageData: {}, 502 imageData: {},
503 imageName: "", 503 imageName: "",
504 imageUrl: "", 504 imageUrl: "",
505 imageFile: "", 505 imageFile: "",
506 editImageName: "", 506 editImageName: "",
507 editImageUrl: "", 507 editImageUrl: "",
508 courseRules: [v => !!v || " Course Name is required"], 508 courseRules: [(v) => !!v || " Course Name is required"],
509 classRules: [v => !!v || " Class Name is required"], 509 classRules: [(v) => !!v || " Class Name is required"],
510 sectionRules: [v => !!v || "Section Name is required"], 510 sectionRules: [(v) => !!v || "Section Name is required"],
511 errorMessages: "", 511 errorMessages: "",
512 headers: [ 512 headers: [
513 { 513 {
514 text: "Image", 514 text: "Image",
515 value: "attachementUrl", 515 value: "attachementUrl",
516 sortable: false, 516 sortable: false,
517 align: "center" 517 align: "center",
518 }, 518 },
519 { 519 {
520 text: "Discussion Type", 520 text: "Discussion Type",
521 value: "discussionType", 521 value: "discussionType",
522 sortable: false, 522 sortable: false,
523 align: "center" 523 align: "center",
524 }, 524 },
525 { text: "Action", value: "", sortable: false, align: "center" } 525 { text: "Action", value: "", sortable: false, align: "center" },
526 ], 526 ],
527 courseData: [], 527 courseData: [],
528 editedIndex: -1, 528 editedIndex: -1,
529 addAnnoucement: { 529 addAnnoucement: {
530 select: "" 530 select: "",
531 }, 531 },
532 selectAnnoucement: {}, 532 selectAnnoucement: {},
533 editedItem: {}, 533 editedItem: {},
534 annoucementData: [] 534 annoucementData: [],
535 }), 535 }),
536 methods: { 536 methods: {
537 getCourses(selectCourseId) { 537 getCourses(selectCourseId) {
538 this.showLoader = true; 538 this.showLoader = true;
539 http() 539 http()
540 .get("/getCourseesList", { 540 .get("/getCourseesList", {
541 params: { 541 params: {
542 classId: selectCourseId 542 classId: selectCourseId,
543 } 543 },
544 }) 544 })
545 .then(response => { 545 .then((response) => {
546 this.courseData = response.data.data; 546 this.courseData = response.data.data;
547 this.showLoader = false; 547 this.showLoader = false;
548 }) 548 })
549 .catch(err => { 549 .catch((err) => {
550 console.log("err====>", err); 550 console.log("err====>", err);
551 this.showLoader = false; 551 this.showLoader = false;
552 }); 552 });
553 }, 553 },
554 getAnnoucementes() { 554 getAnnoucementes() {
555 this.showLoader = true; 555 this.showLoader = true;
556 http() 556 http()
557 .get("/getAnnoucementesList", { 557 .get("/getAnnoucementesList", {
558 params: { 558 params: {
559 courseId: this.selectAnnoucement.courseId, 559 courseId: this.selectAnnoucement.courseId,
560 classId: this.selectAnnoucement.classId 560 classId: this.selectAnnoucement.classId,
561 } 561 },
562 }) 562 })
563 .then(response => { 563 .then((response) => {
564 this.annoucementData = response.data.data; 564 this.annoucementData = response.data.data;
565 this.showLoader = false; 565 this.showLoader = false;
566 }) 566 })
567 .catch(err => { 567 .catch((err) => {
568 console.log("err====>", err); 568 console.log("err====>", err);
569 this.showLoader = false; 569 this.showLoader = false;
570 }); 570 });
571 }, 571 },
572 // getSections(_id) { 572 // getSections(_id) {
573 // var token = this.$store.state.token; 573 // var token = this.$store.state.token;
574 // this.showLoader = true; 574 // this.showLoader = true;
575 // http() 575 // http()
576 // .get( 576 // .get(
577 // "/getSectionsList", 577 // "/getSectionsList",
578 // { params: { classId: _id } }, 578 // { params: { classId: _id } },
579 // { 579 // {
580 // headers: { Authorization: "Bearer " + token } 580 // headers: { Authorization: "Bearer " + token }
581 // } 581 // }
582 // ) 582 // )
583 // .then(response => { 583 // .then(response => {
584 // this.addSection = response.data.data; 584 // this.addSection = response.data.data;
585 // this.showLoader = false; 585 // this.showLoader = false;
586 // }) 586 // })
587 // .catch(err => { 587 // .catch(err => {
588 // this.showLoader = false; 588 // this.showLoader = false;
589 // }); 589 // });
590 // }, 590 // },
591 pickFile() { 591 pickFile() {
592 this.$refs.image.click(); 592 this.$refs.image.click();
593 }, 593 },
594 pickEditFile() { 594 pickEditFile() {
595 this.$refs.editDataImage.click(); 595 this.$refs.editDataImage.click();
596 }, 596 },
597 dates: function(date) { 597 dates: function (date) {
598 return moment(date).format("MMMM DD, YYYY"); 598 return moment(date).format("MMMM DD, YYYY");
599 return date; 599 return date;
600 }, 600 },
601 onFilePicked(e) { 601 onFilePicked(e) {
602 // console.log(e) 602 // console.log(e)
603 const files = e.target.files; 603 const files = e.target.files;
604 this.imageData.upload = e.target.files[0]; 604 this.imageData.upload = e.target.files[0];
605 if (files[0] !== undefined) { 605 if (files[0] !== undefined) {
606 this.imageName = files[0].name; 606 this.imageName = files[0].name;
607 if (this.imageName.lastIndexOf(".") <= 0) { 607 if (this.imageName.lastIndexOf(".") <= 0) {
608 return; 608 return;
609 } 609 }
610 const fr = new FileReader(); 610 const fr = new FileReader();
611 fr.readAsDataURL(files[0]); 611 fr.readAsDataURL(files[0]);
612 fr.addEventListener("load", () => { 612 fr.addEventListener("load", () => {
613 this.imageUrl = fr.result; 613 this.imageUrl = fr.result;
614 this.imageFile = files[0]; // this is an image file that can be sent to server... 614 this.imageFile = files[0]; // this is an image file that can be sent to server...
615 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 615 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
616 }); 616 });
617 } else { 617 } else {
618 this.imageName = ""; 618 this.imageName = "";
619 this.imageFile = ""; 619 this.imageFile = "";
620 this.imageUrl = ""; 620 this.imageUrl = "";
621 } 621 }
622 }, 622 },
623 onEditFilePicked(e) { 623 onEditFilePicked(e) {
624 console.log(e); 624 console.log(e);
625 const files = e.target.files; 625 const files = e.target.files;
626 if (files[0] !== undefined) { 626 if (files[0] !== undefined) {
627 this.editImageName = files[0].name; 627 this.editImageName = files[0].name;
628 if (this.editImageName.lastIndexOf(".") <= 0) { 628 if (this.editImageName.lastIndexOf(".") <= 0) {
629 return; 629 return;
630 } 630 }
631 const fr = new FileReader(); 631 const fr = new FileReader();
632 fr.readAsDataURL(files[0]); 632 fr.readAsDataURL(files[0]);
633 fr.addEventListener("load", () => { 633 fr.addEventListener("load", () => {
634 this.editImageUrl = fr.result; 634 this.editImageUrl = fr.result;
635 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 635 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
636 }); 636 });
637 } else { 637 } else {
638 this.editImageName = ""; 638 this.editImageName = "";
639 this.editiImageFile = ""; 639 this.editiImageFile = "";
640 } 640 }
641 }, 641 },
642 editItem(item) { 642 editItem(item) {
643 this.editedIndex = this.courseData.indexOf(item); 643 this.editedIndex = this.courseData.indexOf(item);
644 this.editedItem = Object.assign({}, item); 644 this.editedItem = Object.assign({}, item);
645 this.editStudentDialog = true; 645 this.editStudentDialog = true;
646 }, 646 },
647 profile(item) { 647 profile(item) {
648 this.editedIndex = this.courseData.indexOf(item); 648 this.editedIndex = this.courseData.indexOf(item);
649 this.editedItem = Object.assign({}, item); 649 this.editedItem = Object.assign({}, item);
650 this.profileStudentDialog = true; 650 this.profileStudentDialog = true;
651 }, 651 },
652 deleteItem(item) { 652 deleteItem(item) {
653 let deleteAnnoucement = { 653 let deleteAnnoucement = {
654 annoucementId: item._id 654 annoucementId: item._id,
655 }; 655 };
656 http() 656 http()
657 .delete( 657 .delete(
658 "/deleteAnnoucement", 658 "/deleteAnnoucement",
659 confirm("Are you sure you want to delete this?") && { 659 confirm("Are you sure you want to delete this?") && {
660 params: deleteAnnoucement 660 params: deleteAnnoucement,
661 } 661 }
662 ) 662 )
663 .then(response => { 663 .then((response) => {
664 this.snackbar = true; 664 this.snackbar = true;
665 this.text = response.data.message; 665 this.text = response.data.message;
666 this.color = "green"; 666 this.color = "green";
667 this.getAnnoucementes(); 667 this.getAnnoucementes();
668 }) 668 })
669 .catch(error => { 669 .catch((error) => {
670 this.snackbar = true; 670 this.snackbar = true;
671 this.text = error.response.data.message; 671 this.text = error.response.data.message;
672 this.color = "error"; 672 this.color = "error";
673 }); 673 });
674 }, 674 },
675 close() { 675 close() {
676 this.editStudentDialog = false; 676 this.editStudentDialog = false;
677 }, 677 },
678 closeStudentProfile() { 678 closeStudentProfile() {
679 this.profileStudentDialog = false; 679 this.profileStudentDialog = false;
680 }, 680 },
681 rowAnnoucement(id) { 681 rowAnnoucement(id) {
682 this.$router.push({ 682 this.$router.push({
683 name: "Annoucement Forum", 683 name: "Annoucement Forum",
684 params: { annoucementId: id } 684 params: { annoucementId: id },
685 }); 685 });
686 }, 686 },
687 submit() { 687 submit() {
688 if (this.$refs.form.validate()) { 688 if (this.$refs.form.validate()) {
689 let addCourse = { 689 let addCourse = {
690 classId: this.addAnnoucement.select, 690 classId: this.addAnnoucement.select,
691 sectionId: this.addAnnoucement.selectSection, 691 sectionId: this.addAnnoucement.selectSection,
692 discussionType: this.addAnnoucement.discussionType, 692 discussionType: this.addAnnoucement.discussionType,
693 courseId: this.addAnnoucement.courseName 693 courseId: this.addAnnoucement.courseName,
694 }; 694 };
695 if (this.imageUrl) { 695 if (this.imageUrl) {
696 var str = this.imageUrl; 696 var str = this.imageUrl;
697 const [baseUrl, imageUrl] = str.split(/,/); 697 const [baseUrl, imageUrl] = str.split(/,/);
698 addCourse.upload = imageUrl; 698 addCourse.upload = imageUrl;
699 } 699 }
700 this.loading = true; 700 this.loading = true;
701 http() 701 http()
702 .post("/createAnnoucement", addCourse) 702 .post("/createAnnoucement", addCourse)
703 .then(response => { 703 .then((response) => {
704 this.snackbar = true; 704 this.snackbar = true;
705 this.text = "New Annoucement added successfully"; 705 this.text = "New Annoucement added successfully";
706 this.color = "green"; 706 this.color = "green";
707 this.addAnnoucementDialog = false; 707 this.addAnnoucementDialog = false;
708 this.clear(); 708 this.clear();
709 this.loading = false; 709 this.loading = false;
710 }) 710 })
711 .catch(error => { 711 .catch((error) => {
712 this.snackbar = true; 712 this.snackbar = true;
713 this.text = error.response.data.message; 713 this.text = error.response.data.message;
714 this.color = "error"; 714 this.color = "error";
715 this.loading = false; 715 this.loading = false;
716 }); 716 });
717 } 717 }
718 }, 718 },
719 clear() { 719 clear() {
720 this.$refs.form.reset(); 720 this.$refs.form.reset();
721 this.imageUrl = ""; 721 this.imageUrl = "";
722 }, 722 },
723 save() { 723 save() {
724 let editAnnoucement = { 724 let editAnnoucement = {
725 annoucementId: this.editedItem._id, 725 annoucementId: this.editedItem._id,
726 discussionType: this.editedItem.discussionType, 726 discussionType: this.editedItem.discussionType,
727 classId: this.editedItem.select, 727 classId: this.editedItem.select,
728 courseId: this.editedItem.courseName 728 courseId: this.editedItem.courseName,
729 }; 729 };
730 if (this.editImageUrl) { 730 if (this.editImageUrl) {
731 var str = this.editImageUrl; 731 var str = this.editImageUrl;
732 const [baseUrl, editImageUrl] = str.split(/,/); 732 const [baseUrl, editImageUrl] = str.split(/,/);
733 editAnnoucement.upload = editImageUrl; 733 editAnnoucement.upload = editImageUrl;
734 } 734 }
735 this.editLoading = true; 735 this.editLoading = true;
736 http() 736 http()
737 .put("/updateAnnoucement", editAnnoucement) 737 .put("/updateAnnoucement", editAnnoucement)
738 .then(response => { 738 .then((response) => {
739 this.snackbar = true; 739 this.snackbar = true;
740 this.text = response.data.message; 740 this.text = response.data.message;
741 this.color = "green"; 741 this.color = "green";
742 this.imageUrl = ""; 742 this.imageUrl = "";
743 this.getAnnoucementes(); 743 this.getAnnoucementes();
744 this.close(); 744 this.close();
745 this.editLoading = false; 745 this.editLoading = false;
746 }) 746 })
747 .catch(error => { 747 .catch((error) => {
748 this.snackbar = true; 748 this.snackbar = true;
749 this.text = error.response.data.statusText; 749 this.text = error.response.data.statusText;
750 this.color = "error"; 750 this.color = "error";
751 this.editLoading = false; 751 this.editLoading = false;
752 }); 752 });
753 }, 753 },
754 displaySearch() { 754 displaySearch() {
755 this.show = false; 755 this.show = false;
756 this.showSearch = true; 756 this.showSearch = true;
757 }, 757 },
758 closeSearch() { 758 closeSearch() {
759 this.showSearch = false; 759 this.showSearch = false;
760 this.show = true; 760 this.show = true;
761 this.search = ""; 761 this.search = "";
762 } 762 },
763 }, 763 },
764 mounted() { 764 mounted() {
765 var token = this.$store.state.token; 765 var token = this.$store.state.token;
766 http() 766 http()
767 .get("/getClassesList", { 767 .get("/getClassesList", {
768 headers: { Authorization: "Bearer " + token } 768 headers: { Authorization: "Bearer " + token },
769 }) 769 })
770 .then(response => { 770 .then((response) => {
771 this.addclass = response.data.data; 771 this.addclass = response.data.data;
772 }) 772 })
773 .catch(error => { 773 .catch((error) => {
774 this.showLoader = false; 774 this.showLoader = false;
775 if (error.response.status === 401) { 775 if (error.response.status === 401) {
776 this.$router.replace({ path: "/" }); 776 this.$router.replace({ path: "/" });
777 this.$store.dispatch("setToken", null); 777 this.$store.dispatch("setToken", null);
778 this.$store.dispatch("Id", null); 778 this.$store.dispatch("Id", null);
779 this.$store.dispatch("Role", null); 779 this.$store.dispatch("Role", null);
780 } 780 }
781 }); 781 });
782 } 782 },
783 }; 783 };
784 </script> 784 </script>
785 <style> 785 <style>
786 .row-click { 786 .row-click {
787 cursor: pointer; 787 cursor: pointer;
788 } 788 }
789 </style> 789 </style>
src/pages/Attendence/studentAttendence.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 <!-- ****** ATTENDENCE STUDENTS TABLE ****** --> 11 <!-- ****** ATTENDENCE STUDENTS TABLE ****** -->
12 <!-- <download-csv :data="json_data"> 12 <!-- <download-csv :data="json_data">
13 <v-btn>Download Data</v-btn> 13 <v-btn>Download Data</v-btn>
14 </download-csv>--> 14 </download-csv>-->
15 <v-toolbar color="transparent" flat> 15 <v-toolbar color="transparent" flat>
16 <v-btn 16 <v-btn
17 fab 17 fab
18 dark 18 dark
19 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 19 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
20 small 20 small
21 @click="addStudentAttendenceDialog = true" 21 @click="addStudentAttendenceDialog = true"
22 > 22 >
23 <v-icon dark>add</v-icon> 23 <v-icon dark>add</v-icon>
24 </v-btn> 24 </v-btn>
25 <v-btn 25 <v-btn
26 v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' " 26 v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "
27 round 27 round
28 class="open-dialog-button hidden-sm-only hidden-xs-only" 28 class="open-dialog-button hidden-sm-only hidden-xs-only"
29 dark 29 dark
30 @click="addStudentAttendenceDialog = true" 30 @click="addStudentAttendenceDialog = true"
31 > 31 >
32 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence 32 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence
33 </v-btn> 33 </v-btn>
34 34
35 <v-spacer></v-spacer> 35 <v-spacer></v-spacer>
36 <v-flex xs12 sm4 md2> 36 <v-flex xs12 sm4 md2>
37 <v-select 37 <v-select
38 small 38 small
39 :items="addclass" 39 :items="addclass"
40 label="Select Class" 40 label="Select Class"
41 v-model="getReport.classId" 41 v-model="getAttendence.classId"
42 item-text="classNum" 42 item-text="classNum"
43 item-value="_id" 43 item-value="_id"
44 name="Select Class" 44 name="Select Class"
45 @change="getSection(getReport.classId)" 45 @change="getSection(getAttendence.classId)"
46 class="px-2" 46 class="px-2"
47 required 47 required
48 ></v-select> 48 ></v-select>
49 </v-flex> 49 </v-flex>
50 <v-flex xs12 sm4 md2> 50 <v-flex xs12 sm4 md2>
51 <v-select 51 <v-select
52 small 52 small
53 :items="addSection" 53 :items="addSection"
54 label="Select Section" 54 label="Select Section"
55 v-model="getReport.sectionId" 55 v-model="getAttendence.sectionId"
56 item-text="name" 56 item-text="name"
57 item-value="_id" 57 item-value="_id"
58 name="Select Section" 58 name="Select Section"
59 @change="getStudents(getReport.sectionId)" 59 @change="getStudents(getAttendence.sectionId)"
60 class="px-2" 60 class="px-2"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 <v-card-title class="body-1" v-show="show"> 64 <v-card-title class="body-1" v-show="show">
65 <v-btn icon large flat @click="displaySearch"> 65 <v-btn icon large flat @click="displaySearch">
66 <v-avatar size="27"> 66 <v-avatar size="27">
67 <img src="/static/icon/search.png" alt="icon" /> 67 <img src="/static/icon/search.png" alt="icon" />
68 </v-avatar> 68 </v-avatar>
69 </v-btn> 69 </v-btn>
70 </v-card-title> 70 </v-card-title>
71 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 71 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
72 <v-layout> 72 <v-layout>
73 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 73 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
74 <v-icon @click="closeSearch" color="error">close</v-icon> 74 <v-icon @click="closeSearch" color="error">close</v-icon>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-toolbar> 77 </v-toolbar>
78 <v-data-table 78 <v-data-table
79 :headers="headers" 79 :headers="headers"
80 :items="studentsData" 80 :items="studentsData"
81 :pagination.sync="pagination" 81 :pagination.sync="pagination"
82 :search="search" 82 :search="search"
83 > 83 >
84 <template slot="items" slot-scope="props"> 84 <template slot="items" slot-scope="props">
85 <tr class="tr"> 85 <tr class="tr">
86 <td class="td td-row">{{ props.index + 1}}</td> 86 <td class="td td-row">{{ props.index + 1}}</td>
87 <td class="text-xs-center td td-row"> 87 <td class="text-xs-center td td-row">
88 <v-avatar size="40"> 88 <v-avatar size="40">
89 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 89 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
90 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 90 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
91 </v-avatar> 91 </v-avatar>
92 </td> 92 </td>
93 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 93 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
94 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 94 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
95 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 95 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
96 <td class="text-xs-center td td-row"> 96 <td class="text-xs-center td td-row">
97 <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }"> 97 <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">
98 <v-tooltip top> 98 <v-tooltip top>
99 <img 99 <img
100 slot="activator" 100 slot="activator"
101 style="cursor:pointer; width:20px; height:25px; " 101 style="cursor:pointer; width:20px; height:25px; "
102 class="mr-3" 102 class="mr-3"
103 src="/static/icon/view.png" 103 src="/static/icon/view.png"
104 /> 104 />
105 <span>View</span> 105 <span>View</span>
106 </v-tooltip> 106 </v-tooltip>
107 </router-link> 107 </router-link>
108 </td> 108 </td>
109 </tr> 109 </tr>
110 </template> 110 </template>
111 <v-alert 111 <v-alert
112 slot="no-results" 112 slot="no-results"
113 :value="true" 113 :value="true"
114 color="error" 114 color="error"
115 icon="warning" 115 icon="warning"
116 >Your search for "{{ search }}" found no results.</v-alert> 116 >Your search for "{{ search }}" found no results.</v-alert>
117 </v-data-table> 117 </v-data-table>
118 <!-- ****** Add Students Attendece****** --> 118 <!-- ****** Add Students Attendece****** -->
119 <v-dialog v-model="addStudentAttendenceDialog" width="1600"> 119 <v-dialog v-model="addStudentAttendenceDialog" width="1600">
120 <v-card flat class="pa-2"> 120 <v-card flat class="pa-2">
121 <v-layout> 121 <v-layout>
122 <v-flex xs12> 122 <v-flex xs12>
123 <label class="title text-xs-center">Add Student Attendence</label> 123 <label class="title text-xs-center">Add Student Attendence</label>
124 <v-icon size="24" class="right" @click="addStudentAttendenceDialog = false">cancel</v-icon> 124 <v-icon size="24" class="right" @click="addStudentAttendenceDialog = false">cancel</v-icon>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 <v-flex xs12 class="mt-4"> 127 <v-flex xs12 class="mt-4">
128 <v-form ref="form" v-model="valid" lazy-validation> 128 <v-form ref="form" v-model="valid" lazy-validation>
129 <v-flex xs12 sm12 lg12> 129 <v-flex xs12 sm12 lg12>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex xs6 sm6 lg3 md4> 131 <v-flex xs6 sm6 lg3 md4>
132 <v-layout> 132 <v-layout>
133 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 133 <v-flex xs3 sm6 lg2 class="subheading mt-4">
134 <label class="right">Class:</label> 134 <label class="right">Class:</label>
135 </v-flex> 135 </v-flex>
136 <v-flex xs9 sm6 lg8 class="ml-2"> 136 <v-flex xs9 sm6 lg8 class="ml-2">
137 <v-select 137 <v-select
138 v-model="getReport.classId" 138 v-model="getReport.classId"
139 label="Select your class" 139 label="Select your class"
140 type="text" 140 type="text"
141 :items="addclass" 141 :items="addclass"
142 item-text="classNum" 142 item-text="classNum"
143 item-value="_id" 143 item-value="_id"
144 :rules="classRules" 144 :rules="classRules"
145 @change="getSection(getReport.classId)" 145 @change="getSection(getReport.classId)"
146 required 146 required
147 ></v-select> 147 ></v-select>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-flex> 150 </v-flex>
151 <v-flex xs6 sm6 lg3 md8> 151 <v-flex xs6 sm6 lg3 md8>
152 <v-layout> 152 <v-layout>
153 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 153 <v-flex xs3 sm6 lg2 class="subheading mt-4">
154 <label class="right">Section:</label> 154 <label class="right">Section:</label>
155 </v-flex> 155 </v-flex>
156 <v-flex xs9 sm6 lg8 class="ml-2"> 156 <v-flex xs9 sm6 lg8 class="ml-2">
157 <v-select 157 <v-select
158 :items="addSection" 158 :items="addSection"
159 label="Select your Section" 159 label="Select your Section"
160 v-model="getReport.sectionId" 160 v-model="getReport.sectionId"
161 item-text="name" 161 item-text="name"
162 item-value="_id" 162 item-value="_id"
163 name="Select Section" 163 name="Select Section"
164 :rules="sectionRules" 164 :rules="sectionRules"
165 required 165 required
166 ></v-select> 166 ></v-select>
167 </v-flex> 167 </v-flex>
168 </v-layout> 168 </v-layout>
169 </v-flex> 169 </v-flex>
170 <v-flex xs6 sm6 lg3 md4> 170 <v-flex xs6 sm6 lg3 md4>
171 <v-menu 171 <v-menu
172 ref="menu" 172 ref="menu"
173 :close-on-content-click="false" 173 :close-on-content-click="false"
174 v-model="menu" 174 v-model="menu"
175 :nudge-right="40" 175 :nudge-right="40"
176 lazy 176 lazy
177 transition="scale-transition" 177 transition="scale-transition"
178 offset-y 178 offset-y
179 full-width 179 full-width
180 min-width="290px" 180 min-width="290px"
181 > 181 >
182 <v-text-field 182 <v-text-field
183 slot="activator" 183 slot="activator"
184 v-model="date" 184 v-model="date"
185 label="Select Date" 185 label="Select Date"
186 append-icon="event" 186 append-icon="event"
187 :rules="dataValid" 187 :rules="dataValid"
188 readonly 188 readonly
189 ></v-text-field> 189 ></v-text-field>
190 <v-date-picker 190 <v-date-picker
191 ref="picker" 191 ref="picker"
192 v-model="date" 192 v-model="date"
193 :max="new Date().toISOString().substr(0, 10)" 193 :max="new Date().toISOString().substr(0, 10)"
194 min="1950-01-01" 194 min="1950-01-01"
195 @change="save" 195 @change="save"
196 ></v-date-picker> 196 ></v-date-picker>
197 </v-menu> 197 </v-menu>
198 </v-flex> 198 </v-flex>
199 <v-flex xs6 sm6 lg9 md8> 199 <v-flex xs6 sm6 lg9 md8>
200 <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn> 200 <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>
201 </v-flex> 201 </v-flex>
202 </v-layout> 202 </v-layout>
203 </v-flex> 203 </v-flex>
204 </v-form> 204 </v-form>
205 </v-flex> 205 </v-flex>
206 <v-flex xs12 v-show="attendeceTable" class> 206 <v-flex xs12 v-show="attendeceTable" class>
207 <v-data-table 207 <v-data-table
208 :headers="headers" 208 :headers="headers"
209 :items="studentsData" 209 :items="studentsData"
210 :pagination.sync="pagination" 210 :pagination.sync="pagination"
211 :search="search" 211 :search="search"
212 > 212 >
213 <template slot="items" slot-scope="props"> 213 <template slot="items" slot-scope="props">
214 <tr class="tr"> 214 <tr class="tr">
215 <td class="td td-row">{{ props.index + 1}}</td> 215 <td class="td td-row">{{ props.index + 1}}</td>
216 <td class="text-xs-center td td-row"> 216 <td class="text-xs-center td td-row">
217 <v-avatar size="40"> 217 <v-avatar size="40">
218 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 218 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
219 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 219 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
220 </v-avatar> 220 </v-avatar>
221 </td> 221 </td>
222 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 222 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
223 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> 223 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
224 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 224 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
225 <td class="text-xs-center td td-row"> 225 <td class="text-xs-center td td-row">
226 <v-radio-group v-model="props.item.attendence" :mandatory="false" row> 226 <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
227 <v-radio 227 <v-radio
228 v-for="attendences in attendenceType" 228 v-for="attendences in attendenceType"
229 :key="attendences.value" 229 :key="attendences.value"
230 :label="`${attendences.label}`" 230 :label="`${attendences.label}`"
231 :value="attendences.value" 231 :value="attendences.value"
232 ></v-radio> 232 ></v-radio>
233 </v-radio-group> 233 </v-radio-group>
234 </td> 234 </td>
235 </tr> 235 </tr>
236 </template> 236 </template>
237 </v-data-table> 237 </v-data-table>
238 <v-flex xs12> 238 <v-flex xs12>
239 <v-card-actions> 239 <v-card-actions>
240 <v-spacer></v-spacer> 240 <v-spacer></v-spacer>
241 <v-btn @click="update()" class="add-button" round dark>Submit</v-btn> 241 <v-btn @click="update()" class="add-button" round dark>Submit</v-btn>
242 </v-card-actions> 242 </v-card-actions>
243 </v-flex> 243 </v-flex>
244 </v-flex> 244 </v-flex>
245 </v-card> 245 </v-card>
246 </v-dialog> 246 </v-dialog>
247 <v-snackbar 247 <v-snackbar
248 :timeout="timeout" 248 :timeout="timeout"
249 :top="y === 'top'" 249 :top="y === 'top'"
250 :right="x === 'right'" 250 :right="x === 'right'"
251 :vertical="mode === 'vertical'" 251 :vertical="mode === 'vertical'"
252 v-model="snackbar" 252 v-model="snackbar"
253 color="success" 253 color="success"
254 >{{ text }}</v-snackbar> 254 >{{ text }}</v-snackbar>
255 <div class="loader" v-if="showLoader"> 255 <div class="loader" v-if="showLoader">
256 <v-progress-circular indeterminate color="white"></v-progress-circular> 256 <v-progress-circular indeterminate color="white"></v-progress-circular>
257 </div> 257 </div>
258 </v-container> 258 </v-container>
259 </template> 259 </template>
260 260
261 <script> 261 <script>
262 import http from "@/Services/http.js"; 262 import http from "@/Services/http.js";
263 import moment from "moment"; 263 import moment from "moment";
264 264
265 export default { 265 export default {
266 data: () => ({ 266 data: () => ({
267 snackbar: false, 267 snackbar: false,
268 y: "top", 268 y: "top",
269 x: "right", 269 x: "right",
270 mode: "", 270 mode: "",
271 timeout: 3000, 271 timeout: 3000,
272 text: "", 272 text: "",
273 show: true, 273 show: true,
274 showSearch: false, 274 showSearch: false,
275 showLoader: false, 275 showLoader: false,
276 loading: false, 276 loading: false,
277 date: null, 277 date: null,
278 search: "", 278 search: "",
279 addclass: [], 279 addclass: [],
280 pagination: { 280 pagination: {
281 rowsPerPage: 10 281 rowsPerPage: 10,
282 }, 282 },
283 imageData: {}, 283 imageData: {},
284 imageName: "", 284 imageName: "",
285 imageUrl: "", 285 imageUrl: "",
286 imageFile: "", 286 imageFile: "",
287 headers: [ 287 headers: [
288 { 288 {
289 text: "No", 289 text: "No",
290 align: "", 290 align: "",
291 sortable: false, 291 sortable: false,
292 value: "index" 292 value: "index",
293 }, 293 },
294 { 294 {
295 text: "Profile Pic", 295 text: "Profile Pic",
296 value: "profilprofilePicUrlePicUrl", 296 value: "profilprofilePicUrlePicUrl",
297 sortable: false, 297 sortable: false,
298 align: "center" 298 align: "center",
299 }, 299 },
300 { text: "Name", value: "name", sortable: false, align: "center" }, 300 { text: "Name", value: "name", sortable: false, align: "center" },
301 { 301 {
302 text: "Mobile No", 302 text: "Mobile No",
303 value: "fatherCellNo", 303 value: "fatherCellNo",
304 sortable: false, 304 sortable: false,
305 align: "center" 305 align: "center",
306 }, 306 },
307 { text: "Email", value: "email", sortable: false, align: "center" }, 307 { text: "Email", value: "email", sortable: false, align: "center" },
308 { text: "Attendance", value: "", sortable: false, align: "center" } 308 { text: "Attendance", value: "", sortable: false, align: "center" },
309 ], 309 ],
310 // json_data: [], 310 // json_data: [],
311 parentId: "", 311 parentId: "",
312 token: "", 312 token: "",
313 selectStudents: { 313 selectStudents: {
314 select: "", 314 select: "",
315 selectSection: "" 315 selectSection: "",
316 }, 316 },
317 317
318 role: "", 318 role: "",
319 schoolRole: "", 319 schoolRole: "",
320 addStudentAttendenceDialog: false, 320 addStudentAttendenceDialog: false,
321 attendeceTable: false, 321 attendeceTable: false,
322 menu: false, 322 menu: false,
323 valid: true, 323 valid: true,
324 324
325 getReport: {}, 325 getReport: {},
326 getAttendence: {},
326 studentsList: [], 327 studentsList: [],
327 studentsData: [], 328 studentsData: [],
328 addSection: [], 329 addSection: [],
329 330
330 SectionName: ["A", "B", "C", "D", "E", "F"], 331 SectionName: ["A", "B", "C", "D", "E", "F"],
331 classRules: [v => !!v || "Class is required"], 332 classRules: [(v) => !!v || "Class is required"],
332 sectionRules: [v => !!v || "Class is required"], 333 sectionRules: [(v) => !!v || "Class is required"],
333 studentRules: [v => !!v || "Student is required"], 334 studentRules: [(v) => !!v || "Student is required"],
334 dataValid: [v => !!v || "Date is required"], 335 dataValid: [(v) => !!v || "Date is required"],
335 336
336 attendenceType: [ 337 attendenceType: [
337 { 338 {
338 label: "Present", 339 label: "Present",
339 value: true 340 value: true,
340 }, 341 },
341 { 342 {
342 label: "Absent", 343 label: "Absent",
343 value: false 344 value: false,
344 } 345 },
345 ] 346 ],
346 }), 347 }),
347 methods: { 348 methods: {
348 save(date) { 349 save(date) {
349 this.$refs.menu.save(date); 350 this.$refs.menu.save(date);
350 }, 351 },
351 showTable() { 352 showTable() {
352 this.attendeceTable = true; 353 this.attendeceTable = true;
353 this.getStudents(); 354 this.getStudents();
354 }, 355 },
355 getAllClass() { 356 getAllClass() {
356 http() 357 http()
357 .get("/getClassesList", { 358 .get("/getClassesList", {
358 headers: { Authorization: "Bearer " + this.token } 359 headers: { Authorization: "Bearer " + this.token },
359 }) 360 })
360 .then(response => { 361 .then((response) => {
361 this.addclass = response.data.data; 362 this.addclass = response.data.data;
362 }) 363 })
363 .catch(error => { 364 .catch((error) => {
364 // console.log("err====>", err); 365 // console.log("err====>", err);
365 // this.$router.replace({ path: "/" }); 366 // this.$router.replace({ path: "/" });
366 }); 367 });
367 }, 368 },
368 getSection(_id) { 369 getSection(_id) {
369 this.showLoader = true; 370 this.showLoader = true;
370 http() 371 http()
371 .get( 372 .get(
372 "/getSectionsList", 373 "/getSectionsList",
373 { params: { classId: _id } }, 374 { params: { classId: _id } },
374 { 375 {
375 headers: { Authorization: "Bearer " + this.token } 376 headers: { Authorization: "Bearer " + this.token },
376 } 377 }
377 ) 378 )
378 .then(response => { 379 .then((response) => {
379 this.addSection = response.data.data; 380 this.addSection = response.data.data;
380 this.showLoader = false; 381 this.showLoader = false;
381 }) 382 })
382 .catch(err => { 383 .catch((err) => {
383 this.showLoader = false; 384 this.showLoader = false;
384 // console.log("err====>", err); 385 // console.log("err====>", err);
385 }); 386 });
386 }, 387 },
387 getStudents(_id) { 388 getStudents(_id) {
388 this.showLoader = true; 389 this.showLoader = true;
389 http() 390 http()
390 .get("/getStudentWithClass", { 391 .get("/getStudentWithClass", {
391 params: { 392 params: {
392 classId: this.getReport.classId, 393 classId: this.getAttendence.classId,
393 sectionId: this.getReport.sectionId 394 sectionId: this.getAttendence.sectionId,
394 } 395 },
395 }) 396 })
396 .then(response => { 397 .then((response) => {
397 this.studentsData = response.data.data; 398 this.studentsData = response.data.data;
398 this.showLoader = false; 399 this.showLoader = false;
399 // this.addStudentAttendenceDialog = false; 400 // this.addStudentAttendenceDialog = false;
400 var attendence = ""; 401 var attendence = "";
401 for (let i = 0; i < this.studentsData.length; i++) { 402 for (let i = 0; i < this.studentsData.length; i++) {
402 this.studentsData[i].attendence = true; 403 this.studentsData[i].attendence = true;
403 } 404 }
404 }) 405 })
405 .catch(error => { 406 .catch((error) => {
406 console.log("err====>", error); 407 console.log("err====>", error);
407 this.showLoader = false; 408 this.showLoader = false;
408 }); 409 });
409 }, 410 },
410 update() { 411 update() {
411 var studentsAttendence = []; 412 var studentsAttendence = [];
412 for (var j = 0; j < this.studentsData.length; j++) { 413 for (var j = 0; j < this.studentsData.length; j++) {
413 studentsAttendence.push({ 414 studentsAttendence.push({
414 studentId: this.studentsData[j]._id, 415 studentId: this.studentsData[j]._id,
415 isPresent: this.studentsData[j].attendence 416 isPresent: this.studentsData[j].attendence,
416 }); 417 });
417 } 418 }
418 if (this.$refs.form.validate()) { 419 if (this.$refs.form.validate()) {
419 let attendanceData = { 420 let attendanceData = {
420 sectionId: this.getReport.sectionId, 421 sectionId: this.getReport.sectionId,
421 date: this.date, 422 date: this.date,
422 students: studentsAttendence 423 students: studentsAttendence,
423 }; 424 };
424 http() 425 http()
425 .put("/updateAttendance", attendanceData) 426 .put("/updateAttendance", attendanceData)
426 .then(response => { 427 .then((response) => {
427 this.snackbar = true; 428 this.snackbar = true;
428 this.text = response.data.message; 429 this.text = response.data.message;
429 this.addStudentAttendenceDialog = false; 430 this.addStudentAttendenceDialog = false;
430 }) 431 })
431 .catch(error => { 432 .catch((error) => {
432 this.snackbar = true; 433 this.snackbar = true;
433 this.text = error.response.data.message; 434 this.text = error.response.data.message;
434 }); 435 });
435 } 436 }
436 }, 437 },
437 438
438 displaySearch() { 439 displaySearch() {
439 (this.show = false), (this.showSearch = true); 440 (this.show = false), (this.showSearch = true);
440 }, 441 },
441 closeSearch() { 442 closeSearch() {
442 this.showSearch = false; 443 this.showSearch = false;
443 this.show = true; 444 this.show = true;
444 this.search = ""; 445 this.search = "";
445 } 446 },
446 }, 447 },
447 mounted() { 448 mounted() {
448 // this.getStudentList(); 449 // this.getStudentList();
449 this.token = this.$store.state.token; 450 this.token = this.$store.state.token;
450 this.getAllClass(); 451 this.getAllClass();
451 this.role = this.$store.state.role; 452 this.role = this.$store.state.role;
452 } 453 },
453 }; 454 };
454 </script> 455 </script>
src/pages/Authentication/Login.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-content> 3 <v-content>
4 <v-container fluid fill-height> 4 <v-container fluid fill-height>
5 <!-- SNACKBAR --> 5 <!-- SNACKBAR -->
6 <v-snackbar 6 <v-snackbar
7 :timeout="timeout" 7 :timeout="timeout"
8 :top="y === 'top'" 8 :top="y === 'top'"
9 :right="x === 'right'" 9 :right="x === 'right'"
10 :vertical="mode === 'vertical'" 10 :vertical="mode === 'vertical'"
11 v-model="snackbar" 11 v-model="snackbar"
12 :color="snackbarColor" 12 :color="snackbarColor"
13 > 13 >
14 {{ text }} 14 {{ text }}
15 <v-spacer></v-spacer> 15 <v-spacer></v-spacer>
16 <v-btn flat text @click="snackbar = false">X</v-btn> 16 <v-btn flat text @click="snackbar = false">X</v-btn>
17 </v-snackbar> 17 </v-snackbar>
18 <v-layout align-center justify-center> 18 <v-layout align-center justify-center>
19 <v-flex xs12 sm10 md5 lg4> 19 <v-flex xs12 sm10 md5 lg4>
20 <img 20 <img
21 src="/static/icon.png" 21 src="/static/icon.png"
22 height="40" 22 height="40"
23 width="140" 23 width="140"
24 alt="logo" 24 alt="logo"
25 class="logo mx-auto mb-2" 25 class="logo mx-auto mb-2"
26 /> 26 />
27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark> 27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark>
28 <img 28 <img
29 src="/static/intrackIllustration.png" 29 src="/static/intrackIllustration.png"
30 class="mx-auto logoSchool" 30 class="mx-auto logoSchool"
31 style="display:block" 31 style="display:block"
32 width="280" 32 width="280"
33 /> 33 />
34 <v-card-text align-center justify-center> 34 <v-card-text align-center justify-center>
35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title> 35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
36 <v-flex xs12 sm12 md12 lg12> 36 <v-flex xs12 sm12 md12 lg12>
37 <v-form ref="form" v-model="valid" lazy-validation> 37 <v-form ref="form" v-model="valid" lazy-validation>
38 <label class="title">Email / PhoneNo</label> 38 <label class="title">Email / PhoneNo</label>
39 <v-text-field 39 <v-text-field
40 style="padding: 0px; margin: 0px;" 40 style="padding: 0px; margin: 0px;"
41 v-model.trim="userLogincredentials.email" 41 v-model.trim="userLogincredentials.email"
42 :rules="nameRules" 42 :rules="nameRules"
43 placeholder="Enter your email / phoneNo" 43 placeholder="Enter your email / phoneNo"
44 required 44 required
45 ></v-text-field> 45 ></v-text-field>
46 <label class="title">Password</label> 46 <label class="title">Password</label>
47 <v-text-field 47 <v-text-field
48 style="padding: 0px; margin: 0px;" 48 style="padding: 0px; margin: 0px;"
49 :rules="[rules.required]" 49 :rules="[rules.required]"
50 v-model.trim="userLogincredentials.password" 50 v-model.trim="userLogincredentials.password"
51 :append-icon="e1 ? 'visibility_off' : 'visibility'" 51 :append-icon="e1 ? 'visibility_off' : 'visibility'"
52 :append-icon-cb="() => (e1 = !e1)" 52 :append-icon-cb="() => (e1 = !e1)"
53 :type="e1 ? 'password' : 'text'" 53 :type="e1 ? 'password' : 'text'"
54 name="input-10-1" 54 name="input-10-1"
55 placeholder="Enter Your password" 55 placeholder="Enter Your password"
56 @keyup.enter="login" 56 @keyup.enter="login"
57 ></v-text-field> 57 ></v-text-field>
58 </v-form> 58 </v-form>
59 <v-layout> 59 <v-layout>
60 <v-flex xs12 class="pa-0 ma-0"> 60 <v-flex xs12 class="pa-0 ma-0">
61 <h5 class="right mt-4"> 61 <h5 class="right mt-4">
62 <router-link class="link" to="/forgetpassword">Forgot password</router-link> 62 <router-link class="link" to="/forgetpassword">Forgot password</router-link>
63 </h5> 63 </h5>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 </v-flex> 66 </v-flex>
67 </v-card-text> 67 </v-card-text>
68 <v-layout> 68 <v-layout>
69 <v-flex sm12> 69 <v-flex sm12>
70 <v-btn 70 <v-btn
71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;" 71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
72 dark 72 dark
73 flat 73 flat
74 @click="login" 74 @click="login"
75 :loading="loading" 75 :loading="loading"
76 >Login</v-btn> 76 >Login</v-btn>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout></v-layout> 79 <v-layout></v-layout>
80 </v-card> 80 </v-card>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-container> 83 </v-container>
84 </v-content> 84 </v-content>
85 </v-app> 85 </v-app>
86 </template> 86 </template>
87 87
88 <script> 88 <script>
89 import http from "@/Services/http.js"; 89 import http from "@/Services/http.js";
90 import AllApiCalls from "@/Services/AllApiCalls.js"; 90 import AllApiCalls from "@/Services/AllApiCalls.js";
91 export default { 91 export default {
92 mixins: [AllApiCalls], 92 mixins: [AllApiCalls],
93 data() { 93 data() {
94 return { 94 return {
95 // snackbar: false, 95 //SNACKBAR
96 // y: "top", 96 y: "top",
97 // x: "right", 97 x: "right",
98 // mode: "", 98 mode: "",
99 // timeout: 3000, 99 timeout: 10000,
100 // text: "", 100 text: "",
101 snackbarColor: "",
102
103 snackbar: false,
101 append: "", 104 append: "",
102 e1: true, 105 e1: true,
103 loading: false, 106 loading: false,
104 remember: false, 107 remember: false,
105 valid: false, 108 valid: false,
106 userLogincredentials: {}, 109 userLogincredentials: {},
107 nameRules: [(v) => !!v || "Username is required"], 110 nameRules: [(v) => !!v || "Username is required"],
108 password: "", 111 password: "",
109 email: "", 112 email: "",
110 rules: { 113 rules: {
111 required: (value) => !!value || "password is Required.", 114 required: (value) => !!value || "password is Required.",
112 }, 115 },
113 selectedStudent: {}, 116 selectedStudent: {},
114 }; 117 };
115 }, 118 },
116 methods: { 119 methods: {
117 async login() { 120 async login() {
118 if (this.$refs.form.validate()) { 121 if (this.$refs.form.validate()) {
119 this.loading = true; 122 this.loading = true;
120 var userdata = { 123 var userdata = {
121 email: this.userLogincredentials.email, 124 email: this.userLogincredentials.email,
122 password: this.userLogincredentials.password, 125 password: this.userLogincredentials.password,
123 }; 126 };
124 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) { 127 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) {
125 userdata.fatherCellNo = this.userLogincredentials.email; 128 userdata.fatherCellNo = this.userLogincredentials.email;
126 delete userdata.email; 129 delete userdata.email;
127 } 130 }
128 http() 131 http()
129 .post("/schoolLogin", userdata) 132 .post("/schoolLogin", userdata)
130 .then((response) => { 133 .then((response) => {
131 // console.log("token",response.data.data); 134 // console.log("token",response.data.data);
132 this.loading = false; 135 this.loading = false;
133 if (response.data.data.role === "ADMIN") { 136 if (response.data.data.role === "ADMIN") {
134 this.$store.dispatch("setToken", response.data.data.token); 137 this.$store.dispatch("setToken", response.data.data.token);
135 this.$store.dispatch("Id", response.data.data.id); 138 this.$store.dispatch("Id", response.data.data.id);
136 this.$store.dispatch("Role", response.data.data.role); 139 this.$store.dispatch("Role", response.data.data.role);
137 this.$router.push("/dashboard"); 140 this.$router.push("/dashboard");
138 } else if (response.data.data.role === "SUPERADMIN") { 141 } else if (response.data.data.role === "SUPERADMIN") {
139 this.$store.dispatch("setSchoolRole", response.data.data.role); 142 this.$store.dispatch("setSchoolRole", response.data.data.role);
140 this.$store.dispatch("setSchoolToken", response.data.data.token); 143 this.$store.dispatch("setSchoolToken", response.data.data.token);
141 this.$router.push("/schooldashboard"); 144 this.$router.push("/schooldashboard");
142 } else if (response.data.data.role === "TEACHER") { 145 } else if (response.data.data.role === "TEACHER") {
143 // console.log("teacher", response.data.data.role); 146 // console.log("teacher", response.data.data.role);
144 this.$store.dispatch("setToken", response.data.data.token); 147 this.$store.dispatch("setToken", response.data.data.token);
145 this.$store.dispatch("Id", response.data.data.id); 148 this.$store.dispatch("Id", response.data.data.id);
146 this.$store.dispatch("Role", response.data.data.role); 149 this.$store.dispatch("Role", response.data.data.role);
147 this.$router.push("/dashboard"); 150 this.$router.push("/dashboard");
148 } else if (response.data.data.role === "LIBRARIAN") { 151 } else if (response.data.data.role === "LIBRARIAN") {
149 this.$store.dispatch("setToken", response.data.data.token); 152 this.$store.dispatch("setToken", response.data.data.token);
150 this.$store.dispatch("Id", response.data.data.id); 153 this.$store.dispatch("Id", response.data.data.id);
151 this.$store.dispatch("Role", response.data.data.role); 154 this.$store.dispatch("Role", response.data.data.role);
152 this.$router.push("/dashboard"); 155 this.$router.push("/dashboard");
153 } else if (response.data.data.role === "ACCOUNTANT") { 156 } else if (response.data.data.role === "ACCOUNTANT") {
154 this.$store.dispatch("setToken", response.data.data.token); 157 this.$store.dispatch("setToken", response.data.data.token);
155 this.$store.dispatch("Id", response.data.data.id); 158 this.$store.dispatch("Id", response.data.data.id);
156 this.$store.dispatch("Role", response.data.data.role); 159 this.$store.dispatch("Role", response.data.data.role);
157 this.$router.push("/dashboard"); 160 this.$router.push("/dashboard");
158 } else if (response.data.data.role === "PARENT") { 161 } else if (response.data.data.role === "PARENT") {
159 this.$store.dispatch("setToken", response.data.data.token); 162 this.$store.dispatch("setToken", response.data.data.token);
160 this.$store.dispatch("Id", response.data.data.id); 163 this.$store.dispatch("Id", response.data.data.id);
161 this.$store.dispatch("Role", response.data.data.role); 164 this.$store.dispatch("Role", response.data.data.role);
162 localStorage.setItem("parentStudentId", response.data.data.id); 165 localStorage.setItem("parentStudentId", response.data.data.id);
163 166
164 http() 167 http()
165 .get("/parentStudentsList") 168 .get("/parentStudentsList")
166 .then((response) => { 169 .then((response) => {
167 /* set disabled students values */ 170 /* set disabled students values */
168 console.log("students - ", response.data.data.students); 171 console.log("students - ", response.data.data.students);
169 /* prepare an array of false status students */ 172 /* prepare an array of false status students */
170 var indexStatusFalse = []; 173 var indexStatusFalse = [];
171 for (var i = 0; i < response.data.data.students.length; i++) { 174 for (var i = 0; i < response.data.data.students.length; i++) {
172 if (response.data.data.students[i].status == false) { 175 if (response.data.data.students[i].status == false) {
173 indexStatusFalse.push(i); 176 indexStatusFalse.push(i);
174 } 177 }
175 } 178 }
176 /* introduce a property named disabled in response to make false staus students disbled */ 179 /* introduce a property named disabled in response to make false staus students disbled */
177 for (var i = 0; i < indexStatusFalse.length; i++) { 180 for (var i = 0; i < indexStatusFalse.length; i++) {
178 response.data.data.students[ 181 response.data.data.students[
179 indexStatusFalse[i] 182 indexStatusFalse[i]
180 ].disabled = true; 183 ].disabled = true;
181 } 184 }
182 /* make an array of students */ 185 /* make an array of students */
183 this.$store.dispatch( 186 this.$store.dispatch(
184 "SET_STUDENTS_DATA", 187 "SET_STUDENTS_DATA",
185 response.data.data.students 188 response.data.data.students
186 ); 189 );
187 190
188 /* counter to keep a track of number of students that are disabled or false */ 191 /* counter to keep a track of number of students that are disabled or false */
189 var counter = 0; 192 var counter = 0;
190 /* if zero element of false students list is > 0 then make first student as defalut selected */ 193 /* if zero element of false students list is > 0 then make first student as defalut selected */
191 if (indexStatusFalse[0] > 0) { 194 if (indexStatusFalse[0] > 0) {
192 this.selectedStudent = response.data.data.students[0]._id; 195 this.selectedStudent = response.data.data.students[0]._id;
193 } 196 }
194 console.log("indexStatusFalse - ", indexStatusFalse); 197 console.log("indexStatusFalse - ", indexStatusFalse);
195 /* if false student is the first one in the list then see if the next is also false */ 198 /* if false student is the first one in the list then see if the next is also false */
196 if (indexStatusFalse[0] == 0) { 199 if (indexStatusFalse[0] == 0) {
197 if (indexStatusFalse.length > 1) { 200 if (indexStatusFalse.length > 1) {
198 for (var i = 1; i < indexStatusFalse.length; i++) { 201 for (var i = 1; i < indexStatusFalse.length; i++) {
199 if (indexStatusFalse[i] == i) { 202 if (indexStatusFalse[i] == i) {
200 if (indexStatusFalse[i - 1] == i - 1) { 203 if (indexStatusFalse[i - 1] == i - 1) {
201 counter = i + 1; 204 counter = i + 1;
202 continue; 205 continue;
203 } 206 }
204 } else { 207 } else {
205 counter = i; 208 counter = i;
206 break; 209 break;
207 } 210 }
208 } 211 }
209 } else { 212 } else {
210 counter = 1; 213 counter = 1;
211 } 214 }
212 } 215 }
213 console.log("counter - ", counter); 216 console.log("counter - ", counter);
214 if (counter == response.data.data.students.length) { 217 if (counter == response.data.data.students.length) {
215 this.seeSnackbar( 218 this.seeSnackbar(
216 "Your wards have been removed ", 219 "Your wards have been removed ",
217 "warning" 220 "warning"
218 ); 221 );
219 222
220 this.$store.dispatch("setToken", null); 223 this.$store.dispatch("setToken", null);
221 this.$store.dispatch("Id", null); 224 this.$store.dispatch("Id", null);
222 } else { 225 } else {
223 this.selectedStudent = 226 this.selectedStudent =
224 response.data.data.students[counter]._id; 227 response.data.data.students[counter]._id;
225 228
226 localStorage.setItem( 229 localStorage.setItem(
227 "parentStudentId", 230 "parentStudentId",
228 this.selectedStudent 231 this.selectedStudent
229 ); 232 );
230 localStorage.setItem( 233 localStorage.setItem(
231 "parentClassId", 234 "parentClassId",
232 response.data.data.students[counter].classId 235 response.data.data.students[counter].classId
233 ); 236 );
234 this.$router.push("/dashboard"); 237 this.$router.push("/dashboard");
235 } 238 }
236 this.showLoader = false; 239 this.showLoader = false;
237 }) 240 })
238 .catch((err) => { 241 .catch((err) => {
239 console.log("err====>", err); 242 console.log("err====>", err);
240 this.showLoader = false; 243 this.showLoader = false;
241 }); 244 });
242 } 245 }
243 }) 246 })
244 .catch((error) => { 247 .catch((error) => {
245 if (error.response.data.message) { 248 if (error.response.data.message) {
246 this.text = error.response.data.message; 249 this.text = error.response.data.message;
247 this.snackbar = true; 250 this.snackbar = true;
251 this.snackbarColor = "error";
248 this.loading = false; 252 this.loading = false;
249 } else { 253 } else {
250 this.text = "Server appears to be offline"; 254 this.text = "Server appears to be offline";
251 this.snackbar = true; 255 this.snackbar = true;
256 this.snackbarColor = "error";
252 this.loading = false; 257 this.loading = false;
253 } 258 }
254 }); 259 });
255 } 260 }
256 }, 261 },
257 }, 262 },
258 mounted() { 263 mounted() {
259 if (this.$store.state.isUserLoggedIn == true) { 264 if (this.$store.state.isUserLoggedIn == true) {
260 this.$router.push("/dashboard"); 265 this.$router.push("/dashboard");
261 } else if (this.$store.state.isSchoolLoggedIn == true) { 266 } else if (this.$store.state.isSchoolLoggedIn == true) {
262 this.$router.push("/dashboard"); 267 this.$router.push("/dashboard");
263 } 268 }
264 }, 269 },
265 computed: { 270 computed: {
266 color() { 271 color() {
267 return this.loading ? "success" : "error"; 272 return this.loading ? "success" : "error";
268 }, 273 },
269 }, 274 },
270 }; 275 };
271 </script> 276 </script>
272 277
273 <style scoped lang="css"> 278 <style scoped lang="css">
274 #login { 279 #login {
275 width: 100%; 280 width: 100%;
276 position: absolute; 281 position: absolute;
277 top: 0; 282 top: 0;
278 left: 0; 283 left: 0;
279 content: ""; 284 content: "";
280 z-index: 0; 285 z-index: 0;
281 } 286 }
282 </style> 287 </style>
283 <style scoped> 288 <style scoped>
284 .schoolLogo { 289 .schoolLogo {
285 height: 60%; 290 height: 60%;
286 padding-left: 31%; 291 padding-left: 31%;
287 } 292 }
288 /* img { 293 /* img {
289 position: absolute; 294 position: absolute;
290 top: 13px; 295 top: 13px;
291 left: 8px; 296 left: 8px;
292 } */ 297 } */
293 .v-btn--large { 298 .v-btn--large {
294 padding: 0px 84px; 299 padding: 0px 84px;
295 } 300 }
296 .link { 301 .link {
297 text-decoration: none; 302 text-decoration: none;
298 } 303 }
299 a { 304 a {
300 color: #fff; 305 color: #fff;
301 } 306 }
302 .mt-4 { 307 .mt-4 {
303 margin-top: 21px !important; 308 margin-top: 21px !important;
304 } 309 }
305 .logo { 310 .logo {
306 display: block; 311 display: block;
307 } 312 }
308 @media screen and (max-width: 600px) { 313 @media screen and (max-width: 600px) {
309 img { 314 img {
310 left: 10px; 315 left: 10px;
311 height: 34px; 316 height: 34px;
312 width: 120px; 317 width: 120px;
313 } 318 }
314 .logo { 319 .logo {
315 height: 56px; 320 height: 56px;
316 left: 10px; 321 left: 10px;
317 width: 120px; 322 width: 120px;
318 display: block; 323 display: block;
319 } 324 }
320 .logoSchool { 325 .logoSchool {
321 height: 87px; 326 height: 87px;
322 left: 10px; 327 left: 10px;
323 width: 120px; 328 width: 120px;
324 } 329 }
325 } 330 }
326 </style> 331 </style>
src/pages/Course/course.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS COURSES DETAILS ****** --> 3 <!-- ****** EDITS COURSES DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable> 4 <v-dialog v-model="editStudentDialog" max-width="600px" scrollable>
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 Course</label> 8 <label class="title text-xs-center">Edit Course</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.courseImageUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.courseImageUrl" 21 :src="editedItem.courseImageUrl"
22 v-else-if="editedItem.courseImageUrl && !editImageUrl" 22 v-else-if="editedItem.courseImageUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm12> 41 <v-flex xs12 sm12>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 sm5 class="pt-4 subheading"> 43 <v-flex xs4 sm5 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm7 class="ml-3"> 47 <v-flex xs8 sm7 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 required 55 required
56 ></v-select> 56 ></v-select>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 sm5 class="pt-4 subheading"> 60 <v-flex xs4 sm5 class="pt-4 subheading">
61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 61 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 62 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
63 </v-flex> 63 </v-flex>
64 <v-flex xs8 sm7 class="ml-3"> 64 <v-flex xs8 sm7 class="ml-3">
65 <v-text-field 65 <v-text-field
66 v-model="editedItem.courseName" 66 v-model="editedItem.courseName"
67 placeholder="fill your Course Name" 67 placeholder="fill your Course Name"
68 type="text" 68 type="text"
69 required 69 required
70 ></v-text-field> 70 ></v-text-field>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 sm5 class="pt-4 subheading"> 74 <v-flex xs4 sm5 class="pt-4 subheading">
75 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 75 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 76 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 sm7 class="ml-3"> 78 <v-flex xs8 sm7 class="ml-3">
79 <v-text-field 79 <v-text-field
80 label="Select Image" 80 label="Select Image"
81 @click="pickEditFile" 81 @click="pickEditFile"
82 v-model="editImageName" 82 v-model="editImageName"
83 append-icon="attach_file" 83 append-icon="attach_file"
84 ></v-text-field> 84 ></v-text-field>
85 </v-flex> 85 </v-flex>
86 </v-layout> 86 </v-layout>
87 </v-flex> 87 </v-flex>
88 </v-layout> 88 </v-layout>
89 <v-layout> 89 <v-layout>
90 <v-flex xs12 sm12 class="px-0 mx-0"> 90 <v-flex xs12 sm12 class="px-0 mx-0">
91 <v-layout class="right"> 91 <v-layout class="right">
92 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 92 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
93 </v-layout> 93 </v-layout>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-container> 96 </v-container>
97 </v-form> 97 </v-form>
98 </v-card-text> 98 </v-card-text>
99 </v-card> 99 </v-card>
100 </v-dialog> 100 </v-dialog>
101 101
102 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 102 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
103 103
104 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable> 104 <v-dialog v-model="profileStudentDialog" max-width="600px" scrollable>
105 <v-card flat class="card-style pa-3" dark> 105 <v-card flat class="card-style pa-3" dark>
106 <v-layout> 106 <v-layout>
107 <v-flex xs12> 107 <v-flex xs12>
108 <label class="title text-xs-center">View Course</label> 108 <label class="title text-xs-center">View Course</label>
109 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 109 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 <v-card-text> 112 <v-card-text>
113 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 113 <v-flex align-center justify-center layout text-xs-center class="mt-3">
114 <v-avatar size="100px"> 114 <v-avatar size="100px">
115 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> 115 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" />
116 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> 116 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" />
117 </v-avatar> 117 </v-avatar>
118 </v-flex> 118 </v-flex>
119 <v-container grid-list-md> 119 <v-container grid-list-md>
120 <v-layout wrap> 120 <v-layout wrap>
121 <v-flex xs12> 121 <v-flex xs12>
122 <v-layout> 122 <v-layout>
123 <v-flex xs6 sm6> 123 <v-flex xs6 sm6>
124 <h5 class="right my-1"> 124 <h5 class="right my-1">
125 <b>Course :</b> 125 <b>Course :</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs6> 128 <v-flex sm6 xs6>
129 <h5 class="my-1 left">{{ editedItem.courseName }}</h5> 129 <h5 class="my-1 left">{{ editedItem.courseName }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-container> 134 </v-container>
135 </v-card-text> 135 </v-card-text>
136 </v-card> 136 </v-card>
137 </v-dialog> 137 </v-dialog>
138 138
139 <!-- ****** STUDENTS TABLE ****** --> 139 <!-- ****** STUDENTS TABLE ****** -->
140 <v-toolbar color="transparent" flat> 140 <v-toolbar color="transparent" flat>
141 <v-btn 141 <v-btn
142 fab 142 fab
143 dark 143 dark
144 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 144 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
145 small 145 small
146 @click="addCourseDialog = true" 146 @click="addCourseDialog = true"
147 > 147 >
148 <v-icon dark>add</v-icon> 148 <v-icon dark>add</v-icon>
149 </v-btn> 149 </v-btn>
150 <v-btn 150 <v-btn
151 round 151 round
152 class="open-dialog-button hidden-sm-only hidden-xs-only" 152 class="open-dialog-button hidden-sm-only hidden-xs-only"
153 dark 153 dark
154 @click="addCourseDialog = true" 154 @click="addCourseDialog = true"
155 > 155 >
156 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course 156 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course
157 </v-btn> 157 </v-btn>
158 <v-card-actions class="hidden-xs-only hidden-sm-only"> 158 <v-card-actions class="hidden-xs-only hidden-sm-only">
159 <v-flex md13 lg12> 159 <v-flex md13 lg12>
160 <v-layout> 160 <v-layout>
161 <v-flex lg6 md6> 161 <v-flex lg6 md6>
162 <v-select 162 <v-select
163 :items="addclass" 163 :items="addclass"
164 label="Select Class" 164 label="Select Class"
165 v-model="selectStudents.select" 165 v-model="selectStudents.select"
166 item-text="classNum" 166 item-text="classNum"
167 item-value="_id" 167 item-value="_id"
168 name="Select Class" 168 name="Select Class"
169 :rules="classRules" 169 :rules="classRules"
170 required 170 required
171 class="ml-2" 171 class="ml-2"
172 ></v-select> 172 ></v-select>
173 </v-flex> 173 </v-flex>
174 </v-layout> 174 </v-layout>
175 </v-flex> 175 </v-flex>
176 </v-card-actions> 176 </v-card-actions>
177 <v-spacer></v-spacer> 177 <v-spacer></v-spacer>
178 <v-btn 178 <v-btn
179 @click="getCourses()" 179 @click="getCourses()"
180 round 180 round
181 dark 181 dark
182 :loading="loading" 182 :loading="loading"
183 class="add-button hidden-xs-only hidden-sm-only" 183 class="open-dialog-button hidden-xs-only hidden-sm-only"
184 >Find</v-btn> 184 >Find</v-btn>
185 <v-card-title class="body-1" v-show="show"> 185 <v-card-title class="body-1" v-show="show">
186 <v-btn icon large flat @click="displaySearch"> 186 <v-btn icon large flat @click="displaySearch">
187 <v-avatar size="27"> 187 <v-avatar size="27">
188 <img src="/static/icon/search.png" alt="icon" /> 188 <img src="/static/icon/search.png" alt="icon" />
189 </v-avatar> 189 </v-avatar>
190 </v-btn> 190 </v-btn>
191 </v-card-title> 191 </v-card-title>
192 <v-flex xs8 sm7 lg2 md3 v-show="showSearch"> 192 <v-flex xs8 sm7 lg2 md3 v-show="showSearch">
193 <v-layout> 193 <v-layout>
194 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 194 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
195 <v-icon @click="closeSearch" color="error">close</v-icon> 195 <v-icon @click="closeSearch" color="error">close</v-icon>
196 </v-layout> 196 </v-layout>
197 </v-flex> 197 </v-flex>
198 </v-toolbar> 198 </v-toolbar>
199 <v-card flat class="elevation-0 transparent"> 199 <v-card flat class="elevation-0 transparent">
200 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 200 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
201 <v-layout> 201 <v-layout>
202 <!-- <v-flex xs4> 202 <!-- <v-flex xs4>
203 <label class="right mt-4">Select Class:</label> 203 <label class="right mt-4">Select Class:</label>
204 </v-flex>--> 204 </v-flex>-->
205 <v-flex xs12> 205 <v-flex xs12>
206 <v-select 206 <v-select
207 :items="addclass" 207 :items="addclass"
208 label="Select Class" 208 label="Select Class"
209 v-model="selectStudents.select" 209 v-model="selectStudents.select"
210 item-text="classNum" 210 item-text="classNum"
211 item-value="_id" 211 item-value="_id"
212 name="Select Class" 212 name="Select Class"
213 :rules="classRules" 213 :rules="classRules"
214 class="px-2" 214 class="px-2"
215 ></v-select> 215 ></v-select>
216 </v-flex> 216 </v-flex>
217 </v-layout> 217 </v-layout>
218 <v-layout> 218 <v-layout>
219 <v-flex xs5 class="mx-auto mb-2"> 219 <v-flex xs5 class="mx-auto mb-2">
220 <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn> 220 <v-btn @click="getCourses()" block round dark :loading="loading" class="add-button">Find</v-btn>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 </v-card> 224 </v-card>
225 <v-data-table 225 <v-data-table
226 :headers="headers" 226 :headers="headers"
227 :items="courseData" 227 :items="courseData"
228 :pagination.sync="pagination" 228 :pagination.sync="pagination"
229 :search="search" 229 :search="search"
230 > 230 >
231 <template slot="items" slot-scope="props"> 231 <template slot="items" slot-scope="props">
232 <tr class="tr"> 232 <tr class="tr">
233 <td class="text-xs-center td td-row"> 233 <td class="text-xs-center td td-row">
234 <v-avatar size="40"> 234 <v-avatar size="40">
235 <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" /> 235 <img :src="props.item.courseImageUrl" v-if="props.item.courseImageUrl" />
236 <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" /> 236 <img src="/static/icon/user.png" v-else-if="!props.item.courseImageUrl" />
237 </v-avatar> 237 </v-avatar>
238 </td> 238 </td>
239 <td class="text-xs-center td td-row">{{ props.item.courseName}}</td> 239 <td class="text-xs-center td td-row">{{ props.item.courseName}}</td>
240 <td class="text-xs-center td td-row"> 240 <td class="text-xs-center td td-row">
241 <span> 241 <span>
242 <v-tooltip top> 242 <v-tooltip top>
243 <img 243 <img
244 slot="activator" 244 slot="activator"
245 style="cursor:pointer; width:25px; height:25px; " 245 style="cursor:pointer; width:25px; height:25px; "
246 class="mr-3" 246 class="mr-3"
247 @click="profile(props.item)" 247 @click="profile(props.item)"
248 src="/static/icon/view.png" 248 src="/static/icon/view.png"
249 /> 249 />
250 <span>View</span> 250 <span>View</span>
251 </v-tooltip> 251 </v-tooltip>
252 <v-tooltip top> 252 <v-tooltip top>
253 <img 253 <img
254 slot="activator" 254 slot="activator"
255 style="cursor:pointer; width:20px; height:18px; " 255 style="cursor:pointer; width:20px; height:18px; "
256 class="mr-3" 256 class="mr-3"
257 @click="editItem(props.item)" 257 @click="editItem(props.item)"
258 src="/static/icon/edit.png" 258 src="/static/icon/edit.png"
259 /> 259 />
260 <span>Edit</span> 260 <span>Edit</span>
261 </v-tooltip> 261 </v-tooltip>
262 <v-tooltip top> 262 <v-tooltip top>
263 <img 263 <img
264 slot="activator" 264 slot="activator"
265 style="cursor:pointer; width:20px; height:20px; " 265 style="cursor:pointer; width:20px; height:20px; "
266 class="mr-3" 266 class="mr-3"
267 @click="deleteItem(props.item)" 267 @click="deleteItem(props.item)"
268 src="/static/icon/delete.png" 268 src="/static/icon/delete.png"
269 /> 269 />
270 <span>Delete</span> 270 <span>Delete</span>
271 </v-tooltip> 271 </v-tooltip>
272 </span> 272 </span>
273 </td> 273 </td>
274 </tr> 274 </tr>
275 </template> 275 </template>
276 <v-alert 276 <v-alert
277 slot="no-results" 277 slot="no-results"
278 :value="true" 278 :value="true"
279 color="error" 279 color="error"
280 icon="warning" 280 icon="warning"
281 >Your search for "{{ search }}" found no results.</v-alert> 281 >Your search for "{{ search }}" found no results.</v-alert>
282 </v-data-table> 282 </v-data-table>
283 <!-- ****** Add CourseS DETAILS****** --> 283 <!-- ****** Add CourseS DETAILS****** -->
284 <v-dialog v-model="addCourseDialog" max-width="500"> 284 <v-dialog v-model="addCourseDialog" max-width="500">
285 <v-card flat class="card-style pa-2" dark> 285 <v-card flat class="card-style pa-2" dark>
286 <v-layout> 286 <v-layout>
287 <v-flex xs12> 287 <v-flex xs12>
288 <label class="title text-xs-center">Add Course</label> 288 <label class="title text-xs-center">Add Course</label>
289 <v-icon size="24" class="right" @click="addCourseDialog = false">cancel</v-icon> 289 <v-icon size="24" class="right" @click="addCourseDialog = false">cancel</v-icon>
290 </v-flex> 290 </v-flex>
291 </v-layout> 291 </v-layout>
292 <v-container fluid> 292 <v-container fluid>
293 <v-layout align-center> 293 <v-layout align-center>
294 <v-flex xs12> 294 <v-flex xs12>
295 <v-flex xs12 sm12> 295 <v-flex xs12 sm12>
296 <v-form ref="form" v-model="valid" lazy-validation> 296 <v-form ref="form" v-model="valid" lazy-validation>
297 <v-layout> 297 <v-layout>
298 <v-flex 298 <v-flex
299 xs12 299 xs12
300 class="text-xs-center text-sm-center text-md-center text-lg-center" 300 class="text-xs-center text-sm-center text-md-center text-lg-center"
301 > 301 >
302 <v-avatar size="100px" v-if="!imageUrl"> 302 <v-avatar size="100px" v-if="!imageUrl">
303 <img src="/static/icon/user.png" /> 303 <img src="/static/icon/user.png" />
304 </v-avatar> 304 </v-avatar>
305 <input 305 <input
306 type="file" 306 type="file"
307 style="display: none" 307 style="display: none"
308 ref="image" 308 ref="image"
309 accept="image/*" 309 accept="image/*"
310 @change="onFilePicked" 310 @change="onFilePicked"
311 /> 311 />
312 <img 312 <img
313 :src="imageData.imageUrl" 313 :src="imageData.imageUrl"
314 height="150" 314 height="150"
315 v-if="imageUrl" 315 v-if="imageUrl"
316 style="border-radius:50%; width:200px" 316 style="border-radius:50%; width:200px"
317 /> 317 />
318 </v-flex> 318 </v-flex>
319 </v-layout> 319 </v-layout>
320 <v-layout wrap> 320 <v-layout wrap>
321 <v-flex xs12 sm12> 321 <v-flex xs12 sm12>
322 <v-layout> 322 <v-layout>
323 <v-flex x4 sm4 class="pt-4 subheading"> 323 <v-flex x4 sm4 class="pt-4 subheading">
324 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 324 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
325 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 325 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
326 </v-flex> 326 </v-flex>
327 <v-flex xs8 sm8 class="ml-3"> 327 <v-flex xs8 sm8 class="ml-3">
328 <v-select 328 <v-select
329 :items="addclass" 329 :items="addclass"
330 label="Select Class" 330 label="Select Class"
331 v-model="addCourses.select" 331 v-model="addCourses.select"
332 item-text="classNum" 332 item-text="classNum"
333 item-value="_id" 333 item-value="_id"
334 name="Select Class" 334 name="Select Class"
335 :rules="classRules" 335 :rules="classRules"
336 @change="getSections(addCourses.select)" 336 @change="getSections(addCourses.select)"
337 required 337 required
338 ></v-select> 338 ></v-select>
339 </v-flex> 339 </v-flex>
340 </v-layout> 340 </v-layout>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 <v-layout wrap> 343 <v-layout wrap>
344 <v-flex xs12 sm12> 344 <v-flex xs12 sm12>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 sm4 class="pt-4 subheading"> 346 <v-flex xs4 sm4 class="pt-4 subheading">
347 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label> 347 <label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
348 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 348 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
349 </v-flex> 349 </v-flex>
350 <v-flex xs8 sm8 class="ml-3"> 350 <v-flex xs8 sm8 class="ml-3">
351 <v-text-field 351 <v-text-field
352 v-model="addCourses.courseName" 352 v-model="addCourses.courseName"
353 placeholder="fill your Course name" 353 placeholder="fill your Course name"
354 type="text" 354 type="text"
355 :rules="courseRules" 355 :rules="courseRules"
356 required 356 required
357 ></v-text-field> 357 ></v-text-field>
358 </v-flex> 358 </v-flex>
359 </v-layout> 359 </v-layout>
360 </v-flex> 360 </v-flex>
361 <v-flex xs12 sm12> 361 <v-flex xs12 sm12>
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 class="pt-4 subheading"> 363 <v-flex xs4 class="pt-4 subheading">
364 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label> 364 <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
365 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label> 365 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
366 </v-flex> 366 </v-flex>
367 <v-flex xs8 class="ml-3"> 367 <v-flex xs8 class="ml-3">
368 <v-text-field 368 <v-text-field
369 label="Select Image" 369 label="Select Image"
370 @click="pickFile" 370 @click="pickFile"
371 v-model="imageName" 371 v-model="imageName"
372 append-icon="attach_file" 372 append-icon="attach_file"
373 ></v-text-field> 373 ></v-text-field>
374 </v-flex> 374 </v-flex>
375 </v-layout> 375 </v-layout>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 <v-layout> 378 <v-layout>
379 <v-flex xs12 sm12> 379 <v-flex xs12 sm12>
380 <v-layout class="right"> 380 <v-layout class="right">
381 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 381 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
382 </v-layout> 382 </v-layout>
383 </v-flex> 383 </v-flex>
384 </v-layout> 384 </v-layout>
385 </v-form> 385 </v-form>
386 </v-flex> 386 </v-flex>
387 </v-flex> 387 </v-flex>
388 </v-layout> 388 </v-layout>
389 </v-container> 389 </v-container>
390 </v-card> 390 </v-card>
391 </v-dialog> 391 </v-dialog>
392 <v-snackbar 392 <v-snackbar
393 :timeout="timeout" 393 :timeout="timeout"
394 :top="y === 'top'" 394 :top="y === 'top'"
395 :right="x === 'right'" 395 :right="x === 'right'"
396 :vertical="mode === 'vertical'" 396 :vertical="mode === 'vertical'"
397 v-model="snackbar" 397 v-model="snackbar"
398 :color="color" 398 :color="color"
399 >{{ text }}</v-snackbar> 399 >{{ text }}</v-snackbar>
400 <div class="loader" v-if="showLoader"> 400 <div class="loader" v-if="showLoader">
401 <v-progress-circular indeterminate color="white"></v-progress-circular> 401 <v-progress-circular indeterminate color="white"></v-progress-circular>
402 </div> 402 </div>
403 </v-container> 403 </v-container>
404 </template> 404 </template>
405 405
406 <script> 406 <script>
407 import http from "@/Services/http.js"; 407 import http from "@/Services/http.js";
408 import moment from "moment"; 408 import moment from "moment";
409 import countryList from "@/script/country.js"; 409 import countryList from "@/script/country.js";
410 import parent from "@/script/parents.js"; 410 import parent from "@/script/parents.js";
411 411
412 export default { 412 export default {
413 data: () => ({ 413 data: () => ({
414 showNext: false, 414 showNext: false,
415 snackbar: false, 415 snackbar: false,
416 y: "top", 416 y: "top",
417 x: "right", 417 x: "right",
418 role: "", 418 role: "",
419 mode: "", 419 mode: "",
420 append: "", 420 append: "",
421 timeout: 3000, 421 timeout: 3000,
422 text: "", 422 text: "",
423 show: true, 423 show: true,
424 color: "", 424 color: "",
425 showSearch: false, 425 showSearch: false,
426 showLoader: false, 426 showLoader: false,
427 loading: false, 427 loading: false,
428 editLoading: false, 428 editLoading: false,
429 date: null, 429 date: null,
430 search: "", 430 search: "",
431 menu: false, 431 menu: false,
432 menu1: false, 432 menu1: false,
433 editStudentDialog: false, 433 editStudentDialog: false,
434 profileStudentDialog: false, 434 profileStudentDialog: false,
435 addCourseDialog: false, 435 addCourseDialog: false,
436 valid: true, 436 valid: true,
437 addclass: [], 437 addclass: [],
438 addSection: [], 438 addSection: [],
439 pagination: { 439 pagination: {
440 rowsPerPage: 10 440 rowsPerPage: 10,
441 }, 441 },
442 imageData: {}, 442 imageData: {},
443 imageName: "", 443 imageName: "",
444 imageUrl: "", 444 imageUrl: "",
445 imageFile: "", 445 imageFile: "",
446 editImageName: "", 446 editImageName: "",
447 editImageUrl: "", 447 editImageUrl: "",
448 courseRules: [v => !!v || " Course Name is required"], 448 courseRules: [(v) => !!v || " Course Name is required"],
449 classRules: [v => !!v || " Class Name is required"], 449 classRules: [(v) => !!v || " Class Name is required"],
450 sectionRules: [v => !!v || " Section Name is required"], 450 sectionRules: [(v) => !!v || " Section Name is required"],
451 errorMessages: "", 451 errorMessages: "",
452 headers: [ 452 headers: [
453 { 453 {
454 text: "Image", 454 text: "Image",
455 value: "courseImageUrl", 455 value: "courseImageUrl",
456 sortable: false, 456 sortable: false,
457 align: "center" 457 align: "center",
458 }, 458 },
459 { 459 {
460 text: "Course", 460 text: "Course",
461 value: "course", 461 value: "course",
462 sortable: false, 462 sortable: false,
463 align: "center" 463 align: "center",
464 }, 464 },
465 { text: "Action", value: "", sortable: false, align: "center" } 465 { text: "Action", value: "", sortable: false, align: "center" },
466 ], 466 ],
467 courseData: [], 467 courseData: [],
468 editedIndex: -1, 468 editedIndex: -1,
469 addCourses: {}, 469 addCourses: {},
470 selectStudents: { 470 selectStudents: {
471 select: "", 471 select: "",
472 selectSection: "" 472 selectSection: "",
473 }, 473 },
474 editedItem: {} 474 editedItem: {},
475 }), 475 }),
476 methods: { 476 methods: {
477 getCourses() { 477 getCourses() {
478 this.showLoader = true; 478 this.showLoader = true;
479 http() 479 http()
480 .get("/getCourseesList", { 480 .get("/getCourseesList", {
481 params: { 481 params: {
482 classId: this.selectStudents.select 482 classId: this.selectStudents.select,
483 } 483 },
484 }) 484 })
485 .then(response => { 485 .then((response) => {
486 this.courseData = response.data.data; 486 this.courseData = response.data.data;
487 this.showLoader = false; 487 this.showLoader = false;
488 }) 488 })
489 .catch(err => { 489 .catch((err) => {
490 console.log("err====>", err); 490 console.log("err====>", err);
491 this.showLoader = false; 491 this.showLoader = false;
492 }); 492 });
493 }, 493 },
494 getSections(_id) { 494 getSections(_id) {
495 var token = this.$store.state.token; 495 var token = this.$store.state.token;
496 this.showLoader = true; 496 this.showLoader = true;
497 http() 497 http()
498 .get( 498 .get(
499 "/getSectionsList", 499 "/getSectionsList",
500 { params: { classId: _id } }, 500 { params: { classId: _id } },
501 { 501 {
502 headers: { Authorization: "Bearer " + token } 502 headers: { Authorization: "Bearer " + token },
503 } 503 }
504 ) 504 )
505 .then(response => { 505 .then((response) => {
506 this.addSection = response.data.data; 506 this.addSection = response.data.data;
507 this.showLoader = false; 507 this.showLoader = false;
508 }) 508 })
509 .catch(err => { 509 .catch((err) => {
510 this.showLoader = false; 510 this.showLoader = false;
511 }); 511 });
512 }, 512 },
513 pickFile() { 513 pickFile() {
514 this.$refs.image.click(); 514 this.$refs.image.click();
515 }, 515 },
516 pickEditFile() { 516 pickEditFile() {
517 this.$refs.editDataImage.click(); 517 this.$refs.editDataImage.click();
518 }, 518 },
519 dates: function(date) { 519 dates: function (date) {
520 return moment(date).format("MMMM DD, YYYY"); 520 return moment(date).format("MMMM DD, YYYY");
521 return date; 521 return date;
522 }, 522 },
523 onFilePicked(e) { 523 onFilePicked(e) {
524 // console.log(e) 524 // console.log(e)
525 const files = e.target.files; 525 const files = e.target.files;
526 this.imageData.upload = e.target.files[0]; 526 this.imageData.upload = e.target.files[0];
527 if (files[0] !== undefined) { 527 if (files[0] !== undefined) {
528 this.imageName = files[0].name; 528 this.imageName = files[0].name;
529 if (this.imageName.lastIndexOf(".") <= 0) { 529 if (this.imageName.lastIndexOf(".") <= 0) {
530 return; 530 return;
531 } 531 }
532 const fr = new FileReader(); 532 const fr = new FileReader();
533 fr.readAsDataURL(files[0]); 533 fr.readAsDataURL(files[0]);
534 fr.addEventListener("load", () => { 534 fr.addEventListener("load", () => {
535 this.imageUrl = fr.result; 535 this.imageUrl = fr.result;
536 this.imageFile = files[0]; // this is an image file that can be sent to server... 536 this.imageFile = files[0]; // this is an image file that can be sent to server...
537 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 537 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
538 }); 538 });
539 } else { 539 } else {
540 this.imageName = ""; 540 this.imageName = "";
541 this.imageFile = ""; 541 this.imageFile = "";
542 this.imageUrl = ""; 542 this.imageUrl = "";
543 } 543 }
544 }, 544 },
545 onEditFilePicked(e) { 545 onEditFilePicked(e) {
546 console.log(e); 546 console.log(e);
547 const files = e.target.files; 547 const files = e.target.files;
548 if (files[0] !== undefined) { 548 if (files[0] !== undefined) {
549 this.editImageName = files[0].name; 549 this.editImageName = files[0].name;
550 console.log("this.editImageName", this.editImageName); 550 console.log("this.editImageName", this.editImageName);
551 551
552 if (this.editImageName.lastIndexOf(".") <= 0) { 552 if (this.editImageName.lastIndexOf(".") <= 0) {
553 return; 553 return;
554 } 554 }
555 const fr = new FileReader(); 555 const fr = new FileReader();
556 fr.readAsDataURL(files[0]); 556 fr.readAsDataURL(files[0]);
557 fr.addEventListener("load", () => { 557 fr.addEventListener("load", () => {
558 this.editImageUrl = fr.result; 558 this.editImageUrl = fr.result;
559 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 559 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
560 }); 560 });
561 } else { 561 } else {
562 this.editImageName = ""; 562 this.editImageName = "";
563 this.editiImageFile = ""; 563 this.editiImageFile = "";
564 } 564 }
565 }, 565 },
566 editItem(item) { 566 editItem(item) {
567 this.editedIndex = this.courseData.indexOf(item); 567 this.editedIndex = this.courseData.indexOf(item);
568 this.editedItem = Object.assign({}, item); 568 this.editedItem = Object.assign({}, item);
569 this.editStudentDialog = true; 569 this.editStudentDialog = true;
570 }, 570 },
571 profile(item) { 571 profile(item) {
572 this.editedIndex = this.courseData.indexOf(item); 572 this.editedIndex = this.courseData.indexOf(item);
573 this.editedItem = Object.assign({}, item); 573 this.editedItem = Object.assign({}, item);
574 this.profileStudentDialog = true; 574 this.profileStudentDialog = true;
575 }, 575 },
576 deleteItem(item) { 576 deleteItem(item) {
577 let deleteCourse = { 577 let deleteCourse = {
578 courseId: item._id 578 courseId: item._id,
579 }; 579 };
580 http() 580 http()
581 .delete( 581 .delete(
582 "/deleteCourse", 582 "/deleteCourse",
583 confirm("Are you sure you want to delete this?") && { 583 confirm("Are you sure you want to delete this?") && {
584 params: deleteCourse 584 params: deleteCourse,
585 } 585 }
586 ) 586 )
587 .then(response => { 587 .then((response) => {
588 this.snackbar = true; 588 this.snackbar = true;
589 this.text = response.data.message; 589 this.text = response.data.message;
590 this.color = "green"; 590 this.color = "green";
591 this.getCourses(); 591 this.getCourses();
592 }) 592 })
593 .catch(error => { 593 .catch((error) => {
594 this.snackbar = true; 594 this.snackbar = true;
595 this.text = error.response.data.message; 595 this.text = error.response.data.message;
596 this.color = "error"; 596 this.color = "error";
597 }); 597 });
598 }, 598 },
599 close() { 599 close() {
600 this.editStudentDialog = false; 600 this.editStudentDialog = false;
601 }, 601 },
602 closeStudentProfile() { 602 closeStudentProfile() {
603 this.profileStudentDialog = false; 603 this.profileStudentDialog = false;
604 }, 604 },
605 submit() { 605 submit() {
606 if (this.$refs.form.validate()) { 606 if (this.$refs.form.validate()) {
607 let addCourse = { 607 let addCourse = {
608 classId: this.addCourses.select, 608 classId: this.addCourses.select,
609 sectionId: this.addCourses.selectSection, 609 sectionId: this.addCourses.selectSection,
610 courseName: this.addCourses.courseName 610 courseName: this.addCourses.courseName,
611 }; 611 };
612 if (this.imageUrl) { 612 if (this.imageUrl) {
613 var str = this.imageUrl; 613 var str = this.imageUrl;
614 const [baseUrl, imageUrl] = str.split(/,/); 614 const [baseUrl, imageUrl] = str.split(/,/);
615 addCourse.upload = imageUrl; 615 addCourse.upload = imageUrl;
616 } 616 }
617 this.loading = true; 617 this.loading = true;
618 http() 618 http()
619 .post("/createCourse", addCourse) 619 .post("/createCourse", addCourse)
620 .then(response => { 620 .then((response) => {
621 this.snackbar = true; 621 this.snackbar = true;
622 this.text = "New Course added successfully"; 622 this.text = "New Course added successfully";
623 this.color = "green"; 623 this.color = "green";
624 this.addCourseDialog = false; 624 this.addCourseDialog = false;
625 this.clear(); 625 this.clear();
626 this.loading = false; 626 this.loading = false;
627 }) 627 })
628 .catch(error => { 628 .catch((error) => {
629 this.snackbar = true; 629 this.snackbar = true;
630 this.text = error.response.data.message; 630 this.text = error.response.data.message;
631 this.color = "error"; 631 this.color = "error";
632 this.loading = false; 632 this.loading = false;
633 }); 633 });
634 } 634 }
635 }, 635 },
636 clear() { 636 clear() {
637 this.$refs.form.reset(); 637 this.$refs.form.reset();
638 this.imageUrl = ""; 638 this.imageUrl = "";
639 }, 639 },
640 save() { 640 save() {
641 let editCourse = { 641 let editCourse = {
642 courseId: this.editedItem._id, 642 courseId: this.editedItem._id,
643 courseName: this.editedItem.courseName, 643 courseName: this.editedItem.courseName,
644 classId: this.editedItem.select 644 classId: this.editedItem.select,
645 }; 645 };
646 if (this.editImageUrl) { 646 if (this.editImageUrl) {
647 var str = this.editImageUrl; 647 var str = this.editImageUrl;
648 const [baseUrl, editImageUrl] = str.split(/,/); 648 const [baseUrl, editImageUrl] = str.split(/,/);
649 editCourse.upload = editImageUrl; 649 editCourse.upload = editImageUrl;
650 } 650 }
651 this.editLoading = true; 651 this.editLoading = true;
652 http() 652 http()
653 .put("/updateCourse", editCourse) 653 .put("/updateCourse", editCourse)
654 .then(response => { 654 .then((response) => {
655 this.snackbar = true; 655 this.snackbar = true;
656 this.text = response.data.message; 656 this.text = response.data.message;
657 this.color = "green"; 657 this.color = "green";
658 this.imageUrl = ""; 658 this.imageUrl = "";
659 this.getCourses(); 659 this.getCourses();
660 this.close(); 660 this.close();
661 this.editLoading = false; 661 this.editLoading = false;
662 }) 662 })
663 .catch(error => { 663 .catch((error) => {
664 this.snackbar = true; 664 this.snackbar = true;
665 this.text = error.response.data.statusText; 665 this.text = error.response.data.statusText;
666 this.color = "error"; 666 this.color = "error";
667 this.editLoading = false; 667 this.editLoading = false;
668 }); 668 });
669 }, 669 },
670 displaySearch() { 670 displaySearch() {
671 this.show = false; 671 this.show = false;
672 this.showSearch = true; 672 this.showSearch = true;
673 }, 673 },
674 closeSearch() { 674 closeSearch() {
675 this.showSearch = false; 675 this.showSearch = false;
676 this.show = true; 676 this.show = true;
677 this.search = ""; 677 this.search = "";
678 } 678 },
679 }, 679 },
680 mounted() { 680 mounted() {
681 var token = this.$store.state.token; 681 var token = this.$store.state.token;
682 http() 682 http()
683 .get("/getClassesList", { 683 .get("/getClassesList", {
684 headers: { Authorization: "Bearer " + token } 684 headers: { Authorization: "Bearer " + token },
685 }) 685 })
686 .then(response => { 686 .then((response) => {
687 this.addclass = response.data.data; 687 this.addclass = response.data.data;
688 }) 688 })
689 .catch(error => { 689 .catch((error) => {
690 this.showLoader = false; 690 this.showLoader = false;
691 if (error.response.status === 401) { 691 if (error.response.status === 401) {
692 this.$router.replace({ path: "/" }); 692 this.$router.replace({ path: "/" });
693 this.$store.dispatch("setToken", null); 693 this.$store.dispatch("setToken", null);
694 this.$store.dispatch("Id", null); 694 this.$store.dispatch("Id", null);
695 this.$store.dispatch("Role", null); 695 this.$store.dispatch("Role", null);
696 } 696 }
697 }); 697 });
698 } 698 },
699 }; 699 };
700 </script> 700 </script>
701 <style scoped> 701 <style scoped>
702 .active { 702 .active {
703 background-color: gray; 703 background-color: gray;
704 color: white !important; 704 color: white !important;
705 } 705 }
706 .activebtn { 706 .activebtn {
707 color: black !important; 707 color: black !important;
708 } 708 }
709 </style> 709 </style>
src/pages/Course/enrollStudents.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** STUDENTS TABLE ****** --> 3 <!-- ****** STUDENTS TABLE ****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 <v-flex xs12 sm4 md2> 6 <v-flex xs12 sm4 md2>
7 <v-select 7 <v-select
8 small 8 small
9 :items="addclass" 9 :items="addclass"
10 label="Select Class" 10 label="Select Class"
11 v-model="getReport.classId" 11 v-model="getReport.classId"
12 item-text="classNum" 12 item-text="classNum"
13 item-value="_id" 13 item-value="_id"
14 name="Select Class" 14 name="Select Class"
15 @change="getCourses(getReport.classId)" 15 @change="getCourses(getReport.classId)"
16 class="mr-2" 16 class="mr-2"
17 required 17 required
18 ></v-select> 18 ></v-select>
19 </v-flex> 19 </v-flex>
20 <v-flex xs12 sm4 md2> 20 <v-flex xs12 sm4 md2>
21 <v-select 21 <v-select
22 :items="courseData" 22 :items="courseData"
23 label="Select Course" 23 label="Select Course"
24 v-model="getReport.courseId" 24 v-model="getReport.courseId"
25 item-text="courseName" 25 item-text="courseName"
26 item-value="_id" 26 item-value="_id"
27 required 27 required
28 class="ml-2" 28 class="ml-2"
29 @change="getStudentTable(getReport.courseId)" 29 @change="getStudentTable(getReport.courseId)"
30 ></v-select> 30 ></v-select>
31 </v-flex> 31 </v-flex>
32 <v-card-title class="body-1" v-show="show"> 32 <v-card-title class="body-1" v-show="show">
33 <v-btn icon large flat @click="displaySearch"> 33 <v-btn icon large flat @click="displaySearch">
34 <v-avatar size="27"> 34 <v-avatar size="27">
35 <img src="/static/icon/search.png" alt="icon" /> 35 <img src="/static/icon/search.png" alt="icon" />
36 </v-avatar> 36 </v-avatar>
37 </v-btn> 37 </v-btn>
38 </v-card-title> 38 </v-card-title>
39 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 39 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
40 <v-layout> 40 <v-layout>
41 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 41 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
42 <v-icon @click="closeSearch" color="error">close</v-icon> 42 <v-icon @click="closeSearch" color="error">close</v-icon>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-toolbar> 45 </v-toolbar>
46 <v-data-table 46 <v-data-table
47 :headers="headers" 47 :headers="headers"
48 :items="studentsData" 48 :items="studentsData"
49 :pagination.sync="pagination" 49 :pagination.sync="pagination"
50 :search="search" 50 :search="search"
51 select-all 51 select-all
52 v-model="selected" 52 v-model="selected"
53 item-key="_id" 53 item-key="_id"
54 > 54 >
55 <template slot="items" slot-scope="props"> 55 <template slot="items" slot-scope="props">
56 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 56 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
57 <td class="text-xs-center td td-row"> 57 <td class="text-xs-center td td-row">
58 <v-checkbox 58 <v-checkbox
59 v-model="props.item.enroll" 59 v-model="props.item.enroll"
60 @change="selectParticularStudent(props.item)" 60 @change="selectParticularStudent(props.item)"
61 primary 61 primary
62 hide-details 62 hide-details
63 ></v-checkbox> 63 ></v-checkbox>
64 </td> 64 </td>
65 <td class="text-xs-center td td-row"> 65 <td class="text-xs-center td td-row">
66 <v-avatar size="40"> 66 <v-avatar size="40">
67 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 67 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
68 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 68 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
69 </v-avatar> 69 </v-avatar>
70 </td> 70 </td>
71 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 71 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
72 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 72 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
73 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 73 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
74 </tr> 74 </tr>
75 </template> 75 </template>
76 <template slot="headers" slot-scope="props"> 76 <template slot="headers" slot-scope="props">
77 <tr> 77 <tr>
78 <th> 78 <th>
79 <v-checkbox 79 <v-checkbox
80 :input-value="props.all" 80 :input-value="props.all"
81 :indeterminate="props.indeterminate" 81 :indeterminate="props.indeterminate"
82 primary 82 primary
83 hide-details 83 hide-details
84 @click.native="toggleAll" 84 @click.native="toggleAll"
85 ></v-checkbox> 85 ></v-checkbox>
86 </th> 86 </th>
87 <th 87 <th
88 v-for="header in props.headers" 88 v-for="header in props.headers"
89 :key="header.text" 89 :key="header.text"
90 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 90 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
91 @click="changeSort(header.value)" 91 @click="changeSort(header.value)"
92 > 92 >
93 <v-icon small>arrow_upward</v-icon> 93 <v-icon small>arrow_upward</v-icon>
94 {{ header.text }} 94 {{ header.text }}
95 </th> 95 </th>
96 </tr> 96 </tr>
97 </template> 97 </template>
98 <v-alert 98 <v-alert
99 slot="no-results" 99 slot="no-results"
100 :value="true" 100 :value="true"
101 color="error" 101 color="error"
102 icon="warning" 102 icon="warning"
103 >Your search for "{{ search }}" found no results.</v-alert> 103 >Your search for "{{ search }}" found no results.</v-alert>
104 </v-data-table> 104 </v-data-table>
105 <v-snackbar 105 <v-snackbar
106 :timeout="timeout" 106 :timeout="timeout"
107 :top="y === 'top'" 107 :top="y === 'top'"
108 :right="x === 'right'" 108 :right="x === 'right'"
109 :vertical="mode === 'vertical'" 109 :vertical="mode === 'vertical'"
110 v-model="snackbar" 110 v-model="snackbar"
111 color="success" 111 color="success"
112 >{{ text }}</v-snackbar> 112 >{{ text }}</v-snackbar>
113 <div class="loader" v-if="showLoader"> 113 <div class="loader" v-if="showLoader">
114 <v-progress-circular indeterminate color="white"></v-progress-circular> 114 <v-progress-circular indeterminate color="white"></v-progress-circular>
115 </div> 115 </div>
116 </v-container> 116 </v-container>
117 </template> 117 </template>
118 118
119 <script> 119 <script>
120 import http from "@/Services/http.js"; 120 import http from "@/Services/http.js";
121 import moment from "moment"; 121 import moment from "moment";
122 122
123 export default { 123 export default {
124 data: () => ({ 124 data: () => ({
125 snackbar: false, 125 snackbar: false,
126 y: "top", 126 y: "top",
127 x: "right", 127 x: "right",
128 mode: "", 128 mode: "",
129 timeout: 3000, 129 timeout: 3000,
130 text: "", 130 text: "",
131 show: true, 131 show: true,
132 showSearch: false, 132 showSearch: false,
133 showLoader: false, 133 showLoader: false,
134 loading: false, 134 loading: false,
135 date: null, 135 date: null,
136 search: "", 136 search: "",
137 addclass: [], 137 addclass: [],
138 pagination: { 138 pagination: {
139 rowsPerPage: 10 139 rowsPerPage: 10,
140 }, 140 },
141 headers: [ 141 headers: [
142 { 142 {
143 text: "Profile Pic", 143 text: "Profile Pic",
144 value: "profilprofilePicUrlePicUrl", 144 value: "profilprofilePicUrlePicUrl",
145 sortable: false, 145 sortable: false,
146 align: "center" 146 align: "center",
147 }, 147 },
148 { text: "Name", value: "name", sortable: false, align: "center" }, 148 { text: "Name", value: "name", sortable: false, align: "center" },
149 { 149 {
150 text: "Mobile No", 150 text: "Mobile No",
151 value: "fatherCellNo", 151 value: "fatherCellNo",
152 sortable: false, 152 sortable: false,
153 align: "center" 153 align: "center",
154 }, 154 },
155 { text: "Email", value: "email", sortable: false, align: "center" } 155 { text: "Email", value: "email", sortable: false, align: "center" },
156 // { text: "Action", value: "", sortable: false, align: "center" } 156 // { text: "Action", value: "", sortable: false, align: "center" }
157 ], 157 ],
158 token: "", 158 token: "",
159 selectStudents: { 159 selectStudents: {
160 select: "", 160 select: "",
161 selectSection: "" 161 selectSection: "",
162 }, 162 },
163 163
164 role: "", 164 role: "",
165 schoolRole: "", 165 schoolRole: "",
166 menu: false, 166 menu: false,
167 valid: true, 167 valid: true,
168 168
169 getReport: {}, 169 getReport: {},
170 studentsData: [], 170 studentsData: [],
171 courseData: [], 171 courseData: [],
172 addSection: [], 172 addSection: [],
173 selected: [] 173 selected: [],
174 }), 174 }),
175 methods: { 175 methods: {
176 save(date) { 176 save(date) {
177 this.$refs.menu.save(date); 177 this.$refs.menu.save(date);
178 }, 178 },
179 getAllClass() { 179 getAllClass() {
180 http() 180 http()
181 .get("/getClassesList", { 181 .get("/getClassesList", {
182 headers: { Authorization: "Bearer " + this.token } 182 headers: { Authorization: "Bearer " + this.token },
183 }) 183 })
184 .then(response => { 184 .then((response) => {
185 this.addclass = response.data.data; 185 this.addclass = response.data.data;
186 }) 186 })
187 .catch(error => { 187 .catch((error) => {
188 // console.log("err====>", err); 188 // console.log("err====>", err);
189 // this.$router.replace({ path: "/" }); 189 // this.$router.replace({ path: "/" });
190 }); 190 });
191 }, 191 },
192 getCourses(classId) { 192 getCourses(classId) {
193 this.showLoader = true; 193 this.showLoader = true;
194 http() 194 http()
195 .get("/getCourseesList", { 195 .get("/getCourseesList", {
196 params: { 196 params: {
197 classId: classId 197 classId: classId,
198 } 198 },
199 }) 199 })
200 .then(response => { 200 .then((response) => {
201 this.courseData = response.data.data; 201 this.courseData = response.data.data;
202 this.showLoader = false; 202 this.showLoader = false;
203 }) 203 })
204 .catch(err => { 204 .catch((err) => {
205 console.log("err====>", err); 205 console.log("err====>", err);
206 this.showLoader = false; 206 this.showLoader = false;
207 }); 207 });
208 }, 208 },
209 getStudents() { 209 getStudents() {
210 this.showLoader = true; 210 this.showLoader = true;
211 http() 211 http()
212 .get("/getStudentsList", { 212 .get("/getStudentsList", {
213 params: { 213 params: {
214 classId: this.getReport.classId 214 classId: this.getReport.classId,
215 } 215 },
216 }) 216 })
217 .then(response => { 217 .then((response) => {
218 this.studentsData = response.data.data; 218 this.studentsData = response.data.data;
219 this.showLoader = false; 219 this.showLoader = false;
220 // this.addStudentAttendenceDialog = false; 220 // this.addStudentAttendenceDialog = false;
221 var attendence = ""; 221 var attendence = "";
222 for (let i = 0; i < this.studentsData.length; i++) { 222 for (let i = 0; i < this.studentsData.length; i++) {
223 this.studentsData[i].attendence = true; 223 this.studentsData[i].attendence = true;
224 } 224 }
225 this.getParticularCourse(); 225 this.getParticularCourse();
226 }) 226 })
227 .catch(error => { 227 .catch((error) => {
228 console.log("err====>", error); 228 console.log("err====>", error);
229 this.showLoader = false; 229 this.showLoader = false;
230 }); 230 });
231 }, 231 },
232 getStudentTable(id) { 232 getStudentTable(id) {
233 // console.log("id", this.getReport.courseId); 233 // console.log("id", this.getReport.courseId);
234 this.getStudents(); 234 this.getStudents();
235 }, 235 },
236 update() { 236 update() {
237 var studentsAttendence = []; 237 var studentsAttendence = [];
238 for (var j = 0; j < this.studentsData.length; j++) { 238 for (var j = 0; j < this.studentsData.length; j++) {
239 studentsAttendence.push({ 239 studentsAttendence.push({
240 studentId: this.studentsData[j]._id, 240 studentId: this.studentsData[j]._id,
241 isPresent: this.studentsData[j].attendence 241 isPresent: this.studentsData[j].attendence,
242 }); 242 });
243 } 243 }
244 if (this.$refs.form.validate()) { 244 if (this.$refs.form.validate()) {
245 let attendanceData = { 245 let attendanceData = {
246 sectionId: this.getReport.sectionId, 246 sectionId: this.getReport.sectionId,
247 date: this.date, 247 date: this.date,
248 students: studentsAttendence 248 students: studentsAttendence,
249 }; 249 };
250 http() 250 http()
251 .put("/updateAttendance", attendanceData) 251 .put("/updateAttendance", attendanceData)
252 .then(response => { 252 .then((response) => {
253 this.snackbar = true; 253 this.snackbar = true;
254 this.text = response.data.message; 254 this.text = response.data.message;
255 this.addStudentAttendenceDialog = false; 255 this.addStudentAttendenceDialog = false;
256 }) 256 })
257 .catch(error => { 257 .catch((error) => {
258 this.snackbar = true; 258 this.snackbar = true;
259 this.text = error.response.data.message; 259 this.text = error.response.data.message;
260 }); 260 });
261 } 261 }
262 }, 262 },
263 toggleAll() { 263 toggleAll() {
264 let withdraw = false; 264 let withdraw = false;
265 if (this.selected.length === this.studentsData.length) withdraw = true; 265 if (this.selected.length === this.studentsData.length) withdraw = true;
266 266
267 if (withdraw) { 267 if (withdraw) {
268 var payload = { 268 var payload = {
269 courseId: this.getReport.courseId, 269 courseId: this.getReport.courseId,
270 enrollStudents: [] 270 enrollStudents: [],
271 }; 271 };
272 http() 272 http()
273 .put("/enrollStudents", payload) 273 .put("/enrollStudents", payload)
274 .then(response => { 274 .then((response) => {
275 this.snackbar = true; 275 this.snackbar = true;
276 this.text = response.data.message; 276 this.text = response.data.message;
277 this.selected = []; 277 this.selected = [];
278 for (let i = 0; i < this.studentsData.length; i++) { 278 for (let i = 0; i < this.studentsData.length; i++) {
279 this.studentsData[i].enroll = false; 279 this.studentsData[i].enroll = false;
280 } 280 }
281 this.getParticularCourse(); 281 this.getParticularCourse();
282 }) 282 })
283 .catch(error => { 283 .catch((error) => {
284 this.snackbar = true; 284 this.snackbar = true;
285 this.text = error.response.data.message; 285 this.text = error.response.data.message;
286 }); 286 });
287 } else { 287 } else {
288 let selectedStudentsArray = []; 288 let selectedStudentsArray = [];
289 for (let item of this.studentsData) { 289 for (let item of this.studentsData) {
290 if(item.enroll === false || !item.enroll) { 290 if (item.enroll === false || !item.enroll) {
291 selectedStudentsArray.push({ studentId: item._id }); 291 selectedStudentsArray.push({ studentId: item._id });
292 } 292 }
293 } 293 }
294 294
295 var payload = { 295 var payload = {
296 courseId: this.getReport.courseId, 296 courseId: this.getReport.courseId,
297 enrollStudents: selectedStudentsArray 297 enrollStudents: selectedStudentsArray,
298 }; 298 };
299 http() 299 http()
300 .put("/enrollStudents", payload) 300 .put("/enrollStudents", payload)
301 .then(response => { 301 .then((response) => {
302 this.snackbar = true; 302 this.snackbar = true;
303 this.text = response.data.message; 303 this.text = response.data.message;
304 for (let i = 0; i < this.studentsData.length; i++) { 304 for (let i = 0; i < this.studentsData.length; i++) {
305 this.studentsData[i].enroll = true; 305 this.studentsData[i].enroll = true;
306 } 306 }
307 this.getParticularCourse(); 307 this.getParticularCourse();
308 }) 308 })
309 .catch(error => { 309 .catch((error) => {
310 this.snackbar = true; 310 this.snackbar = true;
311 this.text = error.response.data.message; 311 this.text = error.response.data.message;
312 }); 312 });
313 } 313 }
314 }, 314 },
315 315
316 selectParticularStudent(selected) { 316 selectParticularStudent(selected) {
317 console.log("selected", selected); 317 // console.log("selected", selected);
318 let selectedStudentsArray = []; 318 let selectedStudentsArray = [];
319 selectedStudentsArray.push({ studentId: selected._id }); 319 selectedStudentsArray.push({ studentId: selected._id });
320 320
321 let isExists = false; 321 let isExists = false;
322 for(let item of this.selected) { 322 for (let item of this.selected) {
323 if(item._id === selected._id) { 323 if (item._id === selected._id) {
324 isExists = true; 324 isExists = true;
325 break; 325 break;
326 } 326 }
327 } 327 }
328 328
329 if (selected.enroll === true) { 329 if (selected.enroll === true) {
330 if (!isExists) this.selected.push(selected); 330 if (!isExists) this.selected.push(selected);
331 var payload = { 331 var payload = {
332 courseId: this.getReport.courseId, 332 courseId: this.getReport.courseId,
333 enrollStudents: selectedStudentsArray 333 enrollStudents: selectedStudentsArray,
334 }; 334 };
335 http() 335 http()
336 .put("/enrollStudents", payload) 336 .put("/enrollStudents", payload)
337 .then(response => { 337 .then((response) => {
338 this.snackbar = true; 338 this.snackbar = true;
339 this.text = response.data.message; 339 this.text = response.data.message;
340 this.getParticularCourse(); 340 this.getParticularCourse();
341 }) 341 })
342 .catch(error => { 342 .catch((error) => {
343 this.snackbar = true; 343 this.snackbar = true;
344 this.text = error.response.data.message; 344 this.text = error.response.data.message;
345 }); 345 });
346 } 346 }
347 if ( 347 if (
348 selected.enroll == false && 348 selected.enroll == false &&
349 selected.enroll != undefined && 349 selected.enroll != undefined &&
350 selected.enroll != null 350 selected.enroll != null
351 ) { 351 ) {
352 var payloadDeleteStudents = { 352 var payloadDeleteStudents = {
353 courseId: this.getReport.courseId, 353 courseId: this.getReport.courseId,
354 enrollStudentsId: selected.enrollId 354 enrollStudentsId: selected.enrollId,
355 }; 355 };
356 http() 356 http()
357 .put("/deleteStudents", payloadDeleteStudents) 357 .put("/deleteStudents", payloadDeleteStudents)
358 .then(response => { 358 .then((response) => {
359 this.snackbar = true; 359 this.snackbar = true;
360 this.text = response.data.message; 360 this.text = response.data.message;
361 this.getParticularCourse(); 361 this.getParticularCourse();
362 }) 362 })
363 .catch(error => { 363 .catch((error) => {
364 this.snackbar = true; 364 this.snackbar = true;
365 this.text = error.response.data.message; 365 this.text = error.response.data.message;
366 }); 366 });
367 } 367 }
368 }, 368 },
369 getParticularCourse() { 369 getParticularCourse() {
370 this.selected = []; 370 this.selected = [];
371 var payload = { 371 var payload = {
372 courseId: this.getReport.courseId 372 courseId: this.getReport.courseId,
373 }; 373 };
374 http() 374 http()
375 .get("/getParticularCourse", { 375 .get("/getParticularCourse", {
376 params: payload 376 params: payload,
377 }) 377 })
378 .then(response => { 378 .then((response) => {
379 for (let i = 0; i < response.data.data.enrollStudents.length; i++) { 379 for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
380 var studentId = {}; 380 var studentId = {};
381 studentId = response.data.data.enrollStudents[i]; 381 studentId = response.data.data.enrollStudents[i];
382 for (let j = 0; j < this.studentsData.length; j++) { 382 for (let j = 0; j < this.studentsData.length; j++) {
383 if (studentId.studentId == this.studentsData[j]._id) { 383 if (studentId.studentId == this.studentsData[j]._id) {
384 this.studentsData[j].enroll = true; 384 this.studentsData[j].enroll = true;
385 this.studentsData[j].enrollId = studentId._id; 385 this.studentsData[j].enrollId = studentId._id;
386 this.selected.push(this.studentsData[j]); 386 this.selected.push(this.studentsData[j]);
387 break; 387 break;
388 } 388 }
389 } 389 }
390 } 390 }
391 this.snackbar = true; 391 this.snackbar = true;
392 this.text = response.data.message; 392 this.text = response.data.message;
393 }) 393 })
394 .catch(error => { 394 .catch((error) => {
395 this.snackbar = true; 395 this.snackbar = true;
396 this.text = error.response.data.message; 396 this.text = error.response.data.message;
397 }); 397 });
398 }, 398 },
399 changeSort(column) { 399 changeSort(column) {
400 if (this.pagination.sortBy === column) { 400 if (this.pagination.sortBy === column) {
401 this.pagination.descending = !this.pagination.descending; 401 this.pagination.descending = !this.pagination.descending;
402 } else { 402 } else {
403 this.pagination.sortBy = column; 403 this.pagination.sortBy = column;
404 this.pagination.descending = false; 404 this.pagination.descending = false;
405 } 405 }
406 }, 406 },
407 displaySearch() { 407 displaySearch() {
408 this.show = false; 408 this.show = false;
409 this.showSearch = true; 409 this.showSearch = true;
410 }, 410 },
411 closeSearch() { 411 closeSearch() {
412 this.showSearch = false; 412 this.showSearch = false;
413 this.show = true; 413 this.show = true;
414 this.search = ""; 414 this.search = "";
415 } 415 },
416 }, 416 },
417 mounted() { 417 mounted() {
418 // this.getStudentList(); 418 // this.getStudentList();
419 this.token = this.$store.state.token; 419 this.token = this.$store.state.token;
420 this.role = this.$store.state.role; 420 this.role = this.$store.state.role;
421 this.getAllClass(); 421 this.getAllClass();
422 } 422 },
423 }; 423 };
424 </script> 424 </script>
src/pages/Library/member.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 11
12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> 12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** -->
13 13
14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable> 14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable>
15 <v-card> 15 <v-card>
16 <v-toolbar color="grey lighten-2" flat> 16 <v-toolbar dark class="card-styles" flat>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 <v-toolbar-title>Student Profile</v-toolbar-title> 18 <v-toolbar-title>Student Profile</v-toolbar-title>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-icon @click="closeViewStudent">close</v-icon> 20 <v-icon @click="closeViewStudent">close</v-icon>
21 </v-toolbar> 21 </v-toolbar>
22 <v-card-text style="height: 700px;"> 22 <v-card-text style="height: 700px;">
23 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 23 <v-flex align-center justify-center layout text-xs-center class="mt-3">
24 <v-avatar size="160px"> 24 <v-avatar size="160px">
25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
27 </v-avatar> 27 </v-avatar>
28 </v-flex> 28 </v-flex>
29 <v-container grid-list-md> 29 <v-container grid-list-md>
30 <v-layout wrap> 30 <v-layout wrap>
31 <v-flex xs12> 31 <v-flex xs12>
32 <v-layout wrap> 32 <v-layout wrap>
33 <v-flex xs12 sm6> 33 <v-flex xs12 sm6>
34 <v-layout> 34 <v-layout>
35 <v-flex xs6 sm5> 35 <v-flex xs6 sm5>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Full Name:</b> 37 <b>Full Name:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm7 xs6> 40 <v-flex sm7 xs6>
41 <h5 class="my-1 left">{{ editedItem.name }}</h5> 41 <h5 class="my-1 left">{{ editedItem.name }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm6> 45 <v-flex xs12 sm6>
46 <v-layout> 46 <v-layout>
47 <v-flex xs6 sm4> 47 <v-flex xs6 sm4>
48 <h5 class="right my-1"> 48 <h5 class="right my-1">
49 <b>Email:</b> 49 <b>Email:</b>
50 </h5> 50 </h5>
51 </v-flex> 51 </v-flex>
52 <v-flex sm8 xs6> 52 <v-flex sm8 xs6>
53 <h5 class="my-1 left">{{ editedItem.email }}</h5> 53 <h5 class="my-1 left">{{ editedItem.email }}</h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 <v-layout wrap> 58 <v-layout wrap>
59 <v-flex xs12 sm6> 59 <v-flex xs12 sm6>
60 <v-layout> 60 <v-layout>
61 <v-flex xs6 sm5> 61 <v-flex xs6 sm5>
62 <b> 62 <b>
63 <h5 class="right my-1"> 63 <h5 class="right my-1">
64 <b>Gender:</b> 64 <b>Gender:</b>
65 </h5> 65 </h5>
66 </b> 66 </b>
67 </v-flex> 67 </v-flex>
68 <v-flex sm7 xs6> 68 <v-flex sm7 xs6>
69 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 69 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12 sm6> 73 <v-flex xs12 sm6>
74 <v-layout> 74 <v-layout>
75 <v-flex xs6 sm4> 75 <v-flex xs6 sm4>
76 <b> 76 <b>
77 <h5 class="right my-1"> 77 <h5 class="right my-1">
78 <b>D.O.B:</b> 78 <b>D.O.B:</b>
79 </h5> 79 </h5>
80 </b> 80 </b>
81 </v-flex> 81 </v-flex>
82 <v-flex sm7 xs6> 82 <v-flex sm7 xs6>
83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 <v-layout wrap> 88 <v-layout wrap>
89 <v-flex xs12 sm6> 89 <v-flex xs12 sm6>
90 <v-layout> 90 <v-layout>
91 <v-flex xs6 sm5> 91 <v-flex xs6 sm5>
92 <b> 92 <b>
93 <h5 class="right my-1"> 93 <h5 class="right my-1">
94 <b>Blood Group:</b> 94 <b>Blood Group:</b>
95 </h5> 95 </h5>
96 </b> 96 </b>
97 </v-flex> 97 </v-flex>
98 <v-flex sm7 xs6> 98 <v-flex sm7 xs6>
99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm6> 103 <v-flex xs12 sm6>
104 <v-layout> 104 <v-layout>
105 <v-flex xs6 sm4> 105 <v-flex xs6 sm4>
106 <b> 106 <b>
107 <h5 class="right my-1"> 107 <h5 class="right my-1">
108 <b>Allergies:</b> 108 <b>Allergies:</b>
109 </h5> 109 </h5>
110 </b> 110 </b>
111 </v-flex> 111 </v-flex>
112 <v-flex sm8 xs6> 112 <v-flex sm8 xs6>
113 <h5 class="my-1">{{ editedItem.allergies }}</h5> 113 <h5 class="my-1">{{ editedItem.allergies }}</h5>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-layout wrap> 118 <v-layout wrap>
119 <v-flex xs12 sm6> 119 <v-flex xs12 sm6>
120 <v-layout> 120 <v-layout>
121 <v-flex xs6 sm5> 121 <v-flex xs6 sm5>
122 <b> 122 <b>
123 <h5 class="right my-1"> 123 <h5 class="right my-1">
124 <b>Height:</b> 124 <b>Height:</b>
125 </h5> 125 </h5>
126 </b> 126 </b>
127 </v-flex> 127 </v-flex>
128 <v-flex sm7 xs6> 128 <v-flex sm7 xs6>
129 <h5 class="my-1 left">{{ editedItem.height }}</h5> 129 <h5 class="my-1 left">{{ editedItem.height }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm6> 133 <v-flex xs12 sm6>
134 <v-layout> 134 <v-layout>
135 <v-flex xs6 sm4> 135 <v-flex xs6 sm4>
136 <b> 136 <b>
137 <h5 class="right my-1"> 137 <h5 class="right my-1">
138 <b>Weight:</b> 138 <b>Weight:</b>
139 </h5> 139 </h5>
140 </b> 140 </b>
141 </v-flex> 141 </v-flex>
142 <v-flex sm8 xs6> 142 <v-flex sm8 xs6>
143 <h5 class="my-1">{{ editedItem.weight }}</h5> 143 <h5 class="my-1">{{ editedItem.weight }}</h5>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout wrap> 148 <v-layout wrap>
149 <v-flex xs12 sm6> 149 <v-flex xs12 sm6>
150 <v-layout> 150 <v-layout>
151 <v-flex xs6 sm5> 151 <v-flex xs6 sm5>
152 <b> 152 <b>
153 <h5 class="right my-1"> 153 <h5 class="right my-1">
154 <b>City:</b> 154 <b>City:</b>
155 </h5> 155 </h5>
156 </b> 156 </b>
157 </v-flex> 157 </v-flex>
158 <v-flex sm7 xs6> 158 <v-flex sm7 xs6>
159 <h5 class="my-1 left">{{ editedItem.city }}</h5> 159 <h5 class="my-1 left">{{ editedItem.city }}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 <v-flex xs12 sm6> 163 <v-flex xs12 sm6>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <b> 166 <b>
167 <h5 class="right my-1"> 167 <h5 class="right my-1">
168 <b>State:</b> 168 <b>State:</b>
169 </h5> 169 </h5>
170 </b> 170 </b>
171 </v-flex> 171 </v-flex>
172 <v-flex sm8 xs6> 172 <v-flex sm8 xs6>
173 <h5 class="my-1">{{ editedItem.state }}</h5> 173 <h5 class="my-1">{{ editedItem.state }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-layout wrap> 178 <v-layout wrap>
179 <v-flex xs12 sm6> 179 <v-flex xs12 sm6>
180 <v-layout> 180 <v-layout>
181 <v-flex xs6 sm5> 181 <v-flex xs6 sm5>
182 <b> 182 <b>
183 <h5 class="right my-1"> 183 <h5 class="right my-1">
184 <b>Pincode:</b> 184 <b>Pincode:</b>
185 </h5> 185 </h5>
186 </b> 186 </b>
187 </v-flex> 187 </v-flex>
188 <v-flex sm7 xs6> 188 <v-flex sm7 xs6>
189 <h5 class="my-1">{{ editedItem.pincode }}</h5> 189 <h5 class="my-1">{{ editedItem.pincode }}</h5>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm5> 193 <v-flex xs12 sm5>
194 <v-layout> 194 <v-layout>
195 <v-flex xs6 sm5> 195 <v-flex xs6 sm5>
196 <b> 196 <b>
197 <h5 class="right my-1"> 197 <h5 class="right my-1">
198 <b>Country:</b> 198 <b>Country:</b>
199 </h5> 199 </h5>
200 </b> 200 </b>
201 </v-flex> 201 </v-flex>
202 <v-flex sm7 xs6> 202 <v-flex sm7 xs6>
203 <h5 class="my-1">{{ editedItem.country }}</h5> 203 <h5 class="my-1">{{ editedItem.country }}</h5>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 <v-layout wrap> 208 <v-layout wrap>
209 <v-flex xs12 sm6> 209 <v-flex xs12 sm6>
210 <v-layout> 210 <v-layout>
211 <v-flex sm5 xs6> 211 <v-flex sm5 xs6>
212 <b> 212 <b>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Mobile No:</b> 214 <b>Mobile No:</b>
215 </h5> 215 </h5>
216 </b> 216 </b>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs6> 218 <v-flex sm6 xs6>
219 <h5 class="my-1">{{ editedItem.mobile }}</h5> 219 <h5 class="my-1">{{ editedItem.mobile }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 </v-flex> 222 </v-flex>
223 <v-flex xs12 sm6> 223 <v-flex xs12 sm6>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <b> 226 <b>
227 <h5 class="right my-1"> 227 <h5 class="right my-1">
228 <b>Library ID :</b> 228 <b>Library ID :</b>
229 </h5> 229 </h5>
230 </b> 230 </b>
231 </v-flex> 231 </v-flex>
232 <v-flex sm8 xs6> 232 <v-flex sm8 xs6>
233 <h5 class="my-1">{{ editedItem.libraryId }}</h5> 233 <h5 class="my-1">{{ editedItem.libraryId }}</h5>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 </v-layout> 237 </v-layout>
238 <v-layout wrap> 238 <v-layout wrap>
239 <v-flex xs12 sm5> 239 <v-flex xs12 sm5>
240 <v-layout> 240 <v-layout>
241 <v-flex xs6 sm6> 241 <v-flex xs6 sm6>
242 <b> 242 <b>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Library Fee:</b> 244 <b>Library Fee:</b>
245 </h5> 245 </h5>
246 </b> 246 </b>
247 </v-flex> 247 </v-flex>
248 <v-flex sm6 xs6> 248 <v-flex sm6 xs6>
249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5> 249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm6> 253 <v-flex xs12 sm6>
254 <v-layout> 254 <v-layout>
255 <v-flex xs6 sm6> 255 <v-flex xs6 sm6>
256 <b> 256 <b>
257 <h5 class="my-1 right"> 257 <h5 class="my-1 right">
258 <b>Academic Year:</b> 258 <b>Academic Year:</b>
259 </h5> 259 </h5>
260 </b> 260 </b>
261 </v-flex> 261 </v-flex>
262 <v-flex sm5 xs6> 262 <v-flex sm5 xs6>
263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout wrap> 268 <v-layout wrap>
269 <v-flex xs12 sm5> 269 <v-flex xs12 sm5>
270 <v-layout> 270 <v-layout>
271 <v-flex xs6 sm6> 271 <v-flex xs6 sm6>
272 <b> 272 <b>
273 <h5 class="my-1 right"> 273 <h5 class="my-1 right">
274 <b>Medical Notes:</b> 274 <b>Medical Notes:</b>
275 </h5> 275 </h5>
276 </b> 276 </b>
277 </v-flex> 277 </v-flex>
278 <v-flex sm5 xs6> 278 <v-flex sm5 xs6>
279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-flex> 282 </v-flex>
283 <v-flex xs12 sm6> 283 <v-flex xs12 sm6>
284 <v-layout> 284 <v-layout>
285 <v-flex xs6 sm6> 285 <v-flex xs6 sm6>
286 <b> 286 <b>
287 <h5 class="right my-1"> 287 <h5 class="right my-1">
288 <b>Roll No. :</b> 288 <b>Roll No. :</b>
289 </h5> 289 </h5>
290 </b> 290 </b>
291 </v-flex> 291 </v-flex>
292 <v-flex sm6 xs8> 292 <v-flex sm6 xs8>
293 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 293 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout wrap> 298 <v-layout wrap>
299 <v-flex xs12 sm5> 299 <v-flex xs12 sm5>
300 <v-layout> 300 <v-layout>
301 <v-flex xs6 sm6> 301 <v-flex xs6 sm6>
302 <b> 302 <b>
303 <h5 class="my-1 right"> 303 <h5 class="my-1 right">
304 <b>present Address:</b> 304 <b>present Address:</b>
305 </h5> 305 </h5>
306 </b> 306 </b>
307 </v-flex> 307 </v-flex>
308 <v-flex sm5 xs6> 308 <v-flex sm5 xs6>
309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-flex> 312 </v-flex>
313 <v-flex xs12 sm6> 313 <v-flex xs12 sm6>
314 <v-layout> 314 <v-layout>
315 <v-flex xs6 sm6> 315 <v-flex xs6 sm6>
316 <b> 316 <b>
317 <h5 class="right my-1"> 317 <h5 class="right my-1">
318 <b>present Address:</b> 318 <b>present Address:</b>
319 </h5> 319 </h5>
320 </b> 320 </b>
321 </v-flex> 321 </v-flex>
322 <v-flex sm6 xs8> 322 <v-flex sm6 xs8>
323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-container> 330 </v-container>
331 </v-card-text> 331 </v-card-text>
332 </v-card> 332 </v-card>
333 </v-dialog> 333 </v-dialog>
334 334
335 <!-- Edit Student Library Member Dialog --> 335 <!-- Edit Student Library Member Dialog -->
336 336
337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable> 337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable>
338 <v-card flat> 338 <v-card flat>
339 <v-toolbar color="grey lighten-2" flat> 339 <v-toolbar dark class="card-styles" flat>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 <v-toolbar-title> 341 <v-toolbar-title>
342 <h3>Edit Student Profile</h3> 342 <h3>Edit Student Profile</h3>
343 </v-toolbar-title> 343 </v-toolbar-title>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 </v-toolbar> 345 </v-toolbar>
346 <v-card-text style="height: 426px;"> 346 <v-card-text style="height: 426px;">
347 <v-form ref="form"> 347 <v-form ref="form">
348 <v-container fluid> 348 <v-container fluid>
349 <v-layout> 349 <v-layout>
350 <v-flex 350 <v-flex
351 xs12 351 xs12
352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
353 > 353 >
354 <v-avatar size="160px"> 354 <v-avatar size="160px">
355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
356 <img 356 <img
357 :src="editedItem.profilePicUrl" 357 :src="editedItem.profilePicUrl"
358 v-else-if="editedItem.profilePicUrl && !imageUrl" 358 v-else-if="editedItem.profilePicUrl && !imageUrl"
359 /> 359 />
360 <img 360 <img
361 v-if="imageUrl" 361 v-if="imageUrl"
362 :src="imageUrl" 362 :src="imageUrl"
363 height="150" 363 height="150"
364 style="border-radius:50%; width:200px" 364 style="border-radius:50%; width:200px"
365 /> 365 />
366 </v-avatar> 366 </v-avatar>
367 </v-flex> 367 </v-flex>
368 </v-layout> 368 </v-layout>
369 <v-layout wrap> 369 <v-layout wrap>
370 <v-flex xs12 sm12 md10> 370 <v-flex xs12 sm12 md10>
371 <v-layout> 371 <v-layout>
372 <v-flex xs4 class="pt-4 subheading"> 372 <v-flex xs4 class="pt-4 subheading">
373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> 373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> 374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 class="ml-3"> 376 <v-flex xs8 class="ml-3">
377 <v-text-field 377 <v-text-field
378 v-model="editedItem.libraryId" 378 v-model="editedItem.libraryId"
379 placeholder="fill your Library ID" 379 placeholder="fill your Library ID"
380 ></v-text-field> 380 ></v-text-field>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-flex> 383 </v-flex>
384 <v-flex xs12 sm12 md10> 384 <v-flex xs12 sm12 md10>
385 <v-layout> 385 <v-layout>
386 <v-flex xs4 class="pt-4 subheading"> 386 <v-flex xs4 class="pt-4 subheading">
387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> 387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> 388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs8 class="ml-3"> 390 <v-flex xs8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 v-model="editedItem.libraryFee" 392 v-model="editedItem.libraryFee"
393 placeholder="fill your Library Fee" 393 placeholder="fill your Library Fee"
394 ></v-text-field> 394 ></v-text-field>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 <v-layout> 399 <v-layout>
400 <v-flex xs12 sm12> 400 <v-flex xs12 sm12>
401 <v-layout> 401 <v-layout>
402 <v-flex xs6> 402 <v-flex xs6>
403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn> 403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn>
404 </v-flex> 404 </v-flex>
405 <v-flex xs6> 405 <v-flex xs6>
406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card-text> 413 </v-card-text>
414 </v-card> 414 </v-card>
415 </v-dialog> 415 </v-dialog>
416 <!-- Add Student Library Member Dialog --> 416 <!-- Add Student Library Member Dialog -->
417 417
418 <v-dialog v-model="addLibrary" max-width="600px"> 418 <v-dialog v-model="addLibrary" max-width="600px">
419 <v-toolbar color="grey lighten-2"> 419 <v-toolbar dark class="card-styles" flat>
420 <v-spacer></v-spacer> 420 <v-spacer></v-spacer>
421 <v-toolbar-title> 421 <v-toolbar-title>
422 <h3>Library Member</h3> 422 <h3>Library Member</h3>
423 </v-toolbar-title> 423 </v-toolbar-title>
424 <v-spacer></v-spacer> 424 <v-spacer></v-spacer>
425 </v-toolbar> 425 </v-toolbar>
426 <v-card> 426 <v-card>
427 <v-card-text> 427 <v-card-text>
428 <v-layout wrap justify-center> 428 <v-layout wrap justify-center>
429 <v-flex xs12 sm12 md10> 429 <v-flex xs12 sm12 md10>
430 <v-form ref="form" v-model="valid" lazy-validation> 430 <v-form ref="form" v-model="valid" lazy-validation>
431 <v-layout> 431 <v-layout>
432 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right pr-3">Library Id:</label> 433 <label class="right pr-3">Library Id:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs8> 435 <v-flex xs8>
436 <v-text-field 436 <v-text-field
437 v-model="addBook.libraryId" 437 v-model="addBook.libraryId"
438 :rules="libraryIdRules" 438 :rules="libraryIdRules"
439 type="number" 439 type="number"
440 placeholder="fill your Library ID" 440 placeholder="fill your Library ID"
441 ></v-text-field> 441 ></v-text-field>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 <v-layout> 444 <v-layout>
445 <v-flex xs4 class="pt-4 subheading"> 445 <v-flex xs4 class="pt-4 subheading">
446 <label class="right pr-3">Library Fee:</label> 446 <label class="right pr-3">Library Fee:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8> 448 <v-flex xs8>
449 <v-text-field 449 <v-text-field
450 v-model="addBook.libraryFee" 450 v-model="addBook.libraryFee"
451 type="number" 451 type="number"
452 :rules="libraryFeeRules" 452 :rules="libraryFeeRules"
453 placeholder="fill your Library Fee" 453 placeholder="fill your Library Fee"
454 ></v-text-field> 454 ></v-text-field>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 <v-card-actions> 457 <v-card-actions>
458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn> 458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn>
459 <v-spacer></v-spacer> 459 <v-spacer></v-spacer>
460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn> 460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn>
461 </v-card-actions> 461 </v-card-actions>
462 </v-form> 462 </v-form>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 </v-card-text> 465 </v-card-text>
466 </v-card> 466 </v-card>
467 </v-dialog> 467 </v-dialog>
468 <!-- ****** EXISTING MEMBER TABLE ****** --> 468 <!-- ****** EXISTING MEMBER TABLE ****** -->
469 <v-card flat> 469 <v-card flat>
470 <!-- <h4 470 <!-- <h4
471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
472 >Library Member</h4> --> 472 >Library Member</h4>-->
473 <v-card-actions> 473 <v-card-actions>
474 <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> --> 474 <!-- <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> -->
475 <v-spacer></v-spacer> 475 <v-spacer></v-spacer>
476 <v-flex xs12 sm4 md2> 476 <v-flex xs12 sm4 md2>
477 <v-select 477 <v-select
478 outline 478 outline
479 small 479 small
480 :items="addclass" 480 :items="addclass"
481 label="Select Class" 481 label="Select Class"
482 v-model="selectStudents" 482 v-model="selectStudents"
483 item-text="classNum" 483 item-text="classNum"
484 item-value="_id" 484 item-value="_id"
485 name="Select Class" 485 name="Select Class"
486 @change="getAllStudents(selectStudents)" 486 @change="getAllStudents(selectStudents)"
487 class="px-2" 487 class="px-2"
488 required 488 required
489 ></v-select> 489 ></v-select>
490 </v-flex> 490 </v-flex>
491 </v-card-actions> 491 </v-card-actions>
492 </v-card> 492 </v-card>
493 <v-card class="transparent"> 493 <v-card class="transparent">
494 <v-data-table 494 <v-data-table
495 :headers="headers" 495 :headers="headers"
496 :items="studentData" 496 :items="studentData"
497 :pagination.sync="pagination" 497 :pagination.sync="pagination"
498 :search="search" 498 :search="search"
499 > 499 >
500 <template slot="items" slot-scope="props"> 500 <template slot="items" slot-scope="props">
501 <tr class="tr"> 501 <tr class="tr">
502 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td> 502 <td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
503 <td class="td td-row text-xs-center"> 503 <td class="td td-row text-xs-center">
504 <v-avatar> 504 <v-avatar>
505 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 505 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
506 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 506 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
507 </v-avatar> 507 </v-avatar>
508 </td> 508 </td>
509 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 509 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
510 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td> 510 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
511 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 511 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
512 <td class="td td-row text-xs-center"> 512 <td class="td td-row text-xs-center">
513 <v-tooltip top> 513 <v-tooltip top>
514 <img 514 <img
515 slot="activator" 515 slot="activator"
516 v-if="!props.item.libraryId" 516 v-if="!props.item.libraryId"
517 style="cursor:pointer; width:25px; height:18px; " 517 style="cursor:pointer; width:25px; height:18px; "
518 @click="addLibraryData(props.item)" 518 @click="addLibraryData(props.item)"
519 src="/static/icon/add.png" 519 src="/static/icon/add.png"
520 /> 520 />
521 <span>Add</span> 521 <span>Add</span>
522 </v-tooltip> 522 </v-tooltip>
523 <span v-if="props.item.libraryId"> 523 <span v-if="props.item.libraryId">
524 <v-tooltip top> 524 <v-tooltip top>
525 <img 525 <img
526 slot="activator" 526 slot="activator"
527 style="cursor:pointer; width:25px; height:18px; " 527 style="cursor:pointer; width:25px; height:18px; "
528 class="mr5" 528 class="mr5"
529 @click="profile(props.item)" 529 @click="profile(props.item)"
530 src="/static/icon/eye1.png" 530 src="/static/icon/eye1.png"
531 /> 531 />
532 <span>View</span> 532 <span>View</span>
533 </v-tooltip> 533 </v-tooltip>
534 <v-tooltip top> 534 <v-tooltip top>
535 <img 535 <img
536 slot="activator" 536 slot="activator"
537 style="cursor:pointer; width:20px; height:18px; " 537 style="cursor:pointer; width:20px; height:18px; "
538 class="mr5" 538 class="mr5"
539 @click="editItem(props.item)" 539 @click="editItem(props.item)"
540 src="/static/icon/edit1.png" 540 src="/static/icon/edit1.png"
541 /> 541 />
542 <span>Edit</span> 542 <span>Edit</span>
543 </v-tooltip> 543 </v-tooltip>
544 <v-tooltip top> 544 <v-tooltip top>
545 <img 545 <img
546 slot="activator" 546 slot="activator"
547 style="cursor:pointer; width:20px; height:20px; " 547 style="cursor:pointer; width:20px; height:20px; "
548 class="mr5" 548 class="mr5"
549 @click="deleteItem(props.item)" 549 @click="deleteItem(props.item)"
550 src="/static/icon/delete1.png" 550 src="/static/icon/delete1.png"
551 /> 551 />
552 <span>Delete</span> 552 <span>Delete</span>
553 </v-tooltip> 553 </v-tooltip>
554 </span> 554 </span>
555 </td> 555 </td>
556 </tr> 556 </tr>
557 </template> 557 </template>
558 <v-alert 558 <v-alert
559 slot="no-results" 559 slot="no-results"
560 :value="true" 560 :value="true"
561 color="error" 561 color="error"
562 icon="warning" 562 icon="warning"
563 >Your search for "{{ search }}" found no results.</v-alert> 563 >Your search for "{{ search }}" found no results.</v-alert>
564 </v-data-table> 564 </v-data-table>
565 </v-card> 565 </v-card>
566 <div class="loader" v-if="showLoader"> 566 <div class="loader" v-if="showLoader">
567 <v-progress-circular indeterminate color="white"></v-progress-circular> 567 <v-progress-circular indeterminate color="white"></v-progress-circular>
568 </div> 568 </div>
569 </div> 569 </div>
570 </template> 570 </template>
571 571
572 <script> 572 <script>
573 import http from "@/Services/http.js"; 573 import http from "@/Services/http.js";
574 import Util from "@/util"; 574 import Util from "@/util";
575 import moment from "moment"; 575 import moment from "moment";
576 576
577 export default { 577 export default {
578 data: () => ({ 578 data: () => ({
579 snackbar: false, 579 snackbar: false,
580 y: "top", 580 y: "top",
581 x: "right", 581 x: "right",
582 mode: "", 582 mode: "",
583 timeout: 3000, 583 timeout: 3000,
584 text: "", 584 text: "",
585 showLoader: false, 585 showLoader: false,
586 loading: false, 586 loading: false,
587 addLibrary: false, 587 addLibrary: false,
588 dialogStudents: false, 588 dialogStudents: false,
589 editStudentdialog: false, 589 editStudentdialog: false,
590 valid: true, 590 valid: true,
591 libraryIdRules: [v => !!v || "Library Id Fee is required"], 591 libraryIdRules: [(v) => !!v || "Library Id Fee is required"],
592 libraryFeeRules: [v => !!v || "Library Fee is required"], 592 libraryFeeRules: [(v) => !!v || "Library Fee is required"],
593 date: null, 593 date: null,
594 search: "", 594 search: "",
595 addclass: [], 595 addclass: [],
596 pagination: { 596 pagination: {
597 rowsPerPage: 15 597 rowsPerPage: 15,
598 }, 598 },
599 addBook: {}, 599 addBook: {},
600 imageName: "", 600 imageName: "",
601 imageUrl: "", 601 imageUrl: "",
602 imageFile: "", 602 imageFile: "",
603 headers: [ 603 headers: [
604 { 604 {
605 text: "No", 605 text: "No",
606 align: "center", 606 align: "center",
607 sortable: false, 607 sortable: false,
608 value: "index" 608 value: "index",
609 }, 609 },
610 { 610 {
611 text: "Photo", 611 text: "Photo",
612 value: "uploadCover", 612 value: "uploadCover",
613 sortable: false, 613 sortable: false,
614 align: "center" 614 align: "center",
615 }, 615 },
616 { text: "Name", value: "name", sortable: false, align: "center" }, 616 { text: "Name", value: "name", sortable: false, align: "center" },
617 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 617 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
618 { text: "Email", value: "email", sortable: false, align: "center" }, 618 { text: "Email", value: "email", sortable: false, align: "center" },
619 { text: "Action", value: "", sortable: false, align: "center" } 619 { text: "Action", value: "", sortable: false, align: "center" },
620 ], 620 ],
621 studentData: [], 621 studentData: [],
622 editedItem: {}, 622 editedItem: {},
623 parentId: "", 623 parentId: "",
624 token: "", 624 token: "",
625 selectStudents: {}, 625 selectStudents: {},
626 editedIndex: -1 626 editedIndex: -1,
627 }), 627 }),
628 methods: { 628 methods: {
629 getAllStudents() { 629 getAllStudents() {
630 this.showLoader = true; 630 this.showLoader = true;
631 http() 631 http()
632 .get("/getStudentsList", { 632 .get("/getStudentsList", {
633 params: { 633 params: {
634 classId: this.selectStudents, 634 classId: this.selectStudents,
635 schoolId: this.$store.state.schoolId 635 schoolId: this.$store.state.schoolId,
636 }, 636 },
637 headers: { Authorization: "Bearer " + this.token } 637 headers: { Authorization: "Bearer " + this.token },
638 }) 638 })
639 .then(response => { 639 .then((response) => {
640 this.studentData = response.data.data; 640 this.studentData = response.data.data;
641 this.showLoader = false; 641 this.showLoader = false;
642 }) 642 })
643 .catch(error => { 643 .catch((error) => {
644 // console.log("err====>", err); 644 // console.log("err====>", err);
645 if (error.response.status === 401) { 645 if (error.response.status === 401) {
646 this.$router.replace({ path: "/" }); 646 this.$router.replace({ path: "/" });
647 this.$store.dispatch("setToken", null); 647 this.$store.dispatch("setToken", null);
648 this.$store.dispatch("Id", null); 648 this.$store.dispatch("Id", null);
649 this.$store.dispatch("Role", null); 649 this.$store.dispatch("Role", null);
650 } 650 }
651 }); 651 });
652 }, 652 },
653 addLibraryData(item) { 653 addLibraryData(item) {
654 this.addBook.studentId = item._id; 654 this.addBook.studentId = item._id;
655 this.addLibrary = true; 655 this.addLibrary = true;
656 }, 656 },
657 editItem(item) { 657 editItem(item) {
658 this.editedIndex = this.studentData.indexOf(item); 658 this.editedIndex = this.studentData.indexOf(item);
659 this.editedItem = Object.assign({}, item); 659 this.editedItem = Object.assign({}, item);
660 this.editStudentdialog = true; 660 this.editStudentdialog = true;
661 }, 661 },
662 dates: function(date) { 662 dates: function (date) {
663 return moment(date).format("MMMM DD, YYYY"); 663 return moment(date).format("MMMM DD, YYYY");
664 }, 664 },
665 profile(item) { 665 profile(item) {
666 console.log("item", item); 666 console.log("item", item);
667 this.editedIndex = this.studentData.indexOf(item); 667 this.editedIndex = this.studentData.indexOf(item);
668 this.editedItem = Object.assign({}, item); 668 this.editedItem = Object.assign({}, item);
669 this.dialogStudents = true; 669 this.dialogStudents = true;
670 }, 670 },
671 deleteItem(item) { 671 deleteItem(item) {
672 let deleteStudentLibraryData = { 672 let deleteStudentLibraryData = {
673 studentId: item._id, 673 studentId: item._id,
674 libraryId: item.libraryId 674 libraryId: item.libraryId,
675 }; 675 };
676 http() 676 http()
677 .put( 677 .put(
678 "/deleteLibrary", 678 "/deleteLibrary",
679 confirm("Are you sure you want to delete this?") && 679 confirm("Are you sure you want to delete this?") &&
680 deleteStudentLibraryData 680 deleteStudentLibraryData
681 ) 681 )
682 .then(response => { 682 .then((response) => {
683 this.snackbar = true; 683 this.snackbar = true;
684 this.text = "Delete Successfully"; 684 this.text = "Delete Successfully";
685 this.getAllStudents(); 685 this.getAllStudents();
686 }) 686 })
687 .catch(error => { 687 .catch((error) => {
688 // console.log(error); 688 // console.log(error);
689 }); 689 });
690 }, 690 },
691 close() { 691 close() {
692 this.dialog = false; 692 this.dialog = false;
693 }, 693 },
694 closeEditStudentDialog() { 694 closeEditStudentDialog() {
695 this.editStudentdialog = false; 695 this.editStudentdialog = false;
696 }, 696 },
697 closeViewStudent() { 697 closeViewStudent() {
698 this.dialogStudents = false; 698 this.dialogStudents = false;
699 }, 699 },
700 submit() { 700 submit() {
701 if (this.$refs.form.validate()) { 701 if (this.$refs.form.validate()) {
702 this.loading = true; 702 this.loading = true;
703 this.addBook.schoolId = this.$store.state.schoolId; 703 this.addBook.schoolId = this.$store.state.schoolId;
704 http() 704 http()
705 .put("/addLibrary", this.addBook) 705 .put("/addLibrary", this.addBook)
706 .then(response => { 706 .then((response) => {
707 this.snackbar = true; 707 this.snackbar = true;
708 this.text = "New Library Member added successfully"; 708 this.text = "New Library Member added successfully";
709 this.getAllStudents(); 709 this.getAllStudents();
710 this.clear(); 710 this.clear();
711 this.addLibrary = false; 711 this.addLibrary = false;
712 this.loading = false; 712 this.loading = false;
713 }) 713 })
714 .catch(error => { 714 .catch((error) => {
715 // console.log(error); 715 // console.log(error);
716 this.snackbar = true; 716 this.snackbar = true;
717 this.text = error.response.data.message; 717 this.text = error.response.data.message;
718 this.loading = false; 718 this.loading = false;
719 }); 719 });
720 } 720 }
721 }, 721 },
722 clear() { 722 clear() {
723 this.$refs.form.reset(); 723 this.$refs.form.reset();
724 }, 724 },
725 save() { 725 save() {
726 this.editedItem.studentId = this.editedItem._id; 726 this.editedItem.studentId = this.editedItem._id;
727 http() 727 http()
728 .put("/updateLibrary", this.editedItem) 728 .put("/updateLibrary", this.editedItem)
729 .then(response => { 729 .then((response) => {
730 this.snackbar = true; 730 this.snackbar = true;
731 this.text = "Edit Library Member Successfully"; 731 this.text = "Edit Library Member Successfully";
732 this.getAllStudents(); 732 this.getAllStudents();
733 this.closeEditStudentDialog(); 733 this.closeEditStudentDialog();
734 }) 734 })
735 .catch(error => { 735 .catch((error) => {
736 this.snackbar = true; 736 this.snackbar = true;
737 this.text = error.response.data.statusText; 737 this.text = error.response.data.statusText;
738 }); 738 });
739 }, 739 },
740 getAllClass() { 740 getAllClass() {
741 http() 741 http()
742 .get("/getClassesList", { 742 .get("/getClassesList", {
743 params: { 743 params: {
744 schoolId: this.$store.state.schoolId 744 schoolId: this.$store.state.schoolId,
745 }, 745 },
746 headers: { Authorization: "Bearer " + this.token } 746 headers: { Authorization: "Bearer " + this.token },
747 }) 747 })
748 .then(response => { 748 .then((response) => {
749 this.addclass = response.data.data; 749 this.addclass = response.data.data;
750 }) 750 })
751 .catch(err => { 751 .catch((err) => {
752 // console.log("err====>", err); 752 // console.log("err====>", err);
753 this.$router.replace({ path: "/" }); 753 this.$router.replace({ path: "/" });
754 }); 754 });
755 } 755 },
756 }, 756 },
757 mounted() { 757 mounted() {
758 // this.getStudentList(); 758 // this.getStudentList();
759 this.token = this.$store.state.token; 759 this.token = this.$store.state.token;
760 this.getAllClass(); 760 this.getAllClass();
761 }, 761 },
762 created() { 762 created() {
763 this.$root.$on("app:search", search => { 763 this.$root.$on("app:search", (search) => {
764 this.search = search; 764 this.search = search;
765 }); 765 });
766 }, 766 },
767 beforeDestroy() { 767 beforeDestroy() {
768 // dont forget to remove the listener 768 // dont forget to remove the listener
769 this.$root.$off("app:search"); 769 this.$root.$off("app:search");
770 } 770 },
771 }; 771 };
772 </script> 772 </script>
773 <style scoped> 773 <style scoped>
774 .active { 774 .active {
775 background-color: gray; 775 background-color: gray;
776 color: white !important; 776 color: white !important;
777 } 777 }
778 .activebtn { 778 .activebtn {
779 color: black !important; 779 color: black !important;
780 } 780 }
781 </style> 781 </style>
src/pages/Meet/meet.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-card flat class="elevation-0 transparent"> 3 <v-card flat class="elevation-0 transparent">
4 <v-flex xs12> 4 <v-flex xs12>
5 <v-layout> 5 <v-layout>
6 <v-flex lg2> 6 <v-flex lg2>
7 <v-select 7 <v-select
8 :items="addclass" 8 :items="addclass"
9 label="Select Class" 9 label="Select Class"
10 v-model="selectStudents.classId" 10 v-model="selectStudents.classId"
11 item-text="classNum" 11 item-text="classNum"
12 item-value="_id" 12 item-value="_id"
13 name="Select Class" 13 name="Select Class"
14 :rules="classRules" 14 :rules="classRules"
15 class="ml-4" 15 class="ml-4"
16 ></v-select> 16 ></v-select>
17 </v-flex> 17 </v-flex>
18 <!-- <v-flex xs3> 18 <!-- <v-flex xs3>
19 <v-select 19 <v-select
20 :items="addSection" 20 :items="addSection"
21 label="Select Section" 21 label="Select Section"
22 v-model="selectStudents.selectSection" 22 v-model="selectStudents.selectSection"
23 item-text="name" 23 item-text="name"
24 item-value="_id" 24 item-value="_id"
25 name="Select Section" 25 name="Select Section"
26 :rules="sectionRules" 26 :rules="sectionRules"
27 class="px-2" 27 class="px-2"
28 required 28 required
29 ></v-select> 29 ></v-select>
30 </v-flex>--> 30 </v-flex>-->
31 <v-flex xs3> 31 <v-flex xs3>
32 <v-btn 32 <v-btn
33 @click="createRoom(selectStudents.classId)" 33 @click="createRoom(selectStudents.classId)"
34 round 34 round
35 dark 35 dark
36 :loading="loading" 36 :loading="loading"
37 class="add-button mt-3" 37 class="open-dialog-button"
38 >Find</v-btn> 38 >Find</v-btn>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 </v-card> 42 </v-card>
43 <div id="jitsi-container"></div> 43 <div id="jitsi-container"></div>
44 </v-container> 44 </v-container>
45 </template> 45 </template>
46 <script> 46 <script>
47 import http from "@/Services/http.js"; 47 import http from "@/Services/http.js";
48 import moment from "moment"; 48 import moment from "moment";
49 49
50 export default { 50 export default {
51 data() { 51 data() {
52 return { 52 return {
53 token: "", 53 token: "",
54 selectStudents: {}, 54 selectStudents: {},
55 classRules: [v => !!v || " Class Name is required"], 55 classRules: [(v) => !!v || " Class Name is required"],
56 sectionRules: [v => !!v || " Section Name is required"], 56 sectionRules: [(v) => !!v || " Section Name is required"],
57 addclass: [], 57 addclass: [],
58 addSection: [], 58 addSection: [],
59 loading: false, 59 loading: false,
60 room: "", 60 room: "",
61 username: "", 61 username: "",
62 roomPassword: "" 62 roomPassword: "",
63 }; 63 };
64 }, 64 },
65 methods: { 65 methods: {
66 startConference() { 66 startConference() {
67 var _this = this; 67 var _this = this;
68 try { 68 try {
69 const domain = "meet.intrack.in"; 69 const domain = "meet.intrack.in";
70 const options = { 70 const options = {
71 audioInput: "<deviceLabel>", 71 audioInput: "<deviceLabel>",
72 audioOutput: "<deviceLabel>", 72 audioOutput: "<deviceLabel>",
73 videoInput: "<deviceLabel>", 73 videoInput: "<deviceLabel>",
74 roomName: this.room, 74 roomName: this.room,
75 height: 500, 75 height: 500,
76 parentNode: document.getElementById("jitsi-container"), 76 parentNode: document.getElementById("jitsi-container"),
77 interfaceConfigOverwrite: { 77 interfaceConfigOverwrite: {
78 filmStripOnly: false, 78 filmStripOnly: false,
79 SHOW_JITSI_WATERMARK: false, 79 SHOW_JITSI_WATERMARK: false,
80 TOOLBAR_BUTTONS: [ 80 TOOLBAR_BUTTONS: [
81 "microphone", 81 "microphone",
82 "camera", 82 "camera",
83 "closedcaptions", 83 "closedcaptions",
84 "desktop", 84 "desktop",
85 "fullscreen", 85 "fullscreen",
86 "fodeviceselection", 86 "fodeviceselection",
87 "hangup", 87 "hangup",
88 "profile", 88 "profile",
89 "info", 89 "info",
90 "chat", 90 "chat",
91 "recording", 91 "recording",
92 "livestreaming", 92 "livestreaming",
93 "etherpad", 93 "etherpad",
94 "sharedvideo", 94 "sharedvideo",
95 "settings", 95 "settings",
96 "raisehand", 96 "raisehand",
97 "videoquality", 97 "videoquality",
98 "filmstrip", 98 "filmstrip",
99 "invite", 99 "invite",
100 "feedback", 100 "feedback",
101 "stats", 101 "stats",
102 "shortcuts", 102 "shortcuts",
103 "tileview" 103 "tileview",
104 ] 104 ],
105 }, 105 },
106 configOverwrite: { 106 configOverwrite: {
107 disableSimulcast: false 107 disableSimulcast: false,
108 }, 108 },
109 teacherName: "", 109 teacherName: "",
110 romm: "" 110 romm: "",
111 }; 111 };
112 112
113 this.api = new JitsiMeetExternalAPI(domain, options); 113 this.api = new JitsiMeetExternalAPI(domain, options);
114 this.api.addEventListener("videoConferenceJoined", () => { 114 this.api.addEventListener("videoConferenceJoined", () => {
115 console.log("Local User Joined"); 115 console.log("Local User Joined");
116 116
117 _this.api.executeCommand("displayName", _this.username); 117 _this.api.executeCommand("displayName", _this.username);
118 _this.api.executeCommand("password", this.roomPassword); 118 _this.api.executeCommand("password", this.roomPassword);
119 }); 119 });
120 } catch (error) { 120 } catch (error) {
121 console.error("Failed to load Jitsi API", error); 121 console.error("Failed to load Jitsi API", error);
122 } 122 }
123 }, 123 },
124 openRoom() { 124 openRoom() {
125 // verify the JitsiMeetExternalAPI constructor is added to the global.. 125 // verify the JitsiMeetExternalAPI constructor is added to the global..
126 // if (this.teacherName != "" || this.room != "") { 126 // if (this.teacherName != "" || this.room != "") {
127 // if (window.JitsiMeetExternalAPI) { 127 // if (window.JitsiMeetExternalAPI) {
128 // // var person = prompt("Please enter your name:", "Rabie"); 128 // // var person = prompt("Please enter your name:", "Rabie");
129 // if (person != null || person != "") this.username = this.teacherName; 129 // if (person != null || person != "") this.username = this.teacherName;
130 // var room = prompt("Please enter your room:", "Test Room"); 130 // var room = prompt("Please enter your room:", "Test Room");
131 // if (room != null || room != "") this.room = this.room; 131 // if (room != null || room != "") this.room = this.room;
132 // this.startConference(); 132 // this.startConference();
133 // } else alert("Jitsi Meet API script not loaded"); 133 // } else alert("Jitsi Meet API script not loaded");
134 // } 134 // }
135 }, 135 },
136 getClassData() { 136 getClassData() {
137 http() 137 http()
138 .get("/getClassesList", { 138 .get("/getClassesList", {
139 headers: { Authorization: "Bearer " + this.token } 139 headers: { Authorization: "Bearer " + this.token },
140 }) 140 })
141 .then(response => { 141 .then((response) => {
142 this.addclass = response.data.data; 142 this.addclass = response.data.data;
143 }) 143 })
144 .catch(error => { 144 .catch((error) => {
145 this.showLoader = false; 145 this.showLoader = false;
146 if (error.response.status === 401) { 146 if (error.response.status === 401) {
147 this.$router.replace({ path: "/" }); 147 this.$router.replace({ path: "/" });
148 this.$store.dispatch("setToken", null); 148 this.$store.dispatch("setToken", null);
149 this.$store.dispatch("Id", null); 149 this.$store.dispatch("Id", null);
150 this.$store.dispatch("Role", null); 150 this.$store.dispatch("Role", null);
151 } 151 }
152 }); 152 });
153 }, 153 },
154 createRoom(classId) { 154 createRoom(classId) {
155 this.showLoader = true; 155 this.showLoader = true;
156 var classId = { 156 var classId = {
157 classId: classId 157 classId: classId,
158 }; 158 };
159 http() 159 http()
160 .post("/createRoom", classId) 160 .post("/createRoom", classId)
161 .then(response => { 161 .then((response) => {
162 // this.addSection = response.data.data; 162 // this.addSection = response.data.data;
163 console.log("CREATE___ROOOM", response.data); 163 console.log("CREATE___ROOOM", response.data);
164 this.room = response.data.data.roomName; 164 this.room = response.data.data.roomName;
165 this.username = response.data.data.teacherName; 165 this.username = response.data.data.teacherName;
166 this.roomPassword = response.data.data.roomPassword; 166 this.roomPassword = response.data.data.roomPassword;
167 var this_ = this; 167 var this_ = this;
168 if (this.username != "" || this.room != "") { 168 if (this.username != "" || this.room != "") {
169 if (window.JitsiMeetExternalAPI) { 169 if (window.JitsiMeetExternalAPI) {
170 // var person = prompt("Please enter your name:", "Rabie"); 170 // var person = prompt("Please enter your name:", "Rabie");
171 if (this_.username != null || this_.username != "") { 171 if (this_.username != null || this_.username != "") {
172 this.username = this.username; 172 this.username = this.username;
173 } 173 }
174 // var room = prompt("Please enter your room:", "Test Room"); 174 // var room = prompt("Please enter your room:", "Test Room");
175 if (this_.room != null || this_.room != "") { 175 if (this_.room != null || this_.room != "") {
176 this.room = this.room; 176 this.room = this.room;
177 } 177 }
178 this.startConference(); 178 this.startConference();
179 } else alert("Jitsi Meet API script not loaded"); 179 } else alert("Jitsi Meet API script not loaded");
180 } 180 }
181 this.showLoader = false; 181 this.showLoader = false;
182 }) 182 })
183 .catch(err => { 183 .catch((err) => {
184 this.showLoader = false; 184 this.showLoader = false;
185 }); 185 });
186 } 186 },
187 }, 187 },
188 188
189 mounted() { 189 mounted() {
190 this.token = this.$store.state.token; 190 this.token = this.$store.state.token;
191 this.getClassData(); 191 this.getClassData();
192 // this.openRoom(); 192 // this.openRoom();
193 } 193 },
194 }; 194 };
195 </script> 195 </script>
196 196
197 197
198 <style> 198 <style>
199 #jitsi-container { 199 #jitsi-container {
200 height: 100vh; 200 height: 100vh;
201 } 201 }
202 </style> 202 </style>
src/pages/Students/students.vue
Diff comments   View file @dd61212
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDITS STUDENTS DETAILS ****** --> 3 <!-- ****** EDITS STUDENTS DETAILS ****** -->
4 <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable> 4 <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable>
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 Student Details</label> 8 <label class="title text-xs-center">Edit Student Details</label>
9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout> 15 <v-layout>
16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center"> 16 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl"> 17 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl">
18 <img src="/static/icon/user.png" /> 18 <img src="/static/icon/user.png" />
19 </v-avatar> 19 </v-avatar>
20 <img 20 <img
21 :src="editedItem.profilePicUrl" 21 :src="editedItem.profilePicUrl"
22 v-else-if="editedItem.profilePicUrl && !editImageUrl" 22 v-else-if="editedItem.profilePicUrl && !editImageUrl"
23 height="150" 23 height="150"
24 style="border-radius:50%; width:150px" 24 style="border-radius:50%; width:150px"
25 /> 25 />
26 <img 26 <img
27 v-if="editImageUrl" 27 v-if="editImageUrl"
28 :src="editImageUrl" 28 :src="editImageUrl"
29 style="border-radius:50%; width:150px;height:150px" 29 style="border-radius:50%; width:150px;height:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display: none" 33 style="display: none"
34 ref="editDataImage" 34 ref="editDataImage"
35 accept="image/*" 35 accept="image/*"
36 @change="onEditFilePicked" 36 @change="onEditFilePicked"
37 /> 37 />
38 </v-flex> 38 </v-flex>
39 </v-layout> 39 </v-layout>
40 <v-layout wrap> 40 <v-layout wrap>
41 <v-flex xs12 sm4> 41 <v-flex xs12 sm4>
42 <v-layout> 42 <v-layout>
43 <v-flex xs4 class="pt-4 subheading"> 43 <v-flex xs4 class="pt-4 subheading">
44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-select 48 <v-select
49 :items="addclass" 49 :items="addclass"
50 label="Select Class" 50 label="Select Class"
51 v-model="editedItem.select" 51 v-model="editedItem.select"
52 item-text="classNum" 52 item-text="classNum"
53 item-value="_id" 53 item-value="_id"
54 name="Select Class" 54 name="Select Class"
55 @change="getSections(editedItem.select)" 55 @change="getSections(editedItem.select)"
56 required 56 required
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 </v-flex> 60 </v-flex>
61 <v-flex xs12 sm4> 61 <v-flex xs12 sm4>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 class="pt-4 subheading"> 63 <v-flex xs4 class="pt-4 subheading">
64 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 64 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
65 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label> 65 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
66 </v-flex> 66 </v-flex>
67 <v-flex xs8 class="ml-3"> 67 <v-flex xs8 class="ml-3">
68 <v-select 68 <v-select
69 :items="addSection" 69 :items="addSection"
70 label="Select Section" 70 label="Select Section"
71 v-model="editedItem.selectSection" 71 v-model="editedItem.selectSection"
72 item-text="name" 72 item-text="name"
73 item-value="_id" 73 item-value="_id"
74 name="Select Section" 74 name="Select Section"
75 required 75 required
76 ></v-select> 76 ></v-select>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12 sm4> 80 <v-flex xs12 sm4>
81 <v-layout> 81 <v-layout>
82 <v-flex xs4 class="pt-4 subheading"> 82 <v-flex xs4 class="pt-4 subheading">
83 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 83 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
84 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 84 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs8 class="ml-3"> 86 <v-flex xs8 class="ml-3">
87 <v-text-field 87 <v-text-field
88 v-model="editedItem.name" 88 v-model="editedItem.name"
89 placeholder="fill your full Name" 89 placeholder="fill your full Name"
90 name="name" 90 name="name"
91 type="text" 91 type="text"
92 required 92 required
93 ></v-text-field> 93 ></v-text-field>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 <v-layout wrap> 98 <v-layout wrap>
99 <v-flex xs12 sm4> 99 <v-flex xs12 sm4>
100 <v-layout> 100 <v-layout>
101 <v-flex xs4 class="pt-4 subheading"> 101 <v-flex xs4 class="pt-4 subheading">
102 <label class="right hidden-xs-only hidden-sm-only">Email Id:</label> 102 <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label> 103 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label>
104 </v-flex> 104 </v-flex>
105 <v-flex xs8 class="ml-3"> 105 <v-flex xs8 class="ml-3">
106 <v-text-field 106 <v-text-field
107 placeholder="fill your email" 107 placeholder="fill your email"
108 v-model="editedItem.email" 108 v-model="editedItem.email"
109 type="text" 109 type="text"
110 name="email" 110 name="email"
111 required 111 required
112 ></v-text-field> 112 ></v-text-field>
113 </v-flex> 113 </v-flex>
114 </v-layout> 114 </v-layout>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm4> 116 <v-flex xs12 sm4>
117 <v-layout> 117 <v-layout>
118 <v-flex xs4 class="pt-4 subheading"> 118 <v-flex xs4 class="pt-4 subheading">
119 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 119 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
120 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 120 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
121 </v-flex> 121 </v-flex>
122 <v-flex xs8 class="ml-3"> 122 <v-flex xs8 class="ml-3">
123 <v-menu 123 <v-menu
124 ref="menu" 124 ref="menu"
125 :close-on-content-click="false" 125 :close-on-content-click="false"
126 v-model="menu1" 126 v-model="menu1"
127 :nudge-right="40" 127 :nudge-right="40"
128 lazy 128 lazy
129 transition="scale-transition" 129 transition="scale-transition"
130 offset-y 130 offset-y
131 full-width 131 full-width
132 min-width="290px" 132 min-width="290px"
133 > 133 >
134 <v-text-field 134 <v-text-field
135 slot="activator" 135 slot="activator"
136 v-model="editedItem.dob" 136 v-model="editedItem.dob"
137 placeholder="Select Dob" 137 placeholder="Select Dob"
138 ></v-text-field> 138 ></v-text-field>
139 <v-date-picker 139 <v-date-picker
140 ref="picker" 140 ref="picker"
141 v-model="editedItem.dob" 141 v-model="editedItem.dob"
142 :max="new Date().toISOString().substr(0, 10)" 142 :max="new Date().toISOString().substr(0, 10)"
143 min="1950-01-01" 143 min="1950-01-01"
144 @input="menu1 = false" 144 @input="menu1 = false"
145 ></v-date-picker> 145 ></v-date-picker>
146 </v-menu> 146 </v-menu>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-flex> 149 </v-flex>
150 <v-flex xs12 sm4> 150 <v-flex xs12 sm4>
151 <v-layout> 151 <v-layout>
152 <v-flex xs4 class="pt-4 subheading"> 152 <v-flex xs4 class="pt-4 subheading">
153 <label class="right">City:</label> 153 <label class="right">City:</label>
154 </v-flex> 154 </v-flex>
155 <v-flex xs8 class="ml-3"> 155 <v-flex xs8 class="ml-3">
156 <v-text-field 156 <v-text-field
157 v-model="editedItem.city" 157 v-model="editedItem.city"
158 placeholder="fill your City Name" 158 placeholder="fill your City Name"
159 name="City" 159 name="City"
160 type="text" 160 type="text"
161 required 161 required
162 ></v-text-field> 162 ></v-text-field>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 <v-layout wrap> 167 <v-layout wrap>
168 <v-flex xs12 sm4> 168 <v-flex xs12 sm4>
169 <v-layout> 169 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
171 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 171 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
172 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label> 172 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
173 </v-flex> 173 </v-flex>
174 <v-flex xs8 class="ml-3"> 174 <v-flex xs8 class="ml-3">
175 <v-text-field 175 <v-text-field
176 v-model="editedItem.bloodGroup" 176 v-model="editedItem.bloodGroup"
177 placeholder="fill your BloodGroup" 177 placeholder="fill your BloodGroup"
178 name="state" 178 name="state"
179 type="text" 179 type="text"
180 required 180 required
181 ></v-text-field> 181 ></v-text-field>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 </v-flex> 184 </v-flex>
185 <v-flex xs12 sm4> 185 <v-flex xs12 sm4>
186 <v-layout> 186 <v-layout>
187 <v-flex xs4 class="pt-4 subheading"> 187 <v-flex xs4 class="pt-4 subheading">
188 <label class="right">Gender:</label> 188 <label class="right">Gender:</label>
189 </v-flex> 189 </v-flex>
190 <v-flex xs8 class="ml-3"> 190 <v-flex xs8 class="ml-3">
191 <v-select 191 <v-select
192 :items="gender" 192 :items="gender"
193 v-model="editedItem.gender" 193 v-model="editedItem.gender"
194 placeholder="Select Gender" 194 placeholder="Select Gender"
195 required 195 required
196 ></v-select> 196 ></v-select>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 </v-flex> 199 </v-flex>
200 <v-flex xs12 sm4> 200 <v-flex xs12 sm4>
201 <v-layout> 201 <v-layout>
202 <v-flex xs4 class="pt-4 subheading"> 202 <v-flex xs4 class="pt-4 subheading">
203 <label class="right">Medical Notes:</label> 203 <label class="right">Medical Notes:</label>
204 </v-flex> 204 </v-flex>
205 <v-flex xs8 class="ml-3"> 205 <v-flex xs8 class="ml-3">
206 <v-text-field 206 <v-text-field
207 v-model="editedItem.medicalNotes" 207 v-model="editedItem.medicalNotes"
208 placeholder="fill your medicalNotes" 208 placeholder="fill your medicalNotes"
209 required 209 required
210 ></v-text-field> 210 ></v-text-field>
211 </v-flex> 211 </v-flex>
212 </v-layout> 212 </v-layout>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 <v-layout wrap> 215 <v-layout wrap>
216 <v-flex xs12 sm4> 216 <v-flex xs12 sm4>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right">Height:</label> 219 <label class="right">Height:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs8 class="ml-3"> 221 <v-flex xs8 class="ml-3">
222 <v-text-field 222 <v-text-field
223 v-model="editedItem.height" 223 v-model="editedItem.height"
224 placeholder="fill your Height" 224 placeholder="fill your Height"
225 name="state" 225 name="state"
226 type="text" 226 type="text"
227 required 227 required
228 ></v-text-field> 228 ></v-text-field>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm4> 232 <v-flex xs12 sm4>
233 <v-layout> 233 <v-layout>
234 <v-flex xs4 class="pt-4 subheading"> 234 <v-flex xs4 class="pt-4 subheading">
235 <label class="right">Weight:</label> 235 <label class="right">Weight:</label>
236 </v-flex> 236 </v-flex>
237 <v-flex xs8 class="ml-3"> 237 <v-flex xs8 class="ml-3">
238 <v-text-field 238 <v-text-field
239 v-model="editedItem.weight" 239 v-model="editedItem.weight"
240 placeholder="fill your Weight" 240 placeholder="fill your Weight"
241 name="pincode" 241 name="pincode"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12 sm4> 247 <v-flex xs12 sm4>
248 <v-layout> 248 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 249 <v-flex xs4 class="pt-4 subheading">
250 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 250 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
251 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 251 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
252 </v-flex> 252 </v-flex>
253 <v-flex xs8 class="ml-3"> 253 <v-flex xs8 class="ml-3">
254 <v-text-field 254 <v-text-field
255 label="Select Image" 255 label="Select Image"
256 @click="pickEditFile" 256 @click="pickEditFile"
257 v-model="editImageName" 257 v-model="editImageName"
258 append-icon="attach_file" 258 append-icon="attach_file"
259 ></v-text-field> 259 ></v-text-field>
260 </v-flex> 260 </v-flex>
261 </v-layout> 261 </v-layout>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 <v-layout wrap> 264 <v-layout wrap>
265 <v-flex xs12 sm4> 265 <v-flex xs12 sm4>
266 <v-layout> 266 <v-layout>
267 <v-flex xs4 class="pt-4 subheading"> 267 <v-flex xs4 class="pt-4 subheading">
268 <label class="right">State:</label> 268 <label class="right">State:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs8 class="ml-3"> 270 <v-flex xs8 class="ml-3">
271 <v-text-field 271 <v-text-field
272 v-model="editedItem.state" 272 v-model="editedItem.state"
273 placeholder="fill your State Name" 273 placeholder="fill your State Name"
274 name="state" 274 name="state"
275 type="text" 275 type="text"
276 required 276 required
277 ></v-text-field> 277 ></v-text-field>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm4> 281 <v-flex xs12 sm4>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 class="pt-4 subheading"> 283 <v-flex xs4 class="pt-4 subheading">
284 <label class="right">Pincode:</label> 284 <label class="right">Pincode:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs8 class="ml-3"> 286 <v-flex xs8 class="ml-3">
287 <v-text-field 287 <v-text-field
288 v-model="editedItem.pincode" 288 v-model="editedItem.pincode"
289 placeholder="fill your pincode" 289 placeholder="fill your pincode"
290 name="pincode" 290 name="pincode"
291 type="number" 291 type="number"
292 required 292 required
293 ></v-text-field> 293 ></v-text-field>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 <v-flex xs12 sm4> 297 <v-flex xs12 sm4>
298 <v-layout> 298 <v-layout>
299 <v-flex xs4 class="pt-4 subheading"> 299 <v-flex xs4 class="pt-4 subheading">
300 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 300 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
301 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 301 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
302 </v-flex> 302 </v-flex>
303 <v-flex xs8 class="ml-3"> 303 <v-flex xs8 class="ml-3">
304 <v-text-field 304 <v-text-field
305 v-model="editedItem.mobile" 305 v-model="editedItem.mobile"
306 placeholder="fill your MobileNo" 306 placeholder="fill your MobileNo"
307 name="mobileNo" 307 name="mobileNo"
308 type="number" 308 type="number"
309 required 309 required
310 ></v-text-field> 310 ></v-text-field>
311 </v-flex> 311 </v-flex>
312 </v-layout> 312 </v-layout>
313 </v-flex> 313 </v-flex>
314 </v-layout> 314 </v-layout>
315 <v-layout wrap> 315 <v-layout wrap>
316 <v-flex xs12 sm4> 316 <v-flex xs12 sm4>
317 <v-layout> 317 <v-layout>
318 <v-flex xs4 class="pt-4 subheading"> 318 <v-flex xs4 class="pt-4 subheading">
319 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 319 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
320 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 320 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
321 </v-flex> 321 </v-flex>
322 <v-flex xs8 class="ml-3"> 322 <v-flex xs8 class="ml-3">
323 <v-autocomplete 323 <v-autocomplete
324 v-model="editedItem.country" 324 v-model="editedItem.country"
325 :items="countries" 325 :items="countries"
326 placeholder="Select Country Name" 326 placeholder="Select Country Name"
327 required 327 required
328 ></v-autocomplete> 328 ></v-autocomplete>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-flex> 331 </v-flex>
332 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 332 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
333 <v-layout> 333 <v-layout>
334 <v-flex xs4 class="pt-4 subheading"> 334 <v-flex xs4 class="pt-4 subheading">
335 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 335 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
336 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 336 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
337 </v-flex> 337 </v-flex>
338 <v-flex xs8 class="ml-3"> 338 <v-flex xs8 class="ml-3">
339 <v-text-field 339 <v-text-field
340 v-model="editedItem.rollNo" 340 v-model="editedItem.rollNo"
341 placeholder="fill roll number" 341 placeholder="fill roll number"
342 required 342 required
343 ></v-text-field> 343 ></v-text-field>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 </v-flex> 346 </v-flex>
347 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 347 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
348 <v-layout> 348 <v-layout>
349 <v-flex xs4 sm4 class="pt-4 subheading"> 349 <v-flex xs4 sm4 class="pt-4 subheading">
350 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> 350 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
351 <label 351 <label
352 class="right hidden-lg-only hidden-md-only hidden-xl-only" 352 class="right hidden-lg-only hidden-md-only hidden-xl-only"
353 >Permanent Address:</label> 353 >Permanent Address:</label>
354 </v-flex> 354 </v-flex>
355 <v-flex xs12 sm8 class="ml-3"> 355 <v-flex xs12 sm8 class="ml-3">
356 <v-text-field 356 <v-text-field
357 v-model="editedItem.permanentAddress" 357 v-model="editedItem.permanentAddress"
358 placeholder="fill Your Permanent Address" 358 placeholder="fill Your Permanent Address"
359 required 359 required
360 ></v-text-field> 360 ></v-text-field>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 </v-flex> 363 </v-flex>
364 </v-layout> 364 </v-layout>
365 <v-layout class="hidden-xs-only hidden-sm-only"> 365 <v-layout class="hidden-xs-only hidden-sm-only">
366 <v-flex xs12 sm4> 366 <v-flex xs12 sm4>
367 <v-layout> 367 <v-layout>
368 <v-flex xs4 class="pt-4 subheading"> 368 <v-flex xs4 class="pt-4 subheading">
369 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> 369 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
370 <label 370 <label
371 class="right hidden-lg-only hidden-md-only hidden-xl-only" 371 class="right hidden-lg-only hidden-md-only hidden-xl-only"
372 >Present Address:</label> 372 >Present Address:</label>
373 </v-flex> 373 </v-flex>
374 <v-flex xs8 class="ml-3"> 374 <v-flex xs8 class="ml-3">
375 <v-text-field 375 <v-text-field
376 v-model="editedItem.presentAddress" 376 v-model="editedItem.presentAddress"
377 placeholder="Select Country Name" 377 placeholder="Select Country Name"
378 required 378 required
379 ></v-text-field> 379 ></v-text-field>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 384 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
385 <v-flex xs12 sm12> 385 <v-flex xs12 sm12>
386 <v-layout> 386 <v-layout>
387 <v-flex xs4 class="pt-4 subheading"> 387 <v-flex xs4 class="pt-4 subheading">
388 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 388 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 389 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
390 </v-flex> 390 </v-flex>
391 <v-flex xs8 class="ml-3"> 391 <v-flex xs8 class="ml-3">
392 <v-text-field 392 <v-text-field
393 v-model="editedItem.rollNo" 393 v-model="editedItem.rollNo"
394 placeholder="fill roll number" 394 placeholder="fill roll number"
395 required 395 required
396 ></v-text-field> 396 ></v-text-field>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 401 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
402 <v-flex xs12 sm12> 402 <v-flex xs12 sm12>
403 <v-layout> 403 <v-layout>
404 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 404 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
405 <label class>Present Address :</label> 405 <label class>Present Address :</label>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 <v-layout> 408 <v-layout>
409 <v-flex xs12 sm12> 409 <v-flex xs12 sm12>
410 <v-textarea 410 <v-textarea
411 v-model="editedItem.presentAddress" 411 v-model="editedItem.presentAddress"
412 placeholder="fill Your present Address" 412 placeholder="fill Your present Address"
413 required 413 required
414 ></v-textarea> 414 ></v-textarea>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </v-flex> 417 </v-flex>
418 <v-flex xs12 sm12> 418 <v-flex xs12 sm12>
419 <v-layout> 419 <v-layout>
420 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 420 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
421 <label>Permanent addr:</label> 421 <label>Permanent addr:</label>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout> 424 <v-layout>
425 <v-flex xs12 sm12> 425 <v-flex xs12 sm12>
426 <v-textarea 426 <v-textarea
427 name="input-4-3" 427 name="input-4-3"
428 v-model="editedItem.permanentAddress" 428 v-model="editedItem.permanentAddress"
429 placeholder="fill Your Permanent Address" 429 placeholder="fill Your Permanent Address"
430 required 430 required
431 ></v-textarea> 431 ></v-textarea>
432 </v-flex> 432 </v-flex>
433 </v-layout> 433 </v-layout>
434 </v-flex> 434 </v-flex>
435 </v-layout> 435 </v-layout>
436 <v-layout> 436 <v-layout>
437 <v-flex xs12 sm12> 437 <v-flex xs12 sm12>
438 <v-layout class="right"> 438 <v-layout class="right">
439 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 439 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
440 </v-layout> 440 </v-layout>
441 </v-flex> 441 </v-flex>
442 </v-layout> 442 </v-layout>
443 </v-container> 443 </v-container>
444 </v-form> 444 </v-form>
445 </v-card-text> 445 </v-card-text>
446 </v-card> 446 </v-card>
447 </v-dialog> 447 </v-dialog>
448 448
449 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 449 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
450 450
451 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable> 451 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable>
452 <v-card flat class="card-style pa-3" dark> 452 <v-card flat class="card-style pa-3" dark>
453 <v-layout> 453 <v-layout>
454 <v-flex xs12> 454 <v-flex xs12>
455 <label class="title text-xs-center">View Student Details</label> 455 <label class="title text-xs-center">View Student Details</label>
456 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 456 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
457 </v-flex> 457 </v-flex>
458 </v-layout> 458 </v-layout>
459 <v-card-text> 459 <v-card-text>
460 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 460 <v-flex align-center justify-center layout text-xs-center class="mt-3">
461 <v-avatar size="100px"> 461 <v-avatar size="100px">
462 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 462 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
463 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 463 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
464 </v-avatar> 464 </v-avatar>
465 </v-flex> 465 </v-flex>
466 <v-container grid-list-md> 466 <v-container grid-list-md>
467 <v-layout wrap> 467 <v-layout wrap>
468 <v-flex xs12 sm5> 468 <v-flex xs12 sm5>
469 <v-layout> 469 <v-layout>
470 <v-flex xs6 sm6> 470 <v-flex xs6 sm6>
471 <h5 class="right my-1"> 471 <h5 class="right my-1">
472 <b>Full Name:</b> 472 <b>Full Name:</b>
473 </h5> 473 </h5>
474 </v-flex> 474 </v-flex>
475 <v-flex sm6 xs6> 475 <v-flex sm6 xs6>
476 <h5 class="my-1 left">{{ editedItem.name }}</h5> 476 <h5 class="my-1 left">{{ editedItem.name }}</h5>
477 </v-flex> 477 </v-flex>
478 </v-layout> 478 </v-layout>
479 </v-flex> 479 </v-flex>
480 <v-flex xs12 sm7> 480 <v-flex xs12 sm7>
481 <v-layout> 481 <v-layout>
482 <v-flex xs6 sm4> 482 <v-flex xs6 sm4>
483 <h5 class="right my-1"> 483 <h5 class="right my-1">
484 <b>Email:</b> 484 <b>Email:</b>
485 </h5> 485 </h5>
486 </v-flex> 486 </v-flex>
487 <v-flex sm8 xs6> 487 <v-flex sm8 xs6>
488 <h5 class="my-1 left">{{ editedItem.email }}</h5> 488 <h5 class="my-1 left">{{ editedItem.email }}</h5>
489 </v-flex> 489 </v-flex>
490 </v-layout> 490 </v-layout>
491 </v-flex> 491 </v-flex>
492 </v-layout> 492 </v-layout>
493 <v-layout wrap> 493 <v-layout wrap>
494 <v-flex xs12 sm5> 494 <v-flex xs12 sm5>
495 <v-layout> 495 <v-layout>
496 <v-flex xs6 sm6> 496 <v-flex xs6 sm6>
497 <b> 497 <b>
498 <h5 class="right my-1"> 498 <h5 class="right my-1">
499 <b>Gender:</b> 499 <b>Gender:</b>
500 </h5> 500 </h5>
501 </b> 501 </b>
502 </v-flex> 502 </v-flex>
503 <v-flex sm6 xs6> 503 <v-flex sm6 xs6>
504 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 504 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
505 </v-flex> 505 </v-flex>
506 </v-layout> 506 </v-layout>
507 </v-flex> 507 </v-flex>
508 <v-flex xs12 sm7> 508 <v-flex xs12 sm7>
509 <v-layout> 509 <v-layout>
510 <v-flex xs6 sm4> 510 <v-flex xs6 sm4>
511 <b> 511 <b>
512 <h5 class="right my-1"> 512 <h5 class="right my-1">
513 <b>D.O.B:</b> 513 <b>D.O.B:</b>
514 </h5> 514 </h5>
515 </b> 515 </b>
516 </v-flex> 516 </v-flex>
517 <v-flex sm8 xs6> 517 <v-flex sm8 xs6>
518 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 518 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 </v-layout> 522 </v-layout>
523 <v-layout wrap> 523 <v-layout wrap>
524 <v-flex xs12 sm5> 524 <v-flex xs12 sm5>
525 <v-layout> 525 <v-layout>
526 <v-flex xs6 sm6> 526 <v-flex xs6 sm6>
527 <b> 527 <b>
528 <h5 class="right my-1"> 528 <h5 class="right my-1">
529 <b>BloodGroup:</b> 529 <b>BloodGroup:</b>
530 </h5> 530 </h5>
531 </b> 531 </b>
532 </v-flex> 532 </v-flex>
533 <v-flex sm6 xs6> 533 <v-flex sm6 xs6>
534 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 534 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
535 </v-flex> 535 </v-flex>
536 </v-layout> 536 </v-layout>
537 </v-flex> 537 </v-flex>
538 <v-flex xs12 sm7> 538 <v-flex xs12 sm7>
539 <v-layout> 539 <v-layout>
540 <v-flex xs6 sm4> 540 <v-flex xs6 sm4>
541 <b> 541 <b>
542 <h5 class="right my-1"> 542 <h5 class="right my-1">
543 <b>Roll No. :</b> 543 <b>Roll No. :</b>
544 </h5> 544 </h5>
545 </b> 545 </b>
546 </v-flex> 546 </v-flex>
547 <v-flex sm8 xs6> 547 <v-flex sm8 xs6>
548 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 548 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
549 </v-flex> 549 </v-flex>
550 </v-layout> 550 </v-layout>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 <v-layout wrap> 553 <v-layout wrap>
554 <v-flex xs12 sm5> 554 <v-flex xs12 sm5>
555 <v-layout> 555 <v-layout>
556 <v-flex xs6 sm6> 556 <v-flex xs6 sm6>
557 <b> 557 <b>
558 <h5 class="right my-1"> 558 <h5 class="right my-1">
559 <b>Height:</b> 559 <b>Height:</b>
560 </h5> 560 </h5>
561 </b> 561 </b>
562 </v-flex> 562 </v-flex>
563 <v-flex sm6 xs6> 563 <v-flex sm6 xs6>
564 <h5 class="my-1 left">{{ editedItem.height }}</h5> 564 <h5 class="my-1 left">{{ editedItem.height }}</h5>
565 </v-flex> 565 </v-flex>
566 </v-layout> 566 </v-layout>
567 </v-flex> 567 </v-flex>
568 <v-flex xs12 sm7> 568 <v-flex xs12 sm7>
569 <v-layout> 569 <v-layout>
570 <v-flex xs6 sm4> 570 <v-flex xs6 sm4>
571 <b> 571 <b>
572 <h5 class="right my-1"> 572 <h5 class="right my-1">
573 <b>Weight:</b> 573 <b>Weight:</b>
574 </h5> 574 </h5>
575 </b> 575 </b>
576 </v-flex> 576 </v-flex>
577 <v-flex sm8 xs6> 577 <v-flex sm8 xs6>
578 <h5 class="my-1">{{ editedItem.weight }}</h5> 578 <h5 class="my-1">{{ editedItem.weight }}</h5>
579 </v-flex> 579 </v-flex>
580 </v-layout> 580 </v-layout>
581 </v-flex> 581 </v-flex>
582 </v-layout> 582 </v-layout>
583 <v-layout wrap> 583 <v-layout wrap>
584 <v-flex xs12 sm5> 584 <v-flex xs12 sm5>
585 <v-layout> 585 <v-layout>
586 <v-flex xs6 sm6> 586 <v-flex xs6 sm6>
587 <b> 587 <b>
588 <h5 class="right my-1"> 588 <h5 class="right my-1">
589 <b>City:</b> 589 <b>City:</b>
590 </h5> 590 </h5>
591 </b> 591 </b>
592 </v-flex> 592 </v-flex>
593 <v-flex sm6 xs6> 593 <v-flex sm6 xs6>
594 <h5 class="my-1 left">{{ editedItem.city }}</h5> 594 <h5 class="my-1 left">{{ editedItem.city }}</h5>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 <v-flex xs12 sm7> 598 <v-flex xs12 sm7>
599 <v-layout> 599 <v-layout>
600 <v-flex xs6 sm4> 600 <v-flex xs6 sm4>
601 <b> 601 <b>
602 <h5 class="right my-1"> 602 <h5 class="right my-1">
603 <b>State:</b> 603 <b>State:</b>
604 </h5> 604 </h5>
605 </b> 605 </b>
606 </v-flex> 606 </v-flex>
607 <v-flex sm8 xs6> 607 <v-flex sm8 xs6>
608 <h5 class="my-1">{{ editedItem.state }}</h5> 608 <h5 class="my-1">{{ editedItem.state }}</h5>
609 </v-flex> 609 </v-flex>
610 </v-layout> 610 </v-layout>
611 </v-flex> 611 </v-flex>
612 </v-layout> 612 </v-layout>
613 <v-layout wrap> 613 <v-layout wrap>
614 <v-flex xs12 sm5> 614 <v-flex xs12 sm5>
615 <v-layout> 615 <v-layout>
616 <v-flex xs6 sm6> 616 <v-flex xs6 sm6>
617 <b> 617 <b>
618 <h5 class="right my-1"> 618 <h5 class="right my-1">
619 <b>Pincode:</b> 619 <b>Pincode:</b>
620 </h5> 620 </h5>
621 </b> 621 </b>
622 </v-flex> 622 </v-flex>
623 <v-flex sm6 xs6> 623 <v-flex sm6 xs6>
624 <h5 class="my-1">{{ editedItem.pincode }}</h5> 624 <h5 class="my-1">{{ editedItem.pincode }}</h5>
625 </v-flex> 625 </v-flex>
626 </v-layout> 626 </v-layout>
627 </v-flex> 627 </v-flex>
628 <v-flex xs12 sm7> 628 <v-flex xs12 sm7>
629 <v-layout> 629 <v-layout>
630 <v-flex xs6 sm4> 630 <v-flex xs6 sm4>
631 <b> 631 <b>
632 <h5 class="right my-1"> 632 <h5 class="right my-1">
633 <b>Country:</b> 633 <b>Country:</b>
634 </h5> 634 </h5>
635 </b> 635 </b>
636 </v-flex> 636 </v-flex>
637 <v-flex sm7 xs6> 637 <v-flex sm7 xs6>
638 <h5 class="my-1">{{ editedItem.country }}</h5> 638 <h5 class="my-1">{{ editedItem.country }}</h5>
639 </v-flex> 639 </v-flex>
640 </v-layout> 640 </v-layout>
641 </v-flex> 641 </v-flex>
642 </v-layout> 642 </v-layout>
643 <v-layout wrap> 643 <v-layout wrap>
644 <v-flex xs12 sm5> 644 <v-flex xs12 sm5>
645 <v-layout> 645 <v-layout>
646 <v-flex sm6 xs6> 646 <v-flex sm6 xs6>
647 <b> 647 <b>
648 <h5 class="right my-1"> 648 <h5 class="right my-1">
649 <b>Mobile No:</b> 649 <b>Mobile No:</b>
650 </h5> 650 </h5>
651 </b> 651 </b>
652 </v-flex> 652 </v-flex>
653 <v-flex sm6 xs6> 653 <v-flex sm6 xs6>
654 <h5 class="my-1">{{ editedItem.mobile }}</h5> 654 <h5 class="my-1">{{ editedItem.mobile }}</h5>
655 </v-flex> 655 </v-flex>
656 </v-layout> 656 </v-layout>
657 </v-flex> 657 </v-flex>
658 <v-flex xs12 sm7> 658 <v-flex xs12 sm7>
659 <v-layout> 659 <v-layout>
660 <v-flex xs6 sm4> 660 <v-flex xs6 sm4>
661 <b> 661 <b>
662 <h5 class="right my-1"> 662 <h5 class="right my-1">
663 <b>FahterName:</b> 663 <b>FahterName:</b>
664 </h5> 664 </h5>
665 </b> 665 </b>
666 </v-flex> 666 </v-flex>
667 <v-flex sm8 xs6> 667 <v-flex sm8 xs6>
668 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 668 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
669 </v-flex> 669 </v-flex>
670 </v-layout> 670 </v-layout>
671 </v-flex> 671 </v-flex>
672 </v-layout> 672 </v-layout>
673 <v-layout wrap> 673 <v-layout wrap>
674 <v-flex xs12 sm5> 674 <v-flex xs12 sm5>
675 <v-layout> 675 <v-layout>
676 <v-flex xs6 sm6> 676 <v-flex xs6 sm6>
677 <b> 677 <b>
678 <h5 class="right my-1"> 678 <h5 class="right my-1">
679 <b>MotherName:</b> 679 <b>MotherName:</b>
680 </h5> 680 </h5>
681 </b> 681 </b>
682 </v-flex> 682 </v-flex>
683 <v-flex sm6 xs6> 683 <v-flex sm6 xs6>
684 <h5 class="my-1">{{ editedItem.motherName }}</h5> 684 <h5 class="my-1">{{ editedItem.motherName }}</h5>
685 </v-flex> 685 </v-flex>
686 </v-layout> 686 </v-layout>
687 </v-flex> 687 </v-flex>
688 <v-flex xs12 sm7> 688 <v-flex xs12 sm7>
689 <v-layout> 689 <v-layout>
690 <v-flex xs6 sm4> 690 <v-flex xs6 sm4>
691 <b> 691 <b>
692 <h5 class="right my-1"> 692 <h5 class="right my-1">
693 <b>FatherCellNo:</b> 693 <b>FatherCellNo:</b>
694 </h5> 694 </h5>
695 </b> 695 </b>
696 </v-flex> 696 </v-flex>
697 <v-flex sm6 xs6> 697 <v-flex sm6 xs6>
698 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 698 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
699 </v-flex> 699 </v-flex>
700 </v-layout> 700 </v-layout>
701 </v-flex> 701 </v-flex>
702 </v-layout> 702 </v-layout>
703 <v-layout wrap> 703 <v-layout wrap>
704 <v-flex xs12 sm5> 704 <v-flex xs12 sm5>
705 <v-layout> 705 <v-layout>
706 <v-flex xs6 sm6> 706 <v-flex xs6 sm6>
707 <b> 707 <b>
708 <h5 class="right my-1"> 708 <h5 class="right my-1">
709 <b>MotherCellNo:</b> 709 <b>MotherCellNo:</b>
710 </h5> 710 </h5>
711 </b> 711 </b>
712 </v-flex> 712 </v-flex>
713 <v-flex sm6 xs6> 713 <v-flex sm6 xs6>
714 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 714 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
715 </v-flex> 715 </v-flex>
716 </v-layout> 716 </v-layout>
717 </v-flex> 717 </v-flex>
718 <v-flex xs12 sm7> 718 <v-flex xs12 sm7>
719 <v-layout> 719 <v-layout>
720 <v-flex xs6 sm4> 720 <v-flex xs6 sm4>
721 <b> 721 <b>
722 <h5 class="my-1 right"> 722 <h5 class="my-1 right">
723 <b>AcademicYear:</b> 723 <b>AcademicYear:</b>
724 </h5> 724 </h5>
725 </b> 725 </b>
726 </v-flex> 726 </v-flex>
727 <v-flex sm5 xs8> 727 <v-flex sm5 xs8>
728 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 728 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
729 </v-flex> 729 </v-flex>
730 </v-layout> 730 </v-layout>
731 </v-flex> 731 </v-flex>
732 </v-layout> 732 </v-layout>
733 <v-layout wrap> 733 <v-layout wrap>
734 <v-flex xs12 sm5> 734 <v-flex xs12 sm5>
735 <v-layout> 735 <v-layout>
736 <v-flex xs6 sm6> 736 <v-flex xs6 sm6>
737 <b> 737 <b>
738 <h5 class="my-1 right"> 738 <h5 class="my-1 right">
739 <b>MedicalNotes:</b> 739 <b>MedicalNotes:</b>
740 </h5> 740 </h5>
741 </b> 741 </b>
742 </v-flex> 742 </v-flex>
743 <v-flex sm5 xs6> 743 <v-flex sm5 xs6>
744 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 744 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
745 </v-flex> 745 </v-flex>
746 </v-layout> 746 </v-layout>
747 </v-flex> 747 </v-flex>
748 <v-flex xs12 sm7 class="hidden-xs-only"> 748 <v-flex xs12 sm7 class="hidden-xs-only">
749 <v-layout wrap> 749 <v-layout wrap>
750 <v-flex sm4> 750 <v-flex sm4>
751 <b> 751 <b>
752 <h5 class="my-1 right"> 752 <h5 class="my-1 right">
753 <b>present Address:</b> 753 <b>present Address:</b>
754 </h5> 754 </h5>
755 </b> 755 </b>
756 </v-flex> 756 </v-flex>
757 <v-flex sm8> 757 <v-flex sm8>
758 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 758 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
759 </v-flex> 759 </v-flex>
760 </v-layout> 760 </v-layout>
761 </v-flex> 761 </v-flex>
762 <v-flex sm6 class="hidden-xs-only"> 762 <v-flex sm6 class="hidden-xs-only">
763 <v-layout wrap> 763 <v-layout wrap>
764 <v-flex sm5> 764 <v-flex sm5>
765 <b> 765 <b>
766 <h5 class="my-1 right"> 766 <h5 class="my-1 right">
767 <b>Permanent Address:</b> 767 <b>Permanent Address:</b>
768 </h5> 768 </h5>
769 </b> 769 </b>
770 </v-flex> 770 </v-flex>
771 <v-flex sm7> 771 <v-flex sm7>
772 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 772 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
773 </v-flex> 773 </v-flex>
774 </v-layout> 774 </v-layout>
775 </v-flex> 775 </v-flex>
776 </v-layout> 776 </v-layout>
777 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 777 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
778 <v-flex xs12 sm5> 778 <v-flex xs12 sm5>
779 <v-layout wrap> 779 <v-layout wrap>
780 <v-flex xs12 sm6> 780 <v-flex xs12 sm6>
781 <b> 781 <b>
782 <h5 class="my-1"> 782 <h5 class="my-1">
783 <b>present Address:-</b> 783 <b>present Address:-</b>
784 </h5> 784 </h5>
785 </b> 785 </b>
786 </v-flex> 786 </v-flex>
787 <v-flex sm5 xs12> 787 <v-flex sm5 xs12>
788 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 788 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
789 </v-flex> 789 </v-flex>
790 </v-layout> 790 </v-layout>
791 </v-flex> 791 </v-flex>
792 <v-flex xs12 sm6> 792 <v-flex xs12 sm6>
793 <v-layout wrap> 793 <v-layout wrap>
794 <v-flex xs12 sm6> 794 <v-flex xs12 sm6>
795 <b> 795 <b>
796 <h5 class="my-1"> 796 <h5 class="my-1">
797 <b>Permanent Address:-</b> 797 <b>Permanent Address:-</b>
798 </h5> 798 </h5>
799 </b> 799 </b>
800 </v-flex> 800 </v-flex>
801 <v-flex sm6 xs12> 801 <v-flex sm6 xs12>
802 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 802 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
803 </v-flex> 803 </v-flex>
804 </v-layout> 804 </v-layout>
805 </v-flex> 805 </v-flex>
806 </v-layout> 806 </v-layout>
807 </v-container> 807 </v-container>
808 </v-card-text> 808 </v-card-text>
809 </v-card> 809 </v-card>
810 </v-dialog> 810 </v-dialog>
811 811
812 <!-- ****** STUDENTS TABLE ****** --> 812 <!-- ****** STUDENTS TABLE ****** -->
813 <v-toolbar color="transparent" flat> 813 <v-toolbar color="transparent" flat>
814 <v-btn 814 <v-btn
815 fab 815 fab
816 dark 816 dark
817 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 817 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
818 small 818 small
819 @click="addStudentDialog = true" 819 @click="addStudentDialog = true"
820 > 820 >
821 <v-icon dark>add</v-icon> 821 <v-icon dark>add</v-icon>
822 </v-btn> 822 </v-btn>
823 <v-btn 823 <v-btn
824 v-if="role != 'TEACHER' " 824 v-if="role != 'TEACHER' "
825 round 825 round
826 class="open-dialog-button hidden-sm-only hidden-xs-only" 826 class="open-dialog-button hidden-sm-only hidden-xs-only"
827 dark 827 dark
828 @click="addStudentDialog = true" 828 @click="addStudentDialog = true"
829 > 829 >
830 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student 830 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student
831 </v-btn> 831 </v-btn>
832 <v-card-actions class="hidden-xs-only hidden-sm-only"> 832 <v-card-actions class="hidden-xs-only hidden-sm-only">
833 <v-flex md13 lg12> 833 <v-flex md13 lg12>
834 <v-layout> 834 <v-layout>
835 <v-flex lg3 md4> 835 <v-flex lg3 md4>
836 <v-select 836 <v-select
837 :items="addclass" 837 :items="addclass"
838 label="Select Class" 838 label="Select Class"
839 v-model="selectStudents.select" 839 v-model="selectStudents.select"
840 item-text="classNum" 840 item-text="classNum"
841 item-value="_id" 841 item-value="_id"
842 name="Select Class" 842 name="Select Class"
843 :rules="classRules" 843 :rules="classRules"
844 @change="getSections(selectStudents.select)" 844 @change="getSections(selectStudents.select)"
845 required 845 required
846 class="ml-2" 846 class="ml-2"
847 ></v-select> 847 ></v-select>
848 </v-flex> 848 </v-flex>
849 <v-flex lg3 md4 class="ml-2"> 849 <v-flex lg3 md4 class="ml-2">
850 <v-layout> 850 <v-layout>
851 <v-select 851 <v-select
852 :items="addSection" 852 :items="addSection"
853 label="Select Section" 853 label="Select Section"
854 v-model="selectStudents.selectSection" 854 v-model="selectStudents.selectSection"
855 item-text="name" 855 item-text="name"
856 item-value="_id" 856 item-value="_id"
857 name="Select Section" 857 name="Select Section"
858 :rules="sectionRules" 858 :rules="sectionRules"
859 required 859 required
860 ></v-select> 860 ></v-select>
861 </v-layout> 861 </v-layout>
862 </v-flex> 862 </v-flex>
863 </v-layout> 863 </v-layout>
864 </v-flex> 864 </v-flex>
865 </v-card-actions> 865 </v-card-actions>
866 <v-spacer></v-spacer> 866 <v-spacer></v-spacer>
867 <v-btn 867 <v-btn
868 @click="findStudents()" 868 @click="findStudents()"
869 round 869 round
870 dark 870 dark
871 :loading="loading" 871 :loading="loading"
872 class="add-button hidden-xs-only hidden-sm-only" 872 class="open-dialog-button hidden-xs-only hidden-sm-only"
873 >Find</v-btn> 873 >Find</v-btn>
874 <v-card-title class="body-1" v-show="show"> 874 <v-card-title class="body-1" v-show="show">
875 <v-btn icon large flat @click="displaySearch"> 875 <v-btn icon large flat @click="displaySearch">
876 <v-avatar size="27"> 876 <v-avatar size="27">
877 <img src="/static/icon/search.png" alt="icon" /> 877 <img src="/static/icon/search.png" alt="icon" />
878 </v-avatar> 878 </v-avatar>
879 </v-btn> 879 </v-btn>
880 </v-card-title> 880 </v-card-title>
881 <v-flex xs8 sm7 lg2 md3 v-show="showSearch"> 881 <v-flex xs8 sm7 lg2 md3 v-show="showSearch">
882 <v-layout> 882 <v-layout>
883 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 883 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
884 <v-icon @click="closeSearch" color="error">close</v-icon> 884 <v-icon @click="closeSearch" color="error">close</v-icon>
885 </v-layout> 885 </v-layout>
886 </v-flex> 886 </v-flex>
887 </v-toolbar> 887 </v-toolbar>
888 <v-card flat class="elevation-0 transparent"> 888 <v-card flat class="elevation-0 transparent">
889 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 889 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
890 <v-layout> 890 <v-layout>
891 <v-flex xs4> 891 <v-flex xs4>
892 <label class="right mt-4">Select Class:</label> 892 <label class="right mt-4">Select Class:</label>
893 </v-flex> 893 </v-flex>
894 <v-flex xs8> 894 <v-flex xs8>
895 <v-select 895 <v-select
896 :items="addclass" 896 :items="addclass"
897 label="Select Class" 897 label="Select Class"
898 v-model="selectStudents.select" 898 v-model="selectStudents.select"
899 item-text="classNum" 899 item-text="classNum"
900 item-value="_id" 900 item-value="_id"
901 name="Select Class" 901 name="Select Class"
902 :rules="classRules" 902 :rules="classRules"
903 @change="getSections(selectStudents.select)" 903 @change="getSections(selectStudents.select)"
904 class="px-2" 904 class="px-2"
905 ></v-select> 905 ></v-select>
906 </v-flex> 906 </v-flex>
907 </v-layout> 907 </v-layout>
908 <v-layout> 908 <v-layout>
909 <v-flex xs4> 909 <v-flex xs4>
910 <label class="right mt-4">Select Section:</label> 910 <label class="right mt-4">Select Section:</label>
911 </v-flex> 911 </v-flex>
912 <v-flex xs8> 912 <v-flex xs8>
913 <v-select 913 <v-select
914 :items="addSection" 914 :items="addSection"
915 label="Select Section" 915 label="Select Section"
916 v-model="selectStudents.selectSection" 916 v-model="selectStudents.selectSection"
917 item-text="name" 917 item-text="name"
918 item-value="_id" 918 item-value="_id"
919 name="Select Section" 919 name="Select Section"
920 :rules="sectionRules" 920 :rules="sectionRules"
921 class="px-2" 921 class="px-2"
922 required 922 required
923 ></v-select> 923 ></v-select>
924 </v-flex> 924 </v-flex>
925 </v-layout> 925 </v-layout>
926 <v-layout> 926 <v-layout>
927 <v-flex xs5 class="mx-auto mb-2"> 927 <v-flex xs5 class="mx-auto mb-2">
928 <v-btn 928 <v-btn
929 @click="findStudents()" 929 @click="findStudents()"
930 block 930 block
931 round 931 round
932 dark 932 dark
933 :loading="loading" 933 :loading="loading"
934 class="add-button" 934 class="add-button"
935 >Find</v-btn> 935 >Find</v-btn>
936 </v-flex> 936 </v-flex>
937 </v-layout> 937 </v-layout>
938 </v-flex> 938 </v-flex>
939 </v-card> 939 </v-card>
940 <v-data-table 940 <v-data-table
941 :headers="headers" 941 :headers="headers"
942 :items="studentsData" 942 :items="studentsData"
943 :pagination.sync="pagination" 943 :pagination.sync="pagination"
944 :search="search" 944 :search="search"
945 > 945 >
946 <template slot="items" slot-scope="props"> 946 <template slot="items" slot-scope="props">
947 <tr class="tr"> 947 <tr class="tr">
948 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> 948 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
949 <td class="text-xs-center td td-row"> 949 <td class="text-xs-center td td-row">
950 <v-avatar size="40"> 950 <v-avatar size="40">
951 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 951 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
952 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 952 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
953 </v-avatar> 953 </v-avatar>
954 </td> 954 </td>
955 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 955 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
956 <td class="text-xs-center td td-row">{{ props.item.gender }}</td> 956 <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
957 <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td> 957 <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td>
958 <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td> 958 <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td>
959 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> 959 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
960 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> 960 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
961 <td class="text-xs-center td td-row"> 961 <td class="text-xs-center td td-row">
962 <v-switch 962 <v-switch
963 class="pl-3" 963 class="pl-3"
964 :disabled="role === 'TEACHER'"
964 v-model="props.item.status" 965 v-model="props.item.status"
965 @change="suspendStudentStatus(props.item.status,props.item._id)" 966 @change="suspendStudentStatus(props.item.status,props.item._id)"
966 ></v-switch> 967 ></v-switch>
967 </td> 968 </td>
968 <td class="text-xs-center td td-row"> 969 <td class="text-xs-center td td-row">
969 <span> 970 <span>
970 <v-tooltip top> 971 <v-tooltip top>
971 <img 972 <img
972 slot="activator" 973 slot="activator"
973 style="cursor:pointer; width:25px; height:25px; " 974 style="cursor:pointer; width:25px; height:25px; "
974 class="mr-3" 975 class="mr-3"
975 @click="profile(props.item)" 976 @click="profile(props.item)"
976 src="/static/icon/view.png" 977 src="/static/icon/view.png"
977 /> 978 />
978 <span>View</span> 979 <span>View</span>
979 </v-tooltip> 980 </v-tooltip>
980 <v-tooltip top v-if="role != 'TEACHER' "> 981 <v-tooltip top v-if="role != 'TEACHER' ">
981 <img 982 <img
982 slot="activator" 983 slot="activator"
983 style="cursor:pointer; width:20px; height:18px; " 984 style="cursor:pointer; width:20px; height:18px; "
984 class="mr-3" 985 class="mr-3"
985 @click="editItem(props.item)" 986 @click="editItem(props.item)"
986 src="/static/icon/edit.png" 987 src="/static/icon/edit.png"
987 /> 988 />
988 <span>Edit</span> 989 <span>Edit</span>
989 </v-tooltip> 990 </v-tooltip>
990 <v-tooltip top v-if="role != 'TEACHER' "> 991 <v-tooltip top v-if="role != 'TEACHER' ">
991 <img 992 <img
992 slot="activator" 993 slot="activator"
993 style="cursor:pointer; width:20px; height:20px; " 994 style="cursor:pointer; width:20px; height:20px; "
994 class="mr-3" 995 class="mr-3"
995 @click="deleteItem(props.item)" 996 @click="deleteItem(props.item)"
996 src="/static/icon/delete.png" 997 src="/static/icon/delete.png"
997 /> 998 />
998 <span>Delete</span> 999 <span>Delete</span>
999 </v-tooltip> 1000 </v-tooltip>
1000 </span> 1001 </span>
1001 </td> 1002 </td>
1002 </tr> 1003 </tr>
1003 </template> 1004 </template>
1004 <v-alert 1005 <v-alert
1005 slot="no-results" 1006 slot="no-results"
1006 :value="true" 1007 :value="true"
1007 color="error" 1008 color="error"
1008 icon="warning" 1009 icon="warning"
1009 >Your search for "{{ search }}" found no results.</v-alert> 1010 >Your search for "{{ search }}" found no results.</v-alert>
1010 </v-data-table> 1011 </v-data-table>
1011 <!-- ****** ADD STUDENTS DETAILS****** --> 1012 <!-- ****** ADD STUDENTS DETAILS****** -->
1012 <v-dialog v-model="addStudentDialog" max-width="1280"> 1013 <v-dialog v-model="addStudentDialog" max-width="1280">
1013 <v-card flat class="card-style pa-2" dark> 1014 <v-card flat class="card-style pa-2" dark>
1014 <v-layout> 1015 <v-layout>
1015 <v-flex xs12> 1016 <v-flex xs12>
1016 <label class="title text-xs-center">Add Student</label> 1017 <label class="title text-xs-center">Add Student</label>
1017 <v-icon size="24" class="right" @click="addStudentDialog = false">cancel</v-icon> 1018 <v-icon size="24" class="right" @click="addStudentDialog = false">cancel</v-icon>
1018 </v-flex> 1019 </v-flex>
1019 </v-layout> 1020 </v-layout>
1020 <v-container fluid> 1021 <v-container fluid>
1021 <v-layout align-center> 1022 <v-layout align-center>
1022 <v-flex xs12> 1023 <v-flex xs12>
1023 <v-stepper v-model="e2" flat class="card-style elevation-0" dark> 1024 <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
1024 <v-stepper-header> 1025 <v-stepper-header>
1025 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1026 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1026 <v-divider></v-divider> 1027 <v-divider></v-divider>
1027 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1028 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1028 </v-stepper-header> 1029 </v-stepper-header>
1029 <v-stepper-items> 1030 <v-stepper-items>
1030 <v-stepper-content step="1"> 1031 <v-stepper-content step="1">
1031 <v-container fluid class> 1032 <v-container fluid class>
1032 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> 1033 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
1033 <v-form ref="parentForm" v-model="valid" lazy-validation> 1034 <v-form ref="parentForm" v-model="valid" lazy-validation>
1034 <v-layout wrap> 1035 <v-layout wrap>
1035 <v-flex xs12 sm6> 1036 <v-flex xs12 sm6>
1036 <v-layout wrap> 1037 <v-layout wrap>
1037 <v-flex xs12 class="pt-4 subheading"> 1038 <v-flex xs12 class="pt-4 subheading">
1038 <label>Father Cell No:</label> 1039 <label>Father Cell No:</label>
1039 </v-flex> 1040 </v-flex>
1040 <v-flex xs12> 1041 <v-flex xs12>
1041 <v-text-field 1042 <v-text-field
1042 v-model.trim="parentData.fatherCellNo" 1043 v-model.trim="parentData.fatherCellNo"
1043 placeholder="fill your father Cell Number" 1044 placeholder="fill your father Cell Number"
1044 type="number" 1045 type="number"
1045 :rules="fatheCellNoRules" 1046 :rules="fatheCellNoRules"
1046 counter="10" 1047 counter="10"
1047 v-on:keyup="getParentDetails()" 1048 v-on:keyup="getParentDetails()"
1048 required 1049 required
1049 ></v-text-field> 1050 ></v-text-field>
1050 </v-flex> 1051 </v-flex>
1051 </v-layout> 1052 </v-layout>
1052 </v-flex> 1053 </v-flex>
1053 <v-flex xs12 sm6> 1054 <v-flex xs12 sm6>
1054 <v-layout wrap> 1055 <v-layout wrap>
1055 <v-flex xs12 class="pt-4 subheading"> 1056 <v-flex xs12 class="pt-4 subheading">
1056 <label>Parent Email Id:</label> 1057 <label>Parent Email Id:</label>
1057 </v-flex> 1058 </v-flex>
1058 <v-flex xs12> 1059 <v-flex xs12>
1059 <v-text-field 1060 <v-text-field
1060 placeholder="fill Parent email" 1061 placeholder="fill Parent email"
1061 v-model="parentData.email" 1062 v-model="parentData.email"
1062 type="text" 1063 type="text"
1063 required 1064 required
1064 ></v-text-field> 1065 ></v-text-field>
1065 </v-flex> 1066 </v-flex>
1066 </v-layout> 1067 </v-layout>
1067 </v-flex> 1068 </v-flex>
1068 </v-layout> 1069 </v-layout>
1069 <v-layout wrap> 1070 <v-layout wrap>
1070 <v-flex xs12 sm6> 1071 <v-flex xs12 sm6>
1071 <v-layout wrap> 1072 <v-layout wrap>
1072 <v-flex xs12 class="pt-4 subheading"> 1073 <v-flex xs12 class="pt-4 subheading">
1073 <label>Father Name:</label> 1074 <label>Father Name:</label>
1074 </v-flex> 1075 </v-flex>
1075 <v-flex xs12> 1076 <v-flex xs12>
1076 <v-text-field 1077 <v-text-field
1077 v-model="parentData.fatherName" 1078 v-model="parentData.fatherName"
1078 placeholder="Fill your father Name" 1079 placeholder="Fill your father Name"
1079 required 1080 required
1080 ></v-text-field> 1081 ></v-text-field>
1081 </v-flex> 1082 </v-flex>
1082 </v-layout> 1083 </v-layout>
1083 </v-flex> 1084 </v-flex>
1084 <v-flex xs12 sm6> 1085 <v-flex xs12 sm6>
1085 <v-layout wrap> 1086 <v-layout wrap>
1086 <v-flex xs12 class="pt-4 subheading"> 1087 <v-flex xs12 class="pt-4 subheading">
1087 <label>Mother Name:</label> 1088 <label>Mother Name:</label>
1088 </v-flex> 1089 </v-flex>
1089 <v-flex xs12> 1090 <v-flex xs12>
1090 <v-text-field 1091 <v-text-field
1091 v-model="parentData.motherName" 1092 v-model="parentData.motherName"
1092 placeholder="fill your Mother Name" 1093 placeholder="fill your Mother Name"
1093 type="text" 1094 type="text"
1094 required 1095 required
1095 ></v-text-field> 1096 ></v-text-field>
1096 </v-flex> 1097 </v-flex>
1097 </v-layout> 1098 </v-layout>
1098 </v-flex> 1099 </v-flex>
1099 </v-layout> 1100 </v-layout>
1100 <v-layout wrap> 1101 <v-layout wrap>
1101 <v-flex xs12 sm6> 1102 <v-flex xs12 sm6>
1102 <v-layout wrap> 1103 <v-layout wrap>
1103 <v-flex xs12 class="pt-4 subheading"> 1104 <v-flex xs12 class="pt-4 subheading">
1104 <label>Mother Cell No:</label> 1105 <label>Mother Cell No:</label>
1105 </v-flex> 1106 </v-flex>
1106 <v-flex xs12> 1107 <v-flex xs12>
1107 <v-text-field 1108 <v-text-field
1108 v-model="parentData.motherCellNo" 1109 v-model="parentData.motherCellNo"
1109 placeholder="fill your Mother Cell Number" 1110 placeholder="fill your Mother Cell Number"
1110 type="number" 1111 type="number"
1111 required 1112 required
1112 ></v-text-field> 1113 ></v-text-field>
1113 </v-flex> 1114 </v-flex>
1114 </v-layout> 1115 </v-layout>
1115 </v-flex> 1116 </v-flex>
1116 <v-flex xs12 sm6> 1117 <v-flex xs12 sm6>
1117 <v-layout wrap> 1118 <v-layout wrap>
1118 <v-flex xs12 class="pt-4 subheading"> 1119 <v-flex xs12 class="pt-4 subheading">
1119 <label>Father Profession:</label> 1120 <label>Father Profession:</label>
1120 </v-flex> 1121 </v-flex>
1121 <v-flex xs12> 1122 <v-flex xs12>
1122 <v-text-field 1123 <v-text-field
1123 v-model="parentData.fatherProfession" 1124 v-model="parentData.fatherProfession"
1124 placeholder="fill your father profession" 1125 placeholder="fill your father profession"
1125 ></v-text-field> 1126 ></v-text-field>
1126 </v-flex> 1127 </v-flex>
1127 </v-layout> 1128 </v-layout>
1128 </v-flex> 1129 </v-flex>
1129 </v-layout> 1130 </v-layout>
1130 <v-layout wrap> 1131 <v-layout wrap>
1131 <v-flex xs12 sm6> 1132 <v-flex xs12 sm6>
1132 <v-layout wrap> 1133 <v-layout wrap>
1133 <v-flex xs12 class="pt-4 subheading"> 1134 <v-flex xs12 class="pt-4 subheading">
1134 <label>Mother Profession:</label> 1135 <label>Mother Profession:</label>
1135 </v-flex> 1136 </v-flex>
1136 <v-flex xs12> 1137 <v-flex xs12>
1137 <v-text-field 1138 <v-text-field
1138 v-model="parentData.motherProfession" 1139 v-model="parentData.motherProfession"
1139 placeholder="fill your mother profession" 1140 placeholder="fill your mother profession"
1140 ></v-text-field> 1141 ></v-text-field>
1141 </v-flex> 1142 </v-flex>
1142 </v-layout> 1143 </v-layout>
1143 </v-flex> 1144 </v-flex>
1144 <v-flex xs12 sm6> 1145 <v-flex xs12 sm6>
1145 <v-layout wrap> 1146 <v-layout wrap>
1146 <v-flex xs12 class="pt-4 subheading"> 1147 <v-flex xs12 class="pt-4 subheading">
1147 <label>Password:</label> 1148 <label>Password:</label>
1148 </v-flex> 1149 </v-flex>
1149 <v-flex xs12> 1150 <v-flex xs12>
1150 <v-text-field 1151 <v-text-field
1151 v-model="parentData.password" 1152 v-model="parentData.password"
1152 placeholder="Enter Your Password" 1153 placeholder="Enter Your Password"
1153 ></v-text-field> 1154 ></v-text-field>
1154 </v-flex> 1155 </v-flex>
1155 </v-layout> 1156 </v-layout>
1156 </v-flex> 1157 </v-flex>
1157 </v-layout> 1158 </v-layout>
1158 <v-flex sm12 class="hidden-xs-only"> 1159 <v-flex sm12 class="hidden-xs-only">
1159 <v-card-actions> 1160 <v-card-actions>
1160 <v-spacer></v-spacer> 1161 <v-spacer></v-spacer>
1161 <v-btn 1162 <v-btn
1162 @click="submitParentDetails" 1163 @click="submitParentDetails"
1163 round 1164 round
1164 dark 1165 dark
1165 :loading="loading" 1166 :loading="loading"
1166 v-show="showParent" 1167 v-show="showParent"
1167 class="add-button" 1168 class="add-button"
1168 >Add</v-btn> 1169 >Add</v-btn>
1169 <v-btn 1170 <v-btn
1170 v-show="showNext" 1171 v-show="showNext"
1171 @click="e2 = 2" 1172 @click="e2 = 2"
1172 round 1173 round
1173 dark 1174 dark
1174 class="add-button" 1175 class="add-button"
1175 >Next</v-btn> 1176 >Next</v-btn>
1176 </v-card-actions> 1177 </v-card-actions>
1177 </v-flex> 1178 </v-flex>
1178 <v-flex 1179 <v-flex
1179 xs6 1180 xs6
1180 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1181 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1181 > 1182 >
1182 <v-btn 1183 <v-btn
1183 @click="submitParentDetails" 1184 @click="submitParentDetails"
1184 round 1185 round
1185 dark 1186 dark
1186 :loading="loading" 1187 :loading="loading"
1187 v-show="showParent" 1188 v-show="showParent"
1188 class="add-button" 1189 class="add-button"
1189 >Add</v-btn> 1190 >Add</v-btn>
1190 <v-btn 1191 <v-btn
1191 v-show="showNext" 1192 v-show="showNext"
1192 @click="e2 = 2" 1193 @click="e2 = 2"
1193 round 1194 round
1194 dark 1195 dark
1195 class="add-button" 1196 class="add-button"
1196 >Next</v-btn> 1197 >Next</v-btn>
1197 </v-flex> 1198 </v-flex>
1198 </v-form> 1199 </v-form>
1199 </v-flex> 1200 </v-flex>
1200 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> 1201 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
1201 <v-form ref="parentForm" v-model="valid" lazy-validation> 1202 <v-form ref="parentForm" v-model="valid" lazy-validation>
1202 <v-layout wrap> 1203 <v-layout wrap>
1203 <v-flex xs12 sm6> 1204 <v-flex xs12 sm6>
1204 <v-layout> 1205 <v-layout>
1205 <v-flex xs4 class="pt-4 subheading"> 1206 <v-flex xs4 class="pt-4 subheading">
1206 <label class="right">Father Cell No:</label> 1207 <label class="right">Father Cell No:</label>
1207 </v-flex> 1208 </v-flex>
1208 <v-flex xs8 class="ml-3"> 1209 <v-flex xs8 class="ml-3">
1209 <v-text-field 1210 <v-text-field
1210 v-model.trim="parentData.fatherCellNo" 1211 v-model.trim="parentData.fatherCellNo"
1211 placeholder="fill your father Cell Number" 1212 placeholder="fill your father Cell Number"
1212 type="number" 1213 type="number"
1213 :rules="fatheCellNoRules" 1214 :rules="fatheCellNoRules"
1214 counter="10" 1215 counter="10"
1215 required 1216 required
1216 v-on:keyup="getParentDetails()" 1217 v-on:keyup="getParentDetails()"
1217 ></v-text-field> 1218 ></v-text-field>
1218 </v-flex> 1219 </v-flex>
1219 </v-layout> 1220 </v-layout>
1220 </v-flex> 1221 </v-flex>
1221 <v-flex xs12 sm6> 1222 <v-flex xs12 sm6>
1222 <v-layout> 1223 <v-layout>
1223 <v-flex xs4 class="pt-4 subheading"> 1224 <v-flex xs4 class="pt-4 subheading">
1224 <label class="right">Parent Email Id:</label> 1225 <label class="right">Parent Email Id:</label>
1225 </v-flex> 1226 </v-flex>
1226 <v-flex xs8 class="ml-3"> 1227 <v-flex xs8 class="ml-3">
1227 <v-text-field 1228 <v-text-field
1228 placeholder="fill Parent email" 1229 placeholder="fill Parent email"
1229 v-model="parentData.email" 1230 v-model="parentData.email"
1230 type="text" 1231 type="text"
1231 required 1232 required
1232 ></v-text-field> 1233 ></v-text-field>
1233 </v-flex> 1234 </v-flex>
1234 </v-layout> 1235 </v-layout>
1235 </v-flex> 1236 </v-flex>
1236 </v-layout> 1237 </v-layout>
1237 <v-layout wrap> 1238 <v-layout wrap>
1238 <v-flex xs12 sm6> 1239 <v-flex xs12 sm6>
1239 <v-layout> 1240 <v-layout>
1240 <v-flex xs4 class="pt-4 subheading"> 1241 <v-flex xs4 class="pt-4 subheading">
1241 <label class="right">Father Name:</label> 1242 <label class="right">Father Name:</label>
1242 </v-flex> 1243 </v-flex>
1243 <v-flex xs8 class="ml-3"> 1244 <v-flex xs8 class="ml-3">
1244 <v-text-field 1245 <v-text-field
1245 v-model="parentData.fatherName" 1246 v-model="parentData.fatherName"
1246 placeholder="Fill your father Name" 1247 placeholder="Fill your father Name"
1247 required 1248 required
1248 ></v-text-field> 1249 ></v-text-field>
1249 </v-flex> 1250 </v-flex>
1250 </v-layout> 1251 </v-layout>
1251 </v-flex> 1252 </v-flex>
1252 <v-flex xs12 sm6> 1253 <v-flex xs12 sm6>
1253 <v-layout> 1254 <v-layout>
1254 <v-flex xs4 class="pt-4 subheading"> 1255 <v-flex xs4 class="pt-4 subheading">
1255 <label class="right">Mother Name:</label> 1256 <label class="right">Mother Name:</label>
1256 </v-flex> 1257 </v-flex>
1257 <v-flex xs8 class="ml-3"> 1258 <v-flex xs8 class="ml-3">
1258 <v-text-field 1259 <v-text-field
1259 v-model="parentData.motherName" 1260 v-model="parentData.motherName"
1260 placeholder="fill your Mother Name" 1261 placeholder="fill your Mother Name"
1261 type="text" 1262 type="text"
1262 required 1263 required
1263 ></v-text-field> 1264 ></v-text-field>
1264 </v-flex> 1265 </v-flex>
1265 </v-layout> 1266 </v-layout>
1266 </v-flex> 1267 </v-flex>
1267 </v-layout> 1268 </v-layout>
1268 <v-layout wrap> 1269 <v-layout wrap>
1269 <v-flex xs12 sm6> 1270 <v-flex xs12 sm6>
1270 <v-layout> 1271 <v-layout>
1271 <v-flex xs4 class="pt-4 subheading"> 1272 <v-flex xs4 class="pt-4 subheading">
1272 <label class="right">Mother Cell No:</label> 1273 <label class="right">Mother Cell No:</label>
1273 </v-flex> 1274 </v-flex>
1274 <v-flex xs8 class="ml-3"> 1275 <v-flex xs8 class="ml-3">
1275 <v-text-field 1276 <v-text-field
1276 v-model="parentData.motherCellNo" 1277 v-model="parentData.motherCellNo"
1277 placeholder="fill your Mother Cell Number" 1278 placeholder="fill your Mother Cell Number"
1278 type="number" 1279 type="number"
1279 required 1280 required
1280 ></v-text-field> 1281 ></v-text-field>
1281 </v-flex> 1282 </v-flex>
1282 </v-layout> 1283 </v-layout>
1283 </v-flex> 1284 </v-flex>
1284 <v-flex xs12 sm6> 1285 <v-flex xs12 sm6>
1285 <v-layout> 1286 <v-layout>
1286 <v-flex xs4 class="pt-4 subheading"> 1287 <v-flex xs4 class="pt-4 subheading">
1287 <label class="right">Father Profession:</label> 1288 <label class="right">Father Profession:</label>
1288 </v-flex> 1289 </v-flex>
1289 <v-flex xs8 class="ml-3"> 1290 <v-flex xs8 class="ml-3">
1290 <v-text-field 1291 <v-text-field
1291 v-model="parentData.fatherProfession" 1292 v-model="parentData.fatherProfession"
1292 placeholder="fill your father profession" 1293 placeholder="fill your father profession"
1293 ></v-text-field> 1294 ></v-text-field>
1294 </v-flex> 1295 </v-flex>
1295 </v-layout> 1296 </v-layout>
1296 </v-flex> 1297 </v-flex>
1297 </v-layout> 1298 </v-layout>
1298 <v-layout wrap> 1299 <v-layout wrap>
1299 <v-flex xs12 sm6> 1300 <v-flex xs12 sm6>
1300 <v-layout> 1301 <v-layout>
1301 <v-flex xs4 class="pt-4 subheading"> 1302 <v-flex xs4 class="pt-4 subheading">
1302 <label class="right">Mother Profession:</label> 1303 <label class="right">Mother Profession:</label>
1303 </v-flex> 1304 </v-flex>
1304 <v-flex xs8 class="ml-3"> 1305 <v-flex xs8 class="ml-3">
1305 <v-text-field 1306 <v-text-field
1306 v-model="parentData.motherProfession" 1307 v-model="parentData.motherProfession"
1307 placeholder="fill your mother profession" 1308 placeholder="fill your mother profession"
1308 ></v-text-field> 1309 ></v-text-field>
1309 </v-flex> 1310 </v-flex>
1310 </v-layout> 1311 </v-layout>
1311 </v-flex> 1312 </v-flex>
1312 <v-flex xs12 sm6> 1313 <v-flex xs12 sm6>
1313 <v-layout> 1314 <v-layout>
1314 <v-flex xs4 class="pt-4 subheading"> 1315 <v-flex xs4 class="pt-4 subheading">
1315 <label class="right">Password:</label> 1316 <label class="right">Password:</label>
1316 </v-flex> 1317 </v-flex>
1317 <v-flex xs8 class="ml-3"> 1318 <v-flex xs8 class="ml-3">
1318 <v-text-field 1319 <v-text-field
1319 :append-icon="e1 ? 'visibility_off' : 'visibility'" 1320 :append-icon="e1 ? 'visibility_off' : 'visibility'"
1320 :append-icon-cb="() => (e1 = !e1)" 1321 :append-icon-cb="() => (e1 = !e1)"
1321 :type="e1 ? 'password' : 'text'" 1322 :type="e1 ? 'password' : 'text'"
1322 :rules="password" 1323 :rules="password"
1323 v-model="parentData.password" 1324 v-model="parentData.password"
1324 placeholder="Enter Your Password" 1325 placeholder="Enter Your Password"
1325 :disabled="isFatherCellExists" 1326 :disabled="isFatherCellExists"
1326 required 1327 required
1327 ></v-text-field> 1328 ></v-text-field>
1328 </v-flex> 1329 </v-flex>
1329 </v-layout> 1330 </v-layout>
1330 </v-flex> 1331 </v-flex>
1331 </v-layout> 1332 </v-layout>
1332 <v-flex sm12 class="hidden-xs-only"> 1333 <v-flex sm12 class="hidden-xs-only">
1333 <v-card-actions> 1334 <v-card-actions>
1334 <v-spacer></v-spacer> 1335 <v-spacer></v-spacer>
1335 <v-btn 1336 <v-btn
1336 @click="submitParentDetails" 1337 @click="submitParentDetails"
1337 round 1338 round
1338 dark 1339 dark
1339 :loading="loading" 1340 :loading="loading"
1340 v-show="showParent" 1341 v-show="showParent"
1341 class="add-button" 1342 class="add-button"
1342 >Add</v-btn> 1343 >Add</v-btn>
1343 <v-btn 1344 <v-btn
1344 v-show="showNext" 1345 v-show="showNext"
1345 @click="e2 = 2" 1346 @click="e2 = 2"
1346 round 1347 round
1347 dark 1348 dark
1348 class="add-button" 1349 class="add-button"
1349 >Next</v-btn> 1350 >Next</v-btn>
1350 </v-card-actions> 1351 </v-card-actions>
1351 </v-flex> 1352 </v-flex>
1352 <v-flex 1353 <v-flex
1353 xs6 1354 xs6
1354 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1355 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1355 > 1356 >
1356 <v-btn 1357 <v-btn
1357 @click="submitParentDetails" 1358 @click="submitParentDetails"
1358 round 1359 round
1359 dark 1360 dark
1360 :loading="loading" 1361 :loading="loading"
1361 v-show="showParent" 1362 v-show="showParent"
1362 class="add-button" 1363 class="add-button"
1363 >Add</v-btn> 1364 >Add</v-btn>
1364 <v-btn 1365 <v-btn
1365 v-show="showNext" 1366 v-show="showNext"
1366 @click="e2 = 2" 1367 @click="e2 = 2"
1367 round 1368 round
1368 dark 1369 dark
1369 class="add-button" 1370 class="add-button"
1370 >Next</v-btn> 1371 >Next</v-btn>
1371 </v-flex> 1372 </v-flex>
1372 </v-form> 1373 </v-form>
1373 </v-flex> 1374 </v-flex>
1374 </v-container> 1375 </v-container>
1375 </v-stepper-content> 1376 </v-stepper-content>
1376 <v-stepper-content step="2"> 1377 <v-stepper-content step="2">
1377 <v-flex xs12 sm12> 1378 <v-flex xs12 sm12>
1378 <v-form ref="form" v-model="valid" lazy-validation> 1379 <v-form ref="form" v-model="valid" lazy-validation>
1379 <v-layout> 1380 <v-layout>
1380 <v-flex 1381 <v-flex
1381 xs12 1382 xs12
1382 class="text-xs-center text-sm-center text-md-center text-lg-center" 1383 class="text-xs-center text-sm-center text-md-center text-lg-center"
1383 > 1384 >
1384 <v-avatar size="100px"> 1385 <v-avatar size="100px">
1385 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1386 <img src="/static/icon/user.png" v-if="!imageUrl" />
1386 </v-avatar> 1387 </v-avatar>
1387 <input 1388 <input
1388 type="file" 1389 type="file"
1389 style="display: none" 1390 style="display: none"
1390 ref="image" 1391 ref="image"
1391 accept="image/*" 1392 accept="image/*"
1392 @change="onFilePicked" 1393 @change="onFilePicked"
1393 /> 1394 />
1394 <img 1395 <img
1395 :src="imageData.imageUrl" 1396 :src="imageData.imageUrl"
1396 height="150" 1397 height="150"
1397 v-if="imageUrl" 1398 v-if="imageUrl"
1398 style="border-radius:50%; width:200px" 1399 style="border-radius:50%; width:200px"
1399 /> 1400 />
1400 </v-flex> 1401 </v-flex>
1401 </v-layout> 1402 </v-layout>
1402 <v-layout wrap> 1403 <v-layout wrap>
1403 <v-flex xs12 sm6> 1404 <v-flex xs12 sm6>
1404 <v-layout> 1405 <v-layout>
1405 <v-flex x4 sm4 class="pt-4 subheading"> 1406 <v-flex x4 sm4 class="pt-4 subheading">
1406 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1407 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1407 <label 1408 <label
1408 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1409 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1409 >Class:</label> 1410 >Class:</label>
1410 </v-flex> 1411 </v-flex>
1411 <v-flex xs8 sm8 class="ml-3"> 1412 <v-flex xs8 sm8 class="ml-3">
1412 <v-select 1413 <v-select
1413 :items="addclass" 1414 :items="addclass"
1414 label="Select Class" 1415 label="Select Class"
1415 v-model="addStudents.select" 1416 v-model="addStudents.select"
1416 item-text="classNum" 1417 item-text="classNum"
1417 item-value="_id" 1418 item-value="_id"
1418 name="Select Class" 1419 name="Select Class"
1419 :rules="classRules" 1420 :rules="classRules"
1420 @change="getSection(addStudents.select)" 1421 @change="getSection(addStudents.select)"
1421 required 1422 required
1422 ></v-select> 1423 ></v-select>
1423 </v-flex> 1424 </v-flex>
1424 </v-layout> 1425 </v-layout>
1425 </v-flex> 1426 </v-flex>
1426 <v-flex xs12 sm6> 1427 <v-flex xs12 sm6>
1427 <v-layout> 1428 <v-layout>
1428 <v-flex xs4 class="pt-4 subheading"> 1429 <v-flex xs4 class="pt-4 subheading">
1429 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 1430 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
1430 <label 1431 <label
1431 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1432 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1432 >Section:</label> 1433 >Section:</label>
1433 </v-flex> 1434 </v-flex>
1434 <v-flex xs8 class="ml-3"> 1435 <v-flex xs8 class="ml-3">
1435 <v-select 1436 <v-select
1436 :items="addSection" 1437 :items="addSection"
1437 label="Select Section" 1438 label="Select Section"
1438 v-model="addStudents.selectSection" 1439 v-model="addStudents.selectSection"
1439 item-text="name" 1440 item-text="name"
1440 item-value="_id" 1441 item-value="_id"
1441 name="Select Section" 1442 name="Select Section"
1442 :rules="sectionRules" 1443 :rules="sectionRules"
1443 required 1444 required
1444 ></v-select> 1445 ></v-select>
1445 </v-flex> 1446 </v-flex>
1446 </v-layout> 1447 </v-layout>
1447 </v-flex> 1448 </v-flex>
1448 </v-layout> 1449 </v-layout>
1449 <v-layout wrap> 1450 <v-layout wrap>
1450 <v-flex xs12 sm6> 1451 <v-flex xs12 sm6>
1451 <v-layout> 1452 <v-layout>
1452 <v-flex xs4 sm4 class="pt-4 subheading"> 1453 <v-flex xs4 sm4 class="pt-4 subheading">
1453 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1454 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1454 <label 1455 <label
1455 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1456 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1456 >Name:</label> 1457 >Name:</label>
1457 </v-flex> 1458 </v-flex>
1458 <v-flex xs8 sm8 class="ml-3"> 1459 <v-flex xs8 sm8 class="ml-3">
1459 <v-text-field 1460 <v-text-field
1460 v-model="addStudents.name" 1461 v-model="addStudents.name"
1461 placeholder="fill your full Name" 1462 placeholder="fill your full Name"
1462 name="name" 1463 name="name"
1463 type="text" 1464 type="text"
1464 :rules="nameRules" 1465 :rules="nameRules"
1465 required 1466 required
1466 ></v-text-field> 1467 ></v-text-field>
1467 </v-flex> 1468 </v-flex>
1468 </v-layout> 1469 </v-layout>
1469 </v-flex> 1470 </v-flex>
1470 <v-flex xs12 sm6> 1471 <v-flex xs12 sm6>
1471 <v-layout> 1472 <v-layout>
1472 <v-flex xs4 sm4 class="pt-4 subheading"> 1473 <v-flex xs4 sm4 class="pt-4 subheading">
1473 <label class="right">Email:</label> 1474 <label class="right">Email:</label>
1474 </v-flex> 1475 </v-flex>
1475 <v-flex xs8 sm8 class="ml-3"> 1476 <v-flex xs8 sm8 class="ml-3">
1476 <v-text-field 1477 <v-text-field
1477 placeholder="fill your email" 1478 placeholder="fill your email"
1478 v-model="addStudents.email" 1479 v-model="addStudents.email"
1479 type="text" 1480 type="text"
1480 name="email" 1481 name="email"
1481 required 1482 required
1482 ></v-text-field> 1483 ></v-text-field>
1483 </v-flex> 1484 </v-flex>
1484 </v-layout> 1485 </v-layout>
1485 </v-flex> 1486 </v-flex>
1486 </v-layout> 1487 </v-layout>
1487 <v-layout wrap> 1488 <v-layout wrap>
1488 <v-flex xs12 sm6> 1489 <v-flex xs12 sm6>
1489 <v-layout> 1490 <v-layout>
1490 <v-flex xs4 sm4 class="pt-4 subheading"> 1491 <v-flex xs4 sm4 class="pt-4 subheading">
1491 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 1492 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
1492 <label 1493 <label
1493 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1494 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1494 >D.O.B:</label> 1495 >D.O.B:</label>
1495 </v-flex> 1496 </v-flex>
1496 <v-flex xs8 sm8 class="ml-3"> 1497 <v-flex xs8 sm8 class="ml-3">
1497 <v-menu 1498 <v-menu
1498 ref="menu" 1499 ref="menu"
1499 :close-on-content-click="false" 1500 :close-on-content-click="false"
1500 v-model="menu" 1501 v-model="menu"
1501 :nudge-right="40" 1502 :nudge-right="40"
1502 lazy 1503 lazy
1503 transition="scale-transition" 1504 transition="scale-transition"
1504 offset-y 1505 offset-y
1505 full-width 1506 full-width
1506 min-width="290px" 1507 min-width="290px"
1507 > 1508 >
1508 <v-text-field 1509 <v-text-field
1509 slot="activator" 1510 slot="activator"
1510 :rules="dateRules" 1511 :rules="dateRules"
1511 v-model="addStudents.date" 1512 v-model="addStudents.date"
1512 placeholder="Select date" 1513 placeholder="Select date"
1513 ></v-text-field> 1514 ></v-text-field>
1514 <v-date-picker 1515 <v-date-picker
1515 ref="picker" 1516 ref="picker"
1516 v-model="addStudents.date" 1517 v-model="addStudents.date"
1517 :max="new Date().toISOString().substr(0, 10)" 1518 :max="new Date().toISOString().substr(0, 10)"
1518 min="1950-01-01" 1519 min="1950-01-01"
1519 @input="menu = false" 1520 @input="menu = false"
1520 ></v-date-picker> 1521 ></v-date-picker>
1521 </v-menu> 1522 </v-menu>
1522 </v-flex> 1523 </v-flex>
1523 </v-layout> 1524 </v-layout>
1524 </v-flex> 1525 </v-flex>
1525 <v-flex xs12 sm6> 1526 <v-flex xs12 sm6>
1526 <v-layout> 1527 <v-layout>
1527 <v-flex xs4 class="pt-4 subheading"> 1528 <v-flex xs4 class="pt-4 subheading">
1528 <label class="right">City:</label> 1529 <label class="right">City:</label>
1529 </v-flex> 1530 </v-flex>
1530 <v-flex xs8 class="ml-3"> 1531 <v-flex xs8 class="ml-3">
1531 <v-text-field 1532 <v-text-field
1532 v-model="addStudents.city" 1533 v-model="addStudents.city"
1533 placeholder="fill your City Name" 1534 placeholder="fill your City Name"
1534 name="City" 1535 name="City"
1535 type="text" 1536 type="text"
1536 :rules="cityRules" 1537 :rules="cityRules"
1537 required 1538 required
1538 ></v-text-field> 1539 ></v-text-field>
1539 </v-flex> 1540 </v-flex>
1540 </v-layout> 1541 </v-layout>
1541 </v-flex> 1542 </v-flex>
1542 </v-layout> 1543 </v-layout>
1543 <v-layout wrap> 1544 <v-layout wrap>
1544 <v-flex xs12 sm6> 1545 <v-flex xs12 sm6>
1545 <v-layout> 1546 <v-layout>
1546 <v-flex xs4 class="pt-4 subheading"> 1547 <v-flex xs4 class="pt-4 subheading">
1547 <label class="right">State:</label> 1548 <label class="right">State:</label>
1548 </v-flex> 1549 </v-flex>
1549 <v-flex xs8 class="ml-3"> 1550 <v-flex xs8 class="ml-3">
1550 <v-text-field 1551 <v-text-field
1551 v-model="addStudents.state" 1552 v-model="addStudents.state"
1552 placeholder="fill your State Name" 1553 placeholder="fill your State Name"
1553 name="state" 1554 name="state"
1554 type="text" 1555 type="text"
1555 :rules="stateRules" 1556 :rules="stateRules"
1556 required 1557 required
1557 ></v-text-field> 1558 ></v-text-field>
1558 </v-flex> 1559 </v-flex>
1559 </v-layout> 1560 </v-layout>
1560 </v-flex> 1561 </v-flex>
1561 <v-flex xs12 sm6> 1562 <v-flex xs12 sm6>
1562 <v-layout> 1563 <v-layout>
1563 <v-flex xs4 class="pt-4 subheading"> 1564 <v-flex xs4 class="pt-4 subheading">
1564 <label class="right">Pincode:</label> 1565 <label class="right">Pincode:</label>
1565 </v-flex> 1566 </v-flex>
1566 <v-flex xs8 class="ml-3"> 1567 <v-flex xs8 class="ml-3">
1567 <v-text-field 1568 <v-text-field
1568 v-model="addStudents.pincode" 1569 v-model="addStudents.pincode"
1569 placeholder="fill your pincode" 1570 placeholder="fill your pincode"
1570 name="pincode" 1571 name="pincode"
1571 type="number" 1572 type="number"
1572 :rules="pincode" 1573 :rules="pincode"
1573 required 1574 required
1574 ></v-text-field> 1575 ></v-text-field>
1575 </v-flex> 1576 </v-flex>
1576 </v-layout> 1577 </v-layout>
1577 </v-flex> 1578 </v-flex>
1578 </v-layout> 1579 </v-layout>
1579 <v-layout wrap> 1580 <v-layout wrap>
1580 <v-flex xs12 sm6> 1581 <v-flex xs12 sm6>
1581 <v-layout> 1582 <v-layout>
1582 <v-flex xs4 class="pt-4 subheading"> 1583 <v-flex xs4 class="pt-4 subheading">
1583 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1584 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1584 <label 1585 <label
1585 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1586 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1586 >Mobile:</label> 1587 >Mobile:</label>
1587 </v-flex> 1588 </v-flex>
1588 <v-flex xs8 class="ml-3"> 1589 <v-flex xs8 class="ml-3">
1589 <v-text-field 1590 <v-text-field
1590 v-model="addStudents.mobile" 1591 v-model="addStudents.mobile"
1591 placeholder="fill your MobileNo" 1592 placeholder="fill your MobileNo"
1592 name="mobileNo" 1593 name="mobileNo"
1593 type="number" 1594 type="number"
1594 ></v-text-field> 1595 ></v-text-field>
1595 </v-flex> 1596 </v-flex>
1596 </v-layout> 1597 </v-layout>
1597 </v-flex> 1598 </v-flex>
1598 <v-flex xs12 sm6> 1599 <v-flex xs12 sm6>
1599 <v-layout> 1600 <v-layout>
1600 <v-flex xs4 class="pt-4 subheading"> 1601 <v-flex xs4 class="pt-4 subheading">
1601 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 1602 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
1602 <label 1603 <label
1603 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1604 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1604 >Country:</label> 1605 >Country:</label>
1605 </v-flex> 1606 </v-flex>
1606 <v-flex xs8 class="ml-3"> 1607 <v-flex xs8 class="ml-3">
1607 <v-autocomplete 1608 <v-autocomplete
1608 v-model="addStudents.country" 1609 v-model="addStudents.country"
1609 :rules="country" 1610 :rules="country"
1610 :items="countries" 1611 :items="countries"
1611 placeholder="Select Country Name" 1612 placeholder="Select Country Name"
1612 required 1613 required
1613 ></v-autocomplete> 1614 ></v-autocomplete>
1614 </v-flex> 1615 </v-flex>
1615 </v-layout> 1616 </v-layout>
1616 </v-flex> 1617 </v-flex>
1617 </v-layout> 1618 </v-layout>
1618 <v-layout wrap> 1619 <v-layout wrap>
1619 <v-flex xs12 sm6> 1620 <v-flex xs12 sm6>
1620 <v-layout> 1621 <v-layout>
1621 <v-flex xs4 class="pt-4 subheading"> 1622 <v-flex xs4 class="pt-4 subheading">
1622 <label class="right">Gender:</label> 1623 <label class="right">Gender:</label>
1623 </v-flex> 1624 </v-flex>
1624 <v-flex xs8 class="ml-3"> 1625 <v-flex xs8 class="ml-3">
1625 <v-select 1626 <v-select
1626 :items="gender" 1627 :items="gender"
1627 v-model="addStudents.gender" 1628 v-model="addStudents.gender"
1628 :rules="genderRules" 1629 :rules="genderRules"
1629 label="Select Gender" 1630 label="Select Gender"
1630 required 1631 required
1631 ></v-select> 1632 ></v-select>
1632 </v-flex> 1633 </v-flex>
1633 </v-layout> 1634 </v-layout>
1634 </v-flex> 1635 </v-flex>
1635 <v-flex xs12 sm6> 1636 <v-flex xs12 sm6>
1636 <v-layout> 1637 <v-layout>
1637 <v-flex xs4 class="pt-4 subheading"> 1638 <v-flex xs4 class="pt-4 subheading">
1638 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1639 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1639 <label 1640 <label
1640 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1641 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1641 >Blood:</label> 1642 >Blood:</label>
1642 </v-flex> 1643 </v-flex>
1643 <v-flex xs8 class="ml-3"> 1644 <v-flex xs8 class="ml-3">
1644 <v-text-field 1645 <v-text-field
1645 v-model="addStudents.bloodGroup" 1646 v-model="addStudents.bloodGroup"
1646 placeholder="Fill your Blood Group" 1647 placeholder="Fill your Blood Group"
1647 required 1648 required
1648 ></v-text-field> 1649 ></v-text-field>
1649 </v-flex> 1650 </v-flex>
1650 </v-layout> 1651 </v-layout>
1651 </v-flex> 1652 </v-flex>
1652 </v-layout> 1653 </v-layout>
1653 <v-layout wrap> 1654 <v-layout wrap>
1654 <v-flex xs12 sm6> 1655 <v-flex xs12 sm6>
1655 <v-layout> 1656 <v-layout>
1656 <v-flex xs4 class="pt-4 subheading"> 1657 <v-flex xs4 class="pt-4 subheading">
1657 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1658 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1658 <label 1659 <label
1659 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1660 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1660 >Roll No:</label> 1661 >Roll No:</label>
1661 </v-flex> 1662 </v-flex>
1662 <v-flex xs8 class="ml-3"> 1663 <v-flex xs8 class="ml-3">
1663 <v-text-field 1664 <v-text-field
1664 v-model="addStudents.rollNo" 1665 v-model="addStudents.rollNo"
1665 placeholder="Fill your Roll Number" 1666 placeholder="Fill your Roll Number"
1666 :rules="rollNo" 1667 :rules="rollNo"
1667 required 1668 required
1668 ></v-text-field> 1669 ></v-text-field>
1669 </v-flex> 1670 </v-flex>
1670 </v-layout> 1671 </v-layout>
1671 </v-flex> 1672 </v-flex>
1672 <v-flex xs12 sm6> 1673 <v-flex xs12 sm6>
1673 <v-layout> 1674 <v-layout>
1674 <v-flex xs4 class="pt-4 subheading"> 1675 <v-flex xs4 class="pt-4 subheading">
1675 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> 1676 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label>
1676 <label 1677 <label
1677 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1678 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1678 >Medical:</label> 1679 >Medical:</label>
1679 </v-flex> 1680 </v-flex>
1680 <v-flex xs8 class="ml-3"> 1681 <v-flex xs8 class="ml-3">
1681 <v-text-field 1682 <v-text-field
1682 v-model="addStudents.medicalNotes" 1683 v-model="addStudents.medicalNotes"
1683 placeholder="Fill your Medical Notes" 1684 placeholder="Fill your Medical Notes"
1684 required 1685 required
1685 ></v-text-field> 1686 ></v-text-field>
1686 </v-flex> 1687 </v-flex>
1687 </v-layout> 1688 </v-layout>
1688 </v-flex> 1689 </v-flex>
1689 </v-layout> 1690 </v-layout>
1690 <v-layout wrap> 1691 <v-layout wrap>
1691 <v-flex xs12 sm6> 1692 <v-flex xs12 sm6>
1692 <v-layout> 1693 <v-layout>
1693 <v-flex xs4 class="pt-4 subheading"> 1694 <v-flex xs4 class="pt-4 subheading">
1694 <label class="right">Height:</label> 1695 <label class="right">Height:</label>
1695 </v-flex> 1696 </v-flex>
1696 <v-flex xs8 class="ml-3"> 1697 <v-flex xs8 class="ml-3">
1697 <v-text-field 1698 <v-text-field
1698 v-model="addStudents.height" 1699 v-model="addStudents.height"
1699 placeholder="Fill your Height" 1700 placeholder="Fill your Height"
1700 required 1701 required
1701 ></v-text-field> 1702 ></v-text-field>
1702 </v-flex> 1703 </v-flex>
1703 </v-layout> 1704 </v-layout>
1704 </v-flex> 1705 </v-flex>
1705 <v-flex xs12 sm6> 1706 <v-flex xs12 sm6>
1706 <v-layout> 1707 <v-layout>
1707 <v-flex xs4 class="pt-4 subheading"> 1708 <v-flex xs4 class="pt-4 subheading">
1708 <label class="right">Weight:</label> 1709 <label class="right">Weight:</label>
1709 </v-flex> 1710 </v-flex>
1710 <v-flex xs8 class="ml-3"> 1711 <v-flex xs8 class="ml-3">
1711 <v-text-field 1712 <v-text-field
1712 v-model="addStudents.weight" 1713 v-model="addStudents.weight"
1713 placeholder="Fill your Weight" 1714 placeholder="Fill your Weight"
1714 required 1715 required
1715 ></v-text-field> 1716 ></v-text-field>
1716 </v-flex> 1717 </v-flex>
1717 </v-layout> 1718 </v-layout>
1718 </v-flex> 1719 </v-flex>
1719 </v-layout> 1720 </v-layout>
1720 <v-layout wrap> 1721 <v-layout wrap>
1721 <v-flex xs12 sm6> 1722 <v-flex xs12 sm6>
1722 <v-layout> 1723 <v-layout>
1723 <v-flex xs4 class="pt-4 subheading"> 1724 <v-flex xs4 class="pt-4 subheading">
1724 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1725 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1725 <label 1726 <label
1726 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1727 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1727 >Uplaod :</label> 1728 >Uplaod :</label>
1728 </v-flex> 1729 </v-flex>
1729 <v-flex xs8 class="ml-3"> 1730 <v-flex xs8 class="ml-3">
1730 <v-text-field 1731 <v-text-field
1731 label="Select Image" 1732 label="Select Image"
1732 @click="pickFile" 1733 @click="pickFile"
1733 v-model="imageName" 1734 v-model="imageName"
1734 append-icon="attach_file" 1735 append-icon="attach_file"
1735 ></v-text-field> 1736 ></v-text-field>
1736 </v-flex> 1737 </v-flex>
1737 </v-layout> 1738 </v-layout>
1738 </v-flex> 1739 </v-flex>
1739 <v-flex xs12 sm6> 1740 <v-flex xs12 sm6>
1740 <v-layout> 1741 <v-layout>
1741 <v-flex xs4 class="pt-4 subheading"> 1742 <v-flex xs4 class="pt-4 subheading">
1742 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 1743 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
1743 <label 1744 <label
1744 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1745 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1745 >Year:</label> 1746 >Year:</label>
1746 </v-flex> 1747 </v-flex>
1747 <v-flex xs8 class="ml-3"> 1748 <v-flex xs8 class="ml-3">
1748 <v-text-field 1749 <v-text-field
1749 v-model="addStudents.establishmentYear" 1750 v-model="addStudents.establishmentYear"
1750 placeholder="fill your Academic Year" 1751 placeholder="fill your Academic Year"
1751 name="state" 1752 name="state"
1752 type="number" 1753 type="number"
1753 :rules="establishmentYearRules" 1754 :rules="establishmentYearRules"
1754 required 1755 required
1755 ></v-text-field> 1756 ></v-text-field>
1756 </v-flex> 1757 </v-flex>
1757 </v-layout> 1758 </v-layout>
1758 </v-flex> 1759 </v-flex>
1759 </v-layout> 1760 </v-layout>
1760 <v-layout wrap class="hidden-xs-only hidden-sm-only"> 1761 <v-layout wrap class="hidden-xs-only hidden-sm-only">
1761 <v-flex xs12 sm6> 1762 <v-flex xs12 sm6>
1762 <v-layout> 1763 <v-layout>
1763 <v-flex xs4 sm4 class="pt-4 subheading"> 1764 <v-flex xs4 sm4 class="pt-4 subheading">
1764 <label class="right">Present Address:</label> 1765 <label class="right">Present Address:</label>
1765 </v-flex> 1766 </v-flex>
1766 <v-flex xs8 sm8 class="ml-3"> 1767 <v-flex xs8 sm8 class="ml-3">
1767 <v-text-field 1768 <v-text-field
1768 v-model="addStudents.presentAddress" 1769 v-model="addStudents.presentAddress"
1769 :rules="presentAddress" 1770 :rules="presentAddress"
1770 placeholder="fill Your present Address" 1771 placeholder="fill Your present Address"
1771 @keyup="copyData" 1772 @keyup="copyData"
1772 ></v-text-field> 1773 ></v-text-field>
1773 </v-flex> 1774 </v-flex>
1774 </v-layout> 1775 </v-layout>
1775 </v-flex> 1776 </v-flex>
1776 <v-flex xs12 sm6> 1777 <v-flex xs12 sm6>
1777 <v-layout> 1778 <v-layout>
1778 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1779 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1779 <label class="right">Permanent Address:</label> 1780 <label class="right">Permanent Address:</label>
1780 </v-flex> 1781 </v-flex>
1781 <v-flex xs12 sm8 class="ml-3"> 1782 <v-flex xs12 sm8 class="ml-3">
1782 <v-switch 1783 <v-switch
1783 v-model="addStudents.permanentAddress" 1784 v-model="addStudents.permanentAddress"
1784 label="Select Permanent Address" 1785 label="Select Permanent Address"
1785 :value="addStudents.presentAddress" 1786 :value="addStudents.presentAddress"
1786 ></v-switch> 1787 ></v-switch>
1787 </v-flex> 1788 </v-flex>
1788 </v-layout> 1789 </v-layout>
1789 </v-flex> 1790 </v-flex>
1790 </v-layout> 1791 </v-layout>
1791 <v-layout class="hidden-xs-only hidden-sm-only"> 1792 <v-layout class="hidden-xs-only hidden-sm-only">
1792 <v-flex xs12 sm6> 1793 <v-flex xs12 sm6>
1793 <v-layout> 1794 <v-layout>
1794 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1795 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1795 <label class="right">Permanent Address:</label> 1796 <label class="right">Permanent Address:</label>
1796 </v-flex> 1797 </v-flex>
1797 <v-flex xs12 sm8 class="ml-3"> 1798 <v-flex xs12 sm8 class="ml-3">
1798 <v-text-field 1799 <v-text-field
1799 v-model="addStudents.permanentAddress" 1800 v-model="addStudents.permanentAddress"
1800 :rules="permanentAddress" 1801 :rules="permanentAddress"
1801 placeholder="fill Your Permanent Address" 1802 placeholder="fill Your Permanent Address"
1802 ></v-text-field> 1803 ></v-text-field>
1803 </v-flex> 1804 </v-flex>
1804 </v-layout> 1805 </v-layout>
1805 </v-flex> 1806 </v-flex>
1806 </v-layout> 1807 </v-layout>
1807 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1808 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1808 <v-flex xs12 sm12> 1809 <v-flex xs12 sm12>
1809 <v-layout> 1810 <v-layout>
1810 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1811 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1811 <label class>Present Address:</label> 1812 <label class>Present Address:</label>
1812 </v-flex> 1813 </v-flex>
1813 </v-layout> 1814 </v-layout>
1814 <v-layout> 1815 <v-layout>
1815 <v-flex xs12 sm12> 1816 <v-flex xs12 sm12>
1816 <v-textarea 1817 <v-textarea
1817 name="input-4-3" 1818 name="input-4-3"
1818 v-model="addStudents.presentAddress" 1819 v-model="addStudents.presentAddress"
1819 :rules="presentAddress" 1820 :rules="presentAddress"
1820 placeholder="fill Your present Address" 1821 placeholder="fill Your present Address"
1821 required 1822 required
1822 ></v-textarea> 1823 ></v-textarea>
1823 </v-flex> 1824 </v-flex>
1824 </v-layout> 1825 </v-layout>
1825 </v-flex> 1826 </v-flex>
1826 <v-flex xs12 sm12> 1827 <v-flex xs12 sm12>
1827 <v-layout> 1828 <v-layout>
1828 <v-flex 1829 <v-flex
1829 xs12 1830 xs12
1830 sm12 1831 sm12
1831 class="pt-4 pr-4 subheading text-xs-center addressForm" 1832 class="pt-4 pr-4 subheading text-xs-center addressForm"
1832 > 1833 >
1833 <label>Permanent Address:</label> 1834 <label>Permanent Address:</label>
1834 </v-flex> 1835 </v-flex>
1835 </v-layout> 1836 </v-layout>
1836 <v-layout> 1837 <v-layout>
1837 <v-flex xs12 sm12> 1838 <v-flex xs12 sm12>
1838 <v-textarea 1839 <v-textarea
1839 name="input-4-3" 1840 name="input-4-3"
1840 v-model="addStudents.permanentAddress" 1841 v-model="addStudents.permanentAddress"
1841 :rules="permanentAddress" 1842 :rules="permanentAddress"
1842 placeholder="fill Your Permanent Address" 1843 placeholder="fill Your Permanent Address"
1843 required 1844 required
1844 ></v-textarea> 1845 ></v-textarea>
1845 </v-flex> 1846 </v-flex>
1846 </v-layout> 1847 </v-layout>
1847 </v-flex> 1848 </v-flex>
1848 </v-layout> 1849 </v-layout>
1849 <v-layout> 1850 <v-layout>
1850 <v-flex xs12 sm12> 1851 <v-flex xs12 sm12>
1851 <v-layout class="right"> 1852 <v-layout class="right">
1852 <!-- <v-flex xs6> --> 1853 <!-- <v-flex xs6> -->
1853 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> 1854 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
1854 <!-- </v-flex> 1855 <!-- </v-flex>
1855 <v-flex xs6>--> 1856 <v-flex xs6>-->
1856 <v-btn 1857 <v-btn
1857 @click="submit" 1858 @click="submit"
1858 round 1859 round
1859 dark 1860 dark
1860 :loading="loading" 1861 :loading="loading"
1861 class="add-button" 1862 class="add-button"
1862 >Add</v-btn> 1863 >Add</v-btn>
1863 <!-- </v-flex> --> 1864 <!-- </v-flex> -->
1864 </v-layout> 1865 </v-layout>
1865 </v-flex> 1866 </v-flex>
1866 </v-layout> 1867 </v-layout>
1867 </v-form> 1868 </v-form>
1868 </v-flex> 1869 </v-flex>
1869 </v-stepper-content> 1870 </v-stepper-content>
1870 </v-stepper-items> 1871 </v-stepper-items>
1871 </v-stepper> 1872 </v-stepper>
1872 </v-flex> 1873 </v-flex>
1873 </v-layout> 1874 </v-layout>
1874 </v-container> 1875 </v-container>
1875 </v-card> 1876 </v-card>
1876 </v-dialog> 1877 </v-dialog>
1877 <v-snackbar 1878 <v-snackbar
1878 :timeout="timeout" 1879 :timeout="timeout"
1879 :top="y === 'top'" 1880 :top="y === 'top'"
1880 :right="x === 'right'" 1881 :right="x === 'right'"
1881 :vertical="mode === 'vertical'" 1882 :vertical="mode === 'vertical'"
1882 v-model="snackbar" 1883 v-model="snackbar"
1883 :color="color" 1884 :color="color"
1884 >{{ text }}</v-snackbar> 1885 >{{ text }}</v-snackbar>
1885 <div class="loader" v-if="showLoader"> 1886 <div class="loader" v-if="showLoader">
1886 <v-progress-circular indeterminate color="white"></v-progress-circular> 1887 <v-progress-circular indeterminate color="white"></v-progress-circular>
1887 </div> 1888 </div>
1888 </v-container> 1889 </v-container>
1889 </template> 1890 </template>
1890 1891
1891 <script> 1892 <script>
1892 import http from "@/Services/http.js"; 1893 import http from "@/Services/http.js";
1893 import moment from "moment"; 1894 import moment from "moment";
1894 import countryList from "@/script/country.js"; 1895 import countryList from "@/script/country.js";
1895 import parent from "@/script/parents.js"; 1896 import parent from "@/script/parents.js";
1896 1897
1897 export default { 1898 export default {
1898 data: () => ({ 1899 data: () => ({
1899 e1: true, 1900 e1: true,
1900 e2: 0, 1901 e2: 0,
1901 showParent: true, 1902 showParent: true,
1902 showNext: false, 1903 showNext: false,
1903 snackbar: false, 1904 snackbar: false,
1904 y: "top", 1905 y: "top",
1905 x: "right", 1906 x: "right",
1906 role: "", 1907 role: "",
1907 mode: "", 1908 mode: "",
1908 append: "", 1909 append: "",
1909 timeout: 3000, 1910 timeout: 3000,
1910 text: "", 1911 text: "",
1911 show: true, 1912 show: true,
1912 color: "", 1913 color: "",
1913 showSearch: false, 1914 showSearch: false,
1914 showLoader: false, 1915 showLoader: false,
1915 loading: false, 1916 loading: false,
1916 editLoading: false, 1917 editLoading: false,
1917 date: null, 1918 date: null,
1918 search: "", 1919 search: "",
1919 password: "", 1920 password: "",
1920 menu: false, 1921 menu: false,
1921 menu1: false, 1922 menu1: false,
1922 editStudentDialog: false, 1923 editStudentDialog: false,
1923 profileStudentDialog: false, 1924 profileStudentDialog: false,
1924 addStudentDialog: false, 1925 addStudentDialog: false,
1925 valid: true, 1926 valid: true,
1926 addclass: [], 1927 addclass: [],
1927 addSection: [], 1928 addSection: [],
1928 gender: ["Male", "Female"], 1929 gender: ["Male", "Female"],
1929 pagination: { 1930 pagination: {
1930 rowsPerPage: 10 1931 rowsPerPage: 10,
1931 }, 1932 },
1932 imageData: {}, 1933 imageData: {},
1933 imageName: "", 1934 imageName: "",
1934 imageUrl: "", 1935 imageUrl: "",
1935 imageFile: "", 1936 imageFile: "",
1936 editImageName: "", 1937 editImageName: "",
1937 editImageUrl: "", 1938 editImageUrl: "",
1938 nameRules: [v => !!v || " Full Name is required"], 1939 nameRules: [(v) => !!v || " Full Name is required"],
1939 dateRules: [v => !!v || " DOB is required"], 1940 dateRules: [(v) => !!v || " DOB is required"],
1940 cityRules: [v => !!v || " City Name is required"], 1941 cityRules: [(v) => !!v || " City Name is required"],
1941 pincode: [v => !!v || " Pincode is required"], 1942 pincode: [(v) => !!v || " Pincode is required"],
1942 country: [v => !!v || " Country Name is required"], 1943 country: [(v) => !!v || " Country Name is required"],
1943 rollNo: [v => !!v || "Roll No is required"], 1944 rollNo: [(v) => !!v || "Roll No is required"],
1944 permanentAddress: [v => !!v || " Permanent Address is required"], 1945 permanentAddress: [(v) => !!v || " Permanent Address is required"],
1945 presentAddress: [v => !!v || " Present Address is required"], 1946 presentAddress: [(v) => !!v || " Present Address is required"],
1946 stateRules: [v => !!v || "State Name is required"], 1947 stateRules: [(v) => !!v || "State Name is required"],
1947 classRules: [v => !!v || " Class Name is required"], 1948 classRules: [(v) => !!v || " Class Name is required"],
1948 sectionRules: [v => !!v || " Section Name is required"], 1949 sectionRules: [(v) => !!v || " Section Name is required"],
1949 genderRules: [v => !!v || " Select Gender is required"], 1950 genderRules: [(v) => !!v || " Select Gender is required"],
1950 fatheCellNoRules: [ 1951 fatheCellNoRules: [
1951 v => !!v || " father Cell Number is required", 1952 (v) => !!v || " father Cell Number is required",
1952 v => v <= 10000000000 || "Max 10 characters is required" 1953 (v) => v <= 10000000000 || "Max 10 characters is required",
1953 ], 1954 ],
1954 password: [ 1955 password: [
1955 v => !!v || "Password field is Required." 1956 (v) => !!v || "Password field is Required.",
1956 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 1957 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8
1957 ], 1958 ],
1958 mobileNoRule: [v => !!v || " Mobile Number is required"], 1959 mobileNoRule: [(v) => !!v || " Mobile Number is required"],
1959 establishmentYearRules: [v => !!v || " Academic Year is required"], 1960 establishmentYearRules: [(v) => !!v || " Academic Year is required"],
1960 errorMessages: "", 1961 errorMessages: "",
1961 countries: [], 1962 countries: [],
1962 headers: [ 1963 headers: [
1963 { 1964 {
1964 text: "Roll No.", 1965 text: "Roll No.",
1965 align: "center", 1966 align: "center",
1966 sortable: false, 1967 sortable: false,
1967 value: "rollNo" 1968 value: "rollNo",
1968 }, 1969 },
1969 { 1970 {
1970 text: "Profile Pic", 1971 text: "Profile Pic",
1971 value: "profilePicUrl", 1972 value: "profilePicUrl",
1972 sortable: false, 1973 sortable: false,
1973 align: "center" 1974 align: "center",
1974 }, 1975 },
1975 { text: "Name", value: "name", sortable: false, align: "center" }, 1976 { text: "Name", value: "name", sortable: false, align: "center" },
1976 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1977 { text: "Gender", value: "gender", sortable: false, align: "center" },
1977 { 1978 {
1978 text: "Father Name", 1979 text: "Father Name",
1979 value: "fatherName", 1980 value: "fatherName",
1980 sortable: false, 1981 sortable: false,
1981 align: "center" 1982 align: "center",
1982 }, 1983 },
1983 { 1984 {
1984 text: "Mother Name", 1985 text: "Mother Name",
1985 value: "motherName", 1986 value: "motherName",
1986 sortable: false, 1987 sortable: false,
1987 align: "center" 1988 align: "center",
1988 }, 1989 },
1989 { 1990 {
1990 text: "Academic Year", 1991 text: "Academic Year",
1991 value: "establishmentYear", 1992 value: "establishmentYear",
1992 sortable: false, 1993 sortable: false,
1993 align: "center" 1994 align: "center",
1994 }, 1995 },
1995 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1996 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1996 { 1997 {
1997 text: "Status", 1998 text: "Status",
1998 value: "status", 1999 value: "status",
1999 sortable: false, 2000 sortable: false,
2000 align: "center" 2001 align: "center",
2001 }, 2002 },
2002 { text: "Action", value: "", sortable: false, align: "center" } 2003 { text: "Action", value: "", sortable: false, align: "center" },
2003 ], 2004 ],
2004 studentsData: [], 2005 studentsData: [],
2005 parentId: "", 2006 parentId: "",
2006 editedIndex: -1, 2007 editedIndex: -1,
2007 parentData: {}, 2008 parentData: {},
2008 addStudents: { 2009 addStudents: {
2009 role: "STUDENT", 2010 role: "STUDENT",
2010 name: "", 2011 name: "",
2011 email: "", 2012 email: "",
2012 date: "", 2013 date: "",
2013 city: "", 2014 city: "",
2014 pincode: "", 2015 pincode: "",
2015 country: "", 2016 country: "",
2016 permanentAddress: "", 2017 permanentAddress: "",
2017 presentAddress: "", 2018 presentAddress: "",
2018 mobile: "", 2019 mobile: "",
2019 state: "", 2020 state: "",
2020 gender: "", 2021 gender: "",
2021 select: "", 2022 select: "",
2022 selectSection: "", 2023 selectSection: "",
2023 bloodGroup: "", 2024 bloodGroup: "",
2024 allergies: "", 2025 allergies: "",
2025 medicalNotes: "", 2026 medicalNotes: "",
2026 height: "", 2027 height: "",
2027 weight: "", 2028 weight: "",
2028 rollNo: "", 2029 rollNo: "",
2029 establishmentYear: new Date().getFullYear() 2030 establishmentYear: new Date().getFullYear(),
2030 }, 2031 },
2031 selectStudents: { 2032 selectStudents: {
2032 select: "", 2033 select: "",
2033 selectSection: "" 2034 selectSection: "",
2034 }, 2035 },
2035 editedItem: { 2036 editedItem: {
2036 role: "STUDENT", 2037 role: "STUDENT",
2037 name: "", 2038 name: "",
2038 email: "", 2039 email: "",
2039 dob: "", 2040 dob: "",
2040 city: "", 2041 city: "",
2041 pincode: "", 2042 pincode: "",
2042 country: "", 2043 country: "",
2043 permanentAddress: "", 2044 permanentAddress: "",
2044 presentAddress: "", 2045 presentAddress: "",
2045 mobile: "", 2046 mobile: "",
2046 state: "", 2047 state: "",
2047 gender: "", 2048 gender: "",
2048 select: "", 2049 select: "",
2049 selectSection: "", 2050 selectSection: "",
2050 bloodGroup: "", 2051 bloodGroup: "",
2051 allergies: "", 2052 allergies: "",
2052 medicalNotes: "", 2053 medicalNotes: "",
2053 height: "", 2054 height: "",
2054 weight: "", 2055 weight: "",
2055 rollNo: "", 2056 rollNo: "",
2056 establishmentYear: new Date().getFullYear() 2057 establishmentYear: new Date().getFullYear(),
2057 }, 2058 },
2058 isFatherCellExists: false 2059 isFatherCellExists: false,
2059 }), 2060 }),
2060 watch: { 2061 watch: {
2061 menu(val) { 2062 menu(val) {
2062 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2063 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2063 }, 2064 },
2064 menu1(val) { 2065 menu1(val) {
2065 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2066 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2066 } 2067 },
2067 }, 2068 },
2068 methods: { 2069 methods: {
2069 findStudents() { 2070 findStudents() {
2070 this.showLoader = true; 2071 this.showLoader = true;
2071 http() 2072 http()
2072 .get("/getStudentWithClass", { 2073 .get("/getStudentWithClass", {
2073 params: { 2074 params: {
2074 classId: this.selectStudents.select, 2075 classId: this.selectStudents.select,
2075 sectionId: this.selectStudents.selectSection 2076 sectionId: this.selectStudents.selectSection,
2076 } 2077 },
2077 }) 2078 })
2078 .then(response => { 2079 .then((response) => {
2079 this.studentsData = response.data.data; 2080 this.studentsData = response.data.data;
2080 this.showLoader = false; 2081 this.showLoader = false;
2081 }) 2082 })
2082 .catch(err => { 2083 .catch((err) => {
2083 console.log("err====>", err); 2084 console.log("err====>", err);
2084 this.showLoader = false; 2085 this.showLoader = false;
2085 }); 2086 });
2086 }, 2087 },
2087 getSections(_id) { 2088 getSections(_id) {
2088 var token = this.$store.state.token; 2089 var token = this.$store.state.token;
2089 this.showLoader = true; 2090 this.showLoader = true;
2090 http() 2091 http()
2091 .get( 2092 .get(
2092 "/getSectionsList", 2093 "/getSectionsList",
2093 { params: { classId: _id } }, 2094 { params: { classId: _id } },
2094 { 2095 {
2095 headers: { Authorization: "Bearer " + token } 2096 headers: { Authorization: "Bearer " + token },
2096 } 2097 }
2097 ) 2098 )
2098 .then(response => { 2099 .then((response) => {
2099 this.addSection = response.data.data; 2100 this.addSection = response.data.data;
2100 this.showLoader = false; 2101 this.showLoader = false;
2101 }) 2102 })
2102 .catch(err => { 2103 .catch((err) => {
2103 this.showLoader = false; 2104 this.showLoader = false;
2104 }); 2105 });
2105 }, 2106 },
2106 getSection(_id) { 2107 getSection(_id) {
2107 var token = this.$store.state.token; 2108 var token = this.$store.state.token;
2108 this.showLoader = true; 2109 this.showLoader = true;
2109 http() 2110 http()
2110 .get( 2111 .get(
2111 "/getSectionsList", 2112 "/getSectionsList",
2112 { params: { classId: _id } }, 2113 { params: { classId: _id } },
2113 { 2114 {
2114 headers: { Authorization: "Bearer " + token } 2115 headers: { Authorization: "Bearer " + token },
2115 } 2116 }
2116 ) 2117 )
2117 .then(response => { 2118 .then((response) => {
2118 this.addSection = response.data.data; 2119 this.addSection = response.data.data;
2119 this.showLoader = false; 2120 this.showLoader = false;
2120 }) 2121 })
2121 .catch(err => { 2122 .catch((err) => {
2122 this.showLoader = false; 2123 this.showLoader = false;
2123 }); 2124 });
2124 }, 2125 },
2125 pickFile() { 2126 pickFile() {
2126 this.$refs.image.click(); 2127 this.$refs.image.click();
2127 }, 2128 },
2128 pickEditFile() { 2129 pickEditFile() {
2129 this.$refs.editDataImage.click(); 2130 this.$refs.editDataImage.click();
2130 }, 2131 },
2131 dates: function(date) { 2132 dates: function (date) {
2132 return moment(date).format("MMMM DD, YYYY"); 2133 return moment(date).format("MMMM DD, YYYY");
2133 return date; 2134 return date;
2134 }, 2135 },
2135 onFilePicked(e) { 2136 onFilePicked(e) {
2136 // console.log(e) 2137 // console.log(e)
2137 const files = e.target.files; 2138 const files = e.target.files;
2138 this.imageData.upload = e.target.files[0]; 2139 this.imageData.upload = e.target.files[0];
2139 if (files[0] !== undefined) { 2140 if (files[0] !== undefined) {
2140 this.imageName = files[0].name; 2141 this.imageName = files[0].name;
2141 if (this.imageName.lastIndexOf(".") <= 0) { 2142 if (this.imageName.lastIndexOf(".") <= 0) {
2142 return; 2143 return;
2143 } 2144 }
2144 const fr = new FileReader(); 2145 const fr = new FileReader();
2145 fr.readAsDataURL(files[0]); 2146 fr.readAsDataURL(files[0]);
2146 fr.addEventListener("load", () => { 2147 fr.addEventListener("load", () => {
2147 this.imageUrl = fr.result; 2148 this.imageUrl = fr.result;
2148 this.imageFile = files[0]; // this is an image file that can be sent to server... 2149 this.imageFile = files[0]; // this is an image file that can be sent to server...
2149 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 2150 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2150 }); 2151 });
2151 } else { 2152 } else {
2152 this.imageName = ""; 2153 this.imageName = "";
2153 this.imageFile = ""; 2154 this.imageFile = "";
2154 this.imageUrl = ""; 2155 this.imageUrl = "";
2155 } 2156 }
2156 }, 2157 },
2157 onEditFilePicked(e) { 2158 onEditFilePicked(e) {
2158 console.log(e); 2159 console.log(e);
2159 const files = e.target.files; 2160 const files = e.target.files;
2160 if (files[0] !== undefined) { 2161 if (files[0] !== undefined) {
2161 this.editImageName = files[0].name; 2162 this.editImageName = files[0].name;
2162 console.log("this.editImageName", this.editImageName); 2163 console.log("this.editImageName", this.editImageName);
2163 2164
2164 if (this.editImageName.lastIndexOf(".") <= 0) { 2165 if (this.editImageName.lastIndexOf(".") <= 0) {
2165 return; 2166 return;
2166 } 2167 }
2167 const fr = new FileReader(); 2168 const fr = new FileReader();
2168 fr.readAsDataURL(files[0]); 2169 fr.readAsDataURL(files[0]);
2169 fr.addEventListener("load", () => { 2170 fr.addEventListener("load", () => {
2170 this.editImageUrl = fr.result; 2171 this.editImageUrl = fr.result;
2171 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 2172 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
2172 }); 2173 });
2173 } else { 2174 } else {
2174 this.editImageName = ""; 2175 this.editImageName = "";
2175 this.editiImageFile = ""; 2176 this.editiImageFile = "";
2176 } 2177 }
2177 }, 2178 },
2178 editItem(item) { 2179 editItem(item) {
2179 this.editedIndex = this.studentsData.indexOf(item); 2180 this.editedIndex = this.studentsData.indexOf(item);
2180 this.editedItem = Object.assign({}, item); 2181 this.editedItem = Object.assign({}, item);
2181 this.editedItem.fatherName = item.parentId.fatherName; 2182 this.editedItem.fatherName = item.parentId.fatherName;
2182 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2183 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2183 this.editedItem.motherName = item.parentId.motherName; 2184 this.editedItem.motherName = item.parentId.motherName;
2184 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2185 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2185 this.editedItem.dob = 2186 this.editedItem.dob =
2186 this.editedItem.dob != undefined 2187 this.editedItem.dob != undefined
2187 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 2188 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2188 : (this.editedItem.dob = ""); 2189 : (this.editedItem.dob = "");
2189 this.editStudentDialog = true; 2190 this.editStudentDialog = true;
2190 }, 2191 },
2191 profile(item) { 2192 profile(item) {
2192 this.editedIndex = this.studentsData.indexOf(item); 2193 this.editedIndex = this.studentsData.indexOf(item);
2193 this.editedItem = Object.assign({}, item); 2194 this.editedItem = Object.assign({}, item);
2194 this.editedItem.fatherName = item.parentId.fatherName; 2195 this.editedItem.fatherName = item.parentId.fatherName;
2195 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2196 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2196 this.editedItem.motherName = item.parentId.motherName; 2197 this.editedItem.motherName = item.parentId.motherName;
2197 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2198 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2198 2199
2199 this.profileStudentDialog = true; 2200 this.profileStudentDialog = true;
2200 }, 2201 },
2201 deleteItem(item) { 2202 deleteItem(item) {
2202 let deleteStudent = { 2203 let deleteStudent = {
2203 studentId: item._id 2204 studentId: item._id,
2204 }; 2205 };
2205 http() 2206 http()
2206 .delete( 2207 .delete(
2207 "/deleteStudent", 2208 "/deleteStudent",
2208 confirm("Are you sure you want to delete this?") && { 2209 confirm("Are you sure you want to delete this?") && {
2209 params: deleteStudent 2210 params: deleteStudent,
2210 } 2211 }
2211 ) 2212 )
2212 .then(response => { 2213 .then((response) => {
2213 this.snackbar = true; 2214 this.snackbar = true;
2214 this.text = response.data.message; 2215 this.text = response.data.message;
2215 this.color = "green"; 2216 this.color = "green";
2216 this.findStudents(); 2217 this.findStudents();
2217 }) 2218 })
2218 .catch(error => { 2219 .catch((error) => {
2219 this.snackbar = true; 2220 this.snackbar = true;
2220 this.text = error.response.data.message; 2221 this.text = error.response.data.message;
2221 this.color = "error"; 2222 this.color = "error";
2222 }); 2223 });
2223 }, 2224 },
2224 close() { 2225 close() {
2225 this.editStudentDialog = false; 2226 this.editStudentDialog = false;
2226 }, 2227 },
2227 closeStudentProfile() { 2228 closeStudentProfile() {
2228 this.profileStudentDialog = false; 2229 this.profileStudentDialog = false;
2229 }, 2230 },
2230 copyData() { 2231 copyData() {
2231 this.addStudents.permanentAddress = this.addStudents.presentAddress; 2232 this.addStudents.permanentAddress = this.addStudents.presentAddress;
2232 }, 2233 },
2233 submit() { 2234 submit() {
2234 if (this.$refs.form.validate()) { 2235 if (this.$refs.form.validate()) {
2235 let addStudent = { 2236 let addStudent = {
2236 parentId: this.parentId, 2237 parentId: this.parentId,
2237 name: this.addStudents.name, 2238 name: this.addStudents.name,
2238 email: this.addStudents.email, 2239 email: this.addStudents.email,
2239 role: this.addStudents.role, 2240 role: this.addStudents.role,
2240 dob: this.addStudents.date, 2241 dob: this.addStudents.date,
2241 city: this.addStudents.city, 2242 city: this.addStudents.city,
2242 pincode: this.addStudents.pincode, 2243 pincode: this.addStudents.pincode,
2243 country: this.addStudents.country, 2244 country: this.addStudents.country,
2244 permanentAddress: this.addStudents.permanentAddress, 2245 permanentAddress: this.addStudents.permanentAddress,
2245 presentAddress: this.addStudents.presentAddress, 2246 presentAddress: this.addStudents.presentAddress,
2246 mobile: this.addStudents.mobile, 2247 mobile: this.addStudents.mobile,
2247 state: this.addStudents.state, 2248 state: this.addStudents.state,
2248 gender: this.addStudents.gender, 2249 gender: this.addStudents.gender,
2249 establishmentYear: this.addStudents.establishmentYear, 2250 establishmentYear: this.addStudents.establishmentYear,
2250 classId: this.addStudents.select, 2251 classId: this.addStudents.select,
2251 sectionId: this.addStudents.selectSection, 2252 sectionId: this.addStudents.selectSection,
2252 bloodGroup: this.addStudents.bloodGroup, 2253 bloodGroup: this.addStudents.bloodGroup,
2253 medicalNotes: this.addStudents.medicalNotes, 2254 medicalNotes: this.addStudents.medicalNotes,
2254 height: this.addStudents.height, 2255 height: this.addStudents.height,
2255 weight: this.addStudents.weight, 2256 weight: this.addStudents.weight,
2256 rollNo: this.addStudents.rollNo 2257 rollNo: this.addStudents.rollNo,
2257 }; 2258 };
2258 if (this.imageUrl) { 2259 if (this.imageUrl) {
2259 var str = this.imageUrl; 2260 var str = this.imageUrl;
2260 const [baseUrl, imageUrl] = str.split(/,/); 2261 const [baseUrl, imageUrl] = str.split(/,/);
2261 addStudent.upload = imageUrl; 2262 addStudent.upload = imageUrl;
2262 } 2263 }
2263 this.loading = true; 2264 this.loading = true;
2264 http() 2265 http()
2265 .post("/createStudent", addStudent) 2266 .post("/createStudent", addStudent)
2266 .then(response => { 2267 .then((response) => {
2267 this.snackbar = true; 2268 this.snackbar = true;
2268 this.text = "New Student added successfully"; 2269 this.text = "New Student added successfully";
2269 this.color = "green"; 2270 this.color = "green";
2270 this.addStudentDialog = false; 2271 this.addStudentDialog = false;
2271 this.clear(); 2272 this.clear();
2272 this.clearParents(); 2273 this.clearParents();
2273 this.loading = false; 2274 this.loading = false;
2274 }) 2275 })
2275 .catch(error => { 2276 .catch((error) => {
2276 this.snackbar = true; 2277 this.snackbar = true;
2277 this.text = error.response.data.message; 2278 this.text = error.response.data.message;
2278 this.color = "error"; 2279 this.color = "error";
2279 this.loading = false; 2280 this.loading = false;
2280 }); 2281 });
2281 } 2282 }
2282 }, 2283 },
2283 clear() { 2284 clear() {
2284 this.$refs.form.reset(); 2285 this.$refs.form.reset();
2285 this.imageUrl = ""; 2286 this.imageUrl = "";
2286 }, 2287 },
2287 clearParents() { 2288 clearParents() {
2288 this.$refs.parentForm.reset(); 2289 this.$refs.parentForm.reset();
2289 }, 2290 },
2290 save() { 2291 save() {
2291 let editStudent = { 2292 let editStudent = {
2292 studentId: this.editedItem._id, 2293 studentId: this.editedItem._id,
2293 name: this.editedItem.name, 2294 name: this.editedItem.name,
2294 email: this.editedItem.email, 2295 email: this.editedItem.email,
2295 role: this.editedItem.role, 2296 role: this.editedItem.role,
2296 dob: this.editedItem.dob, 2297 dob: this.editedItem.dob,
2297 city: this.editedItem.city, 2298 city: this.editedItem.city,
2298 pincode: this.editedItem.pincode, 2299 pincode: this.editedItem.pincode,
2299 country: this.editedItem.country, 2300 country: this.editedItem.country,
2300 permanentAddress: this.editedItem.permanentAddress, 2301 permanentAddress: this.editedItem.permanentAddress,
2301 presentAddress: this.editedItem.presentAddress, 2302 presentAddress: this.editedItem.presentAddress,
2302 mobile: this.editedItem.mobile, 2303 mobile: this.editedItem.mobile,
2303 state: this.editedItem.state, 2304 state: this.editedItem.state,
2304 gender: this.editedItem.gender, 2305 gender: this.editedItem.gender,
2305 establishmentYear: this.editedItem.establishmentYear, 2306 establishmentYear: this.editedItem.establishmentYear,
2306 classId: this.editedItem.select, 2307 classId: this.editedItem.select,
2307 sectionId: this.editedItem.selectSection, 2308 sectionId: this.editedItem.selectSection,
2308 bloodGroup: this.editedItem.bloodGroup, 2309 bloodGroup: this.editedItem.bloodGroup,
2309 medicalNotes: this.editedItem.medicalNotes, 2310 medicalNotes: this.editedItem.medicalNotes,
2310 height: this.editedItem.height, 2311 height: this.editedItem.height,
2311 weight: this.editedItem.weight, 2312 weight: this.editedItem.weight,
2312 rollNo: this.editedItem.rollNo 2313 rollNo: this.editedItem.rollNo,
2313 }; 2314 };
2314 if (this.editImageUrl) { 2315 if (this.editImageUrl) {
2315 var str = this.editImageUrl; 2316 var str = this.editImageUrl;
2316 const [baseUrl, editImageUrl] = str.split(/,/); 2317 const [baseUrl, editImageUrl] = str.split(/,/);
2317 editStudent.upload = editImageUrl; 2318 editStudent.upload = editImageUrl;
2318 } 2319 }
2319 this.editLoading = true; 2320 this.editLoading = true;
2320 http() 2321 http()
2321 .put("/updateStudent", editStudent) 2322 .put("/updateStudent", editStudent)
2322 .then(response => { 2323 .then((response) => {
2323 this.snackbar = true; 2324 this.snackbar = true;
2324 this.text = response.data.message; 2325 this.text = response.data.message;
2325 this.color = "green"; 2326 this.color = "green";
2326 this.imageUrl = ""; 2327 this.imageUrl = "";
2327 this.findStudents(); 2328 this.findStudents();
2328 this.close(); 2329 this.close();
2329 this.editLoading = false; 2330 this.editLoading = false;
2330 }) 2331 })
2331 .catch(error => { 2332 .catch((error) => {
2332 this.snackbar = true; 2333 this.snackbar = true;
2333 this.text = error.response.data.statusText; 2334 this.text = error.response.data.statusText;
2334 this.color = "error"; 2335 this.color = "error";
2335 this.editLoading = false; 2336 this.editLoading = false;
2336 }); 2337 });
2337 }, 2338 },
2338 submitParentDetails() { 2339 submitParentDetails() {
2339 if (this.$refs.parentForm.validate()) { 2340 if (this.$refs.parentForm.validate()) {
2340 this.parentData.fatherCellNo = this.parentData.fatherCellNo; 2341 this.parentData.fatherCellNo = this.parentData.fatherCellNo;
2341 this.parentData.motherCellNo = this.parentData.motherCellNo; 2342 this.parentData.motherCellNo = this.parentData.motherCellNo;
2342 let addparentDetails = { 2343 let addparentDetails = {
2343 email: this.parentData.email, 2344 email: this.parentData.email,
2344 fatherName: this.parentData.fatherName, 2345 fatherName: this.parentData.fatherName,
2345 fatherCellNo: this.parentData.fatherCellNo, 2346 fatherCellNo: this.parentData.fatherCellNo,
2346 motherName: this.parentData.motherName, 2347 motherName: this.parentData.motherName,
2347 motherCellNo: this.parentData.motherCellNo, 2348 motherCellNo: this.parentData.motherCellNo,
2348 fatherProfession: this.parentData.fatherProfession, 2349 fatherProfession: this.parentData.fatherProfession,
2349 motherProfession: this.parentData.motherProfession, 2350 motherProfession: this.parentData.motherProfession,
2350 password: this.parentData.password, 2351 password: this.parentData.password,
2351 role: "PARENT" 2352 role: "PARENT",
2352 }; 2353 };
2353 this.loading = true; 2354 this.loading = true;
2354 http() 2355 http()
2355 .post("/createParent", addparentDetails) 2356 .post("/createParent", addparentDetails)
2356 .then(response => { 2357 .then((response) => {
2357 this.parentId = response.data.data.id; 2358 this.parentId = response.data.data.id;
2358 this.e2 = 2; 2359 this.e2 = 2;
2359 this.snackbar = true; 2360 this.snackbar = true;
2360 this.text = response.data.message; 2361 this.text = response.data.message;
2361 this.color = "green"; 2362 this.color = "green";
2362 // this.getStudentList(); 2363 // this.getStudentList();
2363 this.clear(); 2364 this.clear();
2364 this.loading = false; 2365 this.loading = false;
2365 }) 2366 })
2366 .catch(error => { 2367 .catch((error) => {
2367 this.snackbar = true; 2368 this.snackbar = true;
2368 this.text = error.response.data.message; 2369 this.text = error.response.data.message;
2369 this.color = "error"; 2370 this.color = "error";
2370 if (error.response.data.statusText) { 2371 if (error.response.data.statusText) {
2371 this.text = error.response.data.statusText; 2372 this.text = error.response.data.statusText;
2372 } 2373 }
2373 this.loading = false; 2374 this.loading = false;
2374 }); 2375 });
2375 } 2376 }
2376 }, 2377 },
2377 getParentDetails() { 2378 getParentDetails() {
2378 if (this.parentData.fatherCellNo.length > 9) { 2379 if (this.parentData.fatherCellNo.length > 9) {
2379 this.showLoader = true; 2380 this.showLoader = true;
2380 this.isFatherCellExists = false; 2381 this.isFatherCellExists = false;
2381 http() 2382 http()
2382 .get("getParticularParent", { 2383 .get("getParticularParent", {
2383 params: { fatherCellNo: this.parentData.fatherCellNo }, 2384 params: { fatherCellNo: this.parentData.fatherCellNo },
2384 headers: { 2385 headers: {
2385 Authorization: "Bearer " + this.$store.state.token 2386 Authorization: "Bearer " + this.$store.state.token,
2386 } 2387 },
2387 }) 2388 })
2388 .then(response => { 2389 .then((response) => {
2389 this.showNext = true; 2390 this.showNext = true;
2390 this.showParent = false; 2391 this.showParent = false;
2391 this.parentData = response.data.data; 2392 this.parentData = response.data.data;
2392 this.parentId = response.data.data._id; 2393 this.parentId = response.data.data._id;
2393 this.showLoader = false; 2394 this.showLoader = false;
2394 this.isFatherCellExists = true; 2395 this.isFatherCellExists = true;
2395 }) 2396 })
2396 .catch(error => { 2397 .catch((error) => {
2397 console.log("err====>", error.response.data.message); 2398 console.log("err====>", error.response.data.message);
2398 this.text = error.response.data.message; 2399 this.text = error.response.data.message;
2399 this.snackbar = true; 2400 this.snackbar = true;
2400 if (this.text === "Data not found!") { 2401 if (this.text === "Data not found!") {
2401 this.showNext = false; 2402 this.showNext = false;
2402 this.showParent = true; 2403 this.showParent = true;
2403 this.parentData.email = ""; 2404 this.parentData.email = "";
2404 this.parentData.fatherName = ""; 2405 this.parentData.fatherName = "";
2405 this.parentData.motherName = ""; 2406 this.parentData.motherName = "";
2406 this.parentData.motherCellNo = ""; 2407 this.parentData.motherCellNo = "";
2407 this.parentData.fatherProfession = ""; 2408 this.parentData.fatherProfession = "";
2408 this.parentData.motherProfession = ""; 2409 this.parentData.motherProfession = "";
2409 this.parentData.password = ""; 2410 this.parentData.password = "";
2410 } 2411 }
2411 this.showLoader = false; 2412 this.showLoader = false;
2412 }); 2413 });
2413 } 2414 }
2414 }, 2415 },
2415 suspendStudentStatus(status, id) { 2416 suspendStudentStatus(status, id) {
2416 let suspendStudentData = { 2417 let suspendStudentData = {
2417 studentId: id, 2418 studentId: id,
2418 status: status 2419 status: status,
2419 }; 2420 };
2420 http() 2421 http()
2421 .put("/suspendStudentAccount", suspendStudentData) 2422 .put("/suspendStudentAccount", suspendStudentData)
2422 .then(response => { 2423 .then((response) => {
2423 this.findStudents(); 2424 this.findStudents();
2424 this.text = response.data.message; 2425 this.text = response.data.message;
2425 this.color = "green"; 2426 this.color = "green";
2426 this.snackbar = true; 2427 this.snackbar = true;
2427 }) 2428 })
2428 .catch(error => { 2429 .catch((error) => {
2429 this.snackbar = true; 2430 this.snackbar = true;
2430 this.color = "error"; 2431 this.color = "error";
2431 this.text = error.response.data.message; 2432 this.text = error.response.data.message;
2432 }); 2433 });
2433 }, 2434 },
2434 displaySearch() { 2435 displaySearch() {
2435 (this.show = false), (this.showSearch = true); 2436 (this.show = false), (this.showSearch = true);
2436 }, 2437 },
2437 closeSearch() { 2438 closeSearch() {
2438 this.showSearch = false; 2439 this.showSearch = false;
2439 this.show = true; 2440 this.show = true;
2440 this.search = ""; 2441 this.search = "";
2441 } 2442 },
2442 }, 2443 },
2443 mounted() { 2444 mounted() {
2444 const getCountryList = countryList(); 2445 const getCountryList = countryList();
2445 this.role = this.$store.state.role; 2446 this.role = this.$store.state.role;
2446 this.countries = getCountryList; 2447 this.countries = getCountryList;
2447 var token = this.$store.state.token; 2448 var token = this.$store.state.token;
2448 http() 2449 http()
2449 .get("/getClassesList", { 2450 .get("/getClassesList", {
2450 headers: { Authorization: "Bearer " + token } 2451 headers: { Authorization: "Bearer " + token },
2451 }) 2452 })
2452 .then(response => { 2453 .then((response) => {
2453 this.addclass = response.data.data; 2454 this.addclass = response.data.data;
2454 }) 2455 })
2455 .catch(error => { 2456 .catch((error) => {
2456 this.showLoader = false; 2457 this.showLoader = false;
2457 if (error.response.status === 401) { 2458 if (error.response.status === 401) {
2458 this.$router.replace({ path: "/" }); 2459 this.$router.replace({ path: "/" });
2459 this.$store.dispatch("setToken", null); 2460 this.$store.dispatch("setToken", null);
2460 this.$store.dispatch("Id", null); 2461 this.$store.dispatch("Id", null);
2461 this.$store.dispatch("Role", null); 2462 this.$store.dispatch("Role", null);
2462 } 2463 }
2463 }); 2464 });
2464 } 2465 },
2465 }; 2466 };
2466 </script> 2467 </script>
2467 <style scoped> 2468 <style scoped>
2468 .active { 2469 .active {
2469 background-color: gray; 2470 background-color: gray;
2470 color: white !important; 2471 color: white !important;
2471 } 2472 }
2472 .activebtn { 2473 .activebtn {
2473 color: black !important; 2474 color: black !important;
2474 } 2475 }
2475 </style> 2476 </style>