viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d0ffa80febbda2278381ce5b53f2a7c378be40e8

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

added dialcode

Showing 8 changed files with 17 additions and 20 deletions   Show diff stats
src/pages/Parent/parents.vue
Diff comments   View file @d0ffa80
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-dialog v-model="editParentDilaog" max-width="600px" scrollable persistent> 3 <v-dialog v-model="editParentDilaog" max-width="600px" scrollable persistent>
4 <v-card flat class="card-style pa-2" dark> 4 <v-card flat class="card-style pa-2" dark>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12> 6 <v-flex xs12>
7 <label class="title text-xs-center">Edit Parents Details</label> 7 <label class="title text-xs-center">Edit Parents Details</label>
8 <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon> 8 <v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon>
9 </v-flex> 9 </v-flex>
10 </v-layout> 10 </v-layout>
11 <v-card-text class="hidden-xs-only hidden-sm-only"> 11 <v-card-text class="hidden-xs-only hidden-sm-only">
12 <v-form ref="editParentForm" v-model="validEditParent" lazy-validation> 12 <v-form ref="editParentForm" v-model="validEditParent" lazy-validation>
13 <v-flex xs12> 13 <v-flex xs12>
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">Email ID:</label> 16 <label class="right">Email ID:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 sm6 class="ml-3"> 18 <v-flex xs8 sm6 class="ml-3">
19 <v-text-field 19 <v-text-field
20 placeholder="fill your email" 20 placeholder="fill your email"
21 v-model="editedItem.email" 21 v-model="editedItem.email"
22 type="text" 22 type="text"
23 name="email" 23 name="email"
24 required 24 required
25 ></v-text-field> 25 ></v-text-field>
26 </v-flex> 26 </v-flex>
27 </v-layout> 27 </v-layout>
28 </v-flex> 28 </v-flex>
29 <v-flex xs12> 29 <v-flex xs12>
30 <v-layout> 30 <v-layout>
31 <v-flex xs3 sm4 class="pt-4 subheading"> 31 <v-flex xs3 sm4 class="pt-4 subheading">
32 <label class="right">Father Name:</label> 32 <label class="right">Father Name:</label>
33 </v-flex> 33 </v-flex>
34 <v-flex xs8 sm6 class="ml-3"> 34 <v-flex xs8 sm6 class="ml-3">
35 <v-text-field 35 <v-text-field
36 v-model="editedItem.fatherName" 36 v-model="editedItem.fatherName"
37 placeholder="fill your father Name" 37 placeholder="fill your father Name"
38 required 38 required
39 ></v-text-field> 39 ></v-text-field>
40 </v-flex> 40 </v-flex>
41 </v-layout> 41 </v-layout>
42 </v-flex> 42 </v-flex>
43 <!-- EDIT FATHER CELL NUMBER - HIDDEN AT xs and sm screen --> 43 <!-- EDIT FATHER CELL NUMBER - HIDDEN AT xs and sm screen -->
44 <v-flex xs12> 44 <v-flex xs12>
45 <v-layout> 45 <v-layout>
46 <v-flex xs3 sm4 class="pt-4 subheading"> 46 <v-flex xs3 sm4 class="pt-4 subheading">
47 <label class="right">Father Cell No:</label> 47 <label class="right">Father Cell No:</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs8 sm6 class="ml-3"> 49 <v-flex xs8 sm6 class="ml-3">
50 <v-layout row wrap> 50 <v-layout row wrap>
51 <v-flex md3 class="mt-3"> 51 <v-flex md3 class="mt-3">
52 <vue-country-code @onSelect="editFatherCellCode" class="black--text"></vue-country-code> 52 <vue-country-code @onSelect="editFatherCellCode" class="black--text"></vue-country-code>
53 </v-flex> 53 </v-flex>
54 <v-flex md9> 54 <v-flex md9>
55 <v-text-field 55 <v-text-field
56 v-model="editedItem.fatherCellNo" 56 v-model="editedItem.fatherCellNo"
57 placeholder="Fill your father Cell Number" 57 placeholder="Fill your father Cell Number"
58 :rules="editFatherNoRule" 58 :rules="editFatherNoRule"
59 type="number" 59 type="number"
60 required 60 required
61 ></v-text-field> 61 ></v-text-field>
62 </v-flex> 62 </v-flex>
63 </v-layout> 63 </v-layout>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 </v-flex> 66 </v-flex>
67 <v-flex xs12> 67 <v-flex xs12>
68 <v-layout> 68 <v-layout>
69 <v-flex xs3 sm4 class="pt-4 subheading"> 69 <v-flex xs3 sm4 class="pt-4 subheading">
70 <label class="right">Father Profession:</label> 70 <label class="right">Father Profession:</label>
71 </v-flex> 71 </v-flex>
72 <v-flex xs8 sm6 class="ml-3"> 72 <v-flex xs8 sm6 class="ml-3">
73 <v-text-field 73 <v-text-field
74 v-model="editedItem.fatherProfession" 74 v-model="editedItem.fatherProfession"
75 placeholder="fill your father Profession" 75 placeholder="fill your father Profession"
76 required 76 required
77 ></v-text-field> 77 ></v-text-field>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12> 81 <v-flex xs12>
82 <v-layout> 82 <v-layout>
83 <v-flex xs3 sm4 class="pt-4 subheading"> 83 <v-flex xs3 sm4 class="pt-4 subheading">
84 <label class="right">Mother Name:</label> 84 <label class="right">Mother Name:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs8 sm6 class="ml-3"> 86 <v-flex xs8 sm6 class="ml-3">
87 <v-text-field 87 <v-text-field
88 v-model="editedItem.motherName" 88 v-model="editedItem.motherName"
89 placeholder="fill your Mother Name" 89 placeholder="fill your Mother Name"
90 type="text" 90 type="text"
91 required 91 required
92 ></v-text-field> 92 ></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 <v-flex xs12> 96 <v-flex xs12>
97 <v-layout> 97 <v-layout>
98 <v-flex xs3 sm4 class="pt-4 subheading"> 98 <v-flex xs3 sm4 class="pt-4 subheading">
99 <label class="right">Mother Cell No:</label> 99 <label class="right">Mother Cell No:</label>
100 </v-flex> 100 </v-flex>
101 <v-flex xs8 sm6 class="ml-3"> 101 <v-flex xs8 sm6 class="ml-3">
102 <v-text-field 102 <v-text-field
103 v-model="editedItem.motherCellNo" 103 v-model="editedItem.motherCellNo"
104 placeholder="fill your Mother Cell Number" 104 placeholder="fill your Mother Cell Number"
105 type="number" 105 type="number"
106 required 106 required
107 ></v-text-field> 107 ></v-text-field>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 </v-flex> 110 </v-flex>
111 <v-flex xs12> 111 <v-flex xs12>
112 <!-- EDIT MOTHER CELL NUMBER - HIDDEN AT xs and sm screen --> 112 <!-- EDIT MOTHER CELL NUMBER - HIDDEN AT xs and sm screen -->
113 <v-layout> 113 <v-layout>
114 <v-flex xs3 sm4 class="pt-4 subheading"> 114 <v-flex xs3 sm4 class="pt-4 subheading">
115 <label class="right">Mother Profession:</label> 115 <label class="right">Mother Profession:</label>
116 </v-flex> 116 </v-flex>
117 <v-flex xs8 sm6 class="ml-3"> 117 <v-flex xs8 sm6 class="ml-3">
118 <v-layout row wrap> 118 <v-layout row wrap>
119 <v-flex md3 class="mt-3"> 119 <v-flex md3 class="mt-3">
120 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 120 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
121 </v-flex> 121 </v-flex>
122 <v-flex md9> 122 <v-flex md9>
123 <v-text-field 123 <v-text-field
124 v-model="editedItem.motherProfession" 124 v-model="editedItem.motherProfession"
125 placeholder="fill your Mother Profession" 125 placeholder="fill your Mother Profession"
126 type="text" 126 type="text"
127 required 127 required
128 ></v-text-field> 128 ></v-text-field>
129 </v-flex> 129 </v-flex>
130 </v-layout> 130 </v-layout>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-layout> 133 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 134 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">Password:</label> 135 <label class="right">Password:</label>
136 </v-flex> 136 </v-flex>
137 <v-flex xs8 class="ml-3"> 137 <v-flex xs8 class="ml-3">
138 <v-text-field 138 <v-text-field
139 v-model="editedItem.password" 139 v-model="editedItem.password"
140 placeholder="Enter Password" 140 placeholder="Enter Password"
141 type="text" 141 type="text"
142 required 142 required
143 ></v-text-field> 143 ></v-text-field>
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-flex xs12 sm12> 148 <v-flex xs12 sm12>
149 <v-card-actions> 149 <v-card-actions>
150 <v-spacer></v-spacer> 150 <v-spacer></v-spacer>
151 <v-btn round dark @click="save" class="add-button">Save</v-btn> 151 <v-btn round dark @click="save" class="add-button">Save</v-btn>
152 <v-spacer></v-spacer> 152 <v-spacer></v-spacer>
153 </v-card-actions> 153 </v-card-actions>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 </v-form> 156 </v-form>
157 </v-card-text> 157 </v-card-text>
158 <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only"> 158 <v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only">
159 <v-flex xs12> 159 <v-flex xs12>
160 <v-layout wrap> 160 <v-layout wrap>
161 <v-flex xs12 class="pt-4 subheading"> 161 <v-flex xs12 class="pt-4 subheading">
162 <label>Email ID:</label> 162 <label>Email ID:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12> 164 <v-flex xs12>
165 <v-text-field 165 <v-text-field
166 placeholder="fill your email" 166 placeholder="fill your email"
167 v-model="editedItem.email" 167 v-model="editedItem.email"
168 type="text" 168 type="text"
169 name="email" 169 name="email"
170 required 170 required
171 ></v-text-field> 171 ></v-text-field>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 </v-flex> 174 </v-flex>
175 <v-flex xs12> 175 <v-flex xs12>
176 <v-layout wrap> 176 <v-layout wrap>
177 <v-flex xs12 class="pt-4 subheading"> 177 <v-flex xs12 class="pt-4 subheading">
178 <label>Father Name:</label> 178 <label>Father Name:</label>
179 </v-flex> 179 </v-flex>
180 <v-flex xs12> 180 <v-flex xs12>
181 <v-text-field 181 <v-text-field
182 v-model="editedItem.fatherName" 182 v-model="editedItem.fatherName"
183 placeholder="fill your father Name" 183 placeholder="fill your father Name"
184 required 184 required
185 ></v-text-field> 185 ></v-text-field>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 </v-flex> 188 </v-flex>
189 <v-flex xs12> 189 <v-flex xs12>
190 <!-- EDIT FATHER CELL NUMBER - visible AT xs and sm screen --> 190 <!-- EDIT FATHER CELL NUMBER - visible AT xs and sm screen -->
191 <v-layout wrap> 191 <v-layout wrap>
192 <v-flex xs12 class="pt-4 subheading"> 192 <v-flex xs12 class="pt-4 subheading">
193 <label>Father Cell No:</label> 193 <label>Father Cell No:</label>
194 </v-flex> 194 </v-flex>
195 <v-flex xs12> 195 <v-flex xs12>
196 <v-layout row wrap> 196 <v-layout row wrap>
197 <v-flex sm3 class="mt-3"> 197 <v-flex sm3 class="mt-3">
198 <vue-country-code @onSelect="editFatherCellCode" class="black--text"></vue-country-code> 198 <vue-country-code @onSelect="editFatherCellCode" class="black--text"></vue-country-code>
199 </v-flex> 199 </v-flex>
200 <v-flex sm9> 200 <v-flex sm9>
201 <v-text-field 201 <v-text-field
202 v-model="editedItem.fatherCellNo" 202 v-model="editedItem.fatherCellNo"
203 placeholder="fill your father Cell Number" 203 placeholder="fill your father Cell Number"
204 type="number" 204 type="number"
205 required 205 required
206 ></v-text-field> 206 ></v-text-field>
207 </v-flex> 207 </v-flex>
208 </v-layout> 208 </v-layout>
209 </v-flex> 209 </v-flex>
210 </v-layout> 210 </v-layout>
211 </v-flex> 211 </v-flex>
212 <v-flex xs12> 212 <v-flex xs12>
213 <v-layout wrap> 213 <v-layout wrap>
214 <v-flex xs12 class="pt-4 subheading"> 214 <v-flex xs12 class="pt-4 subheading">
215 <label>Father Profession:</label> 215 <label>Father Profession:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs12> 217 <v-flex xs12>
218 <v-text-field 218 <v-text-field
219 v-model="editedItem.fatherProfession" 219 v-model="editedItem.fatherProfession"
220 placeholder="fill your father Profession" 220 placeholder="fill your father Profession"
221 required 221 required
222 ></v-text-field> 222 ></v-text-field>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 </v-flex> 225 </v-flex>
226 <v-flex xs12> 226 <v-flex xs12>
227 <v-layout wrap> 227 <v-layout wrap>
228 <v-flex xs12 class="pt-4 subheading"> 228 <v-flex xs12 class="pt-4 subheading">
229 <label>Mother Name:</label> 229 <label>Mother Name:</label>
230 </v-flex> 230 </v-flex>
231 <v-flex xs12> 231 <v-flex xs12>
232 <v-text-field 232 <v-text-field
233 v-model="editedItem.motherName" 233 v-model="editedItem.motherName"
234 placeholder="fill your Mother Name" 234 placeholder="fill your Mother Name"
235 type="text" 235 type="text"
236 required 236 required
237 ></v-text-field> 237 ></v-text-field>
238 </v-flex> 238 </v-flex>
239 </v-layout> 239 </v-layout>
240 </v-flex> 240 </v-flex>
241 <v-flex xs12> 241 <v-flex xs12>
242 <!-- EDIT MOTHER CELL NUMBER - VISIBLE ONLY AT xs and sm screen --> 242 <!-- EDIT MOTHER CELL NUMBER - VISIBLE ONLY AT xs and sm screen -->
243 <v-layout wrap> 243 <v-layout wrap>
244 <v-flex xs12 class="pt-4 subheading"> 244 <v-flex xs12 class="pt-4 subheading">
245 <label>Mother Cell No:</label> 245 <label>Mother Cell No:</label>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12> 247 <v-flex xs12>
248 <v-layout row wrap> 248 <v-layout row wrap>
249 <v-flex sm3 class="mt-3"> 249 <v-flex sm3 class="mt-3">
250 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 250 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
251 </v-flex> 251 </v-flex>
252 <v-flex sm9> 252 <v-flex sm9>
253 <v-text-field 253 <v-text-field
254 v-model="editedItem.motherCellNo" 254 v-model="editedItem.motherCellNo"
255 placeholder="fill your Mother Cell Number" 255 placeholder="fill your Mother Cell Number"
256 type="number" 256 type="number"
257 required 257 required
258 ></v-text-field> 258 ></v-text-field>
259 </v-flex> 259 </v-flex>
260 </v-layout> 260 </v-layout>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 <v-flex xs12> 264 <v-flex xs12>
265 <v-layout wrap> 265 <v-layout wrap>
266 <v-flex xs12 class="pt-4 subheading"> 266 <v-flex xs12 class="pt-4 subheading">
267 <label>Mother Profession:</label> 267 <label>Mother Profession:</label>
268 </v-flex> 268 </v-flex>
269 <v-flex xs12> 269 <v-flex xs12>
270 <v-text-field 270 <v-text-field
271 v-model="editedItem.motherProfession" 271 v-model="editedItem.motherProfession"
272 placeholder="fill your Mother Profession" 272 placeholder="fill your Mother Profession"
273 type="text" 273 type="text"
274 required 274 required
275 ></v-text-field> 275 ></v-text-field>
276 </v-flex> 276 </v-flex>
277 <v-flex xs12 class="pt-4 subheading"> 277 <v-flex xs12 class="pt-4 subheading">
278 <label>Password:</label> 278 <label>Password:</label>
279 </v-flex> 279 </v-flex>
280 <v-flex xs12> 280 <v-flex xs12>
281 <v-text-field 281 <v-text-field
282 v-model="editedItem.password" 282 v-model="editedItem.password"
283 placeholder="Enter Password" 283 placeholder="Enter Password"
284 type="text" 284 type="text"
285 required 285 required
286 ></v-text-field> 286 ></v-text-field>
287 </v-flex> 287 </v-flex>
288 </v-layout> 288 </v-layout>
289 </v-flex> 289 </v-flex>
290 <v-layout> 290 <v-layout>
291 <v-flex xs12 sm12> 291 <v-flex xs12 sm12>
292 <v-card-actions> 292 <v-card-actions>
293 <v-spacer></v-spacer> 293 <v-spacer></v-spacer>
294 <v-btn round dark @click="save" class="add-button">Save</v-btn> 294 <v-btn round dark @click="save" class="add-button">Save</v-btn>
295 <v-spacer></v-spacer> 295 <v-spacer></v-spacer>
296 </v-card-actions> 296 </v-card-actions>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-card-text> 299 </v-card-text>
300 </v-card> 300 </v-card>
301 </v-dialog> 301 </v-dialog>
302 302
303 <!-- ****** RESET Parents MPIN ****** --> 303 <!-- ****** RESET Parents MPIN ****** -->
304 <v-dialog v-model="resetParentMpin" max-width="500px" scrollable persistent> 304 <v-dialog v-model="resetParentMpin" max-width="500px" scrollable persistent>
305 <v-card class="card-style pa-2" dark> 305 <v-card class="card-style pa-2" dark>
306 <v-layout> 306 <v-layout>
307 <v-flex xs12> 307 <v-flex xs12>
308 <label class="title text-xs-center">Reset Mpin</label> 308 <label class="title text-xs-center">Reset Mpin</label>
309 <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon> 309 <v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 <v-card-text class="hidden-xs-only hidden-sm-only"> 312 <v-card-text class="hidden-xs-only hidden-sm-only">
313 <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation> 313 <v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-layout> 315 <v-layout>
316 <v-flex xs3 sm4 class="pt-4 subheading"> 316 <v-flex xs3 sm4 class="pt-4 subheading">
317 <label class="right">Change Mpin:</label> 317 <label class="right">Change Mpin:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 sm6 class="ml-3"> 319 <v-flex xs8 sm6 class="ml-3">
320 <v-text-field 320 <v-text-field
321 placeholder="change mpin" 321 placeholder="change mpin"
322 :rules="mPinRules" 322 :rules="mPinRules"
323 v-model="editMpin.mPin" 323 v-model="editMpin.mPin"
324 type="number" 324 type="number"
325 counter="4" 325 counter="4"
326 required 326 required
327 ></v-text-field> 327 ></v-text-field>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 </v-form> 331 </v-form>
332 <v-layout> 332 <v-layout>
333 <v-flex xs12 sm12> 333 <v-flex xs12 sm12>
334 <v-card-actions> 334 <v-card-actions>
335 <v-spacer></v-spacer> 335 <v-spacer></v-spacer>
336 <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn> 336 <v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn>
337 <v-spacer></v-spacer> 337 <v-spacer></v-spacer>
338 </v-card-actions> 338 </v-card-actions>
339 </v-flex> 339 </v-flex>
340 </v-layout> 340 </v-layout>
341 </v-card-text> 341 </v-card-text>
342 </v-card> 342 </v-card>
343 </v-dialog> 343 </v-dialog>
344 344
345 <!-- ****** PROFILE VIEW Parents DEATILS ****** --> 345 <!-- ****** PROFILE VIEW Parents DEATILS ****** -->
346 346
347 <v-dialog v-model="profileParentDialog" max-width="700px" persistent> 347 <v-dialog v-model="profileParentDialog" max-width="700px" persistent>
348 <v-card class="card-style pa-2" dark> 348 <v-card class="card-style pa-2" dark>
349 <v-layout> 349 <v-layout>
350 <v-flex xs12> 350 <v-flex xs12>
351 <label class="title text-xs-center">View Parent Details</label> 351 <label class="title text-xs-center">View Parent Details</label>
352 <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon> 352 <v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon>
353 </v-flex> 353 </v-flex>
354 </v-layout> 354 </v-layout>
355 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 355 <v-flex align-center justify-center layout text-xs-center class="mt-3">
356 <v-avatar size="100px"> 356 <v-avatar size="100px">
357 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 357 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
358 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 358 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
359 </v-avatar> 359 </v-avatar>
360 </v-flex> 360 </v-flex>
361 <v-container grid-list-md> 361 <v-container grid-list-md>
362 <v-layout wrap> 362 <v-layout wrap>
363 <v-flex xs12> 363 <v-flex xs12>
364 <v-layout> 364 <v-layout>
365 <v-flex xs12 sm12> 365 <v-flex xs12 sm12>
366 <v-layout> 366 <v-layout>
367 <v-flex xs6> 367 <v-flex xs6>
368 <h5 class="right my-1"> 368 <h5 class="right my-1">
369 <b>Email:</b> 369 <b>Email:</b>
370 </h5> 370 </h5>
371 </v-flex> 371 </v-flex>
372 <v-flex xs6> 372 <v-flex xs6>
373 <h5 class="my-1">{{ editedItem.email }}</h5> 373 <h5 class="my-1">{{ editedItem.email }}</h5>
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> 379 <v-flex xs12>
380 <v-layout> 380 <v-layout>
381 <v-flex xs6> 381 <v-flex xs6>
382 <b> 382 <b>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>Fahter Name:</b> 384 <b>Fahter Name:</b>
385 </h5> 385 </h5>
386 </b> 386 </b>
387 </v-flex> 387 </v-flex>
388 <v-flex xs6> 388 <v-flex xs6>
389 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 389 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 </v-flex> 392 </v-flex>
393 </v-layout> 393 </v-layout>
394 <v-layout> 394 <v-layout>
395 <v-flex xs12> 395 <v-flex xs12>
396 <v-layout> 396 <v-layout>
397 <v-flex xs6> 397 <v-flex xs6>
398 <b> 398 <b>
399 <h5 class="right my-1"> 399 <h5 class="right my-1">
400 <b>Mother Name:</b> 400 <b>Mother Name:</b>
401 </h5> 401 </h5>
402 </b> 402 </b>
403 </v-flex> 403 </v-flex>
404 <v-flex xs6> 404 <v-flex xs6>
405 <h5 class="my-1">{{ editedItem.motherName }}</h5> 405 <h5 class="my-1">{{ editedItem.motherName }}</h5>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-flex> 408 </v-flex>
409 </v-layout> 409 </v-layout>
410 <v-layout> 410 <v-layout>
411 <v-flex xs12> 411 <v-flex xs12>
412 <v-layout> 412 <v-layout>
413 <v-flex sm6 xs6> 413 <v-flex sm6 xs6>
414 <b> 414 <b>
415 <h5 class="right my-1"> 415 <h5 class="right my-1">
416 <b>Father Cell No:</b> 416 <b>Father Cell No:</b>
417 </h5> 417 </h5>
418 </b> 418 </b>
419 </v-flex> 419 </v-flex>
420 <v-flex sm6 xs6> 420 <v-flex sm6 xs6>
421 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 421 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 </v-flex> 424 </v-flex>
425 </v-layout> 425 </v-layout>
426 <v-layout> 426 <v-layout>
427 <v-flex xs12> 427 <v-flex xs12>
428 <v-layout> 428 <v-layout>
429 <v-flex xs6> 429 <v-flex xs6>
430 <b> 430 <b>
431 <h5 class="right my-1"> 431 <h5 class="right my-1">
432 <b>Mother Cell No:</b> 432 <b>Mother Cell No:</b>
433 </h5> 433 </h5>
434 </b> 434 </b>
435 </v-flex> 435 </v-flex>
436 <v-flex xs6> 436 <v-flex xs6>
437 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 437 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 </v-flex> 440 </v-flex>
441 </v-layout> 441 </v-layout>
442 <v-layout> 442 <v-layout>
443 <v-flex xs12> 443 <v-flex xs12>
444 <v-layout> 444 <v-layout>
445 <v-flex xs6> 445 <v-flex xs6>
446 <b> 446 <b>
447 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 447 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
448 <b>FatherProfession:</b> 448 <b>FatherProfession:</b>
449 </h5> 449 </h5>
450 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 450 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
451 <b>Father Profession:</b> 451 <b>Father Profession:</b>
452 </h5> 452 </h5>
453 </b> 453 </b>
454 </v-flex> 454 </v-flex>
455 <v-flex xs6> 455 <v-flex xs6>
456 <h5 class="my-1">{{ editedItem.fatherProfession }}</h5> 456 <h5 class="my-1">{{ editedItem.fatherProfession }}</h5>
457 </v-flex> 457 </v-flex>
458 </v-layout> 458 </v-layout>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 <v-layout> 461 <v-layout>
462 <v-flex xs12> 462 <v-flex xs12>
463 <v-layout> 463 <v-layout>
464 <v-flex xs6> 464 <v-flex xs6>
465 <b> 465 <b>
466 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 466 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
467 <b>MotherProfession:</b> 467 <b>MotherProfession:</b>
468 </h5> 468 </h5>
469 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 469 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
470 <b>Mother Profession:</b> 470 <b>Mother Profession:</b>
471 </h5> 471 </h5>
472 </b> 472 </b>
473 </v-flex> 473 </v-flex>
474 <v-flex xs6> 474 <v-flex xs6>
475 <h5 class="my-1">{{ editedItem.motherProfession }}</h5> 475 <h5 class="my-1">{{ editedItem.motherProfession }}</h5>
476 </v-flex> 476 </v-flex>
477 </v-layout> 477 </v-layout>
478 <!-- <v-layout> 478 <!-- <v-layout>
479 <v-flex xs6> 479 <v-flex xs6>
480 <b> 480 <b>
481 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only"> 481 <h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
482 <b>Password:</b> 482 <b>Password:</b>
483 </h5> 483 </h5>
484 <h5 class="right my-1 hidden-sm-only hidden-xs-only"> 484 <h5 class="right my-1 hidden-sm-only hidden-xs-only">
485 <b>Password:</b> 485 <b>Password:</b>
486 </h5> 486 </h5>
487 </b> 487 </b>
488 </v-flex> 488 </v-flex>
489 <v-flex xs6> 489 <v-flex xs6>
490 <h5 class="my-1">{{ editedItem.password }}</h5> 490 <h5 class="my-1">{{ editedItem.password }}</h5>
491 </v-flex> 491 </v-flex>
492 </v-layout>--> 492 </v-layout>-->
493 </v-flex> 493 </v-flex>
494 </v-layout> 494 </v-layout>
495 </v-flex> 495 </v-flex>
496 </v-layout> 496 </v-layout>
497 </v-container> 497 </v-container>
498 </v-card> 498 </v-card>
499 </v-dialog> 499 </v-dialog>
500 <!-- ****** EXISTING-USERS Parents TABLE ****** --> 500 <!-- ****** EXISTING-USERS Parents TABLE ****** -->
501 <v-toolbar color="transparent" flat> 501 <v-toolbar color="transparent" flat>
502 <v-btn 502 <v-btn
503 fab 503 fab
504 dark 504 dark
505 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 505 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
506 small 506 small
507 @click="addParentDialog = true" 507 @click="addParentDialog = true"
508 > 508 >
509 <v-icon dark>add</v-icon> 509 <v-icon dark>add</v-icon>
510 </v-btn> 510 </v-btn>
511 <v-btn 511 <v-btn
512 v-if="role != 'TEACHER' " 512 v-if="role != 'TEACHER' "
513 round 513 round
514 class="open-dialog-button hidden-sm-only hidden-xs-only" 514 class="open-dialog-button hidden-sm-only hidden-xs-only"
515 dark 515 dark
516 @click="addParentDialog = true" 516 @click="addParentDialog = true"
517 > 517 >
518 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent 518 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent
519 </v-btn> 519 </v-btn>
520 <v-spacer></v-spacer> 520 <v-spacer></v-spacer>
521 <v-card-title class="body-1" v-show="show"> 521 <v-card-title class="body-1" v-show="show">
522 <v-btn icon large flat @click="displaySearch"> 522 <v-btn icon large flat @click="displaySearch">
523 <v-avatar size="27"> 523 <v-avatar size="27">
524 <img src="/static/icon/search.png" alt="icon" /> 524 <img src="/static/icon/search.png" alt="icon" />
525 </v-avatar> 525 </v-avatar>
526 </v-btn> 526 </v-btn>
527 </v-card-title> 527 </v-card-title>
528 <v-flex xs8 sm8 md2 lg2 v-if="showSearch"> 528 <v-flex xs8 sm8 md2 lg2 v-if="showSearch">
529 <v-layout> 529 <v-layout>
530 <v-text-field 530 <v-text-field
531 v-model="search" 531 v-model="search"
532 label="Search" 532 label="Search"
533 prepend-inner-icon="search" 533 prepend-inner-icon="search"
534 color="primary" 534 color="primary"
535 ref="searchField" 535 ref="searchField"
536 autofocus 536 autofocus
537 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 537 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
538 ></v-text-field> 538 ></v-text-field>
539 <v-icon @click="closeSearch" color="error">close</v-icon> 539 <v-icon @click="closeSearch" color="error">close</v-icon>
540 </v-layout> 540 </v-layout>
541 </v-flex> 541 </v-flex>
542 </v-toolbar> 542 </v-toolbar>
543 <v-data-table 543 <v-data-table
544 :headers="headers" 544 :headers="headers"
545 :items="parentsList" 545 :items="parentsList"
546 :pagination.sync="pagination" 546 :pagination.sync="pagination"
547 :search="search" 547 :search="search"
548 > 548 >
549 <template slot="items" slot-scope="props"> 549 <template slot="items" slot-scope="props">
550 <tr class="tr"> 550 <tr class="tr">
551 <td class="text-xs-center td td-row">{{ props.index + 1}}</td> 551 <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
552 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 552 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
553 <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td> 553 <td class="text-xs-center td td-row">{{ props.item.fatherName }}</td>
554 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td> 554 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
555 <td class="text-xs-center td td-row">{{ props.item.motherName }}</td> 555 <td class="text-xs-center td td-row">{{ props.item.motherName }}</td>
556 <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td> 556 <td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td>
557 <td class="text-xs-center td td-row"> 557 <td class="text-xs-center td td-row">
558 <span> 558 <span>
559 <v-tooltip top> 559 <v-tooltip top>
560 <img 560 <img
561 slot="activator" 561 slot="activator"
562 style="cursor:pointer; width:25px; height:25px; " 562 style="cursor:pointer; width:25px; height:25px; "
563 class="mr-3" 563 class="mr-3"
564 @click="profile(props.item)" 564 @click="profile(props.item)"
565 src="/static/icon/view.png" 565 src="/static/icon/view.png"
566 /> 566 />
567 <span>View</span> 567 <span>View</span>
568 </v-tooltip> 568 </v-tooltip>
569 <v-tooltip top v-if="role != 'TEACHER' "> 569 <v-tooltip top v-if="role != 'TEACHER' ">
570 <img 570 <img
571 slot="activator" 571 slot="activator"
572 style="cursor:pointer; width:20px; height:18px; " 572 style="cursor:pointer; width:20px; height:18px; "
573 @click="editItem(props.item)" 573 @click="editItem(props.item)"
574 src="/static/icon/edit.png" 574 src="/static/icon/edit.png"
575 class="mr-3" 575 class="mr-3"
576 /> 576 />
577 <span>Edit</span> 577 <span>Edit</span>
578 </v-tooltip> 578 </v-tooltip>
579 <span v-if="role === 'ADMIN' "> 579 <span v-if="role === 'ADMIN' ">
580 <i 580 <i
581 class="material-icons md-18" 581 class="material-icons md-18"
582 style="cursor:pointer; width:20px; height:18px;" 582 style="cursor:pointer; width:20px; height:18px;"
583 @click="resetParentMPIN(props.item)" 583 @click="resetParentMPIN(props.item)"
584 >vpn_key</i> 584 >vpn_key</i>
585 </span> 585 </span>
586 </span> 586 </span>
587 </td> 587 </td>
588 </tr> 588 </tr>
589 </template> 589 </template>
590 <v-alert 590 <v-alert
591 slot="no-results" 591 slot="no-results"
592 :value="true" 592 :value="true"
593 color="error" 593 color="error"
594 icon="warning" 594 icon="warning"
595 >Your search for "{{ search }}" found no results.</v-alert> 595 >Your search for "{{ search }}" found no results.</v-alert>
596 </v-data-table> 596 </v-data-table>
597 597
598 <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** --> 598 <!-- ******DIALOG BOX - ADD PARENTS DETAILS****** -->
599 <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog" persistent> 599 <v-dialog v-model="addParentDialog" max-width="1100px" v-if="addParentDialog" persistent>
600 <v-card flat class="card-style pa-2" dark> 600 <v-card flat class="card-style pa-2" dark>
601 <v-layout> 601 <v-layout>
602 <v-flex xs12> 602 <v-flex xs12>
603 <label class="title text-xs-center">Add Parent</label> 603 <label class="title text-xs-center">Add Parent</label>
604 <v-icon 604 <v-icon
605 size="24" 605 size="24"
606 class="right" 606 class="right"
607 @click="$refs.parentForm.reset();addParentDialog = false" 607 @click="$refs.parentForm.reset();addParentDialog = false"
608 >cancel</v-icon> 608 >cancel</v-icon>
609 </v-flex> 609 </v-flex>
610 </v-layout> 610 </v-layout>
611 <v-container fluid fill-height> 611 <v-container fluid fill-height>
612 <v-layout align-center> 612 <v-layout align-center>
613 <v-flex xs12 sm12> 613 <v-flex xs12 sm12>
614 <v-form ref="parentForm" v-model="valid" lazy-validation> 614 <v-form ref="parentForm" v-model="valid" lazy-validation>
615 <v-container fluid class="hidden-xs-only hidden-sm-only"> 615 <v-container fluid class="hidden-xs-only hidden-sm-only">
616 <v-layout> 616 <v-layout>
617 <!-- ADD FATHER CELL NUMBER HIDDEN ON xs and sm screen--> 617 <!-- ADD FATHER CELL NUMBER HIDDEN ON xs and sm screen-->
618 <v-flex xs12 sm6> 618 <v-flex xs12 sm6>
619 <v-layout> 619 <v-layout>
620 <v-flex xs4 class="pt-4 subheading"> 620 <v-flex xs4 class="pt-4 subheading">
621 <label class="right">Father Cell No:</label> 621 <label class="right">Father Cell No:</label>
622 </v-flex> 622 </v-flex>
623 <v-flex xs8 class="ml-3"> 623 <v-flex xs8 class="ml-3">
624 <v-layout row wrap> 624 <v-layout row wrap>
625 <v-flex md3 class="mt-3"> 625 <v-flex md3 class="mt-3">
626 <vue-country-code @onSelect="addFatherCellCode" class="black--text"></vue-country-code> 626 <vue-country-code @onSelect="addFatherCellCode" class="black--text"></vue-country-code>
627 </v-flex> 627 </v-flex>
628 <v-flex md9> 628 <v-flex md9>
629 <v-text-field 629 <v-text-field
630 v-model="parentData.fatherCellNo" 630 v-model="parentData.fatherCellNo"
631 placeholder="Father Cell Number" 631 placeholder="Father Cell Number"
632 type="number" 632 type="number"
633 :rules="fatheCellNoRules" 633 :rules="fatheCellNoRules"
634 counter="10" 634 counter="10"
635 required 635 required
636 ></v-text-field> 636 ></v-text-field>
637 </v-flex> 637 </v-flex>
638 </v-layout> 638 </v-layout>
639 </v-flex> 639 </v-flex>
640 </v-layout> 640 </v-layout>
641 </v-flex> 641 </v-flex>
642 <v-flex xs12 sm6> 642 <v-flex xs12 sm6>
643 <v-layout> 643 <v-layout>
644 <v-flex xs4 class="pt-4 subheading"> 644 <v-flex xs4 class="pt-4 subheading">
645 <label class="right">Parent Email Id:</label> 645 <label class="right">Parent Email Id:</label>
646 </v-flex> 646 </v-flex>
647 <v-flex xs8 class="ml-3"> 647 <v-flex xs8 class="ml-3">
648 <v-text-field 648 <v-text-field
649 placeholder="fill Parent email" 649 placeholder="fill Parent email"
650 v-model="parentData.email" 650 v-model="parentData.email"
651 type="text" 651 type="text"
652 required 652 required
653 ></v-text-field> 653 ></v-text-field>
654 </v-flex> 654 </v-flex>
655 </v-layout> 655 </v-layout>
656 </v-flex> 656 </v-flex>
657 </v-layout> 657 </v-layout>
658 <v-layout> 658 <v-layout>
659 <v-flex xs12 sm6> 659 <v-flex xs12 sm6>
660 <v-layout> 660 <v-layout>
661 <v-flex xs4 class="pt-4 subheading"> 661 <v-flex xs4 class="pt-4 subheading">
662 <label class="right">Father Name:</label> 662 <label class="right">Father Name:</label>
663 </v-flex> 663 </v-flex>
664 <v-flex xs8 class="ml-3"> 664 <v-flex xs8 class="ml-3">
665 <v-text-field 665 <v-text-field
666 v-model="parentData.fatherName" 666 v-model="parentData.fatherName"
667 placeholder="Fill your father Name" 667 placeholder="Fill your father Name"
668 required 668 required
669 ></v-text-field> 669 ></v-text-field>
670 </v-flex> 670 </v-flex>
671 </v-layout> 671 </v-layout>
672 </v-flex> 672 </v-flex>
673 <v-flex xs12 sm6> 673 <v-flex xs12 sm6>
674 <v-layout> 674 <v-layout>
675 <v-flex xs4 class="pt-4 subheading"> 675 <v-flex xs4 class="pt-4 subheading">
676 <label class="right">Father Profession:</label> 676 <label class="right">Father Profession:</label>
677 </v-flex> 677 </v-flex>
678 <v-flex xs8 class="ml-3"> 678 <v-flex xs8 class="ml-3">
679 <v-text-field 679 <v-text-field
680 v-model="parentData.fatherProfession" 680 v-model="parentData.fatherProfession"
681 placeholder="fill your father Profession" 681 placeholder="fill your father Profession"
682 required 682 required
683 ></v-text-field> 683 ></v-text-field>
684 </v-flex> 684 </v-flex>
685 </v-layout> 685 </v-layout>
686 </v-flex> 686 </v-flex>
687 </v-layout> 687 </v-layout>
688 <v-layout> 688 <v-layout>
689 <v-flex xs12 sm6> 689 <v-flex xs12 sm6>
690 <v-layout> 690 <v-layout>
691 <v-flex xs4 class="pt-4 subheading"> 691 <v-flex xs4 class="pt-4 subheading">
692 <label class="right">Mother Name:</label> 692 <label class="right">Mother Name:</label>
693 </v-flex> 693 </v-flex>
694 <v-flex xs8 class="ml-3"> 694 <v-flex xs8 class="ml-3">
695 <v-text-field 695 <v-text-field
696 v-model="parentData.motherName" 696 v-model="parentData.motherName"
697 placeholder="fill your Mother Name" 697 placeholder="fill your Mother Name"
698 type="text" 698 type="text"
699 required 699 required
700 ></v-text-field> 700 ></v-text-field>
701 </v-flex> 701 </v-flex>
702 </v-layout> 702 </v-layout>
703 </v-flex> 703 </v-flex>
704 <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen --> 704 <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen -->
705 <v-flex xs12 sm6> 705 <v-flex xs12 sm6>
706 <v-layout> 706 <v-layout>
707 <v-flex xs4 class="pt-4 subheading"> 707 <v-flex xs4 class="pt-4 subheading">
708 <label class="right">Mother Cell No:</label> 708 <label class="right">Mother Cell No:</label>
709 </v-flex> 709 </v-flex>
710 <v-flex xs8 class="ml-3"> 710 <v-flex xs8 class="ml-3">
711 <v-layout row wrap> 711 <v-layout row wrap>
712 <v-flex md3 class="mt-3"> 712 <v-flex md3 class="mt-3">
713 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 713 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
714 </v-flex> 714 </v-flex>
715 <v-flex md9> 715 <v-flex md9>
716 <v-text-field 716 <v-text-field
717 v-model="parentData.motherCellNo" 717 v-model="parentData.motherCellNo"
718 placeholder="Mother Cell Number" 718 placeholder="Mother Cell Number"
719 counter="10" 719 counter="10"
720 type="number" 720 type="number"
721 required 721 required
722 ></v-text-field> 722 ></v-text-field>
723 </v-flex> 723 </v-flex>
724 </v-layout> 724 </v-layout>
725 </v-flex> 725 </v-flex>
726 </v-layout> 726 </v-layout>
727 </v-flex> 727 </v-flex>
728 </v-layout> 728 </v-layout>
729 <v-layout> 729 <v-layout>
730 <v-flex xs12 sm6> 730 <v-flex xs12 sm6>
731 <v-layout> 731 <v-layout>
732 <v-flex xs4 class="pt-4 subheading"> 732 <v-flex xs4 class="pt-4 subheading">
733 <label class="right">Mother Profession:</label> 733 <label class="right">Mother Profession:</label>
734 </v-flex> 734 </v-flex>
735 <v-flex xs8 class="ml-3"> 735 <v-flex xs8 class="ml-3">
736 <v-text-field 736 <v-text-field
737 v-model="parentData.motherProfession" 737 v-model="parentData.motherProfession"
738 placeholder="fill your Mother Profession" 738 placeholder="fill your Mother Profession"
739 type="text" 739 type="text"
740 required 740 required
741 ></v-text-field> 741 ></v-text-field>
742 </v-flex> 742 </v-flex>
743 </v-layout> 743 </v-layout>
744 </v-flex> 744 </v-flex>
745 <v-flex xs12 sm6> 745 <v-flex xs12 sm6>
746 <v-layout> 746 <v-layout>
747 <v-flex xs4 class="pt-4 subheading"> 747 <v-flex xs4 class="pt-4 subheading">
748 <label class="right">Password:</label> 748 <label class="right">Password:</label>
749 </v-flex> 749 </v-flex>
750 <v-flex xs8 class="ml-3"> 750 <v-flex xs8 class="ml-3">
751 <v-text-field 751 <v-text-field
752 v-model="parentData.password" 752 v-model="parentData.password"
753 :append-icon="e1 ? 'visibility_off' : 'visibility'" 753 :append-icon="e1 ? 'visibility_off' : 'visibility'"
754 :append-icon-cb="() => (e1 = !e1)" 754 :append-icon-cb="() => (e1 = !e1)"
755 :type="e1 ? 'password' : 'text'" 755 :type="e1 ? 'password' : 'text'"
756 :rules="password" 756 :rules="password"
757 placeholder="Enter Your Password" 757 placeholder="Enter Your Password"
758 :disabled="isFatherCellExists" 758 :disabled="isFatherCellExists"
759 required 759 required
760 ></v-text-field> 760 ></v-text-field>
761 </v-flex> 761 </v-flex>
762 </v-layout> 762 </v-layout>
763 </v-flex> 763 </v-flex>
764 </v-layout> 764 </v-layout>
765 <v-flex xs12 sm12> 765 <v-flex xs12 sm12>
766 <v-layout> 766 <v-layout>
767 <v-flex xs12 sm12> 767 <v-flex xs12 sm12>
768 <v-btn 768 <v-btn
769 class="right add-button" 769 class="right add-button"
770 @click="submitParentDetails" 770 @click="submitParentDetails"
771 round 771 round
772 dark 772 dark
773 :loading="loading" 773 :loading="loading"
774 v-show="showParent" 774 v-show="showParent"
775 >Add</v-btn> 775 >Add</v-btn>
776 <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn> 776 <v-btn @click="clear" round dark class="clear-button right">Clear</v-btn>
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 </v-flex> 779 </v-flex>
780 </v-container> 780 </v-container>
781 <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only"> 781 <v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only">
782 <v-layout wrap> 782 <v-layout wrap>
783 <!-- ADD FATHER CELL NUMBER -- VISIBLE ON xs and sm screens --> 783 <!-- ADD FATHER CELL NUMBER -- VISIBLE ON xs and sm screens -->
784 <v-flex xs12 sm6> 784 <v-flex xs12 sm6>
785 <v-layout wrap> 785 <v-layout wrap>
786 <v-flex xs12 class="pt-4 subheading"> 786 <v-flex xs12 class="pt-4 subheading">
787 <label>Father Cell No:</label> 787 <label>Father Cell No:</label>
788 </v-flex> 788 </v-flex>
789 <v-layout row wrap xs12> 789 <v-layout row wrap xs12>
790 <v-flex sm3 class="mt-3"> 790 <v-flex sm3 class="mt-3">
791 <vue-country-code @onSelect="addFatherCellCode" class="black--text"></vue-country-code> 791 <vue-country-code @onSelect="addFatherCellCode" class="black--text"></vue-country-code>
792 </v-flex> 792 </v-flex>
793 793
794 <v-flex sm9> 794 <v-flex sm9>
795 <v-text-field 795 <v-text-field
796 v-model="parentData.fatherCellNo" 796 v-model="parentData.fatherCellNo"
797 :rules="fatheCellNoRules" 797 :rules="fatheCellNoRules"
798 counter="10" 798 counter="10"
799 placeholder="Father Cell Number" 799 placeholder="Father Cell Number"
800 type="number" 800 type="number"
801 required 801 required
802 ></v-text-field> 802 ></v-text-field>
803 </v-flex> 803 </v-flex>
804 </v-layout> 804 </v-layout>
805 </v-layout> 805 </v-layout>
806 </v-flex> 806 </v-flex>
807 <v-flex xs12 sm6> 807 <v-flex xs12 sm6>
808 <v-layout wrap> 808 <v-layout wrap>
809 <v-flex xs12 class="pt-4 subheading"> 809 <v-flex xs12 class="pt-4 subheading">
810 <label>Parent Email Id:</label> 810 <label>Parent Email Id:</label>
811 </v-flex> 811 </v-flex>
812 <v-flex xs12> 812 <v-flex xs12>
813 <v-text-field 813 <v-text-field
814 placeholder="fill Parent email" 814 placeholder="fill Parent email"
815 v-model="parentData.email" 815 v-model="parentData.email"
816 type="text" 816 type="text"
817 required 817 required
818 ></v-text-field> 818 ></v-text-field>
819 </v-flex> 819 </v-flex>
820 </v-layout> 820 </v-layout>
821 </v-flex> 821 </v-flex>
822 </v-layout> 822 </v-layout>
823 <v-layout wrap> 823 <v-layout wrap>
824 <v-flex xs12 sm6> 824 <v-flex xs12 sm6>
825 <v-layout wrap> 825 <v-layout wrap>
826 <v-flex xs12 class="pt-4 subheading"> 826 <v-flex xs12 class="pt-4 subheading">
827 <label>Father Name:</label> 827 <label>Father Name:</label>
828 </v-flex> 828 </v-flex>
829 <v-flex xs12> 829 <v-flex xs12>
830 <v-text-field 830 <v-text-field
831 v-model="parentData.fatherName" 831 v-model="parentData.fatherName"
832 placeholder="Fill your father Name" 832 placeholder="Fill your father Name"
833 required 833 required
834 ></v-text-field> 834 ></v-text-field>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 </v-flex> 837 </v-flex>
838 <v-flex xs12 sm6> 838 <v-flex xs12 sm6>
839 <v-layout wrap> 839 <v-layout wrap>
840 <v-flex xs12 class="pt-4 subheading"> 840 <v-flex xs12 class="pt-4 subheading">
841 <label>Father Profession:</label> 841 <label>Father Profession:</label>
842 </v-flex> 842 </v-flex>
843 <v-flex xs12> 843 <v-flex xs12>
844 <v-text-field 844 <v-text-field
845 v-model="parentData.fatherProfession" 845 v-model="parentData.fatherProfession"
846 placeholder="fill your father Profession" 846 placeholder="fill your father Profession"
847 required 847 required
848 ></v-text-field> 848 ></v-text-field>
849 </v-flex> 849 </v-flex>
850 </v-layout> 850 </v-layout>
851 </v-flex> 851 </v-flex>
852 </v-layout> 852 </v-layout>
853 <v-layout wrap> 853 <v-layout wrap>
854 <v-flex xs12 sm6> 854 <v-flex xs12 sm6>
855 <v-layout wrap> 855 <v-layout wrap>
856 <v-flex xs12 class="pt-4 subheading"> 856 <v-flex xs12 class="pt-4 subheading">
857 <label>Mother Name:</label> 857 <label>Mother Name:</label>
858 </v-flex> 858 </v-flex>
859 <v-flex xs12> 859 <v-flex xs12>
860 <v-text-field 860 <v-text-field
861 v-model="parentData.motherName" 861 v-model="parentData.motherName"
862 placeholder="fill your Mother Name" 862 placeholder="fill your Mother Name"
863 type="text" 863 type="text"
864 required 864 required
865 ></v-text-field> 865 ></v-text-field>
866 </v-flex> 866 </v-flex>
867 </v-layout> 867 </v-layout>
868 </v-flex> 868 </v-flex>
869 <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen--> 869 <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen-->
870 <v-flex xs12 sm6> 870 <v-flex xs12 sm6>
871 <v-layout wrap> 871 <v-layout wrap>
872 <v-flex xs42 class="pt-4 subheading"> 872 <v-flex xs42 class="pt-4 subheading">
873 <label>Mother Cell No:</label> 873 <label>Mother Cell No:</label>
874 </v-flex> 874 </v-flex>
875 <v-flex xs12> 875 <v-flex xs12>
876 <v-layout row wrap> 876 <v-layout row wrap>
877 <v-flex sm3 class="mt-3"> 877 <v-flex sm3 class="mt-3">
878 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 878 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
879 </v-flex> 879 </v-flex>
880 <v-flex sm9> 880 <v-flex sm9>
881 <v-text-field 881 <v-text-field
882 v-model="parentData.motherCellNo" 882 v-model="parentData.motherCellNo"
883 placeholder="fill your Mother Cell Number" 883 placeholder="fill your Mother Cell Number"
884 type="number" 884 type="number"
885 required 885 required
886 ></v-text-field> 886 ></v-text-field>
887 </v-flex> 887 </v-flex>
888 </v-layout> 888 </v-layout>
889 </v-flex> 889 </v-flex>
890 </v-layout> 890 </v-layout>
891 </v-flex> 891 </v-flex>
892 </v-layout> 892 </v-layout>
893 <v-layout wrap> 893 <v-layout wrap>
894 <v-flex xs12 sm6> 894 <v-flex xs12 sm6>
895 <v-layout wrap> 895 <v-layout wrap>
896 <v-flex xs12 class="pt-4 subheading"> 896 <v-flex xs12 class="pt-4 subheading">
897 <label>Mother Profession:</label> 897 <label>Mother Profession:</label>
898 </v-flex> 898 </v-flex>
899 <v-flex xs12> 899 <v-flex xs12>
900 <v-text-field 900 <v-text-field
901 v-model="parentData.motherProfession" 901 v-model="parentData.motherProfession"
902 placeholder="fill your Mother Profession" 902 placeholder="fill your Mother Profession"
903 type="text" 903 type="text"
904 required 904 required
905 ></v-text-field> 905 ></v-text-field>
906 </v-flex> 906 </v-flex>
907 </v-layout> 907 </v-layout>
908 </v-flex> 908 </v-flex>
909 </v-layout> 909 </v-layout>
910 <v-flex xs12 sm12> 910 <v-flex xs12 sm12>
911 <v-layout> 911 <v-layout>
912 <v-flex xs6 sm6 offset-sm1> 912 <v-flex xs6 sm6 offset-sm1>
913 <v-btn @click="clear" class="clear-button" round dark>clear</v-btn> 913 <v-btn @click="clear" class="clear-button" round dark>clear</v-btn>
914 </v-flex> 914 </v-flex>
915 <v-flex xs6 sm6> 915 <v-flex xs6 sm6>
916 <v-btn 916 <v-btn
917 class="add-button" 917 class="add-button"
918 @click="submitParentDetails" 918 @click="submitParentDetails"
919 round 919 round
920 dark 920 dark
921 :loading="loading" 921 :loading="loading"
922 v-show="showParent" 922 v-show="showParent"
923 >Add</v-btn> 923 >Add</v-btn>
924 </v-flex> 924 </v-flex>
925 </v-layout> 925 </v-layout>
926 </v-flex> 926 </v-flex>
927 </v-container> 927 </v-container>
928 </v-form> 928 </v-form>
929 </v-flex> 929 </v-flex>
930 </v-layout> 930 </v-layout>
931 </v-container> 931 </v-container>
932 </v-card> 932 </v-card>
933 </v-dialog> 933 </v-dialog>
934 <div class="loader" v-if="showLoader"> 934 <div class="loader" v-if="showLoader">
935 <v-progress-circular indeterminate color="white"></v-progress-circular> 935 <v-progress-circular indeterminate color="white"></v-progress-circular>
936 </div> 936 </div>
937 <v-snackbar 937 <v-snackbar
938 :timeout="timeout" 938 :timeout="timeout"
939 :top="y === 'top'" 939 :top="y === 'top'"
940 :right="x === 'right'" 940 :right="x === 'right'"
941 :vertical="mode === 'vertical'" 941 :vertical="mode === 'vertical'"
942 v-model="snackbar" 942 v-model="snackbar"
943 color="success" 943 color="success"
944 >{{ text }}</v-snackbar> 944 >{{ text }}</v-snackbar>
945 </v-container> 945 </v-container>
946 </template> 946 </template>
947 947
948 <script> 948 <script>
949 import http from "@/Services/http.js"; 949 import http from "@/Services/http.js";
950 import Util from "@/util"; 950 import Util from "@/util";
951 import moment from "moment"; 951 import moment from "moment";
952 952
953 export default { 953 export default {
954 data: () => ({ 954 data: () => ({
955 /* EDIT FATHER CELL */ 955 /* EDIT FATHER CELL */
956 editedFatherCellCode: '', 956 editedFatherCellCode: '',
957 /* ADD FATHER CELL */ 957 /* ADD FATHER CELL */
958 addedFatherCellCode: '', 958 addedFatherCellCode: '',
959 e1: true, 959 e1: true,
960 showParent: true, 960 showParent: true,
961 snackbar: false, 961 snackbar: false,
962 role: "", 962 role: "",
963 // TEACHER: "", 963 // TEACHER: "",
964 y: "top", 964 y: "top",
965 x: "right", 965 x: "right",
966 color: "", 966 color: "",
967 mode: "", 967 mode: "",
968 timeout: 3000, 968 timeout: 3000,
969 text: "", 969 text: "",
970 show: true, 970 show: true,
971 showSearch: false, 971 showSearch: false,
972 showLoader: false, 972 showLoader: false,
973 loading: false, 973 loading: false,
974 date: null, 974 date: null,
975 search: "", 975 search: "",
976 password: "", 976 password: "",
977 addParentDialog: false, 977 addParentDialog: false,
978 menu: false, 978 menu: false,
979 menu1: false, 979 menu1: false,
980 editParentDilaog: false, 980 editParentDilaog: false,
981 profileParentDialog: false, 981 profileParentDialog: false,
982 resetParentMpin: false, 982 resetParentMpin: false,
983 viewProfileParentDialog: false, 983 viewProfileParentDialog: false,
984 valid: true, 984 valid: true,
985 validEditParent: true, 985 validEditParent: true,
986 validParentMpin: true, 986 validParentMpin: true,
987 pagination: { 987 pagination: {
988 rowsPerPage: 10, 988 rowsPerPage: 10,
989 }, 989 },
990 fatherNameRules: [(v) => !!v || " Father Name is required"], 990 fatherNameRules: [(v) => !!v || " Father Name is required"],
991 fatheCellNoRules: [ 991 fatheCellNoRules: [
992 (v) => !!v || " father Cell Number is required", 992 (v) => !!v || " father Cell Number is required",
993 (v) => v <= 10000000000 || "Max 10 characters is required", 993 (v) => v <= 10000000000 || "Max 10 characters is required",
994 ], 994 ],
995 password: [ 995 password: [
996 (v) => !!v || "Password field is Required.", 996 (v) => !!v || "Password field is Required.",
997 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required' 997 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters lower case symbol required'
998 ], 998 ],
999 editFatherNoRule: [ 999 editFatherNoRule: [
1000 (v) => !!v || " father Cell Number is required", 1000 (v) => !!v || " father Cell Number is required",
1001 (v) => v <= 10000000000 || "Max 10 characters is required", 1001 (v) => v <= 10000000000 || "Max 10 characters is required",
1002 ], 1002 ],
1003 1003
1004 editfatherCellNo: [(v) => !!v || " Father Name is required"], 1004 editfatherCellNo: [(v) => !!v || " Father Name is required"],
1005 errorMessages: "", 1005 errorMessages: "",
1006 emailRules: [ 1006 emailRules: [
1007 (v) => !!v || "E-mail is required", 1007 (v) => !!v || "E-mail is required",
1008 (v) => 1008 (v) =>
1009 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1009 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1010 "E-mail must be valid", 1010 "E-mail must be valid",
1011 ], 1011 ],
1012 mPinRules: [ 1012 mPinRules: [
1013 (v) => !!v || "MPIN is required", 1013 (v) => !!v || "MPIN is required",
1014 (v) => v <= 10000 || "Max 4 numbers are required", 1014 (v) => v <= 10000 || "Max 4 numbers are required",
1015 ], 1015 ],
1016 headers: [ 1016 headers: [
1017 { 1017 {
1018 text: "No", 1018 text: "No",
1019 align: "center", 1019 align: "center",
1020 sortable: false, 1020 sortable: false,
1021 value: "No", 1021 value: "No",
1022 }, 1022 },
1023 { text: "Email", value: "email", sortable: false, align: "center" }, 1023 { text: "Email", value: "email", sortable: false, align: "center" },
1024 { 1024 {
1025 text: "Father Name", 1025 text: "Father Name",
1026 value: "fatherName", 1026 value: "fatherName",
1027 sortable: false, 1027 sortable: false,
1028 align: "center", 1028 align: "center",
1029 }, 1029 },
1030 { 1030 {
1031 text: "Father Cell No", 1031 text: "Father Cell No",
1032 value: "fatherName", 1032 value: "fatherName",
1033 sortable: false, 1033 sortable: false,
1034 align: "center", 1034 align: "center",
1035 }, 1035 },
1036 { 1036 {
1037 text: "Mother Name", 1037 text: "Mother Name",
1038 value: "motherName", 1038 value: "motherName",
1039 sortable: false, 1039 sortable: false,
1040 align: "center", 1040 align: "center",
1041 }, 1041 },
1042 { 1042 {
1043 text: "Mother Cell No", 1043 text: "Mother Cell No",
1044 value: "motherCellNo", 1044 value: "motherCellNo",
1045 sortable: false, 1045 sortable: false,
1046 align: "center", 1046 align: "center",
1047 }, 1047 },
1048 { text: "Action", value: "", sortable: false, align: "center" }, 1048 { text: "Action", value: "", sortable: false, align: "center" },
1049 ], 1049 ],
1050 parentsList: [], 1050 parentsList: [],
1051 editedIndex: -1, 1051 editedIndex: -1,
1052 parentData: {}, 1052 parentData: {},
1053 max: 10, 1053 max: 10,
1054 editedItem: { 1054 editedItem: {
1055 fatherName: "", 1055 fatherName: "",
1056 fatherCellNo: "", 1056 fatherCellNo: "",
1057 motherName: "", 1057 motherName: "",
1058 motherCellNo: "", 1058 motherCellNo: "",
1059 email: "", 1059 email: "",
1060 password: "", 1060 password: "",
1061 }, 1061 },
1062 editMpin: { 1062 editMpin: {
1063 mPin: "", 1063 mPin: "",
1064 }, 1064 },
1065 isFatherCellExists: false, 1065 isFatherCellExists: false,
1066 }), 1066 }),
1067 watch: { 1067 watch: {
1068 menu(val) { 1068 menu(val) {
1069 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1069 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1070 }, 1070 },
1071 menu1(val) { 1071 menu1(val) {
1072 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1072 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1073 }, 1073 },
1074 addParentDialog: function (val) { 1074 addParentDialog: function (val) {
1075 if (!val) { 1075 if (!val) {
1076 this.parentData = []; 1076 this.parentData = [];
1077 } 1077 }
1078 }, 1078 },
1079 }, 1079 },
1080 methods: { 1080 methods: {
1081 onSelect({ name, iso2, dialCode }) { 1081 onSelect({ name, iso2, dialCode }) {
1082 // console.log("country codes", name, iso2, dialCode); 1082 // console.log("country codes", name, iso2, dialCode);
1083 // this.countryCode = iso2 1083 // this.countryCode = iso2
1084 }, 1084 },
1085 editFatherCellCode({ name, iso2, dialCode }){ 1085 editFatherCellCode({ name, iso2, dialCode }){
1086 // console.log("Edit father cell", name,iso2); 1086 // console.log("Edit father cell", name,iso2);
1087 this.editedFatherCellCode = iso2 1087 this.editedFatherCellCode = dialCode
1088 }, 1088 },
1089 addFatherCellCode({ name, iso2, dialCode }){ 1089 addFatherCellCode({ name, iso2, dialCode }){
1090 this.addedFatherCellCode = iso2 1090 this.addedFatherCellCode = dialCode
1091 }, 1091 },
1092 editItem(item) { 1092 editItem(item) {
1093 this.editedIndex = this.parentsList.indexOf(item); 1093 this.editedIndex = this.parentsList.indexOf(item);
1094 this.editedItem = Object.assign({}, item); 1094 this.editedItem = Object.assign({}, item);
1095 this.editParentDilaog = true; 1095 this.editParentDilaog = true;
1096 }, 1096 },
1097 profile(item) { 1097 profile(item) {
1098 this.editedIndex = this.parentsList.indexOf(item); 1098 this.editedIndex = this.parentsList.indexOf(item);
1099 this.editedItem = Object.assign({}, item); 1099 this.editedItem = Object.assign({}, item);
1100 this.profileParentDialog = true; 1100 this.profileParentDialog = true;
1101 }, 1101 },
1102 resetParentMPIN(item) { 1102 resetParentMPIN(item) {
1103 this.editMpin = Object.assign({}, item); 1103 this.editMpin = Object.assign({}, item);
1104 this.resetParentMpin = true; 1104 this.resetParentMpin = true;
1105 }, 1105 },
1106 close() { 1106 close() {
1107 this.editParentDilaog = false; 1107 this.editParentDilaog = false;
1108 }, 1108 },
1109 closeProfile() { 1109 closeProfile() {
1110 this.profileParentDialog = false; 1110 this.profileParentDialog = false;
1111 }, 1111 },
1112 closeReset() { 1112 closeReset() {
1113 this.resetParentMpin = false; 1113 this.resetParentMpin = false;
1114 }, 1114 },
1115 clear() { 1115 clear() {
1116 this.$refs.parentForm.reset(); 1116 this.$refs.parentForm.reset();
1117 }, 1117 },
1118 save() { 1118 save() {
1119 if (this.$refs.editParentForm.validate()) { 1119 if (this.$refs.editParentForm.validate()) {
1120 this.editedItem.parentId = this.editedItem._id; 1120 this.editedItem.parentId = this.editedItem._id;
1121 this.editedItem.countryCode = this.editedFatherCellCode; 1121 this.editedItem.countryCode = this.editedFatherCellCode;
1122 http() 1122 http()
1123 .put("/updateParent", this.editedItem) 1123 .put("/updateParent", this.editedItem)
1124 .then((response) => { 1124 .then((response) => {
1125 this.snackbar = true; 1125 this.snackbar = true;
1126 this.color = "green"; 1126 this.color = "green";
1127 this.text = response.data.message; 1127 this.text = response.data.message;
1128 this.getParentDetails(); 1128 this.getParentDetails();
1129 this.close(); 1129 this.close();
1130 }) 1130 })
1131 .catch((error) => { 1131 .catch((error) => {
1132 this.snackbar = true; 1132 this.snackbar = true;
1133 this.color = "error"; 1133 this.color = "error";
1134 this.text = error.response.data.message; 1134 this.text = error.response.data.message;
1135 if (error.response.data.statusText) { 1135 if (error.response.data.statusText) {
1136 this.text = error.response.data.statusText; 1136 this.text = error.response.data.statusText;
1137 } 1137 }
1138 }); 1138 });
1139 } 1139 }
1140 }, 1140 },
1141 resetMpin() { 1141 resetMpin() {
1142 if (this.$refs.resetParentMpinForm.validate()) { 1142 if (this.$refs.resetParentMpinForm.validate()) {
1143 var changeMpin = { 1143 var changeMpin = {
1144 parentId: this.editMpin._id, 1144 parentId: this.editMpin._id,
1145 mPin: this.editMpin.mPin, 1145 mPin: this.editMpin.mPin,
1146 }; 1146 };
1147 http() 1147 http()
1148 .put("/resetMPin", changeMpin) 1148 .put("/resetMPin", changeMpin)
1149 .then((response) => { 1149 .then((response) => {
1150 this.snackbar = true; 1150 this.snackbar = true;
1151 this.color = "green"; 1151 this.color = "green";
1152 this.text = response.data.message; 1152 this.text = response.data.message;
1153 this.getParentDetails(); 1153 this.getParentDetails();
1154 this.resetParentMpin = false; 1154 this.resetParentMpin = false;
1155 this.closeReset(); 1155 this.closeReset();
1156 }) 1156 })
1157 .catch((error) => { 1157 .catch((error) => {
1158 this.snackbar = true; 1158 this.snackbar = true;
1159 this.color = "error"; 1159 this.color = "error";
1160 this.text = error.response.data.message; 1160 this.text = error.response.data.message;
1161 if (error.response.data.statusText) { 1161 if (error.response.data.statusText) {
1162 this.text = error.response.data.statusText; 1162 this.text = error.response.data.statusText;
1163 } 1163 }
1164 }); 1164 });
1165 } 1165 }
1166 }, 1166 },
1167 async submitParentDetails() { 1167 async submitParentDetails() {
1168 if (this.$refs.parentForm.validate()) { 1168 if (this.$refs.parentForm.validate()) {
1169 this.parentData.role = "PARENT"; 1169 this.parentData.role = "PARENT";
1170 this.loading = true; 1170 this.loading = true;
1171 this.parentData.countryCode = this.addedFatherCellCode, 1171 this.parentData.countryCode = this.addedFatherCellCode,
1172 await http() 1172 await http()
1173 .post("/createParent", this.parentData) 1173 .post("/createParent", this.parentData)
1174 .then((response) => { 1174 .then((response) => {
1175 this.parentId = response.data.data.id; 1175 this.parentId = response.data.data.id;
1176 this.snackbar = true; 1176 this.snackbar = true;
1177 this.color = "green"; 1177 this.color = "green";
1178 this.text = response.data.message; 1178 this.text = response.data.message;
1179 this.getParentDetails(); 1179 this.getParentDetails();
1180 this.clear(); 1180 this.clear();
1181 this.loading = false; 1181 this.loading = false;
1182 this.isFatherCellExists = true; 1182 this.isFatherCellExists = true;
1183 this.addParentDialog = false; 1183 this.addParentDialog = false;
1184 }) 1184 })
1185 .catch((error) => { 1185 .catch((error) => {
1186 this.snackbar = true; 1186 this.snackbar = true;
1187 this.color = "error"; 1187 this.color = "error";
1188 this.text = error.response.data.message; 1188 this.text = error.response.data.message;
1189 if (error.response.data.statusText) { 1189 if (error.response.data.statusText) {
1190 this.text = error.response.data.statusText; 1190 this.text = error.response.data.statusText;
1191 } 1191 }
1192 this.loading = false; 1192 this.loading = false;
1193 }); 1193 });
1194 } 1194 }
1195 }, 1195 },
1196 getParentDetails() { 1196 getParentDetails() {
1197 http() 1197 http()
1198 .get("getParentsList", { 1198 .get("getParentsList", {
1199 headers: { 1199 headers: {
1200 Authorization: "Bearer " + this.$store.state.token, 1200 Authorization: "Bearer " + this.$store.state.token,
1201 }, 1201 },
1202 }) 1202 })
1203 .then((response) => { 1203 .then((response) => {
1204 this.parentsList = response.data.data; 1204 this.parentsList = response.data.data;
1205 }) 1205 })
1206 .catch((error) => { 1206 .catch((error) => {
1207 // console.log("err====>", error.response.data.message); 1207 // console.log("err====>", error.response.data.message);
1208 this.showLoader = false; 1208 this.showLoader = false;
1209 if (error.response.status === 401) { 1209 if (error.response.status === 401) {
1210 this.$router.replace({ path: "/" }); 1210 this.$router.replace({ path: "/" });
1211 this.$store.dispatch("setToken", null); 1211 this.$store.dispatch("setToken", null);
1212 this.$store.dispatch("Id", null); 1212 this.$store.dispatch("Id", null);
1213 this.$store.dispatch("Role", null); 1213 this.$store.dispatch("Role", null);
1214 } 1214 }
1215 }); 1215 });
1216 }, 1216 },
1217 displaySearch() { 1217 displaySearch() {
1218 this.show = false; 1218 this.show = false;
1219 this.showSearch = true; 1219 this.showSearch = true;
1220 // this.$refs.searchField.focus() 1220 // this.$refs.searchField.focus()
1221 }, 1221 },
1222 closeSearch() { 1222 closeSearch() {
1223 this.showSearch = false; 1223 this.showSearch = false;
1224 this.show = true; 1224 this.show = true;
1225 this.search = ""; 1225 this.search = "";
1226 }, 1226 },
1227 }, 1227 },
1228 mounted() { 1228 mounted() {
1229 this.getParentDetails(); 1229 this.getParentDetails();
1230 // console.log("role", this.$store.state.role); 1230 // console.log("role", this.$store.state.role);
1231 this.role = this.$store.state.role; 1231 this.role = this.$store.state.role;
1232 }, 1232 },
1233 }; 1233 };
1234 </script> 1234 </script>
src/pages/Students/students.vue
Diff comments   View file @d0ffa80
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 persistent> 4 <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable 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 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 <!-- EDIT DETAILS - MOBILE NUMBER --> 297 <!-- EDIT DETAILS - MOBILE NUMBER -->
298 <v-flex xs12 sm4> 298 <v-flex xs12 sm4>
299 <v-layout> 299 <v-layout>
300 <v-flex xs4 class="pt-4 subheading"> 300 <v-flex xs4 class="pt-4 subheading">
301 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 301 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
302 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 302 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
303 </v-flex> 303 </v-flex>
304 <v-flex xs8 class="ml-3"> 304 <v-flex xs8 class="ml-3">
305 <v-layout row wrap> 305 <v-layout row wrap>
306 <v-flex xs3 class="mt-3"> 306 <v-flex xs3 class="mt-3">
307 <vue-country-code @onSelect="editStudentMobileCode" class="black--text"></vue-country-code> 307 <vue-country-code @onSelect="editStudentMobileCode" class="black--text"></vue-country-code>
308 </v-flex> 308 </v-flex>
309 <v-flex xs9> 309 <v-flex xs9>
310 <v-text-field 310 <v-text-field
311 v-model="editedItem.mobile" 311 v-model="editedItem.mobile"
312 placeholder="fill your MobileNo" 312 placeholder="fill your MobileNo"
313 name="mobileNo" 313 name="mobileNo"
314 type="number" 314 type="number"
315 required 315 required
316 ></v-text-field> 316 ></v-text-field>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 <v-layout wrap> 323 <v-layout wrap>
324 <v-flex xs12 sm4> 324 <v-flex xs12 sm4>
325 <v-layout> 325 <v-layout>
326 <v-flex xs4 class="pt-4 subheading"> 326 <v-flex xs4 class="pt-4 subheading">
327 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 327 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
328 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 328 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
329 </v-flex> 329 </v-flex>
330 <v-flex xs8 class="ml-3"> 330 <v-flex xs8 class="ml-3">
331 <v-autocomplete 331 <v-autocomplete
332 v-model="editedItem.country" 332 v-model="editedItem.country"
333 :items="countries" 333 :items="countries"
334 placeholder="Select Country Name" 334 placeholder="Select Country Name"
335 required 335 required
336 ></v-autocomplete> 336 ></v-autocomplete>
337 </v-flex> 337 </v-flex>
338 </v-layout> 338 </v-layout>
339 </v-flex> 339 </v-flex>
340 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 340 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
341 <v-layout> 341 <v-layout>
342 <v-flex xs4 class="pt-4 subheading"> 342 <v-flex xs4 class="pt-4 subheading">
343 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 343 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
344 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 344 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
345 </v-flex> 345 </v-flex>
346 <v-flex xs8 class="ml-3"> 346 <v-flex xs8 class="ml-3">
347 <v-text-field 347 <v-text-field
348 v-model="editedItem.rollNo" 348 v-model="editedItem.rollNo"
349 placeholder="fill roll number" 349 placeholder="fill roll number"
350 required 350 required
351 ></v-text-field> 351 ></v-text-field>
352 </v-flex> 352 </v-flex>
353 </v-layout> 353 </v-layout>
354 </v-flex> 354 </v-flex>
355 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only"> 355 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
356 <v-layout> 356 <v-layout>
357 <v-flex xs4 sm4 class="pt-4 subheading"> 357 <v-flex xs4 sm4 class="pt-4 subheading">
358 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label> 358 <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
359 <label 359 <label
360 class="right hidden-lg-only hidden-md-only hidden-xl-only" 360 class="right hidden-lg-only hidden-md-only hidden-xl-only"
361 >Permanent Address:</label> 361 >Permanent Address:</label>
362 </v-flex> 362 </v-flex>
363 <v-flex xs12 sm8 class="ml-3"> 363 <v-flex xs12 sm8 class="ml-3">
364 <v-text-field 364 <v-text-field
365 v-model="editedItem.permanentAddress" 365 v-model="editedItem.permanentAddress"
366 placeholder="fill Your Permanent Address" 366 placeholder="fill Your Permanent Address"
367 required 367 required
368 ></v-text-field> 368 ></v-text-field>
369 </v-flex> 369 </v-flex>
370 </v-layout> 370 </v-layout>
371 </v-flex> 371 </v-flex>
372 </v-layout> 372 </v-layout>
373 <v-layout class="hidden-xs-only hidden-sm-only"> 373 <v-layout class="hidden-xs-only hidden-sm-only">
374 <v-flex xs12 sm4> 374 <v-flex xs12 sm4>
375 <v-layout> 375 <v-layout>
376 <v-flex xs4 class="pt-4 subheading"> 376 <v-flex xs4 class="pt-4 subheading">
377 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label> 377 <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
378 <label 378 <label
379 class="right hidden-lg-only hidden-md-only hidden-xl-only" 379 class="right hidden-lg-only hidden-md-only hidden-xl-only"
380 >Present Address:</label> 380 >Present Address:</label>
381 </v-flex> 381 </v-flex>
382 <v-flex xs8 class="ml-3"> 382 <v-flex xs8 class="ml-3">
383 <v-text-field 383 <v-text-field
384 v-model="editedItem.presentAddress" 384 v-model="editedItem.presentAddress"
385 placeholder="Select Country Name" 385 placeholder="Select Country Name"
386 required 386 required
387 ></v-text-field> 387 ></v-text-field>
388 </v-flex> 388 </v-flex>
389 </v-layout> 389 </v-layout>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 392 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
393 <v-flex xs12 sm12> 393 <v-flex xs12 sm12>
394 <v-layout> 394 <v-layout>
395 <v-flex xs4 class="pt-4 subheading"> 395 <v-flex xs4 class="pt-4 subheading">
396 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 396 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
397 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label> 397 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
398 </v-flex> 398 </v-flex>
399 <v-flex xs8 class="ml-3"> 399 <v-flex xs8 class="ml-3">
400 <v-text-field 400 <v-text-field
401 v-model="editedItem.rollNo" 401 v-model="editedItem.rollNo"
402 placeholder="fill roll number" 402 placeholder="fill roll number"
403 required 403 required
404 ></v-text-field> 404 ></v-text-field>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 409 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
410 <v-flex xs12 sm12> 410 <v-flex xs12 sm12>
411 <v-layout> 411 <v-layout>
412 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 412 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
413 <label class>Present Address :</label> 413 <label class>Present Address :</label>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs12 sm12> 417 <v-flex xs12 sm12>
418 <v-textarea 418 <v-textarea
419 v-model="editedItem.presentAddress" 419 v-model="editedItem.presentAddress"
420 placeholder="fill Your present Address" 420 placeholder="fill Your present Address"
421 required 421 required
422 ></v-textarea> 422 ></v-textarea>
423 </v-flex> 423 </v-flex>
424 </v-layout> 424 </v-layout>
425 </v-flex> 425 </v-flex>
426 <v-flex xs12 sm12> 426 <v-flex xs12 sm12>
427 <v-layout> 427 <v-layout>
428 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 428 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
429 <label>Permanent addr:</label> 429 <label>Permanent addr:</label>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs12 sm12> 433 <v-flex xs12 sm12>
434 <v-textarea 434 <v-textarea
435 name="input-4-3" 435 name="input-4-3"
436 v-model="editedItem.permanentAddress" 436 v-model="editedItem.permanentAddress"
437 placeholder="fill Your Permanent Address" 437 placeholder="fill Your Permanent Address"
438 required 438 required
439 ></v-textarea> 439 ></v-textarea>
440 </v-flex> 440 </v-flex>
441 </v-layout> 441 </v-layout>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 <v-layout> 444 <v-layout>
445 <v-flex xs12 sm12> 445 <v-flex xs12 sm12>
446 <v-layout class="right"> 446 <v-layout class="right">
447 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn> 447 <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
448 </v-layout> 448 </v-layout>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 </v-container> 451 </v-container>
452 </v-form> 452 </v-form>
453 </v-card-text> 453 </v-card-text>
454 </v-card> 454 </v-card>
455 </v-dialog> 455 </v-dialog>
456 456
457 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 457 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
458 458
459 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent> 459 <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable persistent>
460 <v-card flat class="card-style pa-3" dark> 460 <v-card flat class="card-style pa-3" dark>
461 <v-layout> 461 <v-layout>
462 <v-flex xs12> 462 <v-flex xs12>
463 <label class="title text-xs-center">View Student Details</label> 463 <label class="title text-xs-center">View Student Details</label>
464 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 464 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
465 </v-flex> 465 </v-flex>
466 </v-layout> 466 </v-layout>
467 <v-card-text> 467 <v-card-text>
468 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 468 <v-flex align-center justify-center layout text-xs-center class="mt-3">
469 <v-avatar size="100px"> 469 <v-avatar size="100px">
470 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 470 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
471 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 471 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
472 </v-avatar> 472 </v-avatar>
473 </v-flex> 473 </v-flex>
474 <v-container grid-list-md> 474 <v-container grid-list-md>
475 <v-layout wrap> 475 <v-layout wrap>
476 <v-flex xs12 sm5> 476 <v-flex xs12 sm5>
477 <v-layout> 477 <v-layout>
478 <v-flex xs6 sm6> 478 <v-flex xs6 sm6>
479 <h5 class="right my-1"> 479 <h5 class="right my-1">
480 <b>Full Name:</b> 480 <b>Full Name:</b>
481 </h5> 481 </h5>
482 </v-flex> 482 </v-flex>
483 <v-flex sm6 xs6> 483 <v-flex sm6 xs6>
484 <h5 class="my-1 left">{{ editedItem.name }}</h5> 484 <h5 class="my-1 left">{{ editedItem.name }}</h5>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-flex xs12 sm7> 488 <v-flex xs12 sm7>
489 <v-layout> 489 <v-layout>
490 <v-flex xs6 sm4> 490 <v-flex xs6 sm4>
491 <h5 class="right my-1"> 491 <h5 class="right my-1">
492 <b>Email:</b> 492 <b>Email:</b>
493 </h5> 493 </h5>
494 </v-flex> 494 </v-flex>
495 <v-flex sm8 xs6> 495 <v-flex sm8 xs6>
496 <h5 class="my-1 left">{{ editedItem.email }}</h5> 496 <h5 class="my-1 left">{{ editedItem.email }}</h5>
497 </v-flex> 497 </v-flex>
498 </v-layout> 498 </v-layout>
499 </v-flex> 499 </v-flex>
500 </v-layout> 500 </v-layout>
501 <v-layout wrap> 501 <v-layout wrap>
502 <v-flex xs12 sm5> 502 <v-flex xs12 sm5>
503 <v-layout> 503 <v-layout>
504 <v-flex xs6 sm6> 504 <v-flex xs6 sm6>
505 <b> 505 <b>
506 <h5 class="right my-1"> 506 <h5 class="right my-1">
507 <b>Gender:</b> 507 <b>Gender:</b>
508 </h5> 508 </h5>
509 </b> 509 </b>
510 </v-flex> 510 </v-flex>
511 <v-flex sm6 xs6> 511 <v-flex sm6 xs6>
512 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 512 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
513 </v-flex> 513 </v-flex>
514 </v-layout> 514 </v-layout>
515 </v-flex> 515 </v-flex>
516 <v-flex xs12 sm7> 516 <v-flex xs12 sm7>
517 <v-layout> 517 <v-layout>
518 <v-flex xs6 sm4> 518 <v-flex xs6 sm4>
519 <b> 519 <b>
520 <h5 class="right my-1"> 520 <h5 class="right my-1">
521 <b>D.O.B:</b> 521 <b>D.O.B:</b>
522 </h5> 522 </h5>
523 </b> 523 </b>
524 </v-flex> 524 </v-flex>
525 <v-flex sm8 xs6> 525 <v-flex sm8 xs6>
526 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 526 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
527 </v-flex> 527 </v-flex>
528 </v-layout> 528 </v-layout>
529 </v-flex> 529 </v-flex>
530 </v-layout> 530 </v-layout>
531 <v-layout wrap> 531 <v-layout wrap>
532 <v-flex xs12 sm5> 532 <v-flex xs12 sm5>
533 <v-layout> 533 <v-layout>
534 <v-flex xs6 sm6> 534 <v-flex xs6 sm6>
535 <b> 535 <b>
536 <h5 class="right my-1"> 536 <h5 class="right my-1">
537 <b>BloodGroup:</b> 537 <b>BloodGroup:</b>
538 </h5> 538 </h5>
539 </b> 539 </b>
540 </v-flex> 540 </v-flex>
541 <v-flex sm6 xs6> 541 <v-flex sm6 xs6>
542 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 542 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
543 </v-flex> 543 </v-flex>
544 </v-layout> 544 </v-layout>
545 </v-flex> 545 </v-flex>
546 <v-flex xs12 sm7> 546 <v-flex xs12 sm7>
547 <v-layout> 547 <v-layout>
548 <v-flex xs6 sm4> 548 <v-flex xs6 sm4>
549 <b> 549 <b>
550 <h5 class="right my-1"> 550 <h5 class="right my-1">
551 <b>Roll No. :</b> 551 <b>Roll No. :</b>
552 </h5> 552 </h5>
553 </b> 553 </b>
554 </v-flex> 554 </v-flex>
555 <v-flex sm8 xs6> 555 <v-flex sm8 xs6>
556 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 556 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
557 </v-flex> 557 </v-flex>
558 </v-layout> 558 </v-layout>
559 </v-flex> 559 </v-flex>
560 </v-layout> 560 </v-layout>
561 <v-layout wrap> 561 <v-layout wrap>
562 <v-flex xs12 sm5> 562 <v-flex xs12 sm5>
563 <v-layout> 563 <v-layout>
564 <v-flex xs6 sm6> 564 <v-flex xs6 sm6>
565 <b> 565 <b>
566 <h5 class="right my-1"> 566 <h5 class="right my-1">
567 <b>Height:</b> 567 <b>Height:</b>
568 </h5> 568 </h5>
569 </b> 569 </b>
570 </v-flex> 570 </v-flex>
571 <v-flex sm6 xs6> 571 <v-flex sm6 xs6>
572 <h5 class="my-1 left">{{ editedItem.height }}</h5> 572 <h5 class="my-1 left">{{ editedItem.height }}</h5>
573 </v-flex> 573 </v-flex>
574 </v-layout> 574 </v-layout>
575 </v-flex> 575 </v-flex>
576 <v-flex xs12 sm7> 576 <v-flex xs12 sm7>
577 <v-layout> 577 <v-layout>
578 <v-flex xs6 sm4> 578 <v-flex xs6 sm4>
579 <b> 579 <b>
580 <h5 class="right my-1"> 580 <h5 class="right my-1">
581 <b>Weight:</b> 581 <b>Weight:</b>
582 </h5> 582 </h5>
583 </b> 583 </b>
584 </v-flex> 584 </v-flex>
585 <v-flex sm8 xs6> 585 <v-flex sm8 xs6>
586 <h5 class="my-1">{{ editedItem.weight }}</h5> 586 <h5 class="my-1">{{ editedItem.weight }}</h5>
587 </v-flex> 587 </v-flex>
588 </v-layout> 588 </v-layout>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 <v-layout wrap> 591 <v-layout wrap>
592 <v-flex xs12 sm5> 592 <v-flex xs12 sm5>
593 <v-layout> 593 <v-layout>
594 <v-flex xs6 sm6> 594 <v-flex xs6 sm6>
595 <b> 595 <b>
596 <h5 class="right my-1"> 596 <h5 class="right my-1">
597 <b>City:</b> 597 <b>City:</b>
598 </h5> 598 </h5>
599 </b> 599 </b>
600 </v-flex> 600 </v-flex>
601 <v-flex sm6 xs6> 601 <v-flex sm6 xs6>
602 <h5 class="my-1 left">{{ editedItem.city }}</h5> 602 <h5 class="my-1 left">{{ editedItem.city }}</h5>
603 </v-flex> 603 </v-flex>
604 </v-layout> 604 </v-layout>
605 </v-flex> 605 </v-flex>
606 <v-flex xs12 sm7> 606 <v-flex xs12 sm7>
607 <v-layout> 607 <v-layout>
608 <v-flex xs6 sm4> 608 <v-flex xs6 sm4>
609 <b> 609 <b>
610 <h5 class="right my-1"> 610 <h5 class="right my-1">
611 <b>State:</b> 611 <b>State:</b>
612 </h5> 612 </h5>
613 </b> 613 </b>
614 </v-flex> 614 </v-flex>
615 <v-flex sm8 xs6> 615 <v-flex sm8 xs6>
616 <h5 class="my-1">{{ editedItem.state }}</h5> 616 <h5 class="my-1">{{ editedItem.state }}</h5>
617 </v-flex> 617 </v-flex>
618 </v-layout> 618 </v-layout>
619 </v-flex> 619 </v-flex>
620 </v-layout> 620 </v-layout>
621 <v-layout wrap> 621 <v-layout wrap>
622 <v-flex xs12 sm5> 622 <v-flex xs12 sm5>
623 <v-layout> 623 <v-layout>
624 <v-flex xs6 sm6> 624 <v-flex xs6 sm6>
625 <b> 625 <b>
626 <h5 class="right my-1"> 626 <h5 class="right my-1">
627 <b>Pincode:</b> 627 <b>Pincode:</b>
628 </h5> 628 </h5>
629 </b> 629 </b>
630 </v-flex> 630 </v-flex>
631 <v-flex sm6 xs6> 631 <v-flex sm6 xs6>
632 <h5 class="my-1">{{ editedItem.pincode }}</h5> 632 <h5 class="my-1">{{ editedItem.pincode }}</h5>
633 </v-flex> 633 </v-flex>
634 </v-layout> 634 </v-layout>
635 </v-flex> 635 </v-flex>
636 <v-flex xs12 sm7> 636 <v-flex xs12 sm7>
637 <v-layout> 637 <v-layout>
638 <v-flex xs6 sm4> 638 <v-flex xs6 sm4>
639 <b> 639 <b>
640 <h5 class="right my-1"> 640 <h5 class="right my-1">
641 <b>Country:</b> 641 <b>Country:</b>
642 </h5> 642 </h5>
643 </b> 643 </b>
644 </v-flex> 644 </v-flex>
645 <v-flex sm7 xs6> 645 <v-flex sm7 xs6>
646 <h5 class="my-1">{{ editedItem.country }}</h5> 646 <h5 class="my-1">{{ editedItem.country }}</h5>
647 </v-flex> 647 </v-flex>
648 </v-layout> 648 </v-layout>
649 </v-flex> 649 </v-flex>
650 </v-layout> 650 </v-layout>
651 <v-layout wrap> 651 <v-layout wrap>
652 <v-flex xs12 sm5> 652 <v-flex xs12 sm5>
653 <v-layout> 653 <v-layout>
654 <v-flex sm6 xs6> 654 <v-flex sm6 xs6>
655 <b> 655 <b>
656 <h5 class="right my-1"> 656 <h5 class="right my-1">
657 <b>Mobile No:</b> 657 <b>Mobile No:</b>
658 </h5> 658 </h5>
659 </b> 659 </b>
660 </v-flex> 660 </v-flex>
661 <v-flex sm6 xs6> 661 <v-flex sm6 xs6>
662 <h5 class="my-1">{{ editedItem.mobile }}</h5> 662 <h5 class="my-1">{{ editedItem.mobile }}</h5>
663 </v-flex> 663 </v-flex>
664 </v-layout> 664 </v-layout>
665 </v-flex> 665 </v-flex>
666 <v-flex xs12 sm7> 666 <v-flex xs12 sm7>
667 <v-layout> 667 <v-layout>
668 <v-flex xs6 sm4> 668 <v-flex xs6 sm4>
669 <b> 669 <b>
670 <h5 class="right my-1"> 670 <h5 class="right my-1">
671 <b>FahterName:</b> 671 <b>FahterName:</b>
672 </h5> 672 </h5>
673 </b> 673 </b>
674 </v-flex> 674 </v-flex>
675 <v-flex sm8 xs6> 675 <v-flex sm8 xs6>
676 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 676 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
677 </v-flex> 677 </v-flex>
678 </v-layout> 678 </v-layout>
679 </v-flex> 679 </v-flex>
680 </v-layout> 680 </v-layout>
681 <v-layout wrap> 681 <v-layout wrap>
682 <v-flex xs12 sm5> 682 <v-flex xs12 sm5>
683 <v-layout> 683 <v-layout>
684 <v-flex xs6 sm6> 684 <v-flex xs6 sm6>
685 <b> 685 <b>
686 <h5 class="right my-1"> 686 <h5 class="right my-1">
687 <b>MotherName:</b> 687 <b>MotherName:</b>
688 </h5> 688 </h5>
689 </b> 689 </b>
690 </v-flex> 690 </v-flex>
691 <v-flex sm6 xs6> 691 <v-flex sm6 xs6>
692 <h5 class="my-1">{{ editedItem.motherName }}</h5> 692 <h5 class="my-1">{{ editedItem.motherName }}</h5>
693 </v-flex> 693 </v-flex>
694 </v-layout> 694 </v-layout>
695 </v-flex> 695 </v-flex>
696 <v-flex xs12 sm7> 696 <v-flex xs12 sm7>
697 <v-layout> 697 <v-layout>
698 <v-flex xs6 sm4> 698 <v-flex xs6 sm4>
699 <b> 699 <b>
700 <h5 class="right my-1"> 700 <h5 class="right my-1">
701 <b>FatherCellNo:</b> 701 <b>FatherCellNo:</b>
702 </h5> 702 </h5>
703 </b> 703 </b>
704 </v-flex> 704 </v-flex>
705 <v-flex sm6 xs6> 705 <v-flex sm6 xs6>
706 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 706 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
707 </v-flex> 707 </v-flex>
708 </v-layout> 708 </v-layout>
709 </v-flex> 709 </v-flex>
710 </v-layout> 710 </v-layout>
711 <v-layout wrap> 711 <v-layout wrap>
712 <v-flex xs12 sm5> 712 <v-flex xs12 sm5>
713 <v-layout> 713 <v-layout>
714 <v-flex xs6 sm6> 714 <v-flex xs6 sm6>
715 <b> 715 <b>
716 <h5 class="right my-1"> 716 <h5 class="right my-1">
717 <b>MotherCellNo:</b> 717 <b>MotherCellNo:</b>
718 </h5> 718 </h5>
719 </b> 719 </b>
720 </v-flex> 720 </v-flex>
721 <v-flex sm6 xs6> 721 <v-flex sm6 xs6>
722 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 722 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
723 </v-flex> 723 </v-flex>
724 </v-layout> 724 </v-layout>
725 </v-flex> 725 </v-flex>
726 <v-flex xs12 sm7> 726 <v-flex xs12 sm7>
727 <v-layout> 727 <v-layout>
728 <v-flex xs6 sm4> 728 <v-flex xs6 sm4>
729 <b> 729 <b>
730 <h5 class="my-1 right"> 730 <h5 class="my-1 right">
731 <b>AcademicYear:</b> 731 <b>AcademicYear:</b>
732 </h5> 732 </h5>
733 </b> 733 </b>
734 </v-flex> 734 </v-flex>
735 <v-flex sm5 xs8> 735 <v-flex sm5 xs8>
736 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 736 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
737 </v-flex> 737 </v-flex>
738 </v-layout> 738 </v-layout>
739 </v-flex> 739 </v-flex>
740 </v-layout> 740 </v-layout>
741 <v-layout wrap> 741 <v-layout wrap>
742 <v-flex xs12 sm5> 742 <v-flex xs12 sm5>
743 <v-layout> 743 <v-layout>
744 <v-flex xs6 sm6> 744 <v-flex xs6 sm6>
745 <b> 745 <b>
746 <h5 class="my-1 right"> 746 <h5 class="my-1 right">
747 <b>MedicalNotes:</b> 747 <b>MedicalNotes:</b>
748 </h5> 748 </h5>
749 </b> 749 </b>
750 </v-flex> 750 </v-flex>
751 <v-flex sm5 xs6> 751 <v-flex sm5 xs6>
752 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 752 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
753 </v-flex> 753 </v-flex>
754 </v-layout> 754 </v-layout>
755 </v-flex> 755 </v-flex>
756 <v-flex xs12 sm7 class="hidden-xs-only"> 756 <v-flex xs12 sm7 class="hidden-xs-only">
757 <v-layout wrap> 757 <v-layout wrap>
758 <v-flex sm4> 758 <v-flex sm4>
759 <b> 759 <b>
760 <h5 class="my-1 right"> 760 <h5 class="my-1 right">
761 <b>present Address:</b> 761 <b>present Address:</b>
762 </h5> 762 </h5>
763 </b> 763 </b>
764 </v-flex> 764 </v-flex>
765 <v-flex sm8> 765 <v-flex sm8>
766 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 766 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
767 </v-flex> 767 </v-flex>
768 </v-layout> 768 </v-layout>
769 </v-flex> 769 </v-flex>
770 <v-flex sm6 class="hidden-xs-only"> 770 <v-flex sm6 class="hidden-xs-only">
771 <v-layout wrap> 771 <v-layout wrap>
772 <v-flex sm5> 772 <v-flex sm5>
773 <b> 773 <b>
774 <h5 class="my-1 right"> 774 <h5 class="my-1 right">
775 <b>Permanent Address:</b> 775 <b>Permanent Address:</b>
776 </h5> 776 </h5>
777 </b> 777 </b>
778 </v-flex> 778 </v-flex>
779 <v-flex sm7> 779 <v-flex sm7>
780 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 780 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
781 </v-flex> 781 </v-flex>
782 </v-layout> 782 </v-layout>
783 </v-flex> 783 </v-flex>
784 </v-layout> 784 </v-layout>
785 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"> 785 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
786 <v-flex xs12 sm5> 786 <v-flex xs12 sm5>
787 <v-layout wrap> 787 <v-layout wrap>
788 <v-flex xs12 sm6> 788 <v-flex xs12 sm6>
789 <b> 789 <b>
790 <h5 class="my-1"> 790 <h5 class="my-1">
791 <b>present Address:-</b> 791 <b>present Address:-</b>
792 </h5> 792 </h5>
793 </b> 793 </b>
794 </v-flex> 794 </v-flex>
795 <v-flex sm5 xs12> 795 <v-flex sm5 xs12>
796 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 796 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
797 </v-flex> 797 </v-flex>
798 </v-layout> 798 </v-layout>
799 </v-flex> 799 </v-flex>
800 <v-flex xs12 sm6> 800 <v-flex xs12 sm6>
801 <v-layout wrap> 801 <v-layout wrap>
802 <v-flex xs12 sm6> 802 <v-flex xs12 sm6>
803 <b> 803 <b>
804 <h5 class="my-1"> 804 <h5 class="my-1">
805 <b>Permanent Address:-</b> 805 <b>Permanent Address:-</b>
806 </h5> 806 </h5>
807 </b> 807 </b>
808 </v-flex> 808 </v-flex>
809 <v-flex sm6 xs12> 809 <v-flex sm6 xs12>
810 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 810 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 </v-layout> 814 </v-layout>
815 </v-container> 815 </v-container>
816 </v-card-text> 816 </v-card-text>
817 </v-card> 817 </v-card>
818 </v-dialog> 818 </v-dialog>
819 819
820 <!-- ****** STUDENTS TABLE ****** --> 820 <!-- ****** STUDENTS TABLE ****** -->
821 <v-toolbar color="transparent" flat> 821 <v-toolbar color="transparent" flat>
822 <v-btn 822 <v-btn
823 fab 823 fab
824 dark 824 dark
825 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 825 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
826 small 826 small
827 @click="addStudentDialog = true" 827 @click="addStudentDialog = true"
828 > 828 >
829 <v-icon dark>add</v-icon> 829 <v-icon dark>add</v-icon>
830 </v-btn> 830 </v-btn>
831 <v-btn 831 <v-btn
832 v-if="role != 'TEACHER' " 832 v-if="role != 'TEACHER' "
833 round 833 round
834 class="open-dialog-button hidden-sm-only hidden-xs-only" 834 class="open-dialog-button hidden-sm-only hidden-xs-only"
835 dark 835 dark
836 @click="addStudentDialog = true" 836 @click="addStudentDialog = true"
837 > 837 >
838 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student 838 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student
839 </v-btn> 839 </v-btn>
840 <v-card-actions class="hidden-xs-only hidden-sm-only"> 840 <v-card-actions class="hidden-xs-only hidden-sm-only">
841 <v-flex md13 lg12> 841 <v-flex md13 lg12>
842 <v-layout> 842 <v-layout>
843 <v-flex lg3 md4> 843 <v-flex lg3 md4>
844 <v-select 844 <v-select
845 :items="addclass" 845 :items="addclass"
846 label="Select Class" 846 label="Select Class"
847 v-model="selectStudents.select" 847 v-model="selectStudents.select"
848 item-text="classNum" 848 item-text="classNum"
849 item-value="_id" 849 item-value="_id"
850 name="Select Class" 850 name="Select Class"
851 :rules="classRules" 851 :rules="classRules"
852 @change="getSections(selectStudents.select)" 852 @change="getSections(selectStudents.select)"
853 required 853 required
854 class="ml-2" 854 class="ml-2"
855 ></v-select> 855 ></v-select>
856 </v-flex> 856 </v-flex>
857 <v-flex lg3 md4 class="ml-2"> 857 <v-flex lg3 md4 class="ml-2">
858 <v-layout> 858 <v-layout>
859 <v-select 859 <v-select
860 :items="addSection" 860 :items="addSection"
861 label="Select Section" 861 label="Select Section"
862 v-model="selectStudents.selectSection" 862 v-model="selectStudents.selectSection"
863 item-text="name" 863 item-text="name"
864 item-value="_id" 864 item-value="_id"
865 name="Select Section" 865 name="Select Section"
866 required 866 required
867 ></v-select> 867 ></v-select>
868 </v-layout> 868 </v-layout>
869 </v-flex> 869 </v-flex>
870 </v-layout> 870 </v-layout>
871 </v-flex> 871 </v-flex>
872 </v-card-actions> 872 </v-card-actions>
873 <v-spacer></v-spacer> 873 <v-spacer></v-spacer>
874 <v-btn 874 <v-btn
875 @click="findStudents()" 875 @click="findStudents()"
876 round 876 round
877 dark 877 dark
878 :loading="loading" 878 :loading="loading"
879 class="open-dialog-button hidden-xs-only hidden-sm-only" 879 class="open-dialog-button hidden-xs-only hidden-sm-only"
880 >Find</v-btn> 880 >Find</v-btn>
881 <v-card-title class="body-1" v-show="show"> 881 <v-card-title class="body-1" v-show="show">
882 <v-btn icon large flat @click="displaySearch"> 882 <v-btn icon large flat @click="displaySearch">
883 <v-avatar size="27"> 883 <v-avatar size="27">
884 <img src="/static/icon/search.png" alt="icon" /> 884 <img src="/static/icon/search.png" alt="icon" />
885 </v-avatar> 885 </v-avatar>
886 </v-btn> 886 </v-btn>
887 </v-card-title> 887 </v-card-title>
888 <v-flex xs8 sm7 lg2 md3 v-if="showSearch"> 888 <v-flex xs8 sm7 lg2 md3 v-if="showSearch">
889 <v-layout> 889 <v-layout>
890 <v-text-field 890 <v-text-field
891 autofocus 891 autofocus
892 v-model="search" 892 v-model="search"
893 label="Search" 893 label="Search"
894 prepend-inner-icon="search" 894 prepend-inner-icon="search"
895 color="primary" 895 color="primary"
896 ></v-text-field> 896 ></v-text-field>
897 <v-icon @click="closeSearch" color="error">close</v-icon> 897 <v-icon @click="closeSearch" color="error">close</v-icon>
898 </v-layout> 898 </v-layout>
899 </v-flex> 899 </v-flex>
900 </v-toolbar> 900 </v-toolbar>
901 <v-card flat class="elevation-0 transparent"> 901 <v-card flat class="elevation-0 transparent">
902 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only"> 902 <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
903 <v-layout> 903 <v-layout>
904 <v-flex xs4> 904 <v-flex xs4>
905 <label class="right mt-4">Select Class:</label> 905 <label class="right mt-4">Select Class:</label>
906 </v-flex> 906 </v-flex>
907 <v-flex xs8> 907 <v-flex xs8>
908 <v-select 908 <v-select
909 :items="addclass" 909 :items="addclass"
910 label="Select Class" 910 label="Select Class"
911 v-model="selectStudents.select" 911 v-model="selectStudents.select"
912 item-text="classNum" 912 item-text="classNum"
913 item-value="_id" 913 item-value="_id"
914 name="Select Class" 914 name="Select Class"
915 :rules="classRules" 915 :rules="classRules"
916 @change="getSections(selectStudents.select)" 916 @change="getSections(selectStudents.select)"
917 class="px-2" 917 class="px-2"
918 ></v-select> 918 ></v-select>
919 </v-flex> 919 </v-flex>
920 </v-layout> 920 </v-layout>
921 <v-layout> 921 <v-layout>
922 <v-flex xs4> 922 <v-flex xs4>
923 <label class="right mt-4">Select Section:</label> 923 <label class="right mt-4">Select Section:</label>
924 </v-flex> 924 </v-flex>
925 <v-flex xs8> 925 <v-flex xs8>
926 <v-select 926 <v-select
927 :items="addSection" 927 :items="addSection"
928 label="Select Section" 928 label="Select Section"
929 v-model="selectStudents.selectSection" 929 v-model="selectStudents.selectSection"
930 item-text="name" 930 item-text="name"
931 item-value="_id" 931 item-value="_id"
932 name="Select Section" 932 name="Select Section"
933 :rules="sectionRules" 933 :rules="sectionRules"
934 class="px-2" 934 class="px-2"
935 required 935 required
936 ></v-select> 936 ></v-select>
937 </v-flex> 937 </v-flex>
938 </v-layout> 938 </v-layout>
939 <v-layout> 939 <v-layout>
940 <v-flex xs5 class="mx-auto mb-2"> 940 <v-flex xs5 class="mx-auto mb-2">
941 <v-btn 941 <v-btn
942 @click="findStudents()" 942 @click="findStudents()"
943 block 943 block
944 round 944 round
945 dark 945 dark
946 :loading="loading" 946 :loading="loading"
947 class="add-button" 947 class="add-button"
948 >Find</v-btn> 948 >Find</v-btn>
949 </v-flex> 949 </v-flex>
950 </v-layout> 950 </v-layout>
951 </v-flex> 951 </v-flex>
952 </v-card> 952 </v-card>
953 <v-data-table 953 <v-data-table
954 :headers="headers" 954 :headers="headers"
955 :items="studentsData" 955 :items="studentsData"
956 :pagination.sync="pagination" 956 :pagination.sync="pagination"
957 :search="search" 957 :search="search"
958 > 958 >
959 <template slot="items" slot-scope="props"> 959 <template slot="items" slot-scope="props">
960 <tr class="tr"> 960 <tr class="tr">
961 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td> 961 <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
962 <td class="text-xs-center td td-row"> 962 <td class="text-xs-center td td-row">
963 <v-avatar size="40"> 963 <v-avatar size="40">
964 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 964 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
965 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 965 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
966 </v-avatar> 966 </v-avatar>
967 </td> 967 </td>
968 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 968 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
969 <td class="text-xs-center td td-row">{{ props.item.gender }}</td> 969 <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
970 <td 970 <td
971 class="text-xs-center td td-row" 971 class="text-xs-center td td-row"
972 >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td> 972 >{{ props.item.parentId ? props.item.parentId.fatherName: '-' }}</td>
973 <td 973 <td
974 class="text-xs-center td td-row" 974 class="text-xs-center td td-row"
975 >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td> 975 >{{ props.item.parentId ? props.item.parentId.motherName: '-' }}</td>
976 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td> 976 <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
977 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> --> 977 <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
978 <td class="text-xs-center td td-row"> 978 <td class="text-xs-center td td-row">
979 <v-switch 979 <v-switch
980 class="pl-3" 980 class="pl-3"
981 :disabled="role === 'TEACHER'" 981 :disabled="role === 'TEACHER'"
982 v-model="props.item.status" 982 v-model="props.item.status"
983 @change="suspendStudentStatus(props.item.status,props.item._id)" 983 @change="suspendStudentStatus(props.item.status,props.item._id)"
984 ></v-switch> 984 ></v-switch>
985 </td> 985 </td>
986 <td class="text-xs-center td td-row"> 986 <td class="text-xs-center td td-row">
987 <span> 987 <span>
988 <v-tooltip top> 988 <v-tooltip top>
989 <img 989 <img
990 slot="activator" 990 slot="activator"
991 style="cursor:pointer; width:25px; height:25px; " 991 style="cursor:pointer; width:25px; height:25px; "
992 class="mr-3" 992 class="mr-3"
993 @click="profile(props.item)" 993 @click="profile(props.item)"
994 src="/static/icon/view.png" 994 src="/static/icon/view.png"
995 /> 995 />
996 <span>View</span> 996 <span>View</span>
997 </v-tooltip> 997 </v-tooltip>
998 <v-tooltip top v-if="role != 'TEACHER' "> 998 <v-tooltip top v-if="role != 'TEACHER' ">
999 <img 999 <img
1000 slot="activator" 1000 slot="activator"
1001 style="cursor:pointer; width:20px; height:18px; " 1001 style="cursor:pointer; width:20px; height:18px; "
1002 class="mr-3" 1002 class="mr-3"
1003 @click="editItem(props.item)" 1003 @click="editItem(props.item)"
1004 src="/static/icon/edit.png" 1004 src="/static/icon/edit.png"
1005 /> 1005 />
1006 <span>Edit</span> 1006 <span>Edit</span>
1007 </v-tooltip> 1007 </v-tooltip>
1008 <v-tooltip top v-if="role != 'TEACHER' "> 1008 <v-tooltip top v-if="role != 'TEACHER' ">
1009 <img 1009 <img
1010 slot="activator" 1010 slot="activator"
1011 style="cursor:pointer; width:20px; height:20px; " 1011 style="cursor:pointer; width:20px; height:20px; "
1012 class="mr-3" 1012 class="mr-3"
1013 @click="deleteItem(props.item)" 1013 @click="deleteItem(props.item)"
1014 src="/static/icon/delete.png" 1014 src="/static/icon/delete.png"
1015 /> 1015 />
1016 <span>Delete</span> 1016 <span>Delete</span>
1017 </v-tooltip> 1017 </v-tooltip>
1018 </span> 1018 </span>
1019 </td> 1019 </td>
1020 </tr> 1020 </tr>
1021 </template> 1021 </template>
1022 <v-alert 1022 <v-alert
1023 slot="no-results" 1023 slot="no-results"
1024 :value="true" 1024 :value="true"
1025 color="error" 1025 color="error"
1026 icon="warning" 1026 icon="warning"
1027 >Your search for "{{ search }}" found no results.</v-alert> 1027 >Your search for "{{ search }}" found no results.</v-alert>
1028 </v-data-table> 1028 </v-data-table>
1029 <!-- DIALOG -- ADD STUDENTS DETAILS --> 1029 <!-- DIALOG -- ADD STUDENTS DETAILS -->
1030 <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent> 1030 <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog" persistent>
1031 <v-card flat class="card-style pa-2" dark> 1031 <v-card flat class="card-style pa-2" dark>
1032 <v-layout> 1032 <v-layout>
1033 <v-flex xs12> 1033 <v-flex xs12>
1034 <label class="title text-xs-center">Add Student</label> 1034 <label class="title text-xs-center">Add Student</label>
1035 <v-icon 1035 <v-icon
1036 size="24" 1036 size="24"
1037 class="right" 1037 class="right"
1038 @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false" 1038 @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false"
1039 >cancel</v-icon> 1039 >cancel</v-icon>
1040 </v-flex> 1040 </v-flex>
1041 </v-layout> 1041 </v-layout>
1042 <v-container fluid> 1042 <v-container fluid>
1043 <v-layout align-center> 1043 <v-layout align-center>
1044 <v-flex xs12> 1044 <v-flex xs12>
1045 <v-stepper v-model="e2" flat class="card-style elevation-0" dark> 1045 <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
1046 <v-stepper-header> 1046 <v-stepper-header>
1047 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step> 1047 <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
1048 <v-divider></v-divider> 1048 <v-divider></v-divider>
1049 <v-stepper-step step="2">Fill Student Details</v-stepper-step> 1049 <v-stepper-step step="2">Fill Student Details</v-stepper-step>
1050 </v-stepper-header> 1050 </v-stepper-header>
1051 <v-stepper-items> 1051 <v-stepper-items>
1052 <v-stepper-content step="1"> 1052 <v-stepper-content step="1">
1053 <v-container fluid class> 1053 <v-container fluid class>
1054 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only"> 1054 <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
1055 <v-form ref="parentForm" v-model="valid" lazy-validation> 1055 <v-form ref="parentForm" v-model="valid" lazy-validation>
1056 <v-layout wrap> 1056 <v-layout wrap>
1057 <v-flex xs12 sm6> 1057 <v-flex xs12 sm6>
1058 <!-- FATHER CELL NUMBER visible only on xs and sm screen --> 1058 <!-- FATHER CELL NUMBER visible only on xs and sm screen -->
1059 <v-layout wrap> 1059 <v-layout wrap>
1060 <v-flex xs12 class="pt-4 subheading"> 1060 <v-flex xs12 class="pt-4 subheading">
1061 <label>Father Cell No:</label> 1061 <label>Father Cell No:</label>
1062 </v-flex> 1062 </v-flex>
1063 <v-flex xs12> 1063 <v-flex xs12>
1064 <v-layout row wrap xs12> 1064 <v-layout row wrap xs12>
1065 <v-flex sm3 class="mt-3"> 1065 <v-flex sm3 class="mt-3">
1066 <vue-country-code 1066 <vue-country-code
1067 @onSelect="addFatherCellCode" 1067 @onSelect="addFatherCellCode"
1068 class="black--text" 1068 class="black--text"
1069 ></vue-country-code> 1069 ></vue-country-code>
1070 </v-flex> 1070 </v-flex>
1071 1071
1072 <v-flex sm9> 1072 <v-flex sm9>
1073 <v-text-field 1073 <v-text-field
1074 v-model.trim="parentData.fatherCellNo" 1074 v-model.trim="parentData.fatherCellNo"
1075 placeholder="fill your father Cell Number" 1075 placeholder="fill your father Cell Number"
1076 type="number" 1076 type="number"
1077 :rules="fatheCellNoRules" 1077 :rules="fatheCellNoRules"
1078 counter="10" 1078 counter="10"
1079 v-on:keyup="getParentDetails()" 1079 v-on:keyup="getParentDetails()"
1080 required 1080 required
1081 ></v-text-field> 1081 ></v-text-field>
1082 </v-flex> 1082 </v-flex>
1083 </v-layout> 1083 </v-layout>
1084 </v-flex> 1084 </v-flex>
1085 </v-layout> 1085 </v-layout>
1086 </v-flex> 1086 </v-flex>
1087 <v-flex xs12 sm6> 1087 <v-flex xs12 sm6>
1088 <v-layout wrap> 1088 <v-layout wrap>
1089 <v-flex xs12 class="pt-4 subheading"> 1089 <v-flex xs12 class="pt-4 subheading">
1090 <label>Parent Email Id:</label> 1090 <label>Parent Email Id:</label>
1091 </v-flex> 1091 </v-flex>
1092 <v-flex xs12> 1092 <v-flex xs12>
1093 <v-text-field 1093 <v-text-field
1094 placeholder="fill Parent email" 1094 placeholder="fill Parent email"
1095 v-model="parentData.email" 1095 v-model="parentData.email"
1096 type="text" 1096 type="text"
1097 required 1097 required
1098 ></v-text-field> 1098 ></v-text-field>
1099 </v-flex> 1099 </v-flex>
1100 </v-layout> 1100 </v-layout>
1101 </v-flex> 1101 </v-flex>
1102 </v-layout> 1102 </v-layout>
1103 <v-layout wrap> 1103 <v-layout wrap>
1104 <v-flex xs12 sm6> 1104 <v-flex xs12 sm6>
1105 <v-layout wrap> 1105 <v-layout wrap>
1106 <v-flex xs12 class="pt-4 subheading"> 1106 <v-flex xs12 class="pt-4 subheading">
1107 <label>Father Name:</label> 1107 <label>Father Name:</label>
1108 </v-flex> 1108 </v-flex>
1109 <v-flex xs12> 1109 <v-flex xs12>
1110 <v-text-field 1110 <v-text-field
1111 v-model="parentData.fatherName" 1111 v-model="parentData.fatherName"
1112 placeholder="Fill your father Name" 1112 placeholder="Fill your father Name"
1113 required 1113 required
1114 ></v-text-field> 1114 ></v-text-field>
1115 </v-flex> 1115 </v-flex>
1116 </v-layout> 1116 </v-layout>
1117 </v-flex> 1117 </v-flex>
1118 <v-flex xs12 sm6> 1118 <v-flex xs12 sm6>
1119 <v-layout wrap> 1119 <v-layout wrap>
1120 <v-flex xs12 class="pt-4 subheading"> 1120 <v-flex xs12 class="pt-4 subheading">
1121 <label>Mother Name:</label> 1121 <label>Mother Name:</label>
1122 </v-flex> 1122 </v-flex>
1123 <v-flex xs12> 1123 <v-flex xs12>
1124 <v-text-field 1124 <v-text-field
1125 v-model="parentData.motherName" 1125 v-model="parentData.motherName"
1126 placeholder="fill your Mother Name" 1126 placeholder="fill your Mother Name"
1127 type="text" 1127 type="text"
1128 required 1128 required
1129 ></v-text-field> 1129 ></v-text-field>
1130 </v-flex> 1130 </v-flex>
1131 </v-layout> 1131 </v-layout>
1132 </v-flex> 1132 </v-flex>
1133 </v-layout> 1133 </v-layout>
1134 <v-layout wrap> 1134 <v-layout wrap>
1135 <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen--> 1135 <!-- MOTHER CELL NUMBER - VISIBLE ONLY ON xs and sm screen-->
1136 <v-flex xs12 sm6> 1136 <v-flex xs12 sm6>
1137 <v-layout wrap> 1137 <v-layout wrap>
1138 <v-flex xs12 class="pt-4 subheading"> 1138 <v-flex xs12 class="pt-4 subheading">
1139 <label>Mother Cell No:</label> 1139 <label>Mother Cell No:</label>
1140 </v-flex> 1140 </v-flex>
1141 <v-flex xs12> 1141 <v-flex xs12>
1142 <v-layout row wrap> 1142 <v-layout row wrap>
1143 <v-flex sm3 class="mt-3"> 1143 <v-flex sm3 class="mt-3">
1144 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 1144 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
1145 </v-flex> 1145 </v-flex>
1146 <v-flex sm9> 1146 <v-flex sm9>
1147 <v-text-field 1147 <v-text-field
1148 v-model="parentData.motherCellNo" 1148 v-model="parentData.motherCellNo"
1149 placeholder="Mother Cell Number" 1149 placeholder="Mother Cell Number"
1150 type="number" 1150 type="number"
1151 required 1151 required
1152 ></v-text-field> 1152 ></v-text-field>
1153 </v-flex> 1153 </v-flex>
1154 </v-layout> 1154 </v-layout>
1155 </v-flex> 1155 </v-flex>
1156 </v-layout> 1156 </v-layout>
1157 </v-flex> 1157 </v-flex>
1158 <v-flex xs12 sm6> 1158 <v-flex xs12 sm6>
1159 <v-layout wrap> 1159 <v-layout wrap>
1160 <v-flex xs12 class="pt-4 subheading"> 1160 <v-flex xs12 class="pt-4 subheading">
1161 <label>Father Profession:</label> 1161 <label>Father Profession:</label>
1162 </v-flex> 1162 </v-flex>
1163 <v-flex xs12> 1163 <v-flex xs12>
1164 <v-text-field 1164 <v-text-field
1165 v-model="parentData.fatherProfession" 1165 v-model="parentData.fatherProfession"
1166 placeholder="fill your father profession" 1166 placeholder="fill your father profession"
1167 ></v-text-field> 1167 ></v-text-field>
1168 </v-flex> 1168 </v-flex>
1169 </v-layout> 1169 </v-layout>
1170 </v-flex> 1170 </v-flex>
1171 </v-layout> 1171 </v-layout>
1172 <v-layout wrap> 1172 <v-layout wrap>
1173 <v-flex xs12 sm6> 1173 <v-flex xs12 sm6>
1174 <v-layout wrap> 1174 <v-layout wrap>
1175 <v-flex xs12 class="pt-4 subheading"> 1175 <v-flex xs12 class="pt-4 subheading">
1176 <label>Mother Profession:</label> 1176 <label>Mother Profession:</label>
1177 </v-flex> 1177 </v-flex>
1178 <v-flex xs12> 1178 <v-flex xs12>
1179 <v-text-field 1179 <v-text-field
1180 v-model="parentData.motherProfession" 1180 v-model="parentData.motherProfession"
1181 placeholder="fill your mother profession" 1181 placeholder="fill your mother profession"
1182 ></v-text-field> 1182 ></v-text-field>
1183 </v-flex> 1183 </v-flex>
1184 </v-layout> 1184 </v-layout>
1185 </v-flex> 1185 </v-flex>
1186 <v-flex xs12 sm6> 1186 <v-flex xs12 sm6>
1187 <v-layout wrap> 1187 <v-layout wrap>
1188 <v-flex xs12 class="pt-4 subheading"> 1188 <v-flex xs12 class="pt-4 subheading">
1189 <label>Password:</label> 1189 <label>Password:</label>
1190 </v-flex> 1190 </v-flex>
1191 <v-flex xs12> 1191 <v-flex xs12>
1192 <v-text-field 1192 <v-text-field
1193 v-model="parentData.password" 1193 v-model="parentData.password"
1194 placeholder="Enter Your Password" 1194 placeholder="Enter Your Password"
1195 ></v-text-field> 1195 ></v-text-field>
1196 </v-flex> 1196 </v-flex>
1197 </v-layout> 1197 </v-layout>
1198 </v-flex> 1198 </v-flex>
1199 </v-layout> 1199 </v-layout>
1200 <v-flex sm12 class="hidden-xs-only"> 1200 <v-flex sm12 class="hidden-xs-only">
1201 <v-card-actions> 1201 <v-card-actions>
1202 <v-spacer></v-spacer> 1202 <v-spacer></v-spacer>
1203 <v-btn 1203 <v-btn
1204 @click="submitParentDetails" 1204 @click="submitParentDetails"
1205 round 1205 round
1206 dark 1206 dark
1207 :loading="loading" 1207 :loading="loading"
1208 v-show="showParent" 1208 v-show="showParent"
1209 class="add-button" 1209 class="add-button"
1210 >Add</v-btn> 1210 >Add</v-btn>
1211 <v-btn 1211 <v-btn
1212 v-show="showNext" 1212 v-show="showNext"
1213 @click="e2 = 2" 1213 @click="e2 = 2"
1214 round 1214 round
1215 dark 1215 dark
1216 class="add-button" 1216 class="add-button"
1217 >Next</v-btn> 1217 >Next</v-btn>
1218 </v-card-actions> 1218 </v-card-actions>
1219 </v-flex> 1219 </v-flex>
1220 <v-flex 1220 <v-flex
1221 xs6 1221 xs6
1222 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1222 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1223 > 1223 >
1224 <v-btn 1224 <v-btn
1225 @click="submitParentDetails" 1225 @click="submitParentDetails"
1226 round 1226 round
1227 dark 1227 dark
1228 :loading="loading" 1228 :loading="loading"
1229 v-show="showParent" 1229 v-show="showParent"
1230 class="add-button" 1230 class="add-button"
1231 >Add</v-btn> 1231 >Add</v-btn>
1232 <v-btn 1232 <v-btn
1233 v-show="showNext" 1233 v-show="showNext"
1234 @click="e2 = 2" 1234 @click="e2 = 2"
1235 round 1235 round
1236 dark 1236 dark
1237 class="add-button" 1237 class="add-button"
1238 >Next</v-btn> 1238 >Next</v-btn>
1239 </v-flex> 1239 </v-flex>
1240 </v-form> 1240 </v-form>
1241 </v-flex> 1241 </v-flex>
1242 <!-- FATHER CELL NUMBER - HIDDEN xs and sm screen --> 1242 <!-- FATHER CELL NUMBER - HIDDEN xs and sm screen -->
1243 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only"> 1243 <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
1244 <v-form ref="parentFormLgScr" v-model="valid" lazy-validation> 1244 <v-form ref="parentFormLgScr" v-model="valid" lazy-validation>
1245 <v-layout wrap> 1245 <v-layout wrap>
1246 <v-flex xs12 sm6> 1246 <v-flex xs12 sm6>
1247 <v-layout> 1247 <v-layout>
1248 <v-flex xs4 class="pt-4 subheading"> 1248 <v-flex xs4 class="pt-4 subheading">
1249 <label class="right">Father Cell No:</label> 1249 <label class="right">Father Cell No:</label>
1250 </v-flex> 1250 </v-flex>
1251 <v-flex xs8 class="ml-3"> 1251 <v-flex xs8 class="ml-3">
1252 <v-layout row wrap> 1252 <v-layout row wrap>
1253 <v-flex md3 class="mt-3"> 1253 <v-flex md3 class="mt-3">
1254 <vue-country-code 1254 <vue-country-code
1255 @onSelect="addFatherCellCode" 1255 @onSelect="addFatherCellCode"
1256 class="black--text" 1256 class="black--text"
1257 ></vue-country-code> 1257 ></vue-country-code>
1258 </v-flex> 1258 </v-flex>
1259 <v-flex md9> 1259 <v-flex md9>
1260 <v-text-field 1260 <v-text-field
1261 v-model.trim="parentData.fatherCellNo" 1261 v-model.trim="parentData.fatherCellNo"
1262 placeholder="fill your father Cell Number" 1262 placeholder="fill your father Cell Number"
1263 type="number" 1263 type="number"
1264 :rules="fatheCellNoRules" 1264 :rules="fatheCellNoRules"
1265 counter="10" 1265 counter="10"
1266 required 1266 required
1267 v-on:keyup="getParentDetails()" 1267 v-on:keyup="getParentDetails()"
1268 ></v-text-field> 1268 ></v-text-field>
1269 </v-flex> 1269 </v-flex>
1270 </v-layout> 1270 </v-layout>
1271 </v-flex> 1271 </v-flex>
1272 </v-layout> 1272 </v-layout>
1273 </v-flex> 1273 </v-flex>
1274 <v-flex xs12 sm6> 1274 <v-flex xs12 sm6>
1275 <v-layout> 1275 <v-layout>
1276 <v-flex xs4 class="pt-4 subheading"> 1276 <v-flex xs4 class="pt-4 subheading">
1277 <label class="right">Parent Email Id:</label> 1277 <label class="right">Parent Email Id:</label>
1278 </v-flex> 1278 </v-flex>
1279 <v-flex xs8 class="ml-3"> 1279 <v-flex xs8 class="ml-3">
1280 <v-text-field 1280 <v-text-field
1281 placeholder="fill Parent email" 1281 placeholder="fill Parent email"
1282 v-model="parentData.email" 1282 v-model="parentData.email"
1283 type="text" 1283 type="text"
1284 required 1284 required
1285 ></v-text-field> 1285 ></v-text-field>
1286 </v-flex> 1286 </v-flex>
1287 </v-layout> 1287 </v-layout>
1288 </v-flex> 1288 </v-flex>
1289 </v-layout> 1289 </v-layout>
1290 <v-layout wrap> 1290 <v-layout wrap>
1291 <v-flex xs12 sm6> 1291 <v-flex xs12 sm6>
1292 <v-layout> 1292 <v-layout>
1293 <v-flex xs4 class="pt-4 subheading"> 1293 <v-flex xs4 class="pt-4 subheading">
1294 <label class="right">Father Name:</label> 1294 <label class="right">Father Name:</label>
1295 </v-flex> 1295 </v-flex>
1296 <v-flex xs8 class="ml-3"> 1296 <v-flex xs8 class="ml-3">
1297 <v-text-field 1297 <v-text-field
1298 v-model="parentData.fatherName" 1298 v-model="parentData.fatherName"
1299 placeholder="Fill your father Name" 1299 placeholder="Fill your father Name"
1300 required 1300 required
1301 ></v-text-field> 1301 ></v-text-field>
1302 </v-flex> 1302 </v-flex>
1303 </v-layout> 1303 </v-layout>
1304 </v-flex> 1304 </v-flex>
1305 <v-flex xs12 sm6> 1305 <v-flex xs12 sm6>
1306 <v-layout> 1306 <v-layout>
1307 <v-flex xs4 class="pt-4 subheading"> 1307 <v-flex xs4 class="pt-4 subheading">
1308 <label class="right">Mother Name:</label> 1308 <label class="right">Mother Name:</label>
1309 </v-flex> 1309 </v-flex>
1310 <v-flex xs8 class="ml-3"> 1310 <v-flex xs8 class="ml-3">
1311 <v-text-field 1311 <v-text-field
1312 v-model="parentData.motherName" 1312 v-model="parentData.motherName"
1313 placeholder="fill your Mother Name" 1313 placeholder="fill your Mother Name"
1314 type="text" 1314 type="text"
1315 required 1315 required
1316 ></v-text-field> 1316 ></v-text-field>
1317 </v-flex> 1317 </v-flex>
1318 </v-layout> 1318 </v-layout>
1319 </v-flex> 1319 </v-flex>
1320 </v-layout> 1320 </v-layout>
1321 <v-layout wrap> 1321 <v-layout wrap>
1322 <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen --> 1322 <!-- MOTHER CELL NUMBER HIDDEN ON xs and sm screen -->
1323 <v-flex xs12 sm6> 1323 <v-flex xs12 sm6>
1324 <v-layout> 1324 <v-layout>
1325 <v-flex xs4 class="pt-4 subheading"> 1325 <v-flex xs4 class="pt-4 subheading">
1326 <label class="right">Mother Cell No:</label> 1326 <label class="right">Mother Cell No:</label>
1327 </v-flex> 1327 </v-flex>
1328 <v-flex xs8 class="ml-3"> 1328 <v-flex xs8 class="ml-3">
1329 <v-layout row wrap> 1329 <v-layout row wrap>
1330 <v-flex md3 class="mt-3"> 1330 <v-flex md3 class="mt-3">
1331 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code> 1331 <vue-country-code @onSelect="onSelect" class="black--text"></vue-country-code>
1332 </v-flex> 1332 </v-flex>
1333 <v-flex md9> 1333 <v-flex md9>
1334 <v-text-field 1334 <v-text-field
1335 v-model="parentData.motherCellNo" 1335 v-model="parentData.motherCellNo"
1336 placeholder="fill your Mother Cell Number" 1336 placeholder="fill your Mother Cell Number"
1337 type="number" 1337 type="number"
1338 required 1338 required
1339 ></v-text-field> 1339 ></v-text-field>
1340 </v-flex> 1340 </v-flex>
1341 </v-layout> 1341 </v-layout>
1342 </v-flex> 1342 </v-flex>
1343 </v-layout> 1343 </v-layout>
1344 </v-flex> 1344 </v-flex>
1345 <v-flex xs12 sm6> 1345 <v-flex xs12 sm6>
1346 <v-layout> 1346 <v-layout>
1347 <v-flex xs4 class="pt-4 subheading"> 1347 <v-flex xs4 class="pt-4 subheading">
1348 <label class="right">Father Profession:</label> 1348 <label class="right">Father Profession:</label>
1349 </v-flex> 1349 </v-flex>
1350 <v-flex xs8 class="ml-3"> 1350 <v-flex xs8 class="ml-3">
1351 <v-text-field 1351 <v-text-field
1352 v-model="parentData.fatherProfession" 1352 v-model="parentData.fatherProfession"
1353 placeholder="fill your father profession" 1353 placeholder="fill your father profession"
1354 ></v-text-field> 1354 ></v-text-field>
1355 </v-flex> 1355 </v-flex>
1356 </v-layout> 1356 </v-layout>
1357 </v-flex> 1357 </v-flex>
1358 </v-layout> 1358 </v-layout>
1359 <v-layout wrap> 1359 <v-layout wrap>
1360 <v-flex xs12 sm6> 1360 <v-flex xs12 sm6>
1361 <v-layout> 1361 <v-layout>
1362 <v-flex xs4 class="pt-4 subheading"> 1362 <v-flex xs4 class="pt-4 subheading">
1363 <label class="right">Mother Profession:</label> 1363 <label class="right">Mother Profession:</label>
1364 </v-flex> 1364 </v-flex>
1365 <v-flex xs8 class="ml-3"> 1365 <v-flex xs8 class="ml-3">
1366 <v-text-field 1366 <v-text-field
1367 v-model="parentData.motherProfession" 1367 v-model="parentData.motherProfession"
1368 placeholder="fill your mother profession" 1368 placeholder="fill your mother profession"
1369 ></v-text-field> 1369 ></v-text-field>
1370 </v-flex> 1370 </v-flex>
1371 </v-layout> 1371 </v-layout>
1372 </v-flex> 1372 </v-flex>
1373 <v-flex xs12 sm6> 1373 <v-flex xs12 sm6>
1374 <v-layout> 1374 <v-layout>
1375 <v-flex xs4 class="pt-4 subheading"> 1375 <v-flex xs4 class="pt-4 subheading">
1376 <label class="right">Password:</label> 1376 <label class="right">Password:</label>
1377 </v-flex> 1377 </v-flex>
1378 <v-flex xs8 class="ml-3"> 1378 <v-flex xs8 class="ml-3">
1379 <v-text-field 1379 <v-text-field
1380 :append-icon="e1 ? 'visibility_off' : 'visibility'" 1380 :append-icon="e1 ? 'visibility_off' : 'visibility'"
1381 :append-icon-cb="() => (e1 = !e1)" 1381 :append-icon-cb="() => (e1 = !e1)"
1382 :type="e1 ? 'password' : 'text'" 1382 :type="e1 ? 'password' : 'text'"
1383 :rules="password" 1383 :rules="password"
1384 v-model="parentData.password" 1384 v-model="parentData.password"
1385 placeholder="Enter Your Password" 1385 placeholder="Enter Your Password"
1386 :disabled="isFatherCellExists" 1386 :disabled="isFatherCellExists"
1387 required 1387 required
1388 ></v-text-field> 1388 ></v-text-field>
1389 </v-flex> 1389 </v-flex>
1390 </v-layout> 1390 </v-layout>
1391 </v-flex> 1391 </v-flex>
1392 </v-layout> 1392 </v-layout>
1393 <v-flex sm12 class="hidden-xs-only"> 1393 <v-flex sm12 class="hidden-xs-only">
1394 <v-card-actions> 1394 <v-card-actions>
1395 <v-spacer></v-spacer> 1395 <v-spacer></v-spacer>
1396 <v-btn 1396 <v-btn
1397 @click="submitParentDetails" 1397 @click="submitParentDetails"
1398 round 1398 round
1399 dark 1399 dark
1400 :loading="loading" 1400 :loading="loading"
1401 v-show="showParent" 1401 v-show="showParent"
1402 class="add-button" 1402 class="add-button"
1403 >Add</v-btn> 1403 >Add</v-btn>
1404 <v-btn 1404 <v-btn
1405 v-show="showNext" 1405 v-show="showNext"
1406 @click="e2 = 2" 1406 @click="e2 = 2"
1407 round 1407 round
1408 dark 1408 dark
1409 class="add-button" 1409 class="add-button"
1410 >Next</v-btn> 1410 >Next</v-btn>
1411 </v-card-actions> 1411 </v-card-actions>
1412 </v-flex> 1412 </v-flex>
1413 <v-flex 1413 <v-flex
1414 xs6 1414 xs6
1415 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2" 1415 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
1416 > 1416 >
1417 <v-btn 1417 <v-btn
1418 @click="submitParentDetails" 1418 @click="submitParentDetails"
1419 round 1419 round
1420 dark 1420 dark
1421 :loading="loading" 1421 :loading="loading"
1422 v-show="showParent" 1422 v-show="showParent"
1423 class="add-button" 1423 class="add-button"
1424 >Add</v-btn> 1424 >Add</v-btn>
1425 <v-btn 1425 <v-btn
1426 v-show="showNext" 1426 v-show="showNext"
1427 @click="e2 = 2" 1427 @click="e2 = 2"
1428 round 1428 round
1429 dark 1429 dark
1430 class="add-button" 1430 class="add-button"
1431 >Next</v-btn> 1431 >Next</v-btn>
1432 </v-flex> 1432 </v-flex>
1433 </v-form> 1433 </v-form>
1434 </v-flex> 1434 </v-flex>
1435 </v-container> 1435 </v-container>
1436 </v-stepper-content> 1436 </v-stepper-content>
1437 <v-stepper-content step="2"> 1437 <v-stepper-content step="2">
1438 <v-flex xs12 sm12> 1438 <v-flex xs12 sm12>
1439 <v-form ref="form" v-model="valid" lazy-validation> 1439 <v-form ref="form" v-model="valid" lazy-validation>
1440 <v-layout> 1440 <v-layout>
1441 <v-flex 1441 <v-flex
1442 xs12 1442 xs12
1443 class="text-xs-center text-sm-center text-md-center text-lg-center" 1443 class="text-xs-center text-sm-center text-md-center text-lg-center"
1444 > 1444 >
1445 <v-avatar size="100px"> 1445 <v-avatar size="100px">
1446 <img src="/static/icon/user.png" v-if="!imageUrl" /> 1446 <img src="/static/icon/user.png" v-if="!imageUrl" />
1447 </v-avatar> 1447 </v-avatar>
1448 <input 1448 <input
1449 type="file" 1449 type="file"
1450 style="display: none" 1450 style="display: none"
1451 ref="image" 1451 ref="image"
1452 accept="image/*" 1452 accept="image/*"
1453 @change="onFilePicked" 1453 @change="onFilePicked"
1454 /> 1454 />
1455 <img 1455 <img
1456 :src="imageData.imageUrl" 1456 :src="imageData.imageUrl"
1457 height="150" 1457 height="150"
1458 v-if="imageUrl" 1458 v-if="imageUrl"
1459 style="border-radius:50%; width:200px" 1459 style="border-radius:50%; width:200px"
1460 /> 1460 />
1461 </v-flex> 1461 </v-flex>
1462 </v-layout> 1462 </v-layout>
1463 <v-layout wrap> 1463 <v-layout wrap>
1464 <v-flex xs12 sm6> 1464 <v-flex xs12 sm6>
1465 <v-layout> 1465 <v-layout>
1466 <v-flex x4 sm4 class="pt-4 subheading"> 1466 <v-flex x4 sm4 class="pt-4 subheading">
1467 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 1467 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
1468 <label 1468 <label
1469 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1469 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1470 >Class:</label> 1470 >Class:</label>
1471 </v-flex> 1471 </v-flex>
1472 <v-flex xs8 sm8 class="ml-3"> 1472 <v-flex xs8 sm8 class="ml-3">
1473 <v-select 1473 <v-select
1474 :items="addclass" 1474 :items="addclass"
1475 label="Select Class" 1475 label="Select Class"
1476 v-model="addStudents.select" 1476 v-model="addStudents.select"
1477 item-text="classNum" 1477 item-text="classNum"
1478 item-value="_id" 1478 item-value="_id"
1479 name="Select Class" 1479 name="Select Class"
1480 :rules="classRules" 1480 :rules="classRules"
1481 @change="getSection(addStudents.select)" 1481 @change="getSection(addStudents.select)"
1482 required 1482 required
1483 ></v-select> 1483 ></v-select>
1484 </v-flex> 1484 </v-flex>
1485 </v-layout> 1485 </v-layout>
1486 </v-flex> 1486 </v-flex>
1487 <v-flex xs12 sm6> 1487 <v-flex xs12 sm6>
1488 <v-layout> 1488 <v-layout>
1489 <v-flex xs4 class="pt-4 subheading"> 1489 <v-flex xs4 class="pt-4 subheading">
1490 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label> 1490 <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
1491 <label 1491 <label
1492 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1492 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1493 >Section:</label> 1493 >Section:</label>
1494 </v-flex> 1494 </v-flex>
1495 <v-flex xs8 class="ml-3"> 1495 <v-flex xs8 class="ml-3">
1496 <v-select 1496 <v-select
1497 :items="addSection" 1497 :items="addSection"
1498 label="Select Section" 1498 label="Select Section"
1499 v-model="addStudents.selectSection" 1499 v-model="addStudents.selectSection"
1500 item-text="name" 1500 item-text="name"
1501 item-value="_id" 1501 item-value="_id"
1502 name="Select Section" 1502 name="Select Section"
1503 :rules="sectionRules" 1503 :rules="sectionRules"
1504 required 1504 required
1505 ></v-select> 1505 ></v-select>
1506 </v-flex> 1506 </v-flex>
1507 </v-layout> 1507 </v-layout>
1508 </v-flex> 1508 </v-flex>
1509 </v-layout> 1509 </v-layout>
1510 <v-layout wrap> 1510 <v-layout wrap>
1511 <v-flex xs12 sm6> 1511 <v-flex xs12 sm6>
1512 <v-layout> 1512 <v-layout>
1513 <v-flex xs4 sm4 class="pt-4 subheading"> 1513 <v-flex xs4 sm4 class="pt-4 subheading">
1514 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 1514 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
1515 <label 1515 <label
1516 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1516 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1517 >Name:</label> 1517 >Name:</label>
1518 </v-flex> 1518 </v-flex>
1519 <v-flex xs8 sm8 class="ml-3"> 1519 <v-flex xs8 sm8 class="ml-3">
1520 <v-text-field 1520 <v-text-field
1521 v-model="addStudents.name" 1521 v-model="addStudents.name"
1522 placeholder="fill your full Name" 1522 placeholder="fill your full Name"
1523 name="name" 1523 name="name"
1524 type="text" 1524 type="text"
1525 :rules="nameRules" 1525 :rules="nameRules"
1526 required 1526 required
1527 ></v-text-field> 1527 ></v-text-field>
1528 </v-flex> 1528 </v-flex>
1529 </v-layout> 1529 </v-layout>
1530 </v-flex> 1530 </v-flex>
1531 <v-flex xs12 sm6> 1531 <v-flex xs12 sm6>
1532 <v-layout> 1532 <v-layout>
1533 <v-flex xs4 sm4 class="pt-4 subheading"> 1533 <v-flex xs4 sm4 class="pt-4 subheading">
1534 <label class="right">Email:</label> 1534 <label class="right">Email:</label>
1535 </v-flex> 1535 </v-flex>
1536 <v-flex xs8 sm8 class="ml-3"> 1536 <v-flex xs8 sm8 class="ml-3">
1537 <v-text-field 1537 <v-text-field
1538 placeholder="fill your email" 1538 placeholder="fill your email"
1539 v-model="addStudents.email" 1539 v-model="addStudents.email"
1540 type="text" 1540 type="text"
1541 name="email" 1541 name="email"
1542 required 1542 required
1543 ></v-text-field> 1543 ></v-text-field>
1544 </v-flex> 1544 </v-flex>
1545 </v-layout> 1545 </v-layout>
1546 </v-flex> 1546 </v-flex>
1547 </v-layout> 1547 </v-layout>
1548 <v-layout wrap> 1548 <v-layout wrap>
1549 <v-flex xs12 sm6> 1549 <v-flex xs12 sm6>
1550 <v-layout> 1550 <v-layout>
1551 <v-flex xs4 sm4 class="pt-4 subheading"> 1551 <v-flex xs4 sm4 class="pt-4 subheading">
1552 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 1552 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
1553 <label 1553 <label
1554 class="right hidden-lg-only hidden-xl-only hidden-md-only" 1554 class="right hidden-lg-only hidden-xl-only hidden-md-only"
1555 >D.O.B:</label> 1555 >D.O.B:</label>
1556 </v-flex> 1556 </v-flex>
1557 <v-flex xs8 sm8 class="ml-3"> 1557 <v-flex xs8 sm8 class="ml-3">
1558 <v-menu 1558 <v-menu
1559 ref="menu" 1559 ref="menu"
1560 :close-on-content-click="false" 1560 :close-on-content-click="false"
1561 v-model="menu" 1561 v-model="menu"
1562 :nudge-right="40" 1562 :nudge-right="40"
1563 lazy 1563 lazy
1564 transition="scale-transition" 1564 transition="scale-transition"
1565 offset-y 1565 offset-y
1566 full-width 1566 full-width
1567 min-width="290px" 1567 min-width="290px"
1568 > 1568 >
1569 <v-text-field 1569 <v-text-field
1570 slot="activator" 1570 slot="activator"
1571 :rules="dateRules" 1571 :rules="dateRules"
1572 v-model="addStudents.date" 1572 v-model="addStudents.date"
1573 placeholder="Select date" 1573 placeholder="Select date"
1574 ></v-text-field> 1574 ></v-text-field>
1575 <v-date-picker 1575 <v-date-picker
1576 ref="picker" 1576 ref="picker"
1577 v-model="addStudents.date" 1577 v-model="addStudents.date"
1578 :max="new Date().toISOString().substr(0, 10)" 1578 :max="new Date().toISOString().substr(0, 10)"
1579 min="1950-01-01" 1579 min="1950-01-01"
1580 @input="menu = false" 1580 @input="menu = false"
1581 ></v-date-picker> 1581 ></v-date-picker>
1582 </v-menu> 1582 </v-menu>
1583 </v-flex> 1583 </v-flex>
1584 </v-layout> 1584 </v-layout>
1585 </v-flex> 1585 </v-flex>
1586 <v-flex xs12 sm6> 1586 <v-flex xs12 sm6>
1587 <v-layout> 1587 <v-layout>
1588 <v-flex xs4 class="pt-4 subheading"> 1588 <v-flex xs4 class="pt-4 subheading">
1589 <label class="right">City:</label> 1589 <label class="right">City:</label>
1590 </v-flex> 1590 </v-flex>
1591 <v-flex xs8 class="ml-3"> 1591 <v-flex xs8 class="ml-3">
1592 <v-text-field 1592 <v-text-field
1593 v-model="addStudents.city" 1593 v-model="addStudents.city"
1594 placeholder="fill your City Name" 1594 placeholder="fill your City Name"
1595 name="City" 1595 name="City"
1596 type="text" 1596 type="text"
1597 :rules="cityRules" 1597 :rules="cityRules"
1598 required 1598 required
1599 ></v-text-field> 1599 ></v-text-field>
1600 </v-flex> 1600 </v-flex>
1601 </v-layout> 1601 </v-layout>
1602 </v-flex> 1602 </v-flex>
1603 </v-layout> 1603 </v-layout>
1604 <v-layout wrap> 1604 <v-layout wrap>
1605 <v-flex xs12 sm6> 1605 <v-flex xs12 sm6>
1606 <v-layout> 1606 <v-layout>
1607 <v-flex xs4 class="pt-4 subheading"> 1607 <v-flex xs4 class="pt-4 subheading">
1608 <label class="right">State:</label> 1608 <label class="right">State:</label>
1609 </v-flex> 1609 </v-flex>
1610 <v-flex xs8 class="ml-3"> 1610 <v-flex xs8 class="ml-3">
1611 <v-text-field 1611 <v-text-field
1612 v-model="addStudents.state" 1612 v-model="addStudents.state"
1613 placeholder="fill your State Name" 1613 placeholder="fill your State Name"
1614 name="state" 1614 name="state"
1615 type="text" 1615 type="text"
1616 :rules="stateRules" 1616 :rules="stateRules"
1617 required 1617 required
1618 ></v-text-field> 1618 ></v-text-field>
1619 </v-flex> 1619 </v-flex>
1620 </v-layout> 1620 </v-layout>
1621 </v-flex> 1621 </v-flex>
1622 <v-flex xs12 sm6> 1622 <v-flex xs12 sm6>
1623 <v-layout> 1623 <v-layout>
1624 <v-flex xs4 class="pt-4 subheading"> 1624 <v-flex xs4 class="pt-4 subheading">
1625 <label class="right">Pincode:</label> 1625 <label class="right">Pincode:</label>
1626 </v-flex> 1626 </v-flex>
1627 <v-flex xs8 class="ml-3"> 1627 <v-flex xs8 class="ml-3">
1628 <v-text-field 1628 <v-text-field
1629 v-model="addStudents.pincode" 1629 v-model="addStudents.pincode"
1630 placeholder="fill your pincode" 1630 placeholder="fill your pincode"
1631 name="pincode" 1631 name="pincode"
1632 type="number" 1632 type="number"
1633 :rules="pincode" 1633 :rules="pincode"
1634 required 1634 required
1635 ></v-text-field> 1635 ></v-text-field>
1636 </v-flex> 1636 </v-flex>
1637 </v-layout> 1637 </v-layout>
1638 </v-flex> 1638 </v-flex>
1639 </v-layout> 1639 </v-layout>
1640 <v-layout wrap> 1640 <v-layout wrap>
1641 <v-flex xs12 sm6> 1641 <v-flex xs12 sm6>
1642 <v-layout> 1642 <v-layout>
1643 <v-flex xs4 class="pt-4 subheading"> 1643 <v-flex xs4 class="pt-4 subheading">
1644 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 1644 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
1645 <label 1645 <label
1646 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1646 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1647 >Mobile:</label> 1647 >Mobile:</label>
1648 </v-flex> 1648 </v-flex>
1649 <v-flex xs8 class="ml-3"> 1649 <v-flex xs8 class="ml-3">
1650 <v-layout row wrap> 1650 <v-layout row wrap>
1651 <v-flex xs3 class="mt-3"> 1651 <v-flex xs3 class="mt-3">
1652 <vue-country-code 1652 <vue-country-code
1653 @onSelect="addStudentMobileCode" 1653 @onSelect="addStudentMobileCode"
1654 class="black--text" 1654 class="black--text"
1655 ></vue-country-code> 1655 ></vue-country-code>
1656 </v-flex> 1656 </v-flex>
1657 <v-flex xs9> 1657 <v-flex xs9>
1658 <v-text-field 1658 <v-text-field
1659 v-model="addStudents.mobile" 1659 v-model="addStudents.mobile"
1660 placeholder="fill your MobileNo" 1660 placeholder="fill your MobileNo"
1661 name="mobileNo" 1661 name="mobileNo"
1662 type="number" 1662 type="number"
1663 ></v-text-field> 1663 ></v-text-field>
1664 </v-flex> 1664 </v-flex>
1665 </v-layout> 1665 </v-layout>
1666 </v-flex> 1666 </v-flex>
1667 </v-layout> 1667 </v-layout>
1668 </v-flex> 1668 </v-flex>
1669 <v-flex xs12 sm6> 1669 <v-flex xs12 sm6>
1670 <v-layout> 1670 <v-layout>
1671 <v-flex xs4 class="pt-4 subheading"> 1671 <v-flex xs4 class="pt-4 subheading">
1672 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 1672 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
1673 <label 1673 <label
1674 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1674 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1675 >Country:</label> 1675 >Country:</label>
1676 </v-flex> 1676 </v-flex>
1677 <v-flex xs8 class="ml-3"> 1677 <v-flex xs8 class="ml-3">
1678 <v-autocomplete 1678 <v-autocomplete
1679 v-model="addStudents.country" 1679 v-model="addStudents.country"
1680 :rules="country" 1680 :rules="country"
1681 :items="countries" 1681 :items="countries"
1682 placeholder="Select Country Name" 1682 placeholder="Select Country Name"
1683 required 1683 required
1684 ></v-autocomplete> 1684 ></v-autocomplete>
1685 </v-flex> 1685 </v-flex>
1686 </v-layout> 1686 </v-layout>
1687 </v-flex> 1687 </v-flex>
1688 </v-layout> 1688 </v-layout>
1689 <v-layout wrap> 1689 <v-layout wrap>
1690 <v-flex xs12 sm6> 1690 <v-flex xs12 sm6>
1691 <v-layout> 1691 <v-layout>
1692 <v-flex xs4 class="pt-4 subheading"> 1692 <v-flex xs4 class="pt-4 subheading">
1693 <label class="right">Gender:</label> 1693 <label class="right">Gender:</label>
1694 </v-flex> 1694 </v-flex>
1695 <v-flex xs8 class="ml-3"> 1695 <v-flex xs8 class="ml-3">
1696 <v-select 1696 <v-select
1697 :items="gender" 1697 :items="gender"
1698 v-model="addStudents.gender" 1698 v-model="addStudents.gender"
1699 :rules="genderRules" 1699 :rules="genderRules"
1700 label="Select Gender" 1700 label="Select Gender"
1701 required 1701 required
1702 ></v-select> 1702 ></v-select>
1703 </v-flex> 1703 </v-flex>
1704 </v-layout> 1704 </v-layout>
1705 </v-flex> 1705 </v-flex>
1706 <v-flex xs12 sm6> 1706 <v-flex xs12 sm6>
1707 <v-layout> 1707 <v-layout>
1708 <v-flex xs4 class="pt-4 subheading"> 1708 <v-flex xs4 class="pt-4 subheading">
1709 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label> 1709 <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
1710 <label 1710 <label
1711 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1711 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1712 >Blood:</label> 1712 >Blood:</label>
1713 </v-flex> 1713 </v-flex>
1714 <v-flex xs8 class="ml-3"> 1714 <v-flex xs8 class="ml-3">
1715 <v-text-field 1715 <v-text-field
1716 v-model="addStudents.bloodGroup" 1716 v-model="addStudents.bloodGroup"
1717 placeholder="Fill your Blood Group" 1717 placeholder="Fill your Blood Group"
1718 required 1718 required
1719 ></v-text-field> 1719 ></v-text-field>
1720 </v-flex> 1720 </v-flex>
1721 </v-layout> 1721 </v-layout>
1722 </v-flex> 1722 </v-flex>
1723 </v-layout> 1723 </v-layout>
1724 <v-layout wrap> 1724 <v-layout wrap>
1725 <v-flex xs12 sm6> 1725 <v-flex xs12 sm6>
1726 <v-layout> 1726 <v-layout>
1727 <v-flex xs4 class="pt-4 subheading"> 1727 <v-flex xs4 class="pt-4 subheading">
1728 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label> 1728 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
1729 <label 1729 <label
1730 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1730 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1731 >Roll No:</label> 1731 >Roll No:</label>
1732 </v-flex> 1732 </v-flex>
1733 <v-flex xs8 class="ml-3"> 1733 <v-flex xs8 class="ml-3">
1734 <v-text-field 1734 <v-text-field
1735 v-model="addStudents.rollNo" 1735 v-model="addStudents.rollNo"
1736 placeholder="Fill your Roll Number" 1736 placeholder="Fill your Roll Number"
1737 :rules="rollNo" 1737 :rules="rollNo"
1738 required 1738 required
1739 ></v-text-field> 1739 ></v-text-field>
1740 </v-flex> 1740 </v-flex>
1741 </v-layout> 1741 </v-layout>
1742 </v-flex> 1742 </v-flex>
1743 <v-flex xs12 sm6> 1743 <v-flex xs12 sm6>
1744 <v-layout> 1744 <v-layout>
1745 <v-flex xs4 class="pt-4 subheading"> 1745 <v-flex xs4 class="pt-4 subheading">
1746 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label> 1746 <label class="right hidden-xs-only hidden-sm-only">Medical Notes:</label>
1747 <label 1747 <label
1748 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1748 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1749 >Medical:</label> 1749 >Medical:</label>
1750 </v-flex> 1750 </v-flex>
1751 <v-flex xs8 class="ml-3"> 1751 <v-flex xs8 class="ml-3">
1752 <v-text-field 1752 <v-text-field
1753 v-model="addStudents.medicalNotes" 1753 v-model="addStudents.medicalNotes"
1754 placeholder="Fill your Medical Notes" 1754 placeholder="Fill your Medical Notes"
1755 required 1755 required
1756 ></v-text-field> 1756 ></v-text-field>
1757 </v-flex> 1757 </v-flex>
1758 </v-layout> 1758 </v-layout>
1759 </v-flex> 1759 </v-flex>
1760 </v-layout> 1760 </v-layout>
1761 <v-layout wrap> 1761 <v-layout wrap>
1762 <v-flex xs12 sm6> 1762 <v-flex xs12 sm6>
1763 <v-layout> 1763 <v-layout>
1764 <v-flex xs4 class="pt-4 subheading"> 1764 <v-flex xs4 class="pt-4 subheading">
1765 <label class="right">Height:</label> 1765 <label class="right">Height:</label>
1766 </v-flex> 1766 </v-flex>
1767 <v-flex xs8 class="ml-3"> 1767 <v-flex xs8 class="ml-3">
1768 <v-text-field 1768 <v-text-field
1769 v-model="addStudents.height" 1769 v-model="addStudents.height"
1770 placeholder="Fill your Height" 1770 placeholder="Fill your Height"
1771 required 1771 required
1772 ></v-text-field> 1772 ></v-text-field>
1773 </v-flex> 1773 </v-flex>
1774 </v-layout> 1774 </v-layout>
1775 </v-flex> 1775 </v-flex>
1776 <v-flex xs12 sm6> 1776 <v-flex xs12 sm6>
1777 <v-layout> 1777 <v-layout>
1778 <v-flex xs4 class="pt-4 subheading"> 1778 <v-flex xs4 class="pt-4 subheading">
1779 <label class="right">Weight:</label> 1779 <label class="right">Weight:</label>
1780 </v-flex> 1780 </v-flex>
1781 <v-flex xs8 class="ml-3"> 1781 <v-flex xs8 class="ml-3">
1782 <v-text-field 1782 <v-text-field
1783 v-model="addStudents.weight" 1783 v-model="addStudents.weight"
1784 placeholder="Fill your Weight" 1784 placeholder="Fill your Weight"
1785 required 1785 required
1786 ></v-text-field> 1786 ></v-text-field>
1787 </v-flex> 1787 </v-flex>
1788 </v-layout> 1788 </v-layout>
1789 </v-flex> 1789 </v-flex>
1790 </v-layout> 1790 </v-layout>
1791 <v-layout wrap> 1791 <v-layout wrap>
1792 <v-flex xs12 sm6> 1792 <v-flex xs12 sm6>
1793 <v-layout> 1793 <v-layout>
1794 <v-flex xs4 class="pt-4 subheading"> 1794 <v-flex xs4 class="pt-4 subheading">
1795 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 1795 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
1796 <label 1796 <label
1797 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1797 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1798 >Uplaod :</label> 1798 >Uplaod :</label>
1799 </v-flex> 1799 </v-flex>
1800 <v-flex xs8 class="ml-3"> 1800 <v-flex xs8 class="ml-3">
1801 <v-text-field 1801 <v-text-field
1802 label="Select Image" 1802 label="Select Image"
1803 @click="pickFile" 1803 @click="pickFile"
1804 v-model="imageName" 1804 v-model="imageName"
1805 append-icon="attach_file" 1805 append-icon="attach_file"
1806 ></v-text-field> 1806 ></v-text-field>
1807 </v-flex> 1807 </v-flex>
1808 </v-layout> 1808 </v-layout>
1809 </v-flex> 1809 </v-flex>
1810 <v-flex xs12 sm6> 1810 <v-flex xs12 sm6>
1811 <v-layout> 1811 <v-layout>
1812 <v-flex xs4 class="pt-4 subheading"> 1812 <v-flex xs4 class="pt-4 subheading">
1813 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 1813 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
1814 <label 1814 <label
1815 class="right hidden-lg-only hidden-md-only hidden-xl-only" 1815 class="right hidden-lg-only hidden-md-only hidden-xl-only"
1816 >Year:</label> 1816 >Year:</label>
1817 </v-flex> 1817 </v-flex>
1818 <v-flex xs8 class="ml-3"> 1818 <v-flex xs8 class="ml-3">
1819 <v-text-field 1819 <v-text-field
1820 v-model="addStudents.establishmentYear" 1820 v-model="addStudents.establishmentYear"
1821 placeholder="fill your Academic Year" 1821 placeholder="fill your Academic Year"
1822 name="state" 1822 name="state"
1823 type="number" 1823 type="number"
1824 :rules="establishmentYearRules" 1824 :rules="establishmentYearRules"
1825 required 1825 required
1826 ></v-text-field> 1826 ></v-text-field>
1827 </v-flex> 1827 </v-flex>
1828 </v-layout> 1828 </v-layout>
1829 </v-flex> 1829 </v-flex>
1830 </v-layout> 1830 </v-layout>
1831 <v-layout wrap class="hidden-xs-only hidden-sm-only"> 1831 <v-layout wrap class="hidden-xs-only hidden-sm-only">
1832 <v-flex xs12 sm6> 1832 <v-flex xs12 sm6>
1833 <v-layout> 1833 <v-layout>
1834 <v-flex xs4 sm4 class="pt-4 subheading"> 1834 <v-flex xs4 sm4 class="pt-4 subheading">
1835 <label class="right">Present Address:</label> 1835 <label class="right">Present Address:</label>
1836 </v-flex> 1836 </v-flex>
1837 <v-flex xs8 sm8 class="ml-3"> 1837 <v-flex xs8 sm8 class="ml-3">
1838 <v-text-field 1838 <v-text-field
1839 v-model="addStudents.presentAddress" 1839 v-model="addStudents.presentAddress"
1840 :rules="presentAddress" 1840 :rules="presentAddress"
1841 placeholder="fill Your present Address" 1841 placeholder="fill Your present Address"
1842 @keyup="copyData" 1842 @keyup="copyData"
1843 ></v-text-field> 1843 ></v-text-field>
1844 </v-flex> 1844 </v-flex>
1845 </v-layout> 1845 </v-layout>
1846 </v-flex> 1846 </v-flex>
1847 <v-flex xs12 sm6> 1847 <v-flex xs12 sm6>
1848 <v-layout> 1848 <v-layout>
1849 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1849 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1850 <label class="right">Permanent Address:</label> 1850 <label class="right">Permanent Address:</label>
1851 </v-flex> 1851 </v-flex>
1852 <v-flex xs12 sm8 class="ml-3"> 1852 <v-flex xs12 sm8 class="ml-3">
1853 <v-switch 1853 <v-switch
1854 v-model="addStudents.permanentAddress" 1854 v-model="addStudents.permanentAddress"
1855 label="Select Permanent Address" 1855 label="Select Permanent Address"
1856 :value="addStudents.presentAddress" 1856 :value="addStudents.presentAddress"
1857 ></v-switch> 1857 ></v-switch>
1858 </v-flex> 1858 </v-flex>
1859 </v-layout> 1859 </v-layout>
1860 </v-flex> 1860 </v-flex>
1861 </v-layout> 1861 </v-layout>
1862 <v-layout class="hidden-xs-only hidden-sm-only"> 1862 <v-layout class="hidden-xs-only hidden-sm-only">
1863 <v-flex xs12 sm6> 1863 <v-flex xs12 sm6>
1864 <v-layout> 1864 <v-layout>
1865 <v-flex xs4 sm4 class="pt-4 subheading addressForm"> 1865 <v-flex xs4 sm4 class="pt-4 subheading addressForm">
1866 <label class="right">Permanent Address:</label> 1866 <label class="right">Permanent Address:</label>
1867 </v-flex> 1867 </v-flex>
1868 <v-flex xs12 sm8 class="ml-3"> 1868 <v-flex xs12 sm8 class="ml-3">
1869 <v-text-field 1869 <v-text-field
1870 v-model="addStudents.permanentAddress" 1870 v-model="addStudents.permanentAddress"
1871 :rules="permanentAddress" 1871 :rules="permanentAddress"
1872 placeholder="fill Your Permanent Address" 1872 placeholder="fill Your Permanent Address"
1873 ></v-text-field> 1873 ></v-text-field>
1874 </v-flex> 1874 </v-flex>
1875 </v-layout> 1875 </v-layout>
1876 </v-flex> 1876 </v-flex>
1877 </v-layout> 1877 </v-layout>
1878 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 1878 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
1879 <v-flex xs12 sm12> 1879 <v-flex xs12 sm12>
1880 <v-layout> 1880 <v-layout>
1881 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 1881 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
1882 <label class>Present Address:</label> 1882 <label class>Present Address:</label>
1883 </v-flex> 1883 </v-flex>
1884 </v-layout> 1884 </v-layout>
1885 <v-layout> 1885 <v-layout>
1886 <v-flex xs12 sm12> 1886 <v-flex xs12 sm12>
1887 <v-textarea 1887 <v-textarea
1888 name="input-4-3" 1888 name="input-4-3"
1889 v-model="addStudents.presentAddress" 1889 v-model="addStudents.presentAddress"
1890 :rules="presentAddress" 1890 :rules="presentAddress"
1891 placeholder="fill Your present Address" 1891 placeholder="fill Your present Address"
1892 required 1892 required
1893 ></v-textarea> 1893 ></v-textarea>
1894 </v-flex> 1894 </v-flex>
1895 </v-layout> 1895 </v-layout>
1896 </v-flex> 1896 </v-flex>
1897 <v-flex xs12 sm12> 1897 <v-flex xs12 sm12>
1898 <v-layout> 1898 <v-layout>
1899 <v-flex 1899 <v-flex
1900 xs12 1900 xs12
1901 sm12 1901 sm12
1902 class="pt-4 pr-4 subheading text-xs-center addressForm" 1902 class="pt-4 pr-4 subheading text-xs-center addressForm"
1903 > 1903 >
1904 <label>Permanent Address:</label> 1904 <label>Permanent Address:</label>
1905 </v-flex> 1905 </v-flex>
1906 </v-layout> 1906 </v-layout>
1907 <v-layout> 1907 <v-layout>
1908 <v-flex xs12 sm12> 1908 <v-flex xs12 sm12>
1909 <v-textarea 1909 <v-textarea
1910 name="input-4-3" 1910 name="input-4-3"
1911 v-model="addStudents.permanentAddress" 1911 v-model="addStudents.permanentAddress"
1912 :rules="permanentAddress" 1912 :rules="permanentAddress"
1913 placeholder="fill Your Permanent Address" 1913 placeholder="fill Your Permanent Address"
1914 required 1914 required
1915 ></v-textarea> 1915 ></v-textarea>
1916 </v-flex> 1916 </v-flex>
1917 </v-layout> 1917 </v-layout>
1918 </v-flex> 1918 </v-flex>
1919 </v-layout> 1919 </v-layout>
1920 <v-layout> 1920 <v-layout>
1921 <v-flex xs12 sm12> 1921 <v-flex xs12 sm12>
1922 <v-layout class="right"> 1922 <v-layout class="right">
1923 <!-- <v-flex xs6> --> 1923 <!-- <v-flex xs6> -->
1924 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn> 1924 <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
1925 <!-- </v-flex> 1925 <!-- </v-flex>
1926 <v-flex xs6>--> 1926 <v-flex xs6>-->
1927 <v-btn 1927 <v-btn
1928 @click="submit" 1928 @click="submit"
1929 round 1929 round
1930 dark 1930 dark
1931 :loading="loading" 1931 :loading="loading"
1932 class="add-button" 1932 class="add-button"
1933 >Add</v-btn> 1933 >Add</v-btn>
1934 <!-- </v-flex> --> 1934 <!-- </v-flex> -->
1935 </v-layout> 1935 </v-layout>
1936 </v-flex> 1936 </v-flex>
1937 </v-layout> 1937 </v-layout>
1938 </v-form> 1938 </v-form>
1939 </v-flex> 1939 </v-flex>
1940 </v-stepper-content> 1940 </v-stepper-content>
1941 </v-stepper-items> 1941 </v-stepper-items>
1942 </v-stepper> 1942 </v-stepper>
1943 </v-flex> 1943 </v-flex>
1944 </v-layout> 1944 </v-layout>
1945 </v-container> 1945 </v-container>
1946 </v-card> 1946 </v-card>
1947 </v-dialog> 1947 </v-dialog>
1948 <v-snackbar 1948 <v-snackbar
1949 :timeout="timeout" 1949 :timeout="timeout"
1950 :top="y === 'top'" 1950 :top="y === 'top'"
1951 :right="x === 'right'" 1951 :right="x === 'right'"
1952 :vertical="mode === 'vertical'" 1952 :vertical="mode === 'vertical'"
1953 v-model="snackbar" 1953 v-model="snackbar"
1954 :color="color" 1954 :color="color"
1955 >{{ text }}</v-snackbar> 1955 >{{ text }}</v-snackbar>
1956 <div class="loader" v-if="showLoader"> 1956 <div class="loader" v-if="showLoader">
1957 <v-progress-circular indeterminate color="white"></v-progress-circular> 1957 <v-progress-circular indeterminate color="white"></v-progress-circular>
1958 </div> 1958 </div>
1959 </v-container> 1959 </v-container>
1960 </template> 1960 </template>
1961 1961
1962 <script> 1962 <script>
1963 import http from "@/Services/http.js"; 1963 import http from "@/Services/http.js";
1964 import moment from "moment"; 1964 import moment from "moment";
1965 import countryList from "@/script/country.js"; 1965 import countryList from "@/script/country.js";
1966 import parent from "@/script/parents.js"; 1966 import parent from "@/script/parents.js";
1967 1967
1968 export default { 1968 export default {
1969 data: () => ({ 1969 data: () => ({
1970 /* EDIT DETAILS MOBILE */ 1970 /* EDIT DETAILS MOBILE */
1971 editedStudentMobileCode: "", 1971 editedStudentMobileCode: "",
1972 /* ADD FATHER CELL */ 1972 /* ADD FATHER CELL */
1973 addedFatherCellCode: "", 1973 addedFatherCellCode: "",
1974 addedStudentMobileCode: '', 1974 addedStudentMobileCode: '',
1975 e1: true, 1975 e1: true,
1976 e2: 0, 1976 e2: 0,
1977 showParent: true, 1977 showParent: true,
1978 showNext: false, 1978 showNext: false,
1979 snackbar: false, 1979 snackbar: false,
1980 y: "top", 1980 y: "top",
1981 x: "right", 1981 x: "right",
1982 role: "", 1982 role: "",
1983 mode: "", 1983 mode: "",
1984 append: "", 1984 append: "",
1985 timeout: 3000, 1985 timeout: 3000,
1986 text: "", 1986 text: "",
1987 show: true, 1987 show: true,
1988 color: "", 1988 color: "",
1989 showSearch: false, 1989 showSearch: false,
1990 showLoader: false, 1990 showLoader: false,
1991 loading: false, 1991 loading: false,
1992 editLoading: false, 1992 editLoading: false,
1993 date: null, 1993 date: null,
1994 search: "", 1994 search: "",
1995 password: "", 1995 password: "",
1996 menu: false, 1996 menu: false,
1997 menu1: false, 1997 menu1: false,
1998 editStudentDialog: false, 1998 editStudentDialog: false,
1999 profileStudentDialog: false, 1999 profileStudentDialog: false,
2000 addStudentDialog: false, 2000 addStudentDialog: false,
2001 valid: true, 2001 valid: true,
2002 addclass: [], 2002 addclass: [],
2003 addSection: [], 2003 addSection: [],
2004 gender: ["Male", "Female"], 2004 gender: ["Male", "Female"],
2005 pagination: { 2005 pagination: {
2006 rowsPerPage: 10, 2006 rowsPerPage: 10,
2007 }, 2007 },
2008 imageData: {}, 2008 imageData: {},
2009 imageName: "", 2009 imageName: "",
2010 imageUrl: "", 2010 imageUrl: "",
2011 imageFile: "", 2011 imageFile: "",
2012 editImageName: "", 2012 editImageName: "",
2013 editImageUrl: "", 2013 editImageUrl: "",
2014 nameRules: [(v) => !!v || " Full Name is required"], 2014 nameRules: [(v) => !!v || " Full Name is required"],
2015 dateRules: [(v) => !!v || " DOB is required"], 2015 dateRules: [(v) => !!v || " DOB is required"],
2016 cityRules: [(v) => !!v || " City Name is required"], 2016 cityRules: [(v) => !!v || " City Name is required"],
2017 pincode: [(v) => !!v || " Pincode is required"], 2017 pincode: [(v) => !!v || " Pincode is required"],
2018 country: [(v) => !!v || " Country Name is required"], 2018 country: [(v) => !!v || " Country Name is required"],
2019 rollNo: [(v) => !!v || "Roll No is required"], 2019 rollNo: [(v) => !!v || "Roll No is required"],
2020 permanentAddress: [(v) => !!v || " Permanent Address is required"], 2020 permanentAddress: [(v) => !!v || " Permanent Address is required"],
2021 presentAddress: [(v) => !!v || " Present Address is required"], 2021 presentAddress: [(v) => !!v || " Present Address is required"],
2022 stateRules: [(v) => !!v || "State Name is required"], 2022 stateRules: [(v) => !!v || "State Name is required"],
2023 classRules: [(v) => !!v || " Class Name is required"], 2023 classRules: [(v) => !!v || " Class Name is required"],
2024 sectionRules: [(v) => !!v || " Section Name is required"], 2024 sectionRules: [(v) => !!v || " Section Name is required"],
2025 genderRules: [(v) => !!v || " Select Gender is required"], 2025 genderRules: [(v) => !!v || " Select Gender is required"],
2026 fatheCellNoRules: [ 2026 fatheCellNoRules: [
2027 (v) => !!v || " father Cell Number is required", 2027 (v) => !!v || " father Cell Number is required",
2028 (v) => v <= 10000000000 || "Max 10 characters is required", 2028 (v) => v <= 10000000000 || "Max 10 characters is required",
2029 ], 2029 ],
2030 password: [ 2030 password: [
2031 (v) => !!v || "Password field is Required.", 2031 (v) => !!v || "Password field is Required.",
2032 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 2032 // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8
2033 ], 2033 ],
2034 mobileNoRule: [(v) => !!v || " Mobile Number is required"], 2034 mobileNoRule: [(v) => !!v || " Mobile Number is required"],
2035 establishmentYearRules: [(v) => !!v || " Academic Year is required"], 2035 establishmentYearRules: [(v) => !!v || " Academic Year is required"],
2036 errorMessages: "", 2036 errorMessages: "",
2037 countries: [], 2037 countries: [],
2038 headers: [ 2038 headers: [
2039 { 2039 {
2040 text: "Roll No.", 2040 text: "Roll No.",
2041 align: "center", 2041 align: "center",
2042 sortable: false, 2042 sortable: false,
2043 value: "rollNo", 2043 value: "rollNo",
2044 }, 2044 },
2045 { 2045 {
2046 text: "Profile Pic", 2046 text: "Profile Pic",
2047 value: "profilePicUrl", 2047 value: "profilePicUrl",
2048 sortable: false, 2048 sortable: false,
2049 align: "center", 2049 align: "center",
2050 }, 2050 },
2051 { text: "Name", value: "name", sortable: false, align: "center" }, 2051 { text: "Name", value: "name", sortable: false, align: "center" },
2052 { text: "Gender", value: "gender", sortable: false, align: "center" }, 2052 { text: "Gender", value: "gender", sortable: false, align: "center" },
2053 { 2053 {
2054 text: "Father Name", 2054 text: "Father Name",
2055 value: "fatherName", 2055 value: "fatherName",
2056 sortable: false, 2056 sortable: false,
2057 align: "center", 2057 align: "center",
2058 }, 2058 },
2059 { 2059 {
2060 text: "Mother Name", 2060 text: "Mother Name",
2061 value: "motherName", 2061 value: "motherName",
2062 sortable: false, 2062 sortable: false,
2063 align: "center", 2063 align: "center",
2064 }, 2064 },
2065 { 2065 {
2066 text: "Academic Year", 2066 text: "Academic Year",
2067 value: "establishmentYear", 2067 value: "establishmentYear",
2068 sortable: false, 2068 sortable: false,
2069 align: "center", 2069 align: "center",
2070 }, 2070 },
2071 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 2071 // { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
2072 { 2072 {
2073 text: "Status", 2073 text: "Status",
2074 value: "status", 2074 value: "status",
2075 sortable: false, 2075 sortable: false,
2076 align: "center", 2076 align: "center",
2077 }, 2077 },
2078 { text: "Action", value: "", sortable: false, align: "center" }, 2078 { text: "Action", value: "", sortable: false, align: "center" },
2079 ], 2079 ],
2080 studentsData: [], 2080 studentsData: [],
2081 parentId: "", 2081 parentId: "",
2082 editedIndex: -1, 2082 editedIndex: -1,
2083 parentData: {}, 2083 parentData: {},
2084 addStudents: { 2084 addStudents: {
2085 role: "STUDENT", 2085 role: "STUDENT",
2086 name: "", 2086 name: "",
2087 email: "", 2087 email: "",
2088 date: "", 2088 date: "",
2089 city: "", 2089 city: "",
2090 pincode: "", 2090 pincode: "",
2091 country: "", 2091 country: "",
2092 permanentAddress: "", 2092 permanentAddress: "",
2093 presentAddress: "", 2093 presentAddress: "",
2094 mobile: "", 2094 mobile: "",
2095 state: "", 2095 state: "",
2096 gender: "", 2096 gender: "",
2097 select: "", 2097 select: "",
2098 selectSection: "", 2098 selectSection: "",
2099 bloodGroup: "", 2099 bloodGroup: "",
2100 allergies: "", 2100 allergies: "",
2101 medicalNotes: "", 2101 medicalNotes: "",
2102 height: "", 2102 height: "",
2103 weight: "", 2103 weight: "",
2104 rollNo: "", 2104 rollNo: "",
2105 establishmentYear: new Date().getFullYear(), 2105 establishmentYear: new Date().getFullYear(),
2106 }, 2106 },
2107 selectStudents: { 2107 selectStudents: {
2108 select: "", 2108 select: "",
2109 selectSection: "", 2109 selectSection: "",
2110 }, 2110 },
2111 editedItem: { 2111 editedItem: {
2112 role: "STUDENT", 2112 role: "STUDENT",
2113 name: "", 2113 name: "",
2114 email: "", 2114 email: "",
2115 dob: "", 2115 dob: "",
2116 city: "", 2116 city: "",
2117 pincode: "", 2117 pincode: "",
2118 country: "", 2118 country: "",
2119 permanentAddress: "", 2119 permanentAddress: "",
2120 presentAddress: "", 2120 presentAddress: "",
2121 mobile: "", 2121 mobile: "",
2122 state: "", 2122 state: "",
2123 gender: "", 2123 gender: "",
2124 select: "", 2124 select: "",
2125 selectSection: "", 2125 selectSection: "",
2126 bloodGroup: "", 2126 bloodGroup: "",
2127 allergies: "", 2127 allergies: "",
2128 medicalNotes: "", 2128 medicalNotes: "",
2129 height: "", 2129 height: "",
2130 weight: "", 2130 weight: "",
2131 rollNo: "", 2131 rollNo: "",
2132 establishmentYear: new Date().getFullYear(), 2132 establishmentYear: new Date().getFullYear(),
2133 }, 2133 },
2134 isFatherCellExists: false, 2134 isFatherCellExists: false,
2135 }), 2135 }),
2136 watch: { 2136 watch: {
2137 menu(val) { 2137 menu(val) {
2138 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2138 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2139 }, 2139 },
2140 menu1(val) { 2140 menu1(val) {
2141 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 2141 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
2142 }, 2142 },
2143 addStudentDialog: function (val) { 2143 addStudentDialog: function (val) {
2144 if (!val) { 2144 if (!val) {
2145 this.parentData = []; 2145 this.parentData = [];
2146 this.addStudents = []; 2146 this.addStudents = [];
2147 this.imageName = ""; 2147 this.imageName = "";
2148 this.imageFile = ""; 2148 this.imageFile = "";
2149 this.imageUrl = ""; 2149 this.imageUrl = "";
2150 this.e2 = 1; 2150 this.e2 = 1;
2151 } 2151 }
2152 }, 2152 },
2153 }, 2153 },
2154 methods: { 2154 methods: {
2155 editStudentMobileCode({ name, iso2, dialCode }) { 2155 editStudentMobileCode({ name, iso2, dialCode }) {
2156 // console.log("Edit father cell", name,iso2); 2156 // console.log("Edit father cell", name,iso2);
2157 this.editedStudentMobileCode = iso2; 2157 this.editedStudentMobileCode = dialCode;
2158 }, 2158 },
2159 addFatherCellCode({ name, iso2, dialCode }) { 2159 addFatherCellCode({ name, iso2, dialCode }) {
2160 this.addedFatherCellCode = iso2; 2160 this.addedFatherCellCode = dialCode;
2161 }, 2161 },
2162 addStudentMobileCode({ name, iso2, dialCode }){ 2162 addStudentMobileCode({ name, iso2, dialCode }){
2163 this.addedStudentMobileCode =iso2; 2163 this.addedStudentMobileCode =dialCode;
2164 }, 2164 },
2165 onSelect({ name, iso2, dialCode }) { 2165 onSelect({ name, iso2, dialCode }) {
2166 // console.log("country codes", name, iso2, dialCode); 2166 // console.log("country codes", name, iso2, dialCode);
2167 }, 2167 },
2168 findStudents() { 2168 findStudents() {
2169 this.showLoader = true; 2169 this.showLoader = true;
2170 http() 2170 http()
2171 .get("/getStudentWithClass", { 2171 .get("/getStudentWithClass", {
2172 params: { 2172 params: {
2173 classId: this.selectStudents.select, 2173 classId: this.selectStudents.select,
2174 sectionId: this.selectStudents.selectSection, 2174 sectionId: this.selectStudents.selectSection,
2175 }, 2175 },
2176 }) 2176 })
2177 .then((response) => { 2177 .then((response) => {
2178 this.studentsData = response.data.data; 2178 this.studentsData = response.data.data;
2179 this.showLoader = false; 2179 this.showLoader = false;
2180 }) 2180 })
2181 .catch((err) => { 2181 .catch((err) => {
2182 // console.log("err====>", err); 2182 // console.log("err====>", err);
2183 this.showLoader = false; 2183 this.showLoader = false;
2184 this.snackbar = true; 2184 this.snackbar = true;
2185 this.color = "error"; 2185 this.color = "error";
2186 this.text = error.response.data.message; 2186 this.text = error.response.data.message;
2187 }); 2187 });
2188 }, 2188 },
2189 getSections(_id) { 2189 getSections(_id) {
2190 var token = this.$store.state.token; 2190 var token = this.$store.state.token;
2191 this.showLoader = true; 2191 this.showLoader = true;
2192 this.studentsData = []; 2192 this.studentsData = [];
2193 http() 2193 http()
2194 .get( 2194 .get(
2195 "/getSectionsList", 2195 "/getSectionsList",
2196 { params: { classId: _id } }, 2196 { params: { classId: _id } },
2197 { 2197 {
2198 headers: { Authorization: "Bearer " + token }, 2198 headers: { Authorization: "Bearer " + token },
2199 } 2199 }
2200 ) 2200 )
2201 .then((response) => { 2201 .then((response) => {
2202 this.addSection = response.data.data; 2202 this.addSection = response.data.data;
2203 this.showLoader = false; 2203 this.showLoader = false;
2204 }) 2204 })
2205 .catch((err) => { 2205 .catch((err) => {
2206 this.showLoader = false; 2206 this.showLoader = false;
2207 }); 2207 });
2208 }, 2208 },
2209 getSection(_id) { 2209 getSection(_id) {
2210 var token = this.$store.state.token; 2210 var token = this.$store.state.token;
2211 this.showLoader = true; 2211 this.showLoader = true;
2212 http() 2212 http()
2213 .get( 2213 .get(
2214 "/getSectionsList", 2214 "/getSectionsList",
2215 { params: { classId: _id } }, 2215 { params: { classId: _id } },
2216 { 2216 {
2217 headers: { Authorization: "Bearer " + token }, 2217 headers: { Authorization: "Bearer " + token },
2218 } 2218 }
2219 ) 2219 )
2220 .then((response) => { 2220 .then((response) => {
2221 this.addSection = response.data.data; 2221 this.addSection = response.data.data;
2222 this.showLoader = false; 2222 this.showLoader = false;
2223 }) 2223 })
2224 .catch((err) => { 2224 .catch((err) => {
2225 this.showLoader = false; 2225 this.showLoader = false;
2226 }); 2226 });
2227 }, 2227 },
2228 pickFile() { 2228 pickFile() {
2229 this.$refs.image.click(); 2229 this.$refs.image.click();
2230 }, 2230 },
2231 pickEditFile() { 2231 pickEditFile() {
2232 this.$refs.editDataImage.click(); 2232 this.$refs.editDataImage.click();
2233 }, 2233 },
2234 dates: function (date) { 2234 dates: function (date) {
2235 return moment(date).format("MMMM DD, YYYY"); 2235 return moment(date).format("MMMM DD, YYYY");
2236 return date; 2236 return date;
2237 }, 2237 },
2238 onFilePicked(e) { 2238 onFilePicked(e) {
2239 // console.log(e) 2239 // console.log(e)
2240 const files = e.target.files; 2240 const files = e.target.files;
2241 this.imageData.upload = e.target.files[0]; 2241 this.imageData.upload = e.target.files[0];
2242 if (files[0] !== undefined) { 2242 if (files[0] !== undefined) {
2243 this.imageName = files[0].name; 2243 this.imageName = files[0].name;
2244 if (this.imageName.lastIndexOf(".") <= 0) { 2244 if (this.imageName.lastIndexOf(".") <= 0) {
2245 return; 2245 return;
2246 } 2246 }
2247 const fr = new FileReader(); 2247 const fr = new FileReader();
2248 fr.readAsDataURL(files[0]); 2248 fr.readAsDataURL(files[0]);
2249 fr.addEventListener("load", () => { 2249 fr.addEventListener("load", () => {
2250 this.imageUrl = fr.result; 2250 this.imageUrl = fr.result;
2251 this.imageFile = files[0]; // this is an image file that can be sent to server... 2251 this.imageFile = files[0]; // this is an image file that can be sent to server...
2252 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 2252 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
2253 }); 2253 });
2254 } else { 2254 } else {
2255 this.imageName = ""; 2255 this.imageName = "";
2256 this.imageFile = ""; 2256 this.imageFile = "";
2257 this.imageUrl = ""; 2257 this.imageUrl = "";
2258 } 2258 }
2259 }, 2259 },
2260 onEditFilePicked(e) { 2260 onEditFilePicked(e) {
2261 // console.log(e); 2261 // console.log(e);
2262 const files = e.target.files; 2262 const files = e.target.files;
2263 if (files[0] !== undefined) { 2263 if (files[0] !== undefined) {
2264 this.editImageName = files[0].name; 2264 this.editImageName = files[0].name;
2265 // console.log("this.editImageName", this.editImageName); 2265 // console.log("this.editImageName", this.editImageName);
2266 2266
2267 if (this.editImageName.lastIndexOf(".") <= 0) { 2267 if (this.editImageName.lastIndexOf(".") <= 0) {
2268 return; 2268 return;
2269 } 2269 }
2270 const fr = new FileReader(); 2270 const fr = new FileReader();
2271 fr.readAsDataURL(files[0]); 2271 fr.readAsDataURL(files[0]);
2272 fr.addEventListener("load", () => { 2272 fr.addEventListener("load", () => {
2273 this.editImageUrl = fr.result; 2273 this.editImageUrl = fr.result;
2274 this.editiImageFile = files[0]; // this is an image file that can be sent to server... 2274 this.editiImageFile = files[0]; // this is an image file that can be sent to server...
2275 }); 2275 });
2276 } else { 2276 } else {
2277 this.editImageName = ""; 2277 this.editImageName = "";
2278 this.editiImageFile = ""; 2278 this.editiImageFile = "";
2279 } 2279 }
2280 }, 2280 },
2281 editItem(item) { 2281 editItem(item) {
2282 this.editedIndex = this.studentsData.indexOf(item); 2282 this.editedIndex = this.studentsData.indexOf(item);
2283 this.editedItem = Object.assign({}, item); 2283 this.editedItem = Object.assign({}, item);
2284 this.editedItem.fatherName = item.parentId.fatherName; 2284 this.editedItem.fatherName = item.parentId.fatherName;
2285 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2285 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2286 this.editedItem.motherName = item.parentId.motherName; 2286 this.editedItem.motherName = item.parentId.motherName;
2287 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2287 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2288 this.editedItem.dob = 2288 this.editedItem.dob =
2289 this.editedItem.dob != undefined 2289 this.editedItem.dob != undefined
2290 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 2290 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
2291 : (this.editedItem.dob = ""); 2291 : (this.editedItem.dob = "");
2292 this.editStudentDialog = true; 2292 this.editStudentDialog = true;
2293 }, 2293 },
2294 profile(item) { 2294 profile(item) {
2295 this.editedIndex = this.studentsData.indexOf(item); 2295 this.editedIndex = this.studentsData.indexOf(item);
2296 this.editedItem = Object.assign({}, item); 2296 this.editedItem = Object.assign({}, item);
2297 this.editedItem.fatherName = item.parentId.fatherName; 2297 this.editedItem.fatherName = item.parentId.fatherName;
2298 this.editedItem.fatherCellNo = item.parentId.fatherCellNo; 2298 this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
2299 this.editedItem.motherName = item.parentId.motherName; 2299 this.editedItem.motherName = item.parentId.motherName;
2300 this.editedItem.motherCellNo = item.parentId.motherCellNo; 2300 this.editedItem.motherCellNo = item.parentId.motherCellNo;
2301 2301
2302 this.profileStudentDialog = true; 2302 this.profileStudentDialog = true;
2303 }, 2303 },
2304 deleteItem(item) { 2304 deleteItem(item) {
2305 let deleteStudent = { 2305 let deleteStudent = {
2306 studentId: item._id, 2306 studentId: item._id,
2307 }; 2307 };
2308 http() 2308 http()
2309 .delete( 2309 .delete(
2310 "/deleteStudent", 2310 "/deleteStudent",
2311 confirm("Are you sure you want to delete this?") && { 2311 confirm("Are you sure you want to delete this?") && {
2312 params: deleteStudent, 2312 params: deleteStudent,
2313 } 2313 }
2314 ) 2314 )
2315 .then((response) => { 2315 .then((response) => {
2316 this.snackbar = true; 2316 this.snackbar = true;
2317 this.text = response.data.message; 2317 this.text = response.data.message;
2318 this.color = "green"; 2318 this.color = "green";
2319 this.findStudents(); 2319 this.findStudents();
2320 }) 2320 })
2321 .catch((error) => { 2321 .catch((error) => {
2322 this.snackbar = true; 2322 this.snackbar = true;
2323 this.text = error.response.data.message; 2323 this.text = error.response.data.message;
2324 this.color = "error"; 2324 this.color = "error";
2325 }); 2325 });
2326 }, 2326 },
2327 close() { 2327 close() {
2328 this.editStudentDialog = false; 2328 this.editStudentDialog = false;
2329 }, 2329 },
2330 closeStudentProfile() { 2330 closeStudentProfile() {
2331 this.profileStudentDialog = false; 2331 this.profileStudentDialog = false;
2332 }, 2332 },
2333 copyData() { 2333 copyData() {
2334 this.addStudents.permanentAddress = this.addStudents.presentAddress; 2334 this.addStudents.permanentAddress = this.addStudents.presentAddress;
2335 }, 2335 },
2336 submit() { 2336 submit() {
2337 if (this.$refs.form.validate()) { 2337 if (this.$refs.form.validate()) {
2338 let addStudent = { 2338 let addStudent = {
2339 parentId: this.parentId, 2339 parentId: this.parentId,
2340 name: this.addStudents.name, 2340 name: this.addStudents.name,
2341 email: this.addStudents.email, 2341 email: this.addStudents.email,
2342 role: this.addStudents.role, 2342 role: this.addStudents.role,
2343 dob: this.addStudents.date, 2343 dob: this.addStudents.date,
2344 city: this.addStudents.city, 2344 city: this.addStudents.city,
2345 pincode: this.addStudents.pincode, 2345 pincode: this.addStudents.pincode,
2346 country: this.addStudents.country, 2346 country: this.addStudents.country,
2347 permanentAddress: this.addStudents.permanentAddress, 2347 permanentAddress: this.addStudents.permanentAddress,
2348 presentAddress: this.addStudents.presentAddress, 2348 presentAddress: this.addStudents.presentAddress,
2349 countryCode: this.addedStudentMobileCode, 2349 countryCode: this.addedStudentMobileCode,
2350 mobile: this.addStudents.mobile, 2350 mobile: this.addStudents.mobile,
2351 state: this.addStudents.state, 2351 state: this.addStudents.state,
2352 gender: this.addStudents.gender, 2352 gender: this.addStudents.gender,
2353 establishmentYear: this.addStudents.establishmentYear, 2353 establishmentYear: this.addStudents.establishmentYear,
2354 classId: this.addStudents.select, 2354 classId: this.addStudents.select,
2355 sectionId: this.addStudents.selectSection, 2355 sectionId: this.addStudents.selectSection,
2356 bloodGroup: this.addStudents.bloodGroup, 2356 bloodGroup: this.addStudents.bloodGroup,
2357 medicalNotes: this.addStudents.medicalNotes, 2357 medicalNotes: this.addStudents.medicalNotes,
2358 height: this.addStudents.height, 2358 height: this.addStudents.height,
2359 weight: this.addStudents.weight, 2359 weight: this.addStudents.weight,
2360 rollNo: this.addStudents.rollNo, 2360 rollNo: this.addStudents.rollNo,
2361 }; 2361 };
2362 if (this.imageUrl) { 2362 if (this.imageUrl) {
2363 var str = this.imageUrl; 2363 var str = this.imageUrl;
2364 const [baseUrl, imageUrl] = str.split(/,/); 2364 const [baseUrl, imageUrl] = str.split(/,/);
2365 addStudent.upload = imageUrl; 2365 addStudent.upload = imageUrl;
2366 } 2366 }
2367 this.loading = true; 2367 this.loading = true;
2368 http() 2368 http()
2369 .post("/createStudent", addStudent) 2369 .post("/createStudent", addStudent)
2370 .then((response) => { 2370 .then((response) => {
2371 this.snackbar = true; 2371 this.snackbar = true;
2372 this.text = "New Student added successfully"; 2372 this.text = "New Student added successfully";
2373 this.color = "green"; 2373 this.color = "green";
2374 this.addStudentDialog = false; 2374 this.addStudentDialog = false;
2375 this.$refs.parentForm.reset(); 2375 this.$refs.parentForm.reset();
2376 this.$refs.parentFormLgScr.reset(); 2376 this.$refs.parentFormLgScr.reset();
2377 this.$refs.form.reset(); 2377 this.$refs.form.reset();
2378 this.e2 = 1; 2378 this.e2 = 1;
2379 // this.clear(); 2379 // this.clear();
2380 // this.clearParents(); 2380 // this.clearParents();
2381 this.loading = false; 2381 this.loading = false;
2382 }) 2382 })
2383 .catch((error) => { 2383 .catch((error) => {
2384 this.snackbar = true; 2384 this.snackbar = true;
2385 this.text = error.response.data.message; 2385 this.text = error.response.data.message;
2386 this.color = "error"; 2386 this.color = "error";
2387 this.loading = false; 2387 this.loading = false;
2388 }); 2388 });
2389 } 2389 }
2390 }, 2390 },
2391 clear() { 2391 clear() {
2392 this.$refs.form.reset(); 2392 this.$refs.form.reset();
2393 this.imageUrl = ""; 2393 this.imageUrl = "";
2394 }, 2394 },
2395 clearParents() { 2395 clearParents() {
2396 this.$refs.parentForm.reset(); 2396 this.$refs.parentForm.reset();
2397 }, 2397 },
2398 save() { 2398 save() {
2399 let editStudent = { 2399 let editStudent = {
2400 studentId: this.editedItem._id, 2400 studentId: this.editedItem._id,
2401 name: this.editedItem.name, 2401 name: this.editedItem.name,
2402 email: this.editedItem.email, 2402 email: this.editedItem.email,
2403 role: this.editedItem.role, 2403 role: this.editedItem.role,
2404 dob: this.editedItem.dob, 2404 dob: this.editedItem.dob,
2405 city: this.editedItem.city, 2405 city: this.editedItem.city,
2406 pincode: this.editedItem.pincode, 2406 pincode: this.editedItem.pincode,
2407 country: this.editedItem.country, 2407 country: this.editedItem.country,
2408 permanentAddress: this.editedItem.permanentAddress, 2408 permanentAddress: this.editedItem.permanentAddress,
2409 presentAddress: this.editedItem.presentAddress, 2409 presentAddress: this.editedItem.presentAddress,
2410 mobile: this.editedItem.mobile, 2410 mobile: this.editedItem.mobile,
2411 state: this.editedItem.state, 2411 state: this.editedItem.state,
2412 gender: this.editedItem.gender, 2412 gender: this.editedItem.gender,
2413 establishmentYear: this.editedItem.establishmentYear, 2413 establishmentYear: this.editedItem.establishmentYear,
2414 classId: this.editedItem.select, 2414 classId: this.editedItem.select,
2415 sectionId: this.editedItem.selectSection, 2415 sectionId: this.editedItem.selectSection,
2416 bloodGroup: this.editedItem.bloodGroup, 2416 bloodGroup: this.editedItem.bloodGroup,
2417 medicalNotes: this.editedItem.medicalNotes, 2417 medicalNotes: this.editedItem.medicalNotes,
2418 height: this.editedItem.height, 2418 height: this.editedItem.height,
2419 weight: this.editedItem.weight, 2419 weight: this.editedItem.weight,
2420 rollNo: this.editedItem.rollNo, 2420 rollNo: this.editedItem.rollNo,
2421 }; 2421 };
2422 if (this.editImageUrl) { 2422 if (this.editImageUrl) {
2423 var str = this.editImageUrl; 2423 var str = this.editImageUrl;
2424 const [baseUrl, editImageUrl] = str.split(/,/); 2424 const [baseUrl, editImageUrl] = str.split(/,/);
2425 editStudent.upload = editImageUrl; 2425 editStudent.upload = editImageUrl;
2426 } 2426 }
2427 this.editLoading = true; 2427 this.editLoading = true;
2428 http() 2428 http()
2429 .put("/updateStudent", editStudent) 2429 .put("/updateStudent", editStudent)
2430 .then((response) => { 2430 .then((response) => {
2431 this.snackbar = true; 2431 this.snackbar = true;
2432 this.text = response.data.message; 2432 this.text = response.data.message;
2433 this.color = "green"; 2433 this.color = "green";
2434 this.imageUrl = ""; 2434 this.imageUrl = "";
2435 this.findStudents(); 2435 this.findStudents();
2436 this.close(); 2436 this.close();
2437 this.editLoading = false; 2437 this.editLoading = false;
2438 }) 2438 })
2439 .catch((error) => { 2439 .catch((error) => {
2440 this.snackbar = true; 2440 this.snackbar = true;
2441 this.text = error.response.data.statusText; 2441 this.text = error.response.data.statusText;
2442 this.color = "error"; 2442 this.color = "error";
2443 this.editLoading = false; 2443 this.editLoading = false;
2444 }); 2444 });
2445 }, 2445 },
2446 submitParentDetails() { 2446 submitParentDetails() {
2447 if (this.$refs.parentForm.validate()) { 2447 if (this.$refs.parentForm.validate()) {
2448 this.parentData.fatherCellNo = this.parentData.fatherCellNo; 2448 this.parentData.fatherCellNo = this.parentData.fatherCellNo;
2449 this.parentData.motherCellNo = this.parentData.motherCellNo; 2449 this.parentData.motherCellNo = this.parentData.motherCellNo;
2450 let addparentDetails = { 2450 let addparentDetails = {
2451 email: this.parentData.email, 2451 email: this.parentData.email,
2452 fatherName: this.parentData.fatherName, 2452 fatherName: this.parentData.fatherName,
2453 countryCode: this.addedFatherCellCode, 2453 countryCode: this.addedFatherCellCode,
2454 fatherCellNo: this.parentData.fatherCellNo, 2454 fatherCellNo: this.parentData.fatherCellNo,
2455 motherName: this.parentData.motherName, 2455 motherName: this.parentData.motherName,
2456 motherCellNo: this.parentData.motherCellNo, 2456 motherCellNo: this.parentData.motherCellNo,
2457 fatherProfession: this.parentData.fatherProfession, 2457 fatherProfession: this.parentData.fatherProfession,
2458 motherProfession: this.parentData.motherProfession, 2458 motherProfession: this.parentData.motherProfession,
2459 password: this.parentData.password, 2459 password: this.parentData.password,
2460 role: "PARENT", 2460 role: "PARENT",
2461 }; 2461 };
2462 this.loading = true; 2462 this.loading = true;
2463 http() 2463 http()
2464 .post("/createParent", addparentDetails) 2464 .post("/createParent", addparentDetails)
2465 .then((response) => { 2465 .then((response) => {
2466 this.parentId = response.data.data.id; 2466 this.parentId = response.data.data.id;
2467 this.e2 = 2; 2467 this.e2 = 2;
2468 this.snackbar = true; 2468 this.snackbar = true;
2469 this.text = response.data.message; 2469 this.text = response.data.message;
2470 this.color = "green"; 2470 this.color = "green";
2471 // this.getStudentList(); 2471 // this.getStudentList();
2472 this.clear(); 2472 this.clear();
2473 this.loading = false; 2473 this.loading = false;
2474 }) 2474 })
2475 .catch((error) => { 2475 .catch((error) => {
2476 this.snackbar = true; 2476 this.snackbar = true;
2477 this.text = error.response.data.message; 2477 this.text = error.response.data.message;
2478 this.color = "error"; 2478 this.color = "error";
2479 if (error.response.data.statusText) { 2479 if (error.response.data.statusText) {
2480 this.text = error.response.data.statusText; 2480 this.text = error.response.data.statusText;
2481 } 2481 }
2482 this.loading = false; 2482 this.loading = false;
2483 }); 2483 });
2484 } 2484 }
2485 }, 2485 },
2486 getParentDetails() { 2486 getParentDetails() {
2487 if (this.parentData.fatherCellNo.length > 9) { 2487 if (this.parentData.fatherCellNo.length > 9) {
2488 this.showLoader = true; 2488 this.showLoader = true;
2489 this.isFatherCellExists = false; 2489 this.isFatherCellExists = false;
2490 http() 2490 http()
2491 .get("getParticularParent", { 2491 .get("getParticularParent", {
2492 params: { fatherCellNo: this.parentData.fatherCellNo }, 2492 params: { fatherCellNo: this.parentData.fatherCellNo },
2493 headers: { 2493 headers: {
2494 Authorization: "Bearer " + this.$store.state.token, 2494 Authorization: "Bearer " + this.$store.state.token,
2495 }, 2495 },
2496 }) 2496 })
2497 .then((response) => { 2497 .then((response) => {
2498 this.showNext = true; 2498 this.showNext = true;
2499 this.showParent = false; 2499 this.showParent = false;
2500 this.parentData = response.data.data; 2500 this.parentData = response.data.data;
2501 this.parentId = response.data.data._id; 2501 this.parentId = response.data.data._id;
2502 this.showLoader = false; 2502 this.showLoader = false;
2503 this.isFatherCellExists = true; 2503 this.isFatherCellExists = true;
2504 }) 2504 })
2505 .catch((error) => { 2505 .catch((error) => {
2506 // console.log("err====>", error.response.data.message); 2506 // console.log("err====>", error.response.data.message);
2507 this.text = error.response.data.message; 2507 this.text = error.response.data.message;
2508 this.snackbar = true; 2508 this.snackbar = true;
2509 this.color = "error"; 2509 this.color = "error";
2510 if (this.text === "Data not found!") { 2510 if (this.text === "Data not found!") {
2511 this.showNext = false; 2511 this.showNext = false;
2512 this.showParent = true; 2512 this.showParent = true;
2513 this.parentData.email = ""; 2513 this.parentData.email = "";
2514 this.parentData.fatherName = ""; 2514 this.parentData.fatherName = "";
2515 this.parentData.motherName = ""; 2515 this.parentData.motherName = "";
2516 this.parentData.motherCellNo = ""; 2516 this.parentData.motherCellNo = "";
2517 this.parentData.fatherProfession = ""; 2517 this.parentData.fatherProfession = "";
2518 this.parentData.motherProfession = ""; 2518 this.parentData.motherProfession = "";
2519 this.parentData.password = ""; 2519 this.parentData.password = "";
2520 } 2520 }
2521 this.showLoader = false; 2521 this.showLoader = false;
2522 }); 2522 });
2523 } 2523 }
2524 }, 2524 },
2525 suspendStudentStatus(status, id) { 2525 suspendStudentStatus(status, id) {
2526 let suspendStudentData = { 2526 let suspendStudentData = {
2527 studentId: id, 2527 studentId: id,
2528 status: status, 2528 status: status,
2529 }; 2529 };
2530 http() 2530 http()
2531 .put("/suspendStudentAccount", suspendStudentData) 2531 .put("/suspendStudentAccount", suspendStudentData)
2532 .then((response) => { 2532 .then((response) => {
2533 this.findStudents(); 2533 this.findStudents();
2534 this.text = response.data.message; 2534 this.text = response.data.message;
2535 this.color = "green"; 2535 this.color = "green";
2536 this.snackbar = true; 2536 this.snackbar = true;
2537 }) 2537 })
2538 .catch((error) => { 2538 .catch((error) => {
2539 this.snackbar = true; 2539 this.snackbar = true;
2540 this.color = "error"; 2540 this.color = "error";
2541 this.text = error.response.data.message; 2541 this.text = error.response.data.message;
2542 }); 2542 });
2543 }, 2543 },
2544 displaySearch() { 2544 displaySearch() {
2545 (this.show = false), (this.showSearch = true); 2545 (this.show = false), (this.showSearch = true);
2546 }, 2546 },
2547 closeSearch() { 2547 closeSearch() {
2548 this.showSearch = false; 2548 this.showSearch = false;
2549 this.show = true; 2549 this.show = true;
2550 this.search = ""; 2550 this.search = "";
2551 }, 2551 },
2552 }, 2552 },
2553 mounted() { 2553 mounted() {
2554 const getCountryList = countryList(); 2554 const getCountryList = countryList();
2555 this.role = this.$store.state.role; 2555 this.role = this.$store.state.role;
2556 this.countries = getCountryList; 2556 this.countries = getCountryList;
2557 var token = this.$store.state.token; 2557 var token = this.$store.state.token;
2558 http() 2558 http()
2559 .get("/getClassesList", { 2559 .get("/getClassesList", {
2560 headers: { Authorization: "Bearer " + token }, 2560 headers: { Authorization: "Bearer " + token },
2561 }) 2561 })
2562 .then((response) => { 2562 .then((response) => {
2563 this.addclass = response.data.data; 2563 this.addclass = response.data.data;
2564 }) 2564 })
2565 .catch((error) => { 2565 .catch((error) => {
2566 this.showLoader = false; 2566 this.showLoader = false;
2567 if (error.response.status === 401) { 2567 if (error.response.status === 401) {
2568 this.$router.replace({ path: "/" }); 2568 this.$router.replace({ path: "/" });
2569 this.$store.dispatch("setToken", null); 2569 this.$store.dispatch("setToken", null);
2570 this.$store.dispatch("Id", null); 2570 this.$store.dispatch("Id", null);
2571 this.$store.dispatch("Role", null); 2571 this.$store.dispatch("Role", null);
2572 } 2572 }
2573 }); 2573 });
2574 }, 2574 },
2575 }; 2575 };
2576 </script> 2576 </script>
2577 <style scoped> 2577 <style scoped>
2578 .active { 2578 .active {
2579 background-color: gray; 2579 background-color: gray;
2580 color: white !important; 2580 color: white !important;
2581 } 2581 }
2582 .activebtn { 2582 .activebtn {
2583 color: black !important; 2583 color: black !important;
2584 } 2584 }
2585 </style> 2585 </style>
src/pages/Teachers/teachers.vue
Diff comments   View file @d0ffa80
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT TEACHERS DETAILS ****** --> 3 <!-- ****** EDIT TEACHERS DETAILS ****** -->
4 <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent> 4 <v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable persistent>
5 <v-card flat class="card-style" dark> 5 <v-card flat class="card-style" dark>
6 <v-card-text> 6 <v-card-text>
7 <v-layout> 7 <v-layout>
8 <v-flex xs12> 8 <v-flex xs12>
9 <label class="title text-xs-center">Edit Teacher Details</label> 9 <label class="title text-xs-center">Edit Teacher Details</label>
10 <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon> 10 <v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <v-container fluid> 13 <v-container fluid>
14 <v-layout> 14 <v-layout>
15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 15 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
16 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl"> 16 <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
17 <img src="/static/icon/user.png" /> 17 <img src="/static/icon/user.png" />
18 </v-avatar> 18 </v-avatar>
19 <img 19 <img
20 :src="editedItem.profilePicUrl" 20 :src="editedItem.profilePicUrl"
21 v-else-if="editedItem.profilePicUrl && !imageUrl" 21 v-else-if="editedItem.profilePicUrl && !imageUrl"
22 height="150" 22 height="150"
23 style="border-radius:50%; width:150px" 23 style="border-radius:50%; width:150px"
24 /> 24 />
25 <img 25 <img
26 v-if="imageUrl" 26 v-if="imageUrl"
27 :src="imageUrl" 27 :src="imageUrl"
28 height="150" 28 height="150"
29 style="border-radius:50%; width:150px" 29 style="border-radius:50%; width:150px"
30 /> 30 />
31 <input 31 <input
32 type="file" 32 type="file"
33 style="display:none" 33 style="display:none"
34 ref="image" 34 ref="image"
35 accept="image/*" 35 accept="image/*"
36 @change="onFilePicked" 36 @change="onFilePicked"
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 sm6> 41 <v-flex xs12 sm6>
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">Full Name:</label> 44 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 45 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 class="ml-3"> 47 <v-flex xs8 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.name" 49 v-model="editedItem.name"
50 placeholder="fill your full Name" 50 placeholder="fill your full Name"
51 type="text" 51 type="text"
52 required 52 required
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm6> 57 <v-flex xs12 sm6>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 sm4 class="pt-4 subheading"> 59 <v-flex xs4 sm4 class="pt-4 subheading">
60 <label class="right">Email ID:</label> 60 <label class="right">Email ID:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm8 class="ml-3"> 62 <v-flex xs8 sm8 class="ml-3">
63 <v-text-field 63 <v-text-field
64 placeholder="fill your email" 64 placeholder="fill your email"
65 v-model="editedItem.email" 65 v-model="editedItem.email"
66 type="text" 66 type="text"
67 required 67 required
68 ></v-text-field> 68 ></v-text-field>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout wrap> 73 <v-layout wrap>
74 <v-flex xs12 sm6> 74 <v-flex xs12 sm6>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 77 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
78 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 78 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-menu 81 <v-menu
82 ref="menu" 82 ref="menu"
83 :close-on-content-click="false" 83 :close-on-content-click="false"
84 v-model="menu2" 84 v-model="menu2"
85 :nudge-right="40" 85 :nudge-right="40"
86 lazy 86 lazy
87 transition="scale-transition" 87 transition="scale-transition"
88 offset-y 88 offset-y
89 full-width 89 full-width
90 min-width="290px" 90 min-width="290px"
91 > 91 >
92 <v-text-field 92 <v-text-field
93 slot="activator" 93 slot="activator"
94 v-model="editedItem.dob" 94 v-model="editedItem.dob"
95 placeholder="Select date" 95 placeholder="Select date"
96 ></v-text-field> 96 ></v-text-field>
97 <v-date-picker 97 <v-date-picker
98 ref="picker" 98 ref="picker"
99 v-model="editedItem.dob" 99 v-model="editedItem.dob"
100 :max="new Date().toISOString().substr(0, 10)" 100 :max="new Date().toISOString().substr(0, 10)"
101 min="1950-01-01" 101 min="1950-01-01"
102 @input="menu2 = false" 102 @input="menu2 = false"
103 ></v-date-picker> 103 ></v-date-picker>
104 </v-menu> 104 </v-menu>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 <v-flex xs12 sm6> 108 <v-flex xs12 sm6>
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading"> 110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">City:</label> 111 <label class="right">City:</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs8 class="ml-3"> 113 <v-flex xs8 class="ml-3">
114 <v-text-field 114 <v-text-field
115 v-model="editedItem.city" 115 v-model="editedItem.city"
116 placeholder="fill your City Name" 116 placeholder="fill your City Name"
117 type="text" 117 type="text"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <v-layout wrap> 124 <v-layout wrap>
125 <v-flex xs12 sm6> 125 <v-flex xs12 sm6>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">State:</label> 128 <label class="right">State:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs8 class="ml-3"> 130 <v-flex xs8 class="ml-3">
131 <v-text-field 131 <v-text-field
132 v-model="editedItem.state" 132 v-model="editedItem.state"
133 placeholder="fill your State Name" 133 placeholder="fill your State Name"
134 type="text" 134 type="text"
135 required 135 required
136 ></v-text-field> 136 ></v-text-field>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-flex xs12 sm6> 140 <v-flex xs12 sm6>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right">PinCode:</label> 143 <label class="right">PinCode:</label>
144 </v-flex> 144 </v-flex>
145 <v-flex xs8 class="ml-3"> 145 <v-flex xs8 class="ml-3">
146 <v-text-field 146 <v-text-field
147 v-model="editedItem.pincode" 147 v-model="editedItem.pincode"
148 placeholder="fill your pincode" 148 placeholder="fill your pincode"
149 type="number" 149 type="number"
150 required 150 required
151 ></v-text-field> 151 ></v-text-field>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 <v-layout wrap> 156 <v-layout wrap>
157 <!-- EDIT DETAILS MOBILE NUMBER --> 157 <!-- EDIT DETAILS MOBILE NUMBER -->
158 <v-flex xs12 sm6> 158 <v-flex xs12 sm6>
159 <v-layout> 159 <v-layout>
160 <v-flex xs4 class="pt-4 subheading"> 160 <v-flex xs4 class="pt-4 subheading">
161 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 161 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
162 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 162 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs8 class="ml-3"> 164 <v-flex xs8 class="ml-3">
165 <v-layout row wrap> 165 <v-layout row wrap>
166 <v-flex xs3 class="mt-3"> 166 <v-flex xs3 class="mt-3">
167 <vue-country-code @onSelect="editMobileCode" class="black--text"></vue-country-code> 167 <vue-country-code @onSelect="editMobileCode" class="black--text"></vue-country-code>
168 </v-flex> 168 </v-flex>
169 <v-flex xs9> 169 <v-flex xs9>
170 <v-text-field 170 <v-text-field
171 v-model="editedItem.mobileNo" 171 v-model="editedItem.mobileNo"
172 placeholder="Fill MobileNo" 172 placeholder="Fill MobileNo"
173 type="number" 173 type="number"
174 required 174 required
175 ></v-text-field> 175 ></v-text-field>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </v-flex> 180 </v-flex>
181 <v-flex xs12 sm6> 181 <v-flex xs12 sm6>
182 <v-layout> 182 <v-layout>
183 <v-flex xs4 class="pt-4 subheading"> 183 <v-flex xs4 class="pt-4 subheading">
184 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 184 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 185 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
186 </v-flex> 186 </v-flex>
187 <v-flex xs8 sm8 class="ml-3"> 187 <v-flex xs8 sm8 class="ml-3">
188 <v-autocomplete 188 <v-autocomplete
189 v-model="editedItem.country" 189 v-model="editedItem.country"
190 :items="countries" 190 :items="countries"
191 placeholder="Select Country Name" 191 placeholder="Select Country Name"
192 required 192 required
193 ></v-autocomplete> 193 ></v-autocomplete>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 <v-layout wrap> 198 <v-layout wrap>
199 <v-flex xs12 sm6> 199 <v-flex xs12 sm6>
200 <v-layout> 200 <v-layout>
201 <v-flex xs4 class="pt-4 subheading"> 201 <v-flex xs4 class="pt-4 subheading">
202 <label class="right">Join Date:</label> 202 <label class="right">Join Date:</label>
203 </v-flex> 203 </v-flex>
204 <v-flex xs8 sm8 class="ml-3"> 204 <v-flex xs8 sm8 class="ml-3">
205 <v-menu 205 <v-menu
206 ref="menu" 206 ref="menu"
207 :close-on-content-click="false" 207 :close-on-content-click="false"
208 v-model="menu3" 208 v-model="menu3"
209 :nudge-right="40" 209 :nudge-right="40"
210 lazy 210 lazy
211 transition="scale-transition" 211 transition="scale-transition"
212 offset-y 212 offset-y
213 full-width 213 full-width
214 min-width="290px" 214 min-width="290px"
215 > 215 >
216 <v-text-field 216 <v-text-field
217 slot="activator" 217 slot="activator"
218 v-model="editedItem.joinDate" 218 v-model="editedItem.joinDate"
219 placeholder="Select date" 219 placeholder="Select date"
220 ></v-text-field> 220 ></v-text-field>
221 <v-date-picker 221 <v-date-picker
222 ref="picker" 222 ref="picker"
223 v-model="editedItem.joinDate" 223 v-model="editedItem.joinDate"
224 :max="new Date().toISOString().substr(0, 10)" 224 :max="new Date().toISOString().substr(0, 10)"
225 min="1950-01-01" 225 min="1950-01-01"
226 @input="menu3 = false" 226 @input="menu3 = false"
227 ></v-date-picker> 227 ></v-date-picker>
228 </v-menu> 228 </v-menu>
229 </v-flex> 229 </v-flex>
230 </v-layout> 230 </v-layout>
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm6> 232 <v-flex xs12 sm6>
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 hidden-xs-only hidden-sm-only">Uplaod Image:</label> 235 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
236 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 236 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
237 </v-flex> 237 </v-flex>
238 <v-flex xs8 sm8 class="ml-3"> 238 <v-flex xs8 sm8 class="ml-3">
239 <v-text-field 239 <v-text-field
240 label="Select Image" 240 label="Select Image"
241 @click="pickFile" 241 @click="pickFile"
242 v-model="imageName" 242 v-model="imageName"
243 append-icon="attach_file" 243 append-icon="attach_file"
244 ></v-text-field> 244 ></v-text-field>
245 </v-flex> 245 </v-flex>
246 </v-layout> 246 </v-layout>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 <v-layout class="hidden-xs-only hidden-sm-only" wrap> 249 <v-layout class="hidden-xs-only hidden-sm-only" wrap>
250 <v-flex xs12 sm6> 250 <v-flex xs12 sm6>
251 <v-layout> 251 <v-layout>
252 <v-flex xs4 sm4 class="pt-4 subheading"> 252 <v-flex xs4 sm4 class="pt-4 subheading">
253 <label class="right">Present Address:</label> 253 <label class="right">Present Address:</label>
254 </v-flex> 254 </v-flex>
255 <v-flex xs8 sm8 class="ml-3"> 255 <v-flex xs8 sm8 class="ml-3">
256 <v-text-field 256 <v-text-field
257 name="input-4-3" 257 name="input-4-3"
258 v-model="editedItem.presentAddress" 258 v-model="editedItem.presentAddress"
259 placeholder="fill Your present Address" 259 placeholder="fill Your present Address"
260 required 260 required
261 ></v-text-field> 261 ></v-text-field>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-flex> 264 </v-flex>
265 <v-flex xs12 sm6> 265 <v-flex xs12 sm6>
266 <v-layout> 266 <v-layout>
267 <v-flex xs4 sm4 class="pt-4 subheading"> 267 <v-flex xs4 sm4 class="pt-4 subheading">
268 <label class="right">Permanent Address:</label> 268 <label class="right">Permanent Address:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs12 sm8 class="ml-3"> 270 <v-flex xs12 sm8 class="ml-3">
271 <v-text-field 271 <v-text-field
272 name="input-4-3" 272 name="input-4-3"
273 v-model="editedItem.permanentAddress" 273 v-model="editedItem.permanentAddress"
274 placeholder="fill Your Permanent Address" 274 placeholder="fill Your Permanent Address"
275 required 275 required
276 ></v-text-field> 276 ></v-text-field>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-flex> 279 </v-flex>
280 </v-layout> 280 </v-layout>
281 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 281 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
282 <v-flex xs12 sm12> 282 <v-flex xs12 sm12>
283 <v-layout> 283 <v-layout>
284 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center"> 284 <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
285 <label class>Present Address:</label> 285 <label class>Present Address:</label>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs12 sm12> 289 <v-flex xs12 sm12>
290 <v-textarea 290 <v-textarea
291 name="input-4-3" 291 name="input-4-3"
292 v-model="editedItem.presentAddress" 292 v-model="editedItem.presentAddress"
293 placeholder="fill Your present Address" 293 placeholder="fill Your present Address"
294 required 294 required
295 ></v-textarea> 295 ></v-textarea>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 </v-flex> 298 </v-flex>
299 <v-flex xs12 sm12> 299 <v-flex xs12 sm12>
300 <v-layout> 300 <v-layout>
301 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm"> 301 <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
302 <label>Permanent Address:</label> 302 <label>Permanent Address:</label>
303 </v-flex> 303 </v-flex>
304 </v-layout> 304 </v-layout>
305 <v-layout> 305 <v-layout>
306 <v-flex xs12 sm12> 306 <v-flex xs12 sm12>
307 <v-textarea 307 <v-textarea
308 name="input-4-3" 308 name="input-4-3"
309 v-model="editedItem.permanentAddress" 309 v-model="editedItem.permanentAddress"
310 placeholder="fill Your Permanent Address" 310 placeholder="fill Your Permanent Address"
311 required 311 required
312 ></v-textarea> 312 ></v-textarea>
313 </v-flex> 313 </v-flex>
314 </v-layout> 314 </v-layout>
315 </v-flex> 315 </v-flex>
316 </v-layout> 316 </v-layout>
317 <v-layout> 317 <v-layout>
318 <v-flex xs12 sm12> 318 <v-flex xs12 sm12>
319 <v-flex xs12 sm12> 319 <v-flex xs12 sm12>
320 <v-layout class="right"> 320 <v-layout class="right">
321 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn> 321 <v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
322 </v-layout> 322 </v-layout>
323 </v-flex> 323 </v-flex>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-container> 326 </v-container>
327 </v-card-text> 327 </v-card-text>
328 </v-card> 328 </v-card>
329 </v-dialog> 329 </v-dialog>
330 330
331 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 331 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
332 332
333 <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent> 333 <v-dialog v-model="viewTeacherProfileDialog" max-width="500px" persistent>
334 <v-card flat class="card-style pa-3" dark> 334 <v-card flat class="card-style pa-3" dark>
335 <v-layout> 335 <v-layout>
336 <v-flex xs12> 336 <v-flex xs12>
337 <label class="title text-xs-center">View Teacher</label> 337 <label class="title text-xs-center">View Teacher</label>
338 <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon> 338 <v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
339 </v-flex> 339 </v-flex>
340 </v-layout> 340 </v-layout>
341 <v-card-text> 341 <v-card-text>
342 <v-container grid-list-md> 342 <v-container grid-list-md>
343 <v-layout wrap> 343 <v-layout wrap>
344 <v-flex> 344 <v-flex>
345 <v-flex align-center justify-center layout text-xs-center> 345 <v-flex align-center justify-center layout text-xs-center>
346 <v-avatar size="80"> 346 <v-avatar size="80">
347 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 347 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
348 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 348 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
349 </v-avatar> 349 </v-avatar>
350 </v-flex> 350 </v-flex>
351 <v-layout> 351 <v-layout>
352 <v-flex xs5 sm6> 352 <v-flex xs5 sm6>
353 <h5 class="right my-1"> 353 <h5 class="right my-1">
354 <b>Full Name:</b> 354 <b>Full Name:</b>
355 </h5> 355 </h5>
356 </v-flex> 356 </v-flex>
357 <v-flex sm6 xs8> 357 <v-flex sm6 xs8>
358 <h5 class="my-1">{{ editedItem.name }}</h5> 358 <h5 class="my-1">{{ editedItem.name }}</h5>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 <v-layout> 361 <v-layout>
362 <v-flex xs5 sm6> 362 <v-flex xs5 sm6>
363 <h5 class="right my-1"> 363 <h5 class="right my-1">
364 <b>Email:</b> 364 <b>Email:</b>
365 </h5> 365 </h5>
366 </v-flex> 366 </v-flex>
367 <v-flex sm6 xs8> 367 <v-flex sm6 xs8>
368 <h5 class="my-1">{{ editedItem.email }}</h5> 368 <h5 class="my-1">{{ editedItem.email }}</h5>
369 </v-flex> 369 </v-flex>
370 </v-layout> 370 </v-layout>
371 <v-layout> 371 <v-layout>
372 <v-flex xs5 sm6> 372 <v-flex xs5 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>City:</b> 374 <b>City:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.city }}</h5> 378 <h5 class="my-1">{{ editedItem.city }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 <v-layout> 381 <v-layout>
382 <v-flex xs5 sm6> 382 <v-flex xs5 sm6>
383 <h5 class="right my-1"> 383 <h5 class="right my-1">
384 <b>State:</b> 384 <b>State:</b>
385 </h5> 385 </h5>
386 </v-flex> 386 </v-flex>
387 <v-flex sm6 xs8> 387 <v-flex sm6 xs8>
388 <h5 class="my-1">{{ editedItem.state }}</h5> 388 <h5 class="my-1">{{ editedItem.state }}</h5>
389 </v-flex> 389 </v-flex>
390 </v-layout> 390 </v-layout>
391 <v-layout> 391 <v-layout>
392 <v-flex xs5 sm6> 392 <v-flex xs5 sm6>
393 <h5 class="right my-1"> 393 <h5 class="right my-1">
394 <b>Country:</b> 394 <b>Country:</b>
395 </h5> 395 </h5>
396 </v-flex> 396 </v-flex>
397 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
398 <h5 class="my-1">{{ editedItem.country }}</h5> 398 <h5 class="my-1">{{ editedItem.country }}</h5>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
403 <h5 class="right my-1"> 403 <h5 class="right my-1">
404 <b>Pincode:</b> 404 <b>Pincode:</b>
405 </h5> 405 </h5>
406 </v-flex> 406 </v-flex>
407 <v-flex sm6 xs8> 407 <v-flex sm6 xs8>
408 <h5 class="my-1">{{ editedItem.pincode }}</h5> 408 <h5 class="my-1">{{ editedItem.pincode }}</h5>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 <v-layout> 411 <v-layout>
412 <v-flex xs5 sm6> 412 <v-flex xs5 sm6>
413 <h5 class="right my-1"> 413 <h5 class="right my-1">
414 <b>Mobile No:</b> 414 <b>Mobile No:</b>
415 </h5> 415 </h5>
416 </v-flex> 416 </v-flex>
417 <v-flex sm6 xs8> 417 <v-flex sm6 xs8>
418 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 418 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
419 </v-flex> 419 </v-flex>
420 </v-layout> 420 </v-layout>
421 <v-layout> 421 <v-layout>
422 <v-flex xs5 sm6> 422 <v-flex xs5 sm6>
423 <h5 class="right my-1"> 423 <h5 class="right my-1">
424 <b>Join Date:</b> 424 <b>Join Date:</b>
425 </h5> 425 </h5>
426 </v-flex> 426 </v-flex>
427 <v-flex sm6 xs8> 427 <v-flex sm6 xs8>
428 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 428 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
429 </v-flex> 429 </v-flex>
430 </v-layout> 430 </v-layout>
431 <v-layout> 431 <v-layout>
432 <v-flex xs5 sm6> 432 <v-flex xs5 sm6>
433 <h5 class="right my-1"> 433 <h5 class="right my-1">
434 <b>D.O.B :</b> 434 <b>D.O.B :</b>
435 </h5> 435 </h5>
436 </v-flex> 436 </v-flex>
437 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
438 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 438 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
439 </v-flex> 439 </v-flex>
440 </v-layout> 440 </v-layout>
441 <v-layout> 441 <v-layout>
442 <v-flex xs6 sm6> 442 <v-flex xs6 sm6>
443 <h5 class="right my-1"> 443 <h5 class="right my-1">
444 <b>Permanent Address:</b> 444 <b>Permanent Address:</b>
445 </h5> 445 </h5>
446 </v-flex> 446 </v-flex>
447 <v-flex sm6 xs8> 447 <v-flex sm6 xs8>
448 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 448 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
449 </v-flex> 449 </v-flex>
450 </v-layout> 450 </v-layout>
451 <v-layout> 451 <v-layout>
452 <v-flex xs6 sm6> 452 <v-flex xs6 sm6>
453 <h5 class="right my-1"> 453 <h5 class="right my-1">
454 <b>present Address:</b> 454 <b>present Address:</b>
455 </h5> 455 </h5>
456 </v-flex> 456 </v-flex>
457 <v-flex sm6 xs8> 457 <v-flex sm6 xs8>
458 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 458 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
459 </v-flex> 459 </v-flex>
460 </v-layout> 460 </v-layout>
461 </v-flex> 461 </v-flex>
462 </v-layout> 462 </v-layout>
463 </v-container> 463 </v-container>
464 </v-card-text> 464 </v-card-text>
465 </v-card> 465 </v-card>
466 </v-dialog> 466 </v-dialog>
467 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 467 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
468 <v-toolbar color="transparent" flat> 468 <v-toolbar color="transparent" flat>
469 <v-btn 469 <v-btn
470 fab 470 fab
471 dark 471 dark
472 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 472 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
473 small 473 small
474 @click="addTeacherDialog = true" 474 @click="addTeacherDialog = true"
475 > 475 >
476 <v-icon dark>add</v-icon> 476 <v-icon dark>add</v-icon>
477 </v-btn> 477 </v-btn>
478 <v-btn 478 <v-btn
479 v-if="role != 'TEACHER' " 479 v-if="role != 'TEACHER' "
480 round 480 round
481 class="open-dialog-button hidden-sm-only hidden-xs-only" 481 class="open-dialog-button hidden-sm-only hidden-xs-only"
482 dark 482 dark
483 @click="addTeacherDialog = true" 483 @click="addTeacherDialog = true"
484 > 484 >
485 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher 485 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher
486 </v-btn> 486 </v-btn>
487 <v-spacer></v-spacer> 487 <v-spacer></v-spacer>
488 <v-card-title class="body-1" v-show="show"> 488 <v-card-title class="body-1" v-show="show">
489 <v-btn icon large flat @click="displaySearch"> 489 <v-btn icon large flat @click="displaySearch">
490 <v-avatar size="27"> 490 <v-avatar size="27">
491 <img src="/static/icon/search.png" alt="icon" /> 491 <img src="/static/icon/search.png" alt="icon" />
492 </v-avatar> 492 </v-avatar>
493 </v-btn> 493 </v-btn>
494 </v-card-title> 494 </v-card-title>
495 <v-flex md2 lg2 sm6 xs8 v-if="showSearch"> 495 <v-flex md2 lg2 sm6 xs8 v-if="showSearch">
496 <v-layout> 496 <v-layout>
497 <v-text-field 497 <v-text-field
498 autofocus 498 autofocus
499 v-model="search" 499 v-model="search"
500 label="Search" 500 label="Search"
501 prepend-inner-icon="search" 501 prepend-inner-icon="search"
502 color="primary" 502 color="primary"
503 ></v-text-field> 503 ></v-text-field>
504 <v-icon @click="closeSearch" color="error">close</v-icon> 504 <v-icon @click="closeSearch" color="error">close</v-icon>
505 </v-layout> 505 </v-layout>
506 </v-flex> 506 </v-flex>
507 </v-toolbar> 507 </v-toolbar>
508 <v-data-table 508 <v-data-table
509 :headers="headers" 509 :headers="headers"
510 :items="desserts" 510 :items="desserts"
511 :pagination.sync="pagination" 511 :pagination.sync="pagination"
512 :search="search" 512 :search="search"
513 > 513 >
514 <template slot="items" slot-scope="props"> 514 <template slot="items" slot-scope="props">
515 <tr class="tr"> 515 <tr class="tr">
516 <td class="td td-row">{{ props.index + 1}}</td> 516 <td class="td td-row">{{ props.index + 1}}</td>
517 <td class="td td-row text-xs-center"> 517 <td class="td td-row text-xs-center">
518 <v-avatar size="40"> 518 <v-avatar size="40">
519 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 519 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
520 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 520 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
521 </v-avatar> 521 </v-avatar>
522 </td> 522 </td>
523 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 523 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
524 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 524 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
525 <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td> 525 <td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
526 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> 526 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
527 <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td> 527 <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
528 <td class="td td-row text-xs-center"> 528 <td class="td td-row text-xs-center">
529 <v-switch 529 <v-switch
530 class="pl-3" 530 class="pl-3"
531 v-model="props.item.status" 531 v-model="props.item.status"
532 @change="suspendStatus(props.item.status,props.item._id)" 532 @change="suspendStatus(props.item.status,props.item._id)"
533 ></v-switch> 533 ></v-switch>
534 </td> 534 </td>
535 <td class="text-xs-center td td-row"> 535 <td class="text-xs-center td td-row">
536 <span> 536 <span>
537 <v-tooltip top> 537 <v-tooltip top>
538 <img 538 <img
539 slot="activator" 539 slot="activator"
540 style="cursor:pointer; width:25px; height:25px; " 540 style="cursor:pointer; width:25px; height:25px; "
541 class="mr-3" 541 class="mr-3"
542 @click="profile(props.item)" 542 @click="profile(props.item)"
543 src="/static/icon/view.png" 543 src="/static/icon/view.png"
544 /> 544 />
545 <span>View</span> 545 <span>View</span>
546 </v-tooltip> 546 </v-tooltip>
547 <v-tooltip top v-if="role != 'TEACHER' "> 547 <v-tooltip top v-if="role != 'TEACHER' ">
548 <img 548 <img
549 slot="activator" 549 slot="activator"
550 style="cursor:pointer; width:20px; height:18px; " 550 style="cursor:pointer; width:20px; height:18px; "
551 class="mr-3" 551 class="mr-3"
552 @click="editItem(props.item)" 552 @click="editItem(props.item)"
553 src="/static/icon/edit.png" 553 src="/static/icon/edit.png"
554 /> 554 />
555 <span>Edit</span> 555 <span>Edit</span>
556 </v-tooltip> 556 </v-tooltip>
557 <!-- <v-tooltip top v-if="role != 'TEACHER' "> 557 <!-- <v-tooltip top v-if="role != 'TEACHER' ">
558 <img 558 <img
559 slot="activator" 559 slot="activator"
560 style="cursor:pointer; width:20px; height:20px; " 560 style="cursor:pointer; width:20px; height:20px; "
561 @click="deleteItem(props.item)" 561 @click="deleteItem(props.item)"
562 src="/static/icon/delete.png" 562 src="/static/icon/delete.png"
563 class="mr-3" 563 class="mr-3"
564 /> 564 />
565 <span>Delete</span> 565 <span>Delete</span>
566 </v-tooltip>--> 566 </v-tooltip>-->
567 </span> 567 </span>
568 </td> 568 </td>
569 </tr> 569 </tr>
570 </template> 570 </template>
571 <v-alert 571 <v-alert
572 slot="no-results" 572 slot="no-results"
573 :value="true" 573 :value="true"
574 color="error" 574 color="error"
575 icon="warning" 575 icon="warning"
576 >Your search for "{{ search }}" found no results.</v-alert> 576 >Your search for "{{ search }}" found no results.</v-alert>
577 </v-data-table> 577 </v-data-table>
578 578
579 <!-- ****** DIALOG BOX - Add Teachers Data****** --> 579 <!-- ****** DIALOG BOX - Add Teachers Data****** -->
580 <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent> 580 <v-dialog v-model="addTeacherDialog" max-width="1160" v-if="addTeacherDialog" persistent>
581 <v-card flat class="card-style pa-2" dark> 581 <v-card flat class="card-style pa-2" dark>
582 <v-layout> 582 <v-layout>
583 <v-flex xs12 class="pa-0"> 583 <v-flex xs12 class="pa-0">
584 <label class="title text-xs-center">Add Teacher</label> 584 <label class="title text-xs-center">Add Teacher</label>
585 <v-icon 585 <v-icon
586 size="24" 586 size="24"
587 class="right" 587 class="right"
588 @click="$refs.form.reset();addTeacherDialog = false" 588 @click="$refs.form.reset();addTeacherDialog = false"
589 >cancel</v-icon> 589 >cancel</v-icon>
590 </v-flex> 590 </v-flex>
591 </v-layout> 591 </v-layout>
592 <v-form ref="form" v-model="valid" lazy-validation> 592 <v-form ref="form" v-model="valid" lazy-validation>
593 <v-container fluid> 593 <v-container fluid>
594 <v-layout> 594 <v-layout>
595 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 595 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
596 <v-avatar size="120px"> 596 <v-avatar size="120px">
597 <img src="/static/icon/user.png" v-if="!imageUrl" /> 597 <img src="/static/icon/user.png" v-if="!imageUrl" />
598 </v-avatar> 598 </v-avatar>
599 <img 599 <img
600 :src="imageUrl" 600 :src="imageUrl"
601 height="150" 601 height="150"
602 v-if="imageUrl" 602 v-if="imageUrl"
603 style="border-radius:50%; width:150px" 603 style="border-radius:50%; width:150px"
604 /> 604 />
605 </v-flex> 605 </v-flex>
606 </v-layout> 606 </v-layout>
607 <v-layout wrap> 607 <v-layout wrap>
608 <v-flex xs12 sm6> 608 <v-flex xs12 sm6>
609 <v-layout> 609 <v-layout>
610 <v-flex xs4 class="pt-4 subheading"> 610 <v-flex xs4 class="pt-4 subheading">
611 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label> 611 <label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
612 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label> 612 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
613 </v-flex> 613 </v-flex>
614 <v-flex xs8 class="ml-3"> 614 <v-flex xs8 class="ml-3">
615 <v-text-field 615 <v-text-field
616 v-model="addTeachers.name" 616 v-model="addTeachers.name"
617 placeholder="fill your full Name" 617 placeholder="fill your full Name"
618 name="name" 618 name="name"
619 type="text" 619 type="text"
620 :rules="nameRules" 620 :rules="nameRules"
621 required 621 required
622 ></v-text-field> 622 ></v-text-field>
623 </v-flex> 623 </v-flex>
624 </v-layout> 624 </v-layout>
625 </v-flex> 625 </v-flex>
626 <v-flex xs12 sm6> 626 <v-flex xs12 sm6>
627 <v-layout> 627 <v-layout>
628 <v-flex xs4 class="pt-4 subheading"> 628 <v-flex xs4 class="pt-4 subheading">
629 <label class="right">Email ID:</label> 629 <label class="right">Email ID:</label>
630 </v-flex> 630 </v-flex>
631 <v-flex xs8 class="ml-3"> 631 <v-flex xs8 class="ml-3">
632 <v-text-field 632 <v-text-field
633 placeholder="fill your email" 633 placeholder="fill your email"
634 v-model="addTeachers.email" 634 v-model="addTeachers.email"
635 type="text" 635 type="text"
636 name="email" 636 name="email"
637 required 637 required
638 ></v-text-field> 638 ></v-text-field>
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 sm6> 644 <v-flex xs12 sm6>
645 <v-layout> 645 <v-layout>
646 <v-flex xs4 sm4 class="pt-4 subheading"> 646 <v-flex xs4 sm4 class="pt-4 subheading">
647 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 647 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
648 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 648 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
649 </v-flex> 649 </v-flex>
650 <v-flex xs8 class="ml-3"> 650 <v-flex xs8 class="ml-3">
651 <v-menu 651 <v-menu
652 ref="menu" 652 ref="menu"
653 :close-on-content-click="false" 653 :close-on-content-click="false"
654 v-model="menu" 654 v-model="menu"
655 :nudge-right="40" 655 :nudge-right="40"
656 lazy 656 lazy
657 transition="scale-transition" 657 transition="scale-transition"
658 offset-y 658 offset-y
659 full-width 659 full-width
660 min-width="290px" 660 min-width="290px"
661 > 661 >
662 <v-text-field 662 <v-text-field
663 slot="activator" 663 slot="activator"
664 :rules="dateRules" 664 :rules="dateRules"
665 v-model="addTeachers.date" 665 v-model="addTeachers.date"
666 placeholder="Select date" 666 placeholder="Select date"
667 ></v-text-field> 667 ></v-text-field>
668 <v-date-picker 668 <v-date-picker
669 ref="picker" 669 ref="picker"
670 v-model="addTeachers.date" 670 v-model="addTeachers.date"
671 :max="new Date().toISOString().substr(0, 10)" 671 :max="new Date().toISOString().substr(0, 10)"
672 min="1950-01-01" 672 min="1950-01-01"
673 @input="menu = false" 673 @input="menu = false"
674 ></v-date-picker> 674 ></v-date-picker>
675 </v-menu> 675 </v-menu>
676 </v-flex> 676 </v-flex>
677 </v-layout> 677 </v-layout>
678 </v-flex> 678 </v-flex>
679 <v-flex xs12 sm6> 679 <v-flex xs12 sm6>
680 <v-layout> 680 <v-layout>
681 <v-flex xs4 class="pt-4 subheading"> 681 <v-flex xs4 class="pt-4 subheading">
682 <label class="right">City:</label> 682 <label class="right">City:</label>
683 </v-flex> 683 </v-flex>
684 <v-flex xs8 class="ml-3"> 684 <v-flex xs8 class="ml-3">
685 <v-text-field 685 <v-text-field
686 v-model="addTeachers.city" 686 v-model="addTeachers.city"
687 placeholder="fill your City Name" 687 placeholder="fill your City Name"
688 name="City" 688 name="City"
689 type="text" 689 type="text"
690 :rules="cityRules" 690 :rules="cityRules"
691 required 691 required
692 ></v-text-field> 692 ></v-text-field>
693 </v-flex> 693 </v-flex>
694 </v-layout> 694 </v-layout>
695 </v-flex> 695 </v-flex>
696 </v-layout> 696 </v-layout>
697 <v-layout wrap> 697 <v-layout wrap>
698 <v-flex xs12 sm6> 698 <v-flex xs12 sm6>
699 <v-layout> 699 <v-layout>
700 <v-flex xs4 class="pt-4 subheading"> 700 <v-flex xs4 class="pt-4 subheading">
701 <label class="right">State:</label> 701 <label class="right">State:</label>
702 </v-flex> 702 </v-flex>
703 <v-flex xs8 class="ml-3"> 703 <v-flex xs8 class="ml-3">
704 <v-text-field 704 <v-text-field
705 v-model="addTeachers.state" 705 v-model="addTeachers.state"
706 placeholder="fill your State Name" 706 placeholder="fill your State Name"
707 name="state" 707 name="state"
708 type="text" 708 type="text"
709 :rules="stateRules" 709 :rules="stateRules"
710 required 710 required
711 ></v-text-field> 711 ></v-text-field>
712 </v-flex> 712 </v-flex>
713 </v-layout> 713 </v-layout>
714 </v-flex> 714 </v-flex>
715 <v-flex xs12 sm6> 715 <v-flex xs12 sm6>
716 <v-layout> 716 <v-layout>
717 <v-flex xs4 class="pt-4 subheading"> 717 <v-flex xs4 class="pt-4 subheading">
718 <label class="right">PinCode:</label> 718 <label class="right">PinCode:</label>
719 </v-flex> 719 </v-flex>
720 <v-flex xs8 class="ml-3"> 720 <v-flex xs8 class="ml-3">
721 <v-text-field 721 <v-text-field
722 v-model="addTeachers.pincode" 722 v-model="addTeachers.pincode"
723 placeholder="fill your pincode" 723 placeholder="fill your pincode"
724 name="pincode" 724 name="pincode"
725 type="number" 725 type="number"
726 :rules="pincode" 726 :rules="pincode"
727 required 727 required
728 ></v-text-field> 728 ></v-text-field>
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 <!-- ADD TEACHER MOBILE --> 733 <!-- ADD TEACHER MOBILE -->
734 <v-layout wrap> 734 <v-layout wrap>
735 <v-flex xs12 sm6> 735 <v-flex xs12 sm6>
736 <v-layout> 736 <v-layout>
737 <v-flex xs4 class="pt-4 subheading"> 737 <v-flex xs4 class="pt-4 subheading">
738 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 738 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
739 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 739 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
740 </v-flex> 740 </v-flex>
741 <v-flex xs8 class="ml-3"> 741 <v-flex xs8 class="ml-3">
742 <v-layout row wrap> 742 <v-layout row wrap>
743 <v-flex xs3 class="mt-3"> 743 <v-flex xs3 class="mt-3">
744 <vue-country-code @onSelect="addTeacherMobileCode" class="black--text"></vue-country-code> 744 <vue-country-code @onSelect="addTeacherMobileCode" class="black--text"></vue-country-code>
745 </v-flex> 745 </v-flex>
746 <v-flex xs9> 746 <v-flex xs9>
747 <v-text-field 747 <v-text-field
748 v-model="addTeachers.mobileNo" 748 v-model="addTeachers.mobileNo"
749 placeholder="Fill your Mobile No." 749 placeholder="Fill your Mobile No."
750 name="mobileNo" 750 name="mobileNo"
751 type="number" 751 type="number"
752 :rules="mobileNoRules" 752 :rules="mobileNoRules"
753 required 753 required
754 ></v-text-field> 754 ></v-text-field>
755 </v-flex> 755 </v-flex>
756 </v-layout> 756 </v-layout>
757 </v-flex> 757 </v-flex>
758 </v-layout> 758 </v-layout>
759 </v-flex> 759 </v-flex>
760 <v-flex xs12 sm6> 760 <v-flex xs12 sm6>
761 <v-layout> 761 <v-layout>
762 <v-flex xs4 class="pt-4 subheading"> 762 <v-flex xs4 class="pt-4 subheading">
763 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label> 763 <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
764 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 764 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
765 </v-flex> 765 </v-flex>
766 <v-flex xs8 class="ml-3"> 766 <v-flex xs8 class="ml-3">
767 <v-autocomplete 767 <v-autocomplete
768 v-model="addTeachers.country" 768 v-model="addTeachers.country"
769 :rules="country" 769 :rules="country"
770 :items="countries" 770 :items="countries"
771 placeholder="Select Country Name" 771 placeholder="Select Country Name"
772 required 772 required
773 ></v-autocomplete> 773 ></v-autocomplete>
774 </v-flex> 774 </v-flex>
775 </v-layout> 775 </v-layout>
776 </v-flex> 776 </v-flex>
777 </v-layout> 777 </v-layout>
778 <v-layout wrap> 778 <v-layout wrap>
779 <v-flex xs12 sm6> 779 <v-flex xs12 sm6>
780 <v-layout> 780 <v-layout>
781 <v-flex xs4 class="pt-4 subheading"> 781 <v-flex xs4 class="pt-4 subheading">
782 <label class="right">Join Date:</label> 782 <label class="right">Join Date:</label>
783 </v-flex> 783 </v-flex>
784 <v-flex xs8 class="ml-3"> 784 <v-flex xs8 class="ml-3">
785 <v-menu 785 <v-menu
786 ref="menu1" 786 ref="menu1"
787 :close-on-content-click="false" 787 :close-on-content-click="false"
788 v-model="menu1" 788 v-model="menu1"
789 :nudge-right="40" 789 :nudge-right="40"
790 lazy 790 lazy
791 transition="scale-transition" 791 transition="scale-transition"
792 offset-y 792 offset-y
793 full-width 793 full-width
794 min-width="290px" 794 min-width="290px"
795 > 795 >
796 <v-text-field 796 <v-text-field
797 slot="activator" 797 slot="activator"
798 :rules="joinDateRules" 798 :rules="joinDateRules"
799 v-model="addTeachers.joinDate" 799 v-model="addTeachers.joinDate"
800 placeholder="Select date" 800 placeholder="Select date"
801 ></v-text-field> 801 ></v-text-field>
802 <v-date-picker 802 <v-date-picker
803 ref="picker" 803 ref="picker"
804 v-model="addTeachers.joinDate" 804 v-model="addTeachers.joinDate"
805 :max="new Date().toISOString().substr(0, 10)" 805 :max="new Date().toISOString().substr(0, 10)"
806 min="1950-01-01" 806 min="1950-01-01"
807 @input="menu1 = false" 807 @input="menu1 = false"
808 ></v-date-picker> 808 ></v-date-picker>
809 </v-menu> 809 </v-menu>
810 </v-flex> 810 </v-flex>
811 </v-layout> 811 </v-layout>
812 </v-flex> 812 </v-flex>
813 <v-flex xs12 sm6> 813 <v-flex xs12 sm6>
814 <v-layout> 814 <v-layout>
815 <v-flex xs4 class="pt-4 subheading"> 815 <v-flex xs4 class="pt-4 subheading">
816 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 816 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
817 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 817 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
818 </v-flex> 818 </v-flex>
819 <v-flex xs8 class="ml-3"> 819 <v-flex xs8 class="ml-3">
820 <v-text-field 820 <v-text-field
821 label="Select Image" 821 label="Select Image"
822 @click="pickFile" 822 @click="pickFile"
823 v-model="imageName" 823 v-model="imageName"
824 append-icon="attach_file" 824 append-icon="attach_file"
825 ></v-text-field> 825 ></v-text-field>
826 <input 826 <input
827 type="file" 827 type="file"
828 style="display:none" 828 style="display:none"
829 ref="image" 829 ref="image"
830 accept="image/*" 830 accept="image/*"
831 @change="onFilePicked" 831 @change="onFilePicked"
832 /> 832 />
833 </v-flex> 833 </v-flex>
834 </v-layout> 834 </v-layout>
835 </v-flex> 835 </v-flex>
836 </v-layout> 836 </v-layout>
837 <v-layout class="hidden-xs-only hidden-sm-only"> 837 <v-layout class="hidden-xs-only hidden-sm-only">
838 <v-flex xs12 sm6> 838 <v-flex xs12 sm6>
839 <v-layout> 839 <v-layout>
840 <v-flex xs4 md4 class="pt-4 subheading"> 840 <v-flex xs4 md4 class="pt-4 subheading">
841 <label class="right">Present Address:</label> 841 <label class="right">Present Address:</label>
842 </v-flex> 842 </v-flex>
843 <v-flex xs8 md8 class="ml-3"> 843 <v-flex xs8 md8 class="ml-3">
844 <v-text-field 844 <v-text-field
845 name="input-4-3" 845 name="input-4-3"
846 v-model="addTeachers.presentAddress" 846 v-model="addTeachers.presentAddress"
847 :rules="presentAddress" 847 :rules="presentAddress"
848 placeholder="fill Your present Address" 848 placeholder="fill Your present Address"
849 @keyup="copyData" 849 @keyup="copyData"
850 ></v-text-field> 850 ></v-text-field>
851 </v-flex> 851 </v-flex>
852 </v-layout> 852 </v-layout>
853 </v-flex> 853 </v-flex>
854 <v-flex xs12 sm6> 854 <v-flex xs12 sm6>
855 <v-layout> 855 <v-layout>
856 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 856 <v-flex xs4 md4 class="pt-4 subheading addressForm">
857 <label class="right">Permanent Address:</label> 857 <label class="right">Permanent Address:</label>
858 </v-flex> 858 </v-flex>
859 <v-flex xs12 md8 class="ml-3"> 859 <v-flex xs12 md8 class="ml-3">
860 <v-switch 860 <v-switch
861 v-model="addTeachers.permanentAddress" 861 v-model="addTeachers.permanentAddress"
862 label="Select Permanent Address" 862 label="Select Permanent Address"
863 :value="addTeachers.presentAddress" 863 :value="addTeachers.presentAddress"
864 ></v-switch> 864 ></v-switch>
865 </v-flex> 865 </v-flex>
866 </v-layout> 866 </v-layout>
867 </v-flex> 867 </v-flex>
868 </v-layout> 868 </v-layout>
869 <v-layout class="hidden-xs-only hidden-sm-only"> 869 <v-layout class="hidden-xs-only hidden-sm-only">
870 <v-flex xs12 sm6> 870 <v-flex xs12 sm6>
871 <v-layout> 871 <v-layout>
872 <v-flex xs4 md4 class="pt-4 subheading addressForm"> 872 <v-flex xs4 md4 class="pt-4 subheading addressForm">
873 <label class="right">Permanent Address:</label> 873 <label class="right">Permanent Address:</label>
874 </v-flex> 874 </v-flex>
875 <v-flex xs12 md8 class="ml-3"> 875 <v-flex xs12 md8 class="ml-3">
876 <v-text-field 876 <v-text-field
877 name="input-4-3" 877 name="input-4-3"
878 v-model="addTeachers.permanentAddress" 878 v-model="addTeachers.permanentAddress"
879 :rules="permanentAddress" 879 :rules="permanentAddress"
880 placeholder="fill Your Permanent Address" 880 placeholder="fill Your Permanent Address"
881 required 881 required
882 ></v-text-field> 882 ></v-text-field>
883 </v-flex> 883 </v-flex>
884 </v-layout> 884 </v-layout>
885 </v-flex> 885 </v-flex>
886 </v-layout> 886 </v-layout>
887 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap> 887 <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
888 <v-flex xs12 sm12> 888 <v-flex xs12 sm12>
889 <v-layout> 889 <v-layout>
890 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center"> 890 <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
891 <label class>Present Addres:</label> 891 <label class>Present Addres:</label>
892 </v-flex> 892 </v-flex>
893 </v-layout> 893 </v-layout>
894 <v-layout> 894 <v-layout>
895 <v-flex xs12 sm12> 895 <v-flex xs12 sm12>
896 <v-textarea 896 <v-textarea
897 name="input-4-3" 897 name="input-4-3"
898 v-model="addTeachers.presentAddress" 898 v-model="addTeachers.presentAddress"
899 :rules="presentAddress" 899 :rules="presentAddress"
900 placeholder="fill Your present Address" 900 placeholder="fill Your present Address"
901 required 901 required
902 ></v-textarea> 902 ></v-textarea>
903 </v-flex> 903 </v-flex>
904 </v-layout> 904 </v-layout>
905 </v-flex> 905 </v-flex>
906 <v-flex xs12 sm12> 906 <v-flex xs12 sm12>
907 <v-layout> 907 <v-layout>
908 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm"> 908 <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
909 <label>Permanent Address:</label> 909 <label>Permanent Address:</label>
910 </v-flex> 910 </v-flex>
911 </v-layout> 911 </v-layout>
912 <v-layout> 912 <v-layout>
913 <v-flex xs12 sm12> 913 <v-flex xs12 sm12>
914 <v-textarea 914 <v-textarea
915 name="input-4-3" 915 name="input-4-3"
916 v-model="addTeachers.permanentAddress" 916 v-model="addTeachers.permanentAddress"
917 :rules="permanentAddress" 917 :rules="permanentAddress"
918 placeholder="fill Your Permanent Address" 918 placeholder="fill Your Permanent Address"
919 required 919 required
920 ></v-textarea> 920 ></v-textarea>
921 </v-flex> 921 </v-flex>
922 </v-layout> 922 </v-layout>
923 </v-flex> 923 </v-flex>
924 </v-layout> 924 </v-layout>
925 <v-layout> 925 <v-layout>
926 <v-flex xs12 sm12> 926 <v-flex xs12 sm12>
927 <v-layout class="right"> 927 <v-layout class="right">
928 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 928 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
929 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 929 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
930 </v-layout> 930 </v-layout>
931 </v-flex> 931 </v-flex>
932 </v-layout> 932 </v-layout>
933 </v-container> 933 </v-container>
934 </v-form> 934 </v-form>
935 </v-card> 935 </v-card>
936 </v-dialog> 936 </v-dialog>
937 <div class="loader" v-if="showLoader"> 937 <div class="loader" v-if="showLoader">
938 <v-progress-circular indeterminate color="white"></v-progress-circular> 938 <v-progress-circular indeterminate color="white"></v-progress-circular>
939 </div> 939 </div>
940 </v-container> 940 </v-container>
941 </template> 941 </template>
942 942
943 <script> 943 <script>
944 import http from "@/Services/http.js"; 944 import http from "@/Services/http.js";
945 import moment from "moment"; 945 import moment from "moment";
946 import countryList from "@/script/country.js"; 946 import countryList from "@/script/country.js";
947 947
948 export default { 948 export default {
949 data: () => ({ 949 data: () => ({
950 /* EDIT MOBILE CELL */ 950 /* EDIT MOBILE CELL */
951 editedMobileCode: '', 951 editedMobileCode: '',
952 /* ADD FATHER CELL */ 952 /* ADD FATHER CELL */
953 addedTeacherMobileCode: '', 953 addedTeacherMobileCode: '',
954 component: "report-generate", 954 component: "report-generate",
955 snackbar: false, 955 snackbar: false,
956 y: "top", 956 y: "top",
957 x: "right", 957 x: "right",
958 role: "", 958 role: "",
959 mode: "", 959 mode: "",
960 timeout: 3000, 960 timeout: 3000,
961 text: "", 961 text: "",
962 color: "", 962 color: "",
963 showLoader: false, 963 showLoader: false,
964 loading: false, 964 loading: false,
965 date: null, 965 date: null,
966 search: "", 966 search: "",
967 show: true, 967 show: true,
968 showSearch: false, 968 showSearch: false,
969 menu: false, 969 menu: false,
970 menu1: false, 970 menu1: false,
971 menu2: false, 971 menu2: false,
972 menu3: false, 972 menu3: false,
973 editTeacherDialog: false, 973 editTeacherDialog: false,
974 viewTeacherProfileDialog: false, 974 viewTeacherProfileDialog: false,
975 addTeacherDialog: false, 975 addTeacherDialog: false,
976 valid: true, 976 valid: true,
977 pagination: { 977 pagination: {
978 rowsPerPage: 10, 978 rowsPerPage: 10,
979 }, 979 },
980 imageData: {}, 980 imageData: {},
981 imageName: "", 981 imageName: "",
982 imageUrl: "", 982 imageUrl: "",
983 imageFile: "", 983 imageFile: "",
984 nameRules: [(v) => !!v || " Full Name is required"], 984 nameRules: [(v) => !!v || " Full Name is required"],
985 dateRules: [(v) => !!v || " DOB is required"], 985 dateRules: [(v) => !!v || " DOB is required"],
986 cityRules: [(v) => !!v || " City Name is required"], 986 cityRules: [(v) => !!v || " City Name is required"],
987 pincode: [(v) => !!v || " Pincode is required"], 987 pincode: [(v) => !!v || " Pincode is required"],
988 country: [(v) => !!v || " Country Name is required"], 988 country: [(v) => !!v || " Country Name is required"],
989 permanentAddress: [(v) => !!v || " Permanent Address is required"], 989 permanentAddress: [(v) => !!v || " Permanent Address is required"],
990 presentAddress: [(v) => !!v || " Present Address is required"], 990 presentAddress: [(v) => !!v || " Present Address is required"],
991 mobileNoRules: [(v) => !!v || "Mobile Number is required"], 991 mobileNoRules: [(v) => !!v || "Mobile Number is required"],
992 stateRules: [(v) => !!v || "State Name is required"], 992 stateRules: [(v) => !!v || "State Name is required"],
993 joinDateRules: [(v) => !!v || " Join Date is required"], 993 joinDateRules: [(v) => !!v || " Join Date is required"],
994 errorMessages: "", 994 errorMessages: "",
995 switch1: true, 995 switch1: true,
996 countries: [], 996 countries: [],
997 headers: [ 997 headers: [
998 { 998 {
999 text: "No", 999 text: "No",
1000 align: "", 1000 align: "",
1001 sortable: false, 1001 sortable: false,
1002 value: "No", 1002 value: "No",
1003 }, 1003 },
1004 { 1004 {
1005 text: "Profile Pic", 1005 text: "Profile Pic",
1006 value: "profilePicUrl", 1006 value: "profilePicUrl",
1007 sortable: false, 1007 sortable: false,
1008 align: "center", 1008 align: "center",
1009 }, 1009 },
1010 { text: "Name", value: "name", sortable: false, align: "center" }, 1010 { text: "Name", value: "name", sortable: false, align: "center" },
1011 { text: "Email", value: "email", sortable: false, align: "center" }, 1011 { text: "Email", value: "email", sortable: false, align: "center" },
1012 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1012 { text: "DOB", value: "dob", sortable: false, align: "center" },
1013 { 1013 {
1014 text: "Join Date", 1014 text: "Join Date",
1015 value: "joinDate", 1015 value: "joinDate",
1016 sortable: false, 1016 sortable: false,
1017 align: "center", 1017 align: "center",
1018 }, 1018 },
1019 { 1019 {
1020 text: "Mobile No", 1020 text: "Mobile No",
1021 value: "mobileNo", 1021 value: "mobileNo",
1022 sortable: false, 1022 sortable: false,
1023 align: "center", 1023 align: "center",
1024 }, 1024 },
1025 { 1025 {
1026 text: "Status", 1026 text: "Status",
1027 value: "status", 1027 value: "status",
1028 sortable: false, 1028 sortable: false,
1029 align: "center", 1029 align: "center",
1030 }, 1030 },
1031 { text: "Action", value: "", sortable: false, align: "center" }, 1031 { text: "Action", value: "", sortable: false, align: "center" },
1032 ], 1032 ],
1033 desserts: [], 1033 desserts: [],
1034 editedIndex: -1, 1034 editedIndex: -1,
1035 upload: "", 1035 upload: "",
1036 editedItem: { 1036 editedItem: {
1037 role: "TEACHER", 1037 role: "TEACHER",
1038 name: "", 1038 name: "",
1039 email: "", 1039 email: "",
1040 date: null, 1040 date: null,
1041 city: "", 1041 city: "",
1042 pincode: "", 1042 pincode: "",
1043 country: "", 1043 country: "",
1044 permanentAddress: "", 1044 permanentAddress: "",
1045 presentAddress: "", 1045 presentAddress: "",
1046 mobileNo: "", 1046 mobileNo: "",
1047 state: "", 1047 state: "",
1048 joinDate: null, 1048 joinDate: null,
1049 }, 1049 },
1050 addTeachers: { 1050 addTeachers: {
1051 role: "TEACHER", 1051 role: "TEACHER",
1052 name: "", 1052 name: "",
1053 email: "", 1053 email: "",
1054 date: null, 1054 date: null,
1055 city: "", 1055 city: "",
1056 pincode: "", 1056 pincode: "",
1057 country: "", 1057 country: "",
1058 permanentAddress: "", 1058 permanentAddress: "",
1059 presentAddress: "", 1059 presentAddress: "",
1060 mobileNo: "", 1060 mobileNo: "",
1061 state: "", 1061 state: "",
1062 joinDate: null, 1062 joinDate: null,
1063 }, 1063 },
1064 status: "", 1064 status: "",
1065 }), 1065 }),
1066 watch: { 1066 watch: {
1067 menu(val) { 1067 menu(val) {
1068 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1068 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1069 }, 1069 },
1070 menu1(val) { 1070 menu1(val) {
1071 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1071 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1072 }, 1072 },
1073 addTeacherDialog: function (val) { 1073 addTeacherDialog: function (val) {
1074 if (!val) { 1074 if (!val) {
1075 this.addTeachers = { 1075 this.addTeachers = {
1076 role: "TEACHER", 1076 role: "TEACHER",
1077 }; 1077 };
1078 this.imageName = ""; 1078 this.imageName = "";
1079 this.imageFile = ""; 1079 this.imageFile = "";
1080 this.imageUrl = ""; 1080 this.imageUrl = "";
1081 } 1081 }
1082 }, 1082 },
1083 }, 1083 },
1084 methods: { 1084 methods: {
1085 onSelect({ name, iso2, dialCode }) { 1085 onSelect({ name, iso2, dialCode }) {
1086 // console.log("country codes", name, iso2, dialCode); 1086 // console.log("country codes", name, iso2, dialCode);
1087 }, 1087 },
1088 editMobileCode({ name, iso2, dialCode }){ 1088 editMobileCode({ name, iso2, dialCode }){
1089 // console.log("Edit father cell", name,iso2); 1089 // console.log("Edit father cell", name,iso2);
1090 this.editedMobileCode = iso2 1090 this.editedMobileCode = dialCode
1091 console.log("Edit code - ",this.editedMobileCode)
1092 }, 1091 },
1093 addTeacherMobileCode({ name, iso2, dialCode }){ 1092 addTeacherMobileCode({ name, iso2, dialCode }){
1094 this.addedTeacherMobileCode = iso2 1093 this.addedTeacherMobileCode = dialCode
1095 console.log("Add code - ",this.addedTeacherMobileCode)
1096 }, 1094 },
1097 save(date) { 1095 save(date) {
1098 this.$refs.menu.save(date); 1096 this.$refs.menu.save(date);
1099 }, 1097 },
1100 save(date) { 1098 save(date) {
1101 this.$refs.menu1.save(date); 1099 this.$refs.menu1.save(date);
1102 }, 1100 },
1103 pickFile() { 1101 pickFile() {
1104 this.$refs.image.click(); 1102 this.$refs.image.click();
1105 }, 1103 },
1106 onFilePicked(e) { 1104 onFilePicked(e) {
1107 const files = e.target.files; 1105 const files = e.target.files;
1108 this.upload = e.target.files[0]; 1106 this.upload = e.target.files[0];
1109 if (files[0] !== undefined) { 1107 if (files[0] !== undefined) {
1110 this.imageName = files[0].name; 1108 this.imageName = files[0].name;
1111 if (this.imageName.lastIndexOf(".") <= 0) { 1109 if (this.imageName.lastIndexOf(".") <= 0) {
1112 return; 1110 return;
1113 } 1111 }
1114 const fr = new FileReader(); 1112 const fr = new FileReader();
1115 fr.readAsDataURL(files[0]); 1113 fr.readAsDataURL(files[0]);
1116 fr.addEventListener("load", () => { 1114 fr.addEventListener("load", () => {
1117 this.imageUrl = fr.result; 1115 this.imageUrl = fr.result;
1118 this.imageFile = files[0]; // this is an image file that can be sent to server... 1116 this.imageFile = files[0]; // this is an image file that can be sent to server...
1119 }); 1117 });
1120 } else { 1118 } else {
1121 this.imageName = ""; 1119 this.imageName = "";
1122 this.imageFile = ""; 1120 this.imageFile = "";
1123 this.imageUrl = ""; 1121 this.imageUrl = "";
1124 } 1122 }
1125 }, 1123 },
1126 dates: function (date) { 1124 dates: function (date) {
1127 return moment(date).format("MMMM DD, YYYY"); 1125 return moment(date).format("MMMM DD, YYYY");
1128 }, 1126 },
1129 getTeacherList() { 1127 getTeacherList() {
1130 this.showLoader = true; 1128 this.showLoader = true;
1131 var token = this.$store.state.token; 1129 var token = this.$store.state.token;
1132 http() 1130 http()
1133 .get("/getTeachersList", { 1131 .get("/getTeachersList", {
1134 headers: { Authorization: "Bearer " + token }, 1132 headers: { Authorization: "Bearer " + token },
1135 }) 1133 })
1136 .then((response) => { 1134 .then((response) => {
1137 this.desserts = response.data.data; 1135 this.desserts = response.data.data;
1138 this.showLoader = false; 1136 this.showLoader = false;
1139 // console.log("getTeacherList=====>",this.desserts) 1137 // console.log("getTeacherList=====>",this.desserts)
1140 }) 1138 })
1141 .catch((error) => { 1139 .catch((error) => {
1142 this.showLoader = false; 1140 this.showLoader = false;
1143 if (error.response.status === 401) { 1141 if (error.response.status === 401) {
1144 this.$router.replace({ path: "/" }); 1142 this.$router.replace({ path: "/" });
1145 this.$store.dispatch("setToken", null); 1143 this.$store.dispatch("setToken", null);
1146 this.$store.dispatch("Id", null); 1144 this.$store.dispatch("Id", null);
1147 } 1145 }
1148 }); 1146 });
1149 }, 1147 },
1150 editItem(item) { 1148 editItem(item) {
1151 this.editedIndex = this.desserts.indexOf(item); 1149 this.editedIndex = this.desserts.indexOf(item);
1152 this.editedItem = Object.assign({}, item); 1150 this.editedItem = Object.assign({}, item);
1153 this.editedItem.dob = 1151 this.editedItem.dob =
1154 this.editedItem.dob != undefined 1152 this.editedItem.dob != undefined
1155 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1153 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1156 : (this.editedItem.dob = ""); 1154 : (this.editedItem.dob = "");
1157 this.editedItem.joinDate = 1155 this.editedItem.joinDate =
1158 this.editedItem.joinDate != undefined 1156 this.editedItem.joinDate != undefined
1159 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1157 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1160 0, 1158 0,
1161 10 1159 10
1162 )) 1160 ))
1163 : (this.editedItem.joinDate = ""); 1161 : (this.editedItem.joinDate = "");
1164 1162
1165 this.editTeacherDialog = true; 1163 this.editTeacherDialog = true;
1166 }, 1164 },
1167 profile(item) { 1165 profile(item) {
1168 this.editedIndex = this.desserts.indexOf(item); 1166 this.editedIndex = this.desserts.indexOf(item);
1169 this.editedItem = Object.assign({}, item); 1167 this.editedItem = Object.assign({}, item);
1170 this.viewTeacherProfileDialog = true; 1168 this.viewTeacherProfileDialog = true;
1171 }, 1169 },
1172 deleteItem(item) { 1170 deleteItem(item) {
1173 let deleteTeachers = { 1171 let deleteTeachers = {
1174 teacherId: item._id, 1172 teacherId: item._id,
1175 }; 1173 };
1176 http() 1174 http()
1177 .delete( 1175 .delete(
1178 "/deleteTeacher", 1176 "/deleteTeacher",
1179 confirm("Are you sure you want to delete this?") && { 1177 confirm("Are you sure you want to delete this?") && {
1180 params: deleteTeachers, 1178 params: deleteTeachers,
1181 } 1179 }
1182 ) 1180 )
1183 .then((response) => { 1181 .then((response) => {
1184 this.snackbar = true; 1182 this.snackbar = true;
1185 this.text = "Successfully delete Existing Teacher"; 1183 this.text = "Successfully delete Existing Teacher";
1186 this.color = "green"; 1184 this.color = "green";
1187 this.getTeacherList(); 1185 this.getTeacherList();
1188 }) 1186 })
1189 .catch((error) => { 1187 .catch((error) => {
1190 this.snackbar = true; 1188 this.snackbar = true;
1191 this.text = error.response.data.message; 1189 this.text = error.response.data.message;
1192 this.color = "error"; 1190 this.color = "error";
1193 }); 1191 });
1194 }, 1192 },
1195 closeEditTeacherDialog() { 1193 closeEditTeacherDialog() {
1196 this.editTeacherDialog = false; 1194 this.editTeacherDialog = false;
1197 }, 1195 },
1198 close1() { 1196 close1() {
1199 this.viewTeacherProfileDialog = false; 1197 this.viewTeacherProfileDialog = false;
1200 }, 1198 },
1201 copyData() { 1199 copyData() {
1202 this.addTeachers.permanentAddress = this.addTeachers.presentAddress; 1200 this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
1203 }, 1201 },
1204 submit() { 1202 submit() {
1205 if (this.$refs.form.validate()) { 1203 if (this.$refs.form.validate()) {
1206 let addTeacher = { 1204 let addTeacher = {
1207 name: this.addTeachers.name, 1205 name: this.addTeachers.name,
1208 email: this.addTeachers.email, 1206 email: this.addTeachers.email,
1209 role: this.addTeachers.role, 1207 role: this.addTeachers.role,
1210 dob: this.addTeachers.date, 1208 dob: this.addTeachers.date,
1211 city: this.addTeachers.city, 1209 city: this.addTeachers.city,
1212 pincode: this.addTeachers.pincode, 1210 pincode: this.addTeachers.pincode,
1213 country: this.addTeachers.country, 1211 country: this.addTeachers.country,
1214 permanentAddress: this.addTeachers.permanentAddress, 1212 permanentAddress: this.addTeachers.permanentAddress,
1215 presentAddress: this.addTeachers.presentAddress, 1213 presentAddress: this.addTeachers.presentAddress,
1216 countryCode: this.addedTeacherMobileCode, 1214 countryCode: this.addedTeacherMobileCode,
1217 mobileNo: this.addTeachers.mobileNo, 1215 mobileNo: this.addTeachers.mobileNo,
1218 state: this.addTeachers.state, 1216 state: this.addTeachers.state,
1219 joinDate: this.addTeachers.joinDate, 1217 joinDate: this.addTeachers.joinDate,
1220 }; 1218 };
1221 if (this.imageUrl) { 1219 if (this.imageUrl) {
1222 var str = this.imageUrl; 1220 var str = this.imageUrl;
1223 const [baseUrl, imageUrl] = str.split(/,/); 1221 const [baseUrl, imageUrl] = str.split(/,/);
1224 addTeacher.upload = imageUrl; 1222 addTeacher.upload = imageUrl;
1225 } 1223 }
1226 this.loading = true; 1224 this.loading = true;
1227 http() 1225 http()
1228 .post("/createTeacher", addTeacher) 1226 .post("/createTeacher", addTeacher)
1229 .then((response) => { 1227 .then((response) => {
1230 this.imageUrl = ""; 1228 this.imageUrl = "";
1231 this.getTeacherList(); 1229 this.getTeacherList();
1232 this.snackbar = true; 1230 this.snackbar = true;
1233 this.text = "New Teacher added successfully"; 1231 this.text = "New Teacher added successfully";
1234 this.color = "green"; 1232 this.color = "green";
1235 this.clear(); 1233 this.clear();
1236 this.loading = false; 1234 this.loading = false;
1237 this.addTeacherDialog = false; 1235 this.addTeacherDialog = false;
1238 }) 1236 })
1239 .catch((error) => { 1237 .catch((error) => {
1240 this.snackbar = true; 1238 this.snackbar = true;
1241 this.text = error.response.data.message; 1239 this.text = error.response.data.message;
1242 this.color = "error"; 1240 this.color = "error";
1243 this.loading = false; 1241 this.loading = false;
1244 }); 1242 });
1245 } 1243 }
1246 }, 1244 },
1247 clear() { 1245 clear() {
1248 this.$refs.form.reset(); 1246 this.$refs.form.reset();
1249 this.imageUrl = ""; 1247 this.imageUrl = "";
1250 }, 1248 },
1251 save() { 1249 save() {
1252 this.loading = true; 1250 this.loading = true;
1253 let editTeacher = { 1251 let editTeacher = {
1254 teacherId: this.editedItem._id, 1252 teacherId: this.editedItem._id,
1255 name: this.editedItem.name, 1253 name: this.editedItem.name,
1256 email: this.editedItem.email, 1254 email: this.editedItem.email,
1257 role: this.editedItem.role, 1255 role: this.editedItem.role,
1258 dob: this.editedItem.dob, 1256 dob: this.editedItem.dob,
1259 city: this.editedItem.city, 1257 city: this.editedItem.city,
1260 pincode: this.editedItem.pincode, 1258 pincode: this.editedItem.pincode,
1261 country: this.editedItem.country, 1259 country: this.editedItem.country,
1262 permanentAddress: this.editedItem.permanentAddress, 1260 permanentAddress: this.editedItem.permanentAddress,
1263 presentAddress: this.editedItem.presentAddress, 1261 presentAddress: this.editedItem.presentAddress,
1264 countryCode: this.editedMobileCode, 1262 countryCode: this.editedMobileCode,
1265 mobileNo: this.editedItem.mobileNo, 1263 mobileNo: this.editedItem.mobileNo,
1266 state: this.editedItem.state, 1264 state: this.editedItem.state,
1267 joinDate: this.editedItem.joinDate, 1265 joinDate: this.editedItem.joinDate,
1268 }; 1266 };
1269 if (this.imageUrl) { 1267 if (this.imageUrl) {
1270 var str = this.imageUrl; 1268 var str = this.imageUrl;
1271 const [baseUrl, imageUrl] = str.split(/,/); 1269 const [baseUrl, imageUrl] = str.split(/,/);
1272 editTeacher.upload = imageUrl; 1270 editTeacher.upload = imageUrl;
1273 } 1271 }
1274 http() 1272 http()
1275 .put("/updateTeacher", editTeacher) 1273 .put("/updateTeacher", editTeacher)
1276 .then((response) => { 1274 .then((response) => {
1277 this.snackbar = true; 1275 this.snackbar = true;
1278 this.text = "Successfully Edit Existing Teacher"; 1276 this.text = "Successfully Edit Existing Teacher";
1279 this.color = "green"; 1277 this.color = "green";
1280 this.loading = false; 1278 this.loading = false;
1281 this.getTeacherList(); 1279 this.getTeacherList();
1282 this.closeEditTeacherDialog(); 1280 this.closeEditTeacherDialog();
1283 }) 1281 })
1284 .catch((error) => { 1282 .catch((error) => {
1285 this.snackbar = true; 1283 this.snackbar = true;
1286 this.text = error.response.data.message; 1284 this.text = error.response.data.message;
1287 this.color = "error"; 1285 this.color = "error";
1288 this.loading = false; 1286 this.loading = false;
1289 }); 1287 });
1290 }, 1288 },
1291 suspendStatus(suspendStatus, id) { 1289 suspendStatus(suspendStatus, id) {
1292 let suspendStatusData = { 1290 let suspendStatusData = {
1293 teacherId: id, 1291 teacherId: id,
1294 status: suspendStatus, 1292 status: suspendStatus,
1295 }; 1293 };
1296 this.showLoader = true; 1294 this.showLoader = true;
1297 http() 1295 http()
1298 .put("/suspendAccount", suspendStatusData) 1296 .put("/suspendAccount", suspendStatusData)
1299 .then((response) => { 1297 .then((response) => {
1300 this.getTeacherList(); 1298 this.getTeacherList();
1301 this.text = response.data.message; 1299 this.text = response.data.message;
1302 this.color = "green"; 1300 this.color = "green";
1303 this.snackbar = true; 1301 this.snackbar = true;
1304 this.showLoader = false; 1302 this.showLoader = false;
1305 }) 1303 })
1306 .catch((error) => { 1304 .catch((error) => {
1307 this.snackbar = true; 1305 this.snackbar = true;
1308 this.color = "error"; 1306 this.color = "error";
1309 this.text = error.response.data.message; 1307 this.text = error.response.data.message;
1310 this.showLoader = false; 1308 this.showLoader = false;
1311 }); 1309 });
1312 }, 1310 },
1313 displaySearch() { 1311 displaySearch() {
1314 (this.show = false), (this.showSearch = true); 1312 (this.show = false), (this.showSearch = true);
1315 }, 1313 },
1316 closeSearch() { 1314 closeSearch() {
1317 this.showSearch = false; 1315 this.showSearch = false;
1318 this.show = true; 1316 this.show = true;
1319 this.search = ""; 1317 this.search = "";
1320 }, 1318 },
1321 }, 1319 },
1322 mounted() { 1320 mounted() {
1323 const getCountryList = countryList(); 1321 const getCountryList = countryList();
1324 this.countries = getCountryList; 1322 this.countries = getCountryList;
1325 this.getTeacherList(); 1323 this.getTeacherList();
1326 this.role = this.$store.state.role; 1324 this.role = this.$store.state.role;
1327 }, 1325 },
1328 }; 1326 };
1329 </script> 1327 </script>
1330 <style scoped> 1328 <style scoped>
1331 .active { 1329 .active {
1332 background-color: gray; 1330 background-color: gray;
1333 color: white !important; 1331 color: white !important;
1334 } 1332 }
1335 .activebtn { 1333 .activebtn {
1336 color: black !important; 1334 color: black !important;
1337 } 1335 }
1338 </style> 1336 </style>
src/pages/User/user.vue
Diff comments   View file @d0ffa80
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT USERS DETAILS ****** --> 3 <!-- ****** EDIT USERS DETAILS ****** -->
4 <v-dialog v-model="editUserDialog" max-width="1100px" scrollable persistent> 4 <v-dialog v-model="editUserDialog" max-width="1100px" scrollable 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 User</label> 8 <label class="title text-xs-center">Edit User</label>
9 <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editUserDialog = 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-layout> 13 <v-layout>
14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 14 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15 <v-avatar size="120px"> 15 <v-avatar size="120px">
16 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 16 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
17 <img 17 <img
18 :src="editedItem.profilePicUrl" 18 :src="editedItem.profilePicUrl"
19 v-else-if="editedItem.profilePicUrl && !imageUrl" 19 v-else-if="editedItem.profilePicUrl && !imageUrl"
20 /> 20 />
21 <img 21 <img
22 v-if="imageUrl" 22 v-if="imageUrl"
23 :src="imageUrl" 23 :src="imageUrl"
24 height="150" 24 height="150"
25 style="border-radius:50%; width:150px" 25 style="border-radius:50%; width:150px"
26 /> 26 />
27 </v-avatar> 27 </v-avatar>
28 <input 28 <input
29 type="file" 29 type="file"
30 style="display:none" 30 style="display:none"
31 ref="image" 31 ref="image"
32 accept="image/*" 32 accept="image/*"
33 @change="onFilePicked" 33 @change="onFilePicked"
34 /> 34 />
35 </v-flex> 35 </v-flex>
36 </v-layout> 36 </v-layout>
37 <v-layout wrap> 37 <v-layout wrap>
38 <v-flex xs12 sm6> 38 <v-flex xs12 sm6>
39 <v-layout> 39 <v-layout>
40 <v-flex xs4 class="pt-4 subheading"> 40 <v-flex xs4 class="pt-4 subheading">
41 <label class="right">Name:</label> 41 <label class="right">Name:</label>
42 </v-flex> 42 </v-flex>
43 <v-flex xs8 class="ml-3"> 43 <v-flex xs8 class="ml-3">
44 <v-text-field 44 <v-text-field
45 v-model="editedItem.name" 45 v-model="editedItem.name"
46 placeholder="fill your Name" 46 placeholder="fill your Name"
47 name="name" 47 name="name"
48 type="text" 48 type="text"
49 required 49 required
50 ></v-text-field> 50 ></v-text-field>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-flex> 53 </v-flex>
54 <v-flex xs12 sm6> 54 <v-flex xs12 sm6>
55 <v-layout> 55 <v-layout>
56 <v-flex xs4 class="pt-4 subheading"> 56 <v-flex xs4 class="pt-4 subheading">
57 <label class="right">Email ID:</label> 57 <label class="right">Email ID:</label>
58 </v-flex> 58 </v-flex>
59 <v-flex xs8 class="ml-3"> 59 <v-flex xs8 class="ml-3">
60 <v-text-field 60 <v-text-field
61 placeholder="fill your email" 61 placeholder="fill your email"
62 v-model="editedItem.email" 62 v-model="editedItem.email"
63 type="text" 63 type="text"
64 name="email" 64 name="email"
65 required 65 required
66 ></v-text-field> 66 ></v-text-field>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 </v-layout> 70 </v-layout>
71 <v-layout wrap> 71 <v-layout wrap>
72 <v-flex xs12 sm6> 72 <v-flex xs12 sm6>
73 <v-layout> 73 <v-layout>
74 <v-flex xs4 class="pt-4 subheading"> 74 <v-flex xs4 class="pt-4 subheading">
75 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 75 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
76 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 76 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
77 </v-flex> 77 </v-flex>
78 <v-flex xs8 class="ml-3"> 78 <v-flex xs8 class="ml-3">
79 <v-menu 79 <v-menu
80 ref="menu" 80 ref="menu"
81 :close-on-content-click="false" 81 :close-on-content-click="false"
82 v-model="menu2" 82 v-model="menu2"
83 :nudge-right="40" 83 :nudge-right="40"
84 lazy 84 lazy
85 transition="scale-transition" 85 transition="scale-transition"
86 offset-y 86 offset-y
87 full-width 87 full-width
88 min-width="290px" 88 min-width="290px"
89 > 89 >
90 <v-text-field 90 <v-text-field
91 slot="activator" 91 slot="activator"
92 v-model="editedItem.dob" 92 v-model="editedItem.dob"
93 placeholder="Select date" 93 placeholder="Select date"
94 ></v-text-field> 94 ></v-text-field>
95 <v-date-picker 95 <v-date-picker
96 ref="picker" 96 ref="picker"
97 v-model="editedItem.dob" 97 v-model="editedItem.dob"
98 :max="new Date().toISOString().substr(0, 10)" 98 :max="new Date().toISOString().substr(0, 10)"
99 min="1950-01-01" 99 min="1950-01-01"
100 @input="menu2 = false" 100 @input="menu2 = false"
101 ></v-date-picker> 101 ></v-date-picker>
102 </v-menu> 102 </v-menu>
103 </v-flex> 103 </v-flex>
104 </v-layout> 104 </v-layout>
105 </v-flex> 105 </v-flex>
106 <v-flex xs12 sm6> 106 <v-flex xs12 sm6>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 class="pt-4 subheading"> 108 <v-flex xs4 class="pt-4 subheading">
109 <label class="right">Gender:</label> 109 <label class="right">Gender:</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 class="ml-3"> 111 <v-flex xs8 class="ml-3">
112 <v-select 112 <v-select
113 :items="gender" 113 :items="gender"
114 v-model="editedItem.gender" 114 v-model="editedItem.gender"
115 label="Select gender" 115 label="Select gender"
116 name="gender" 116 name="gender"
117 required 117 required
118 ></v-select> 118 ></v-select>
119 </v-flex> 119 </v-flex>
120 </v-layout> 120 </v-layout>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 <v-layout wrap> 123 <v-layout wrap>
124 <v-flex xs12 sm6> 124 <v-flex xs12 sm6>
125 <v-layout> 125 <v-layout>
126 <v-flex xs4 class="pt-4 subheading"> 126 <v-flex xs4 class="pt-4 subheading">
127 <label class="right">Religion:</label> 127 <label class="right">Religion:</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs8 class="ml-3"> 129 <v-flex xs8 class="ml-3">
130 <v-text-field 130 <v-text-field
131 v-model="editedItem.religion" 131 v-model="editedItem.religion"
132 placeholder="fill your Religion" 132 placeholder="fill your Religion"
133 name="religion" 133 name="religion"
134 type="text" 134 type="text"
135 required 135 required
136 ></v-text-field> 136 ></v-text-field>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 </v-flex> 139 </v-flex>
140 <v-flex xs12 sm6> 140 <v-flex xs12 sm6>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right">JoiningDate:</label> 143 <label class="right">JoiningDate:</label>
144 </v-flex> 144 </v-flex>
145 <v-flex xs8 class="ml-3"> 145 <v-flex xs8 class="ml-3">
146 <v-menu 146 <v-menu
147 ref="menu" 147 ref="menu"
148 :close-on-content-click="false" 148 :close-on-content-click="false"
149 v-model="menu3" 149 v-model="menu3"
150 :nudge-right="40" 150 :nudge-right="40"
151 lazy 151 lazy
152 transition="scale-transition" 152 transition="scale-transition"
153 offset-y 153 offset-y
154 full-width 154 full-width
155 min-width="290px" 155 min-width="290px"
156 > 156 >
157 <v-text-field 157 <v-text-field
158 slot="activator" 158 slot="activator"
159 v-model="editedItem.joiningDate" 159 v-model="editedItem.joiningDate"
160 placeholder="Select date" 160 placeholder="Select date"
161 ></v-text-field> 161 ></v-text-field>
162 <v-date-picker 162 <v-date-picker
163 ref="picker" 163 ref="picker"
164 v-model="editedItem.joiningDate" 164 v-model="editedItem.joiningDate"
165 :max="new Date().toISOString().substr(0, 10)" 165 :max="new Date().toISOString().substr(0, 10)"
166 min="1950-01-01" 166 min="1950-01-01"
167 @input="menu3 = false" 167 @input="menu3 = false"
168 ></v-date-picker> 168 ></v-date-picker>
169 </v-menu> 169 </v-menu>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout wrap> 174 <v-layout wrap>
175 <!-- EDIT DETAILS - PHONE NUMBER --> 175 <!-- EDIT DETAILS - PHONE NUMBER -->
176 <v-flex xs12 sm6> 176 <v-flex xs12 sm6>
177 <v-layout> 177 <v-layout>
178 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
179 <label class="right">Phone:</label> 179 <label class="right">Phone:</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs8 class="ml-3"> 181 <v-flex xs8 class="ml-3">
182 <v-layout row wrap> 182 <v-layout row wrap>
183 <v-flex xs3 class="mt-3"> 183 <v-flex xs3 class="mt-3">
184 <vue-country-code @onSelect="editPhoneNumberCode" class="black--text"></vue-country-code> 184 <vue-country-code @onSelect="editPhoneNumberCode" class="black--text"></vue-country-code>
185 </v-flex> 185 </v-flex>
186 <v-flex xs9> 186 <v-flex xs9>
187 <v-text-field 187 <v-text-field
188 v-model="editedItem.phone" 188 v-model="editedItem.phone"
189 placeholder="Fill MobileNo" 189 placeholder="Fill MobileNo"
190 name="mobileNo" 190 name="mobileNo"
191 type="number" 191 type="number"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 </v-layout> 195 </v-layout>
196 </v-flex> 196 </v-flex>
197 </v-layout> 197 </v-layout>
198 </v-flex> 198 </v-flex>
199 <v-flex xs12 sm6> 199 <v-flex xs12 sm6>
200 <v-layout> 200 <v-layout>
201 <v-flex xs4 class="pt-4 subheading"> 201 <v-flex xs4 class="pt-4 subheading">
202 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 202 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
203 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 203 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
204 </v-flex> 204 </v-flex>
205 <v-flex xs8 class="ml-3"> 205 <v-flex xs8 class="ml-3">
206 <v-autocomplete 206 <v-autocomplete
207 v-model="editedItem.role" 207 v-model="editedItem.role"
208 :label="editedItem.role" 208 :label="editedItem.role"
209 :items="userRole" 209 :items="userRole"
210 item-text="name" 210 item-text="name"
211 item-value="role" 211 item-value="role"
212 required 212 required
213 ></v-autocomplete> 213 ></v-autocomplete>
214 </v-flex> 214 </v-flex>
215 </v-layout> 215 </v-layout>
216 </v-flex> 216 </v-flex>
217 </v-layout> 217 </v-layout>
218 <v-layout wrap> 218 <v-layout wrap>
219 <v-flex xs12 sm6> 219 <v-flex xs12 sm6>
220 <v-layout> 220 <v-layout>
221 <v-flex xs4 class="pt-4 subheading"> 221 <v-flex xs4 class="pt-4 subheading">
222 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 222 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
223 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> 223 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
224 </v-flex> 224 </v-flex>
225 <v-flex xs8 class="ml-3"> 225 <v-flex xs8 class="ml-3">
226 <v-text-field 226 <v-text-field
227 label="Select Image" 227 label="Select Image"
228 @click="pickFile" 228 @click="pickFile"
229 v-model="imageName" 229 v-model="imageName"
230 append-icon="attach_file" 230 append-icon="attach_file"
231 ></v-text-field> 231 ></v-text-field>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-flex> 234 </v-flex>
235 <v-flex xs12 sm6> 235 <v-flex xs12 sm6>
236 <v-layout> 236 <v-layout>
237 <v-flex xs4 class="pt-4 subheading"> 237 <v-flex xs4 class="pt-4 subheading">
238 <label class="right">Address:</label> 238 <label class="right">Address:</label>
239 </v-flex> 239 </v-flex>
240 <v-flex xs8 class="ml-3"> 240 <v-flex xs8 class="ml-3">
241 <v-text-field 241 <v-text-field
242 name="input-4-3" 242 name="input-4-3"
243 v-model="editedItem.address" 243 v-model="editedItem.address"
244 placeholder="fill Your Address" 244 placeholder="fill Your Address"
245 required 245 required
246 ></v-text-field> 246 ></v-text-field>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 <v-layout> 251 <v-layout>
252 <v-flex xs12 sm12> 252 <v-flex xs12 sm12>
253 <v-card-actions class="hidden-sm-only hidden-xs-only"> 253 <v-card-actions class="hidden-sm-only hidden-xs-only">
254 <v-spacer></v-spacer> 254 <v-spacer></v-spacer>
255 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 255 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
256 </v-card-actions> 256 </v-card-actions>
257 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> 257 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
258 <v-spacer></v-spacer> 258 <v-spacer></v-spacer>
259 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 259 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
260 <v-spacer></v-spacer> 260 <v-spacer></v-spacer>
261 </v-card-actions> 261 </v-card-actions>
262 </v-flex> 262 </v-flex>
263 </v-layout> 263 </v-layout>
264 </v-card-text> 264 </v-card-text>
265 </v-card> 265 </v-card>
266 </v-dialog> 266 </v-dialog>
267 <!-- ****** PROFILE User DETAILS ****** --> 267 <!-- ****** PROFILE User DETAILS ****** -->
268 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent> 268 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable persistent>
269 <v-card flat class="card-style pa-3" dark> 269 <v-card flat class="card-style pa-3" dark>
270 <v-layout> 270 <v-layout>
271 <v-flex xs12> 271 <v-flex xs12>
272 <label class="title text-xs-center">View User</label> 272 <label class="title text-xs-center">View User</label>
273 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> 273 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
274 </v-flex> 274 </v-flex>
275 </v-layout> 275 </v-layout>
276 <v-card-text> 276 <v-card-text>
277 <v-container grid-list-md> 277 <v-container grid-list-md>
278 <v-layout wrap> 278 <v-layout wrap>
279 <v-flex> 279 <v-flex>
280 <v-flex align-center justify-center layout text-xs-center> 280 <v-flex align-center justify-center layout text-xs-center>
281 <v-avatar size="100px"> 281 <v-avatar size="100px">
282 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 282 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
283 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 283 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
284 </v-avatar> 284 </v-avatar>
285 </v-flex> 285 </v-flex>
286 <v-layout> 286 <v-layout>
287 <v-flex xs4 sm6> 287 <v-flex xs4 sm6>
288 <h5 class="right my-1"> 288 <h5 class="right my-1">
289 <b>Name:</b> 289 <b>Name:</b>
290 </h5> 290 </h5>
291 </v-flex> 291 </v-flex>
292 <v-flex sm6 xs8> 292 <v-flex sm6 xs8>
293 <h5 class="my-1">{{ editedItem.name }}</h5> 293 <h5 class="my-1">{{ editedItem.name }}</h5>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 <v-layout> 296 <v-layout>
297 <v-flex xs4 sm6> 297 <v-flex xs4 sm6>
298 <h5 class="right my-1"> 298 <h5 class="right my-1">
299 <b>Email:</b> 299 <b>Email:</b>
300 </h5> 300 </h5>
301 </v-flex> 301 </v-flex>
302 <v-flex sm6 xs8> 302 <v-flex sm6 xs8>
303 <h5 class="my-1">{{ editedItem.email }}</h5> 303 <h5 class="my-1">{{ editedItem.email }}</h5>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 <v-layout> 306 <v-layout>
307 <v-flex xs4 sm6> 307 <v-flex xs4 sm6>
308 <h5 class="right my-1"> 308 <h5 class="right my-1">
309 <b>Gender:</b> 309 <b>Gender:</b>
310 </h5> 310 </h5>
311 </v-flex> 311 </v-flex>
312 <v-flex sm6 xs8> 312 <v-flex sm6 xs8>
313 <h5 class="my-1">{{ editedItem.gender }}</h5> 313 <h5 class="my-1">{{ editedItem.gender }}</h5>
314 </v-flex> 314 </v-flex>
315 </v-layout> 315 </v-layout>
316 <v-layout> 316 <v-layout>
317 <v-flex xs4 sm6> 317 <v-flex xs4 sm6>
318 <h5 class="right my-1"> 318 <h5 class="right my-1">
319 <b>Religion:</b> 319 <b>Religion:</b>
320 </h5> 320 </h5>
321 </v-flex> 321 </v-flex>
322 <v-flex sm6 xs8> 322 <v-flex sm6 xs8>
323 <h5 class="my-1">{{ editedItem.religion }}</h5> 323 <h5 class="my-1">{{ editedItem.religion }}</h5>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 <v-layout> 326 <v-layout>
327 <v-flex xs4 sm6> 327 <v-flex xs4 sm6>
328 <h5 class="right my-1"> 328 <h5 class="right my-1">
329 <b>Role:</b> 329 <b>Role:</b>
330 </h5> 330 </h5>
331 </v-flex> 331 </v-flex>
332 <v-flex sm6 xs8> 332 <v-flex sm6 xs8>
333 <h5 class="my-1">{{ editedItem.role }}</h5> 333 <h5 class="my-1">{{ editedItem.role }}</h5>
334 </v-flex> 334 </v-flex>
335 </v-layout> 335 </v-layout>
336 <v-layout> 336 <v-layout>
337 <v-flex xs4 sm6> 337 <v-flex xs4 sm6>
338 <h5 class="right my-1"> 338 <h5 class="right my-1">
339 <b>Phone:</b> 339 <b>Phone:</b>
340 </h5> 340 </h5>
341 </v-flex> 341 </v-flex>
342 <v-flex sm6 xs8> 342 <v-flex sm6 xs8>
343 <h5 class="my-1">{{ editedItem.phone }}</h5> 343 <h5 class="my-1">{{ editedItem.phone }}</h5>
344 </v-flex> 344 </v-flex>
345 </v-layout> 345 </v-layout>
346 <v-layout> 346 <v-layout>
347 <v-flex xs4 sm6> 347 <v-flex xs4 sm6>
348 <h5 class="right my-1"> 348 <h5 class="right my-1">
349 <b>JoiningDate:</b> 349 <b>JoiningDate:</b>
350 </h5> 350 </h5>
351 </v-flex> 351 </v-flex>
352 <v-flex sm6 xs8> 352 <v-flex sm6 xs8>
353 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> 353 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
354 </v-flex> 354 </v-flex>
355 </v-layout> 355 </v-layout>
356 <v-layout> 356 <v-layout>
357 <v-flex xs4 sm6> 357 <v-flex xs4 sm6>
358 <h5 class="right my-1"> 358 <h5 class="right my-1">
359 <label class="right hidden-sm-only hidden-xs-only"> 359 <label class="right hidden-sm-only hidden-xs-only">
360 <b>Date of Birth:</b> 360 <b>Date of Birth:</b>
361 </label> 361 </label>
362 <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> 362 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
363 <b>D.O.B:</b> 363 <b>D.O.B:</b>
364 </label> 364 </label>
365 </h5> 365 </h5>
366 </v-flex> 366 </v-flex>
367 <v-flex sm6 xs8> 367 <v-flex sm6 xs8>
368 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 368 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
369 </v-flex> 369 </v-flex>
370 </v-layout> 370 </v-layout>
371 <v-layout> 371 <v-layout>
372 <v-flex xs4 sm6> 372 <v-flex xs4 sm6>
373 <h5 class="right my-1"> 373 <h5 class="right my-1">
374 <b>Address:</b> 374 <b>Address:</b>
375 </h5> 375 </h5>
376 </v-flex> 376 </v-flex>
377 <v-flex sm6 xs8> 377 <v-flex sm6 xs8>
378 <h5 class="my-1">{{ editedItem.address }}</h5> 378 <h5 class="my-1">{{ editedItem.address }}</h5>
379 </v-flex> 379 </v-flex>
380 </v-layout> 380 </v-layout>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-container> 383 </v-container>
384 </v-card-text> 384 </v-card-text>
385 </v-card> 385 </v-card>
386 </v-dialog> 386 </v-dialog>
387 387
388 <!-- ****** EXISTING-USER TABLE DATA****** --> 388 <!-- ****** EXISTING-USER TABLE DATA****** -->
389 <v-toolbar color="transparent" flat> 389 <v-toolbar color="transparent" flat>
390 <v-btn 390 <v-btn
391 fab 391 fab
392 dark 392 dark
393 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 393 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
394 small 394 small
395 @click="addUserDialog = true" 395 @click="addUserDialog = true"
396 > 396 >
397 <v-icon dark>add</v-icon> 397 <v-icon dark>add</v-icon>
398 </v-btn> 398 </v-btn>
399 <v-btn 399 <v-btn
400 round 400 round
401 class="open-dialog-button hidden-sm-only hidden-xs-only" 401 class="open-dialog-button hidden-sm-only hidden-xs-only"
402 dark 402 dark
403 @click="addUserDialog = true" 403 @click="addUserDialog = true"
404 > 404 >
405 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User 405 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User
406 </v-btn> 406 </v-btn>
407 <v-spacer></v-spacer> 407 <v-spacer></v-spacer>
408 <v-card-title class="body-1" v-show="show"> 408 <v-card-title class="body-1" v-show="show">
409 <v-btn icon large flat @click="displaySearch"> 409 <v-btn icon large flat @click="displaySearch">
410 <v-avatar size="27"> 410 <v-avatar size="27">
411 <img src="/static/icon/search.png" alt="icon" /> 411 <img src="/static/icon/search.png" alt="icon" />
412 </v-avatar> 412 </v-avatar>
413 </v-btn> 413 </v-btn>
414 </v-card-title> 414 </v-card-title>
415 <v-flex xs8 sm8 lg2 md3 v-if="showSearch"> 415 <v-flex xs8 sm8 lg2 md3 v-if="showSearch">
416 <v-layout> 416 <v-layout>
417 <v-text-field 417 <v-text-field
418 autofocus 418 autofocus
419 v-model="search" 419 v-model="search"
420 label="Search" 420 label="Search"
421 prepend-inner-icon="search" 421 prepend-inner-icon="search"
422 color="primary" 422 color="primary"
423 ></v-text-field> 423 ></v-text-field>
424 <v-icon @click="closeSearch" color="error">close</v-icon> 424 <v-icon @click="closeSearch" color="error">close</v-icon>
425 </v-layout> 425 </v-layout>
426 </v-flex> 426 </v-flex>
427 </v-toolbar> 427 </v-toolbar>
428 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> 428 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">
429 <template slot="items" slot-scope="props"> 429 <template slot="items" slot-scope="props">
430 <td class="td td-row">{{ props.index + 1 }}</td> 430 <td class="td td-row">{{ props.index + 1 }}</td>
431 <td class="td td-row text-xs-center"> 431 <td class="td td-row text-xs-center">
432 <v-avatar size="40"> 432 <v-avatar size="40">
433 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 433 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
434 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 434 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
435 </v-avatar> 435 </v-avatar>
436 </td> 436 </td>
437 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 437 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
438 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 438 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
439 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> 439 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
440 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> 440 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
441 <td class="text-xs-center td td-row">{{ props.item.phone }}</td> 441 <td class="text-xs-center td td-row">{{ props.item.phone }}</td>
442 <td class="text-xs-center td td-row"> 442 <td class="text-xs-center td td-row">
443 <v-switch 443 <v-switch
444 class="pl-3" 444 class="pl-3"
445 v-model="props.item.status" 445 v-model="props.item.status"
446 @change="suspendStatus(props.item.status,props.item._id)" 446 @change="suspendStatus(props.item.status,props.item._id)"
447 ></v-switch> 447 ></v-switch>
448 </td> 448 </td>
449 <td class="text-xs-center td td-row"> 449 <td class="text-xs-center td td-row">
450 <span> 450 <span>
451 <v-tooltip top> 451 <v-tooltip top>
452 <img 452 <img
453 slot="activator" 453 slot="activator"
454 style="cursor:pointer; width:25px; height:25px; " 454 style="cursor:pointer; width:25px; height:25px; "
455 class="mr-3" 455 class="mr-3"
456 @click="profile(props.item)" 456 @click="profile(props.item)"
457 src="/static/icon/view.png" 457 src="/static/icon/view.png"
458 /> 458 />
459 <span>View</span> 459 <span>View</span>
460 </v-tooltip> 460 </v-tooltip>
461 <v-tooltip top> 461 <v-tooltip top>
462 <img 462 <img
463 slot="activator" 463 slot="activator"
464 style="cursor:pointer; width:20px; height:18px; " 464 style="cursor:pointer; width:20px; height:18px; "
465 class="mr-3" 465 class="mr-3"
466 @click="editItem(props.item)" 466 @click="editItem(props.item)"
467 src="/static/icon/edit.png" 467 src="/static/icon/edit.png"
468 /> 468 />
469 <span>Edit</span> 469 <span>Edit</span>
470 </v-tooltip> 470 </v-tooltip>
471 <!-- <v-tooltip top> 471 <!-- <v-tooltip top>
472 <img 472 <img
473 slot="activator" 473 slot="activator"
474 style="cursor:pointer; width:20px; height:20px; " 474 style="cursor:pointer; width:20px; height:20px; "
475 class="mr-3" 475 class="mr-3"
476 @click="deleteItem(props.item)" 476 @click="deleteItem(props.item)"
477 src="/static/icon/delete.png" 477 src="/static/icon/delete.png"
478 /> 478 />
479 <span>Delete</span> 479 <span>Delete</span>
480 </v-tooltip>--> 480 </v-tooltip>-->
481 </span> 481 </span>
482 </td> 482 </td>
483 </template> 483 </template>
484 <v-alert 484 <v-alert
485 slot="no-results" 485 slot="no-results"
486 :value="true" 486 :value="true"
487 color="error" 487 color="error"
488 icon="warning" 488 icon="warning"
489 >Your search for "{{ search }}" found no results.</v-alert> 489 >Your search for "{{ search }}" found no results.</v-alert>
490 </v-data-table> 490 </v-data-table>
491 <!-- DIALOG BOX - Add User Data --> 491 <!-- DIALOG BOX - Add User Data -->
492 <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent> 492 <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog" persistent>
493 <v-card flat class="card-style pa-2" dark> 493 <v-card flat class="card-style pa-2" dark>
494 <v-layout> 494 <v-layout>
495 <v-flex xs12> 495 <v-flex xs12>
496 <label class="title text-xs-center">Add User</label> 496 <label class="title text-xs-center">Add User</label>
497 <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon> 497 <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon>
498 </v-flex> 498 </v-flex>
499 </v-layout> 499 </v-layout>
500 <v-form ref="form" v-model="valid" lazy-validation> 500 <v-form ref="form" v-model="valid" lazy-validation>
501 <v-container fluid> 501 <v-container fluid>
502 <v-layout> 502 <v-layout>
503 <v-flex 503 <v-flex
504 xs12 504 xs12
505 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 505 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
506 > 506 >
507 <v-avatar size="80px"> 507 <v-avatar size="80px">
508 <img src="/static/icon/user.png" v-if="!imageUrl" /> 508 <img src="/static/icon/user.png" v-if="!imageUrl" />
509 </v-avatar> 509 </v-avatar>
510 <img 510 <img
511 :src="imageUrl" 511 :src="imageUrl"
512 height="150" 512 height="150"
513 v-if="imageUrl" 513 v-if="imageUrl"
514 style="border-radius:50%; width:150px" 514 style="border-radius:50%; width:150px"
515 /> 515 />
516 </v-flex> 516 </v-flex>
517 </v-layout> 517 </v-layout>
518 <v-layout> 518 <v-layout>
519 <v-flex xs12 sm6> 519 <v-flex xs12 sm6>
520 <v-layout> 520 <v-layout>
521 <v-flex xs4 class="pt-4 subheading"> 521 <v-flex xs4 class="pt-4 subheading">
522 <label class="right">Name:</label> 522 <label class="right">Name:</label>
523 </v-flex> 523 </v-flex>
524 <v-flex xs8 class="ml-3"> 524 <v-flex xs8 class="ml-3">
525 <v-text-field 525 <v-text-field
526 v-model="addUser.name" 526 v-model="addUser.name"
527 placeholder="fill your Name" 527 placeholder="fill your Name"
528 name="name" 528 name="name"
529 type="text" 529 type="text"
530 :rules="nameRules" 530 :rules="nameRules"
531 required 531 required
532 ></v-text-field> 532 ></v-text-field>
533 </v-flex> 533 </v-flex>
534 </v-layout> 534 </v-layout>
535 </v-flex> 535 </v-flex>
536 <v-flex xs12 sm6> 536 <v-flex xs12 sm6>
537 <v-layout> 537 <v-layout>
538 <v-flex xs4 class="pt-4 subheading"> 538 <v-flex xs4 class="pt-4 subheading">
539 <label class="right">Email ID:</label> 539 <label class="right">Email ID:</label>
540 </v-flex> 540 </v-flex>
541 <v-flex xs8 class="ml-3"> 541 <v-flex xs8 class="ml-3">
542 <v-text-field 542 <v-text-field
543 placeholder="fill your email" 543 placeholder="fill your email"
544 :rules="emailRules" 544 :rules="emailRules"
545 v-model="addUser.email" 545 v-model="addUser.email"
546 type="text" 546 type="text"
547 name="email" 547 name="email"
548 required 548 required
549 ></v-text-field> 549 ></v-text-field>
550 </v-flex> 550 </v-flex>
551 </v-layout> 551 </v-layout>
552 </v-flex> 552 </v-flex>
553 </v-layout> 553 </v-layout>
554 <v-layout> 554 <v-layout>
555 <v-flex xs12 sm6> 555 <v-flex xs12 sm6>
556 <v-layout> 556 <v-layout>
557 <v-flex xs4 class="pt-4 subheading"> 557 <v-flex xs4 class="pt-4 subheading">
558 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 558 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
559 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 559 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
560 </v-flex> 560 </v-flex>
561 <v-flex xs8 class="ml-3"> 561 <v-flex xs8 class="ml-3">
562 <v-menu 562 <v-menu
563 ref="menu" 563 ref="menu"
564 :close-on-content-click="false" 564 :close-on-content-click="false"
565 v-model="menu" 565 v-model="menu"
566 :nudge-right="40" 566 :nudge-right="40"
567 lazy 567 lazy
568 transition="scale-transition" 568 transition="scale-transition"
569 offset-y 569 offset-y
570 full-width 570 full-width
571 min-width="290px" 571 min-width="290px"
572 > 572 >
573 <v-text-field 573 <v-text-field
574 slot="activator" 574 slot="activator"
575 :rules="dateRules" 575 :rules="dateRules"
576 v-model="addUser.dob" 576 v-model="addUser.dob"
577 placeholder="Select DOB" 577 placeholder="Select DOB"
578 ></v-text-field> 578 ></v-text-field>
579 <v-date-picker 579 <v-date-picker
580 ref="picker" 580 ref="picker"
581 v-model="addUser.dob" 581 v-model="addUser.dob"
582 :max="new Date().toISOString().substr(0, 10)" 582 :max="new Date().toISOString().substr(0, 10)"
583 min="1950-01-01" 583 min="1950-01-01"
584 @input="menu = false" 584 @input="menu = false"
585 ></v-date-picker> 585 ></v-date-picker>
586 </v-menu> 586 </v-menu>
587 </v-flex> 587 </v-flex>
588 </v-layout> 588 </v-layout>
589 </v-flex> 589 </v-flex>
590 <v-flex xs12 sm6> 590 <v-flex xs12 sm6>
591 <v-layout> 591 <v-layout>
592 <v-flex xs4 class="pt-4 subheading"> 592 <v-flex xs4 class="pt-4 subheading">
593 <label class="right">Gender:</label> 593 <label class="right">Gender:</label>
594 </v-flex> 594 </v-flex>
595 <v-flex xs8 class="ml-3"> 595 <v-flex xs8 class="ml-3">
596 <v-select 596 <v-select
597 v-model="addUser.gender" 597 v-model="addUser.gender"
598 :items="gender" 598 :items="gender"
599 label="Selct Gender " 599 label="Selct Gender "
600 :rules="genderRules" 600 :rules="genderRules"
601 required 601 required
602 ></v-select> 602 ></v-select>
603 </v-flex> 603 </v-flex>
604 </v-layout> 604 </v-layout>
605 </v-flex> 605 </v-flex>
606 </v-layout> 606 </v-layout>
607 <v-layout> 607 <v-layout>
608 <v-flex xs12 sm6> 608 <v-flex xs12 sm6>
609 <v-layout> 609 <v-layout>
610 <v-flex xs4 class="pt-4 subheading"> 610 <v-flex xs4 class="pt-4 subheading">
611 <label class="right">Religion:</label> 611 <label class="right">Religion:</label>
612 </v-flex> 612 </v-flex>
613 <v-flex xs8 class="ml-3"> 613 <v-flex xs8 class="ml-3">
614 <v-text-field 614 <v-text-field
615 v-model="addUser.religion" 615 v-model="addUser.religion"
616 placeholder="fill your Religion" 616 placeholder="fill your Religion"
617 name="Religion" 617 name="Religion"
618 type="text" 618 type="text"
619 :rules="religionRules" 619 :rules="religionRules"
620 required 620 required
621 ></v-text-field> 621 ></v-text-field>
622 </v-flex> 622 </v-flex>
623 </v-layout> 623 </v-layout>
624 </v-flex> 624 </v-flex>
625 <v-flex xs12 sm6> 625 <v-flex xs12 sm6>
626 <v-layout> 626 <v-layout>
627 <v-flex xs4 class="pt-4 subheading"> 627 <v-flex xs4 class="pt-4 subheading">
628 <label class="right">JoiningDate:</label> 628 <label class="right">JoiningDate:</label>
629 </v-flex> 629 </v-flex>
630 <v-flex xs8 class="ml-3"> 630 <v-flex xs8 class="ml-3">
631 <v-menu 631 <v-menu
632 ref="menu1" 632 ref="menu1"
633 :close-on-content-click="false" 633 :close-on-content-click="false"
634 v-model="menu1" 634 v-model="menu1"
635 :nudge-right="40" 635 :nudge-right="40"
636 lazy 636 lazy
637 transition="scale-transition" 637 transition="scale-transition"
638 offset-y 638 offset-y
639 full-width 639 full-width
640 min-width="290px" 640 min-width="290px"
641 > 641 >
642 <v-text-field 642 <v-text-field
643 slot="activator" 643 slot="activator"
644 :rules="joinDateRules" 644 :rules="joinDateRules"
645 v-model="addUser.joinDate" 645 v-model="addUser.joinDate"
646 placeholder="Select date" 646 placeholder="Select date"
647 ></v-text-field> 647 ></v-text-field>
648 <v-date-picker 648 <v-date-picker
649 ref="picker" 649 ref="picker"
650 v-model="addUser.joinDate" 650 v-model="addUser.joinDate"
651 :max="new Date().toISOString().substr(0, 10)" 651 :max="new Date().toISOString().substr(0, 10)"
652 min="1950-01-01" 652 min="1950-01-01"
653 @input="menu1 = false" 653 @input="menu1 = false"
654 ></v-date-picker> 654 ></v-date-picker>
655 </v-menu> 655 </v-menu>
656 </v-flex> 656 </v-flex>
657 </v-layout> 657 </v-layout>
658 </v-flex> 658 </v-flex>
659 </v-layout> 659 </v-layout>
660 <v-layout> 660 <v-layout>
661 <!-- ADD PHONE NUMBER --> 661 <!-- ADD PHONE NUMBER -->
662 <v-flex xs12 sm6> 662 <v-flex xs12 sm6>
663 <v-layout> 663 <v-layout>
664 <v-flex xs4 class="pt-4 subheading"> 664 <v-flex xs4 class="pt-4 subheading">
665 <label class="right">Phone :</label> 665 <label class="right">Phone :</label>
666 </v-flex> 666 </v-flex>
667 <v-flex xs8 class="ml-3"> 667 <v-flex xs8 class="ml-3">
668 <v-layout row wrap> 668 <v-layout row wrap>
669 <v-flex xs3 class="mt-3"> 669 <v-flex xs3 class="mt-3">
670 <vue-country-code @onSelect="addPhoneNumberCode" class="black--text"></vue-country-code> 670 <vue-country-code @onSelect="addPhoneNumberCode" class="black--text"></vue-country-code>
671 </v-flex> 671 </v-flex>
672 <v-flex xs9> 672 <v-flex xs9>
673 <v-text-field 673 <v-text-field
674 v-model="addUser.mobileNo" 674 v-model="addUser.mobileNo"
675 placeholder="fill your Phone Number" 675 placeholder="fill your Phone Number"
676 name="mobileNo" 676 name="mobileNo"
677 type="number" 677 type="number"
678 :rules="mobileNoRules" 678 :rules="mobileNoRules"
679 required 679 required
680 ></v-text-field> 680 ></v-text-field>
681 </v-flex> 681 </v-flex>
682 </v-layout> 682 </v-layout>
683 </v-flex> 683 </v-flex>
684 </v-layout> 684 </v-layout>
685 </v-flex> 685 </v-flex>
686 <v-flex xs12 sm6> 686 <v-flex xs12 sm6>
687 <v-layout> 687 <v-layout>
688 <v-flex xs4 class="pt-4 subheading"> 688 <v-flex xs4 class="pt-4 subheading">
689 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 689 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
690 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 690 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
691 </v-flex> 691 </v-flex>
692 <v-flex xs8 class="ml-3"> 692 <v-flex xs8 class="ml-3">
693 <v-autocomplete 693 <v-autocomplete
694 v-model="addUser.role" 694 v-model="addUser.role"
695 :rules="role" 695 :rules="role"
696 :items="userRole" 696 :items="userRole"
697 item-text="name" 697 item-text="name"
698 item-value="name" 698 item-value="name"
699 placeholder="Select Role Name" 699 placeholder="Select Role Name"
700 required 700 required
701 ></v-autocomplete> 701 ></v-autocomplete>
702 </v-flex> 702 </v-flex>
703 </v-layout> 703 </v-layout>
704 </v-flex> 704 </v-flex>
705 </v-layout> 705 </v-layout>
706 <v-layout wrap> 706 <v-layout wrap>
707 <!-- <v-flex xs12 sm6> 707 <!-- <v-flex xs12 sm6>
708 <v-layout> 708 <v-layout>
709 <v-flex xs4 class="pt-4 subheading"> 709 <v-flex xs4 class="pt-4 subheading">
710 <label class="right">Username:</label> 710 <label class="right">Username:</label>
711 </v-flex> 711 </v-flex>
712 <v-flex xs8 class="ml-3"> 712 <v-flex xs8 class="ml-3">
713 <v-text-field 713 <v-text-field
714 v-model="addUser.userName" 714 v-model="addUser.userName"
715 placeholder="fill your User Name" 715 placeholder="fill your User Name"
716 type="text" 716 type="text"
717 :rules="userNameRules" 717 :rules="userNameRules"
718 required 718 required
719 ></v-text-field> 719 ></v-text-field>
720 </v-flex> 720 </v-flex>
721 </v-layout> 721 </v-layout>
722 </v-flex>--> 722 </v-flex>-->
723 <v-flex xs12 sm6> 723 <v-flex xs12 sm6>
724 <v-layout> 724 <v-layout>
725 <v-flex xs4 class="pt-4 subheading"> 725 <v-flex xs4 class="pt-4 subheading">
726 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 726 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
727 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> 727 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
728 </v-flex> 728 </v-flex>
729 <v-flex xs8 class="ml-3"> 729 <v-flex xs8 class="ml-3">
730 <v-text-field 730 <v-text-field
731 label="Select Image" 731 label="Select Image"
732 @click="pickFile" 732 @click="pickFile"
733 v-model="imageName" 733 v-model="imageName"
734 append-icon="attach_file" 734 append-icon="attach_file"
735 ></v-text-field> 735 ></v-text-field>
736 <input 736 <input
737 type="file" 737 type="file"
738 style="display:none" 738 style="display:none"
739 ref="image" 739 ref="image"
740 accept="image/*" 740 accept="image/*"
741 @change="onFilePicked" 741 @change="onFilePicked"
742 /> 742 />
743 </v-flex> 743 </v-flex>
744 </v-layout> 744 </v-layout>
745 </v-flex> 745 </v-flex>
746 <v-flex xs12 sm6> 746 <v-flex xs12 sm6>
747 <v-layout> 747 <v-layout>
748 <v-flex xs4 class="pt-4 subheading"> 748 <v-flex xs4 class="pt-4 subheading">
749 <label class="right">Address:</label> 749 <label class="right">Address:</label>
750 </v-flex> 750 </v-flex>
751 <v-flex xs8 class="ml-3"> 751 <v-flex xs8 class="ml-3">
752 <v-text-field 752 <v-text-field
753 name="input-4-3" 753 name="input-4-3"
754 v-model="addUser.presentAddress" 754 v-model="addUser.presentAddress"
755 :rules="presentAddress" 755 :rules="presentAddress"
756 placeholder="fill Your present Address" 756 placeholder="fill Your present Address"
757 required 757 required
758 ></v-text-field> 758 ></v-text-field>
759 </v-flex> 759 </v-flex>
760 </v-layout> 760 </v-layout>
761 </v-flex> 761 </v-flex>
762 </v-layout> 762 </v-layout>
763 <v-layout> 763 <v-layout>
764 <v-flex xs12 sm12> 764 <v-flex xs12 sm12>
765 <v-layout class="right"> 765 <v-layout class="right">
766 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 766 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
767 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 767 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
768 </v-layout> 768 </v-layout>
769 </v-flex> 769 </v-flex>
770 </v-layout> 770 </v-layout>
771 </v-container> 771 </v-container>
772 </v-form> 772 </v-form>
773 </v-card> 773 </v-card>
774 </v-dialog> 774 </v-dialog>
775 <div class="loader" v-if="showLoader"> 775 <div class="loader" v-if="showLoader">
776 <v-progress-circular indeterminate color="white"></v-progress-circular> 776 <v-progress-circular indeterminate color="white"></v-progress-circular>
777 </div> 777 </div>
778 <v-snackbar 778 <v-snackbar
779 :timeout="timeout" 779 :timeout="timeout"
780 :top="y === 'top'" 780 :top="y === 'top'"
781 :right="x === 'right'" 781 :right="x === 'right'"
782 :vertical="mode === 'vertical'" 782 :vertical="mode === 'vertical'"
783 v-model="snackbar" 783 v-model="snackbar"
784 :color="color" 784 :color="color"
785 >{{ text }}</v-snackbar> 785 >{{ text }}</v-snackbar>
786 </v-container> 786 </v-container>
787 </template> 787 </template>
788 788
789 <script> 789 <script>
790 import http from "@/Services/http.js"; 790 import http from "@/Services/http.js";
791 import Util from "@/util"; 791 import Util from "@/util";
792 import moment from "moment"; 792 import moment from "moment";
793 import _ from "lodash"; 793 import _ from "lodash";
794 794
795 export default { 795 export default {
796 data: () => ({ 796 data: () => ({
797 /* EDIT FATHER CELL */ 797 /* EDIT FATHER CELL */
798 editedPhoneNumberCode: '', 798 editedPhoneNumberCode: '',
799 /* ADD FATHER CELL */ 799 /* ADD FATHER CELL */
800 addedPhoneNumberCode: '', 800 addedPhoneNumberCode: '',
801 component: "report-generate", 801 component: "report-generate",
802 snackbar: false, 802 snackbar: false,
803 y: "top", 803 y: "top",
804 x: "right", 804 x: "right",
805 mode: "", 805 mode: "",
806 timeout: 3000, 806 timeout: 3000,
807 color: "", 807 color: "",
808 text: "", 808 text: "",
809 show: true, 809 show: true,
810 showSearch: false, 810 showSearch: false,
811 showLoader: false, 811 showLoader: false,
812 loading: false, 812 loading: false,
813 addUserDialog: false, 813 addUserDialog: false,
814 date: null, 814 date: null,
815 search: "", 815 search: "",
816 menu: false, 816 menu: false,
817 menu1: false, 817 menu1: false,
818 menu2: false, 818 menu2: false,
819 menu3: false, 819 menu3: false,
820 viewUserDialog: false, 820 viewUserDialog: false,
821 editUserDialog: false, 821 editUserDialog: false,
822 valid: true, 822 valid: true,
823 isActive: true, 823 isActive: true,
824 newActive: false, 824 newActive: false,
825 pagination: { 825 pagination: {
826 rowsPerPage: 10, 826 rowsPerPage: 10,
827 }, 827 },
828 imageData: {}, 828 imageData: {},
829 imageName: "", 829 imageName: "",
830 imageUrl: "", 830 imageUrl: "",
831 imageFile: "", 831 imageFile: "",
832 nameRules: [(v) => !!v || "Name is required"], 832 nameRules: [(v) => !!v || "Name is required"],
833 dateRules: [(v) => !!v || " DOB is required"], 833 dateRules: [(v) => !!v || " DOB is required"],
834 genderRules: [(v) => !!v || " Gender Name is required"], 834 genderRules: [(v) => !!v || " Gender Name is required"],
835 pincode: [(v) => !!v || " Pincode is required"], 835 pincode: [(v) => !!v || " Pincode is required"],
836 role: [(v) => !!v || "Role Name is required"], 836 role: [(v) => !!v || "Role Name is required"],
837 permanentAddress: [(v) => !!v || " Permanent Address is required"], 837 permanentAddress: [(v) => !!v || " Permanent Address is required"],
838 presentAddress: [(v) => !!v || " Present Address is required"], 838 presentAddress: [(v) => !!v || " Present Address is required"],
839 mobileNoRules: [(v) => !!v || "Phone Number is required"], 839 mobileNoRules: [(v) => !!v || "Phone Number is required"],
840 religionRules: [(v) => !!v || "Religion Name is required"], 840 religionRules: [(v) => !!v || "Religion Name is required"],
841 joinDateRules: [(v) => !!v || " Join Date is required"], 841 joinDateRules: [(v) => !!v || " Join Date is required"],
842 userNameRules: [(v) => !!v || " User Name is required"], 842 userNameRules: [(v) => !!v || " User Name is required"],
843 passwordRules: [(v) => !!v || " Password is required"], 843 passwordRules: [(v) => !!v || " Password is required"],
844 errorMessages: "", 844 errorMessages: "",
845 userRole: [], 845 userRole: [],
846 emailRules: [ 846 emailRules: [
847 (v) => !!v || "E-mail is required", 847 (v) => !!v || "E-mail is required",
848 (v) => 848 (v) =>
849 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 849 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
850 "E-mail must be valid", 850 "E-mail must be valid",
851 ], 851 ],
852 gender: ["Male", "Female"], 852 gender: ["Male", "Female"],
853 headers: [ 853 headers: [
854 { 854 {
855 text: "No", 855 text: "No",
856 align: "", 856 align: "",
857 sortable: false, 857 sortable: false,
858 value: "No", 858 value: "No",
859 }, 859 },
860 { 860 {
861 text: "Profile Pic", 861 text: "Profile Pic",
862 value: "profilePicUrl", 862 value: "profilePicUrl",
863 sortable: false, 863 sortable: false,
864 align: "center", 864 align: "center",
865 }, 865 },
866 { text: "Name", value: "name", sortable: false, align: "center" }, 866 { text: "Name", value: "name", sortable: false, align: "center" },
867 { text: "Email", value: "email", sortable: false, align: "center" }, 867 { text: "Email", value: "email", sortable: false, align: "center" },
868 { text: "DOB", value: "dob", sortable: false, align: "center" }, 868 { text: "DOB", value: "dob", sortable: false, align: "center" },
869 { 869 {
870 text: "Joining Date", 870 text: "Joining Date",
871 value: "joiningDate", 871 value: "joiningDate",
872 sortable: false, 872 sortable: false,
873 align: "center", 873 align: "center",
874 }, 874 },
875 { 875 {
876 text: "Phone", 876 text: "Phone",
877 value: "phone", 877 value: "phone",
878 sortable: false, 878 sortable: false,
879 align: "center", 879 align: "center",
880 }, 880 },
881 { 881 {
882 text: "Status", 882 text: "Status",
883 value: "status", 883 value: "status",
884 sortable: false, 884 sortable: false,
885 align: "center", 885 align: "center",
886 }, 886 },
887 { text: "Action", value: "", sortable: false, align: "center" }, 887 { text: "Action", value: "", sortable: false, align: "center" },
888 ], 888 ],
889 Users: [], 889 Users: [],
890 editedIndex: -1, 890 editedIndex: -1,
891 upload: "", 891 upload: "",
892 editedItem: { 892 editedItem: {
893 role: "", 893 role: "",
894 name: "", 894 name: "",
895 email: "", 895 email: "",
896 dob: null, 896 dob: null,
897 gender: "", 897 gender: "",
898 role: "", 898 role: "",
899 address: "", 899 address: "",
900 phone: "", 900 phone: "",
901 religion: "", 901 religion: "",
902 joiningDate: null, 902 joiningDate: null,
903 }, 903 },
904 addUser: { 904 addUser: {
905 role: "", 905 role: "",
906 name: "", 906 name: "",
907 email: "", 907 email: "",
908 dob: null, 908 dob: null,
909 gender: "", 909 gender: "",
910 pincode: "", 910 pincode: "",
911 role: "", 911 role: "",
912 permanentAddress: "", 912 permanentAddress: "",
913 presentAddress: "", 913 presentAddress: "",
914 mobileNo: "", 914 mobileNo: "",
915 religion: "", 915 religion: "",
916 joiningDate: null, 916 joiningDate: null,
917 }, 917 },
918 }), 918 }),
919 watch: { 919 watch: {
920 menu(val) { 920 menu(val) {
921 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 921 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
922 }, 922 },
923 menu1(val) { 923 menu1(val) {
924 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 924 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
925 }, 925 },
926 addUserDialog: function (val) { 926 addUserDialog: function (val) {
927 if (!val) { 927 if (!val) {
928 this.addUser = []; 928 this.addUser = [];
929 this.imageName = ""; 929 this.imageName = "";
930 this.imageFile = ""; 930 this.imageFile = "";
931 this.imageUrl = ""; 931 this.imageUrl = "";
932 } 932 }
933 }, 933 },
934 }, 934 },
935 methods: { 935 methods: {
936 editPhoneNumberCode({ name, iso2, dialCode }){ 936 editPhoneNumberCode({ name, iso2, dialCode }){
937 this.editedPhoneNumberCode = iso2 937 this.editedPhoneNumberCode = dialCode
938 }, 938 },
939 addPhoneNumberCode({ name, iso2, dialCode }){ 939 addPhoneNumberCode({ name, iso2, dialCode }){
940 this.addedPhoneNumberCode = iso2 940 this.addedPhoneNumberCode = dialCode
941 }, 941 },
942 // onSelect({ name, iso2, dialCode }) { 942 // onSelect({ name, iso2, dialCode }) {
943 // console.log("country codes", name, iso2, dialCode); 943 // console.log("country codes", name, iso2, dialCode);
944 // }, 944 // },
945 save(date) { 945 save(date) {
946 this.$refs.menu.save(date); 946 this.$refs.menu.save(date);
947 }, 947 },
948 save(date) { 948 save(date) {
949 this.$refs.menu1.save(date); 949 this.$refs.menu1.save(date);
950 }, 950 },
951 pickFile() { 951 pickFile() {
952 this.$refs.image.click(); 952 this.$refs.image.click();
953 }, 953 },
954 onFilePicked(e) { 954 onFilePicked(e) {
955 // console.log(e) 955 // console.log(e)
956 const files = e.target.files; 956 const files = e.target.files;
957 this.upload = e.target.files[0]; 957 this.upload = e.target.files[0];
958 // console.log("imageData-upload========>", this.upload); 958 // console.log("imageData-upload========>", this.upload);
959 if (files[0] !== undefined) { 959 if (files[0] !== undefined) {
960 this.imageName = files[0].name; 960 this.imageName = files[0].name;
961 if (this.imageName.lastIndexOf(".") <= 0) { 961 if (this.imageName.lastIndexOf(".") <= 0) {
962 return; 962 return;
963 } 963 }
964 const fr = new FileReader(); 964 const fr = new FileReader();
965 fr.readAsDataURL(files[0]); 965 fr.readAsDataURL(files[0]);
966 fr.addEventListener("load", () => { 966 fr.addEventListener("load", () => {
967 this.imageUrl = fr.result; 967 this.imageUrl = fr.result;
968 this.imageFile = files[0]; // this is an image file that can be sent to server... 968 this.imageFile = files[0]; // this is an image file that can be sent to server...
969 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 969 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
970 // console.log("upload=======>", this.imageData.imageUrl); 970 // console.log("upload=======>", this.imageData.imageUrl);
971 // console.log("imageFile", this.imageUrl); 971 // console.log("imageFile", this.imageUrl);
972 }); 972 });
973 } else { 973 } else {
974 this.imageName = ""; 974 this.imageName = "";
975 this.imageFile = ""; 975 this.imageFile = "";
976 this.imageUrl = ""; 976 this.imageUrl = "";
977 } 977 }
978 }, 978 },
979 dates: function (date) { 979 dates: function (date) {
980 return moment(date).format("MMMM DD, YYYY"); 980 return moment(date).format("MMMM DD, YYYY");
981 }, 981 },
982 getUsersList() { 982 getUsersList() {
983 this.showLoader = true; 983 this.showLoader = true;
984 var token = this.$store.state.token; 984 var token = this.$store.state.token;
985 http() 985 http()
986 .get("/getUsersList", { 986 .get("/getUsersList", {
987 headers: { Authorization: "Bearer " + token }, 987 headers: { Authorization: "Bearer " + token },
988 }) 988 })
989 .then((response) => { 989 .then((response) => {
990 // this.snackbar = true; 990 // this.snackbar = true;
991 this.color = "success"; 991 this.color = "success";
992 this.Users = response.data.data; 992 this.Users = response.data.data;
993 this.showLoader = false; 993 this.showLoader = false;
994 }) 994 })
995 .catch((error) => { 995 .catch((error) => {
996 this.showLoader = false; 996 this.showLoader = false;
997 if (error.response.status === 401) { 997 if (error.response.status === 401) {
998 this.$router.replace({ path: "/" }); 998 this.$router.replace({ path: "/" });
999 this.$store.dispatch("setToken", null); 999 this.$store.dispatch("setToken", null);
1000 this.$store.dispatch("Id", null); 1000 this.$store.dispatch("Id", null);
1001 } 1001 }
1002 }); 1002 });
1003 }, 1003 },
1004 editItem(item) { 1004 editItem(item) {
1005 this.editedIndex = this.Users.indexOf(item); 1005 this.editedIndex = this.Users.indexOf(item);
1006 this.editedItem = Object.assign({}, item); 1006 this.editedItem = Object.assign({}, item);
1007 this.editedItem.dob = 1007 this.editedItem.dob =
1008 this.editedItem.dob != undefined 1008 this.editedItem.dob != undefined
1009 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1009 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1010 : (this.editedItem.dob = ""); 1010 : (this.editedItem.dob = "");
1011 for (let i = 0; i < this.userRole.length; i++) { 1011 for (let i = 0; i < this.userRole.length; i++) {
1012 if (this.userRole[i].role === this.editedItem.role) { 1012 if (this.userRole[i].role === this.editedItem.role) {
1013 this.editedItem.role = this.userRole[i].name; 1013 this.editedItem.role = this.userRole[i].name;
1014 } 1014 }
1015 } 1015 }
1016 this.editUserDialog = true; 1016 this.editUserDialog = true;
1017 }, 1017 },
1018 profile(item) { 1018 profile(item) {
1019 this.editedIndex = this.Users.indexOf(item); 1019 this.editedIndex = this.Users.indexOf(item);
1020 this.editedItem = Object.assign({}, item); 1020 this.editedItem = Object.assign({}, item);
1021 this.viewUserDialog = true; 1021 this.viewUserDialog = true;
1022 for (let i = 0; i < this.userRole.length; i++) { 1022 for (let i = 0; i < this.userRole.length; i++) {
1023 if (this.userRole[i].role === this.editedItem.role) { 1023 if (this.userRole[i].role === this.editedItem.role) {
1024 this.editedItem.role = this.userRole[i].name; 1024 this.editedItem.role = this.userRole[i].name;
1025 } 1025 }
1026 } 1026 }
1027 }, 1027 },
1028 deleteItem(item) { 1028 deleteItem(item) {
1029 let deleteUser = { 1029 let deleteUser = {
1030 userId: item._id, 1030 userId: item._id,
1031 }; 1031 };
1032 http() 1032 http()
1033 .delete( 1033 .delete(
1034 "/deleteUser", 1034 "/deleteUser",
1035 confirm("Are you sure you want to delete this?") && { 1035 confirm("Are you sure you want to delete this?") && {
1036 params: deleteUser, 1036 params: deleteUser,
1037 } 1037 }
1038 ) 1038 )
1039 .then((response) => { 1039 .then((response) => {
1040 this.snackbar = true; 1040 this.snackbar = true;
1041 this.text = response.data.message; 1041 this.text = response.data.message;
1042 this.color = "green"; 1042 this.color = "green";
1043 this.getUsersList(); 1043 this.getUsersList();
1044 }) 1044 })
1045 .catch((error) => { 1045 .catch((error) => {
1046 this.snackbar = true; 1046 this.snackbar = true;
1047 this.color = "error"; 1047 this.color = "error";
1048 this.text = error.response.data.message; 1048 this.text = error.response.data.message;
1049 }); 1049 });
1050 }, 1050 },
1051 close() { 1051 close() {
1052 this.editUserDialog = false; 1052 this.editUserDialog = false;
1053 }, 1053 },
1054 closeProfileDialog() { 1054 closeProfileDialog() {
1055 this.viewUserDialog = false; 1055 this.viewUserDialog = false;
1056 }, 1056 },
1057 submit() { 1057 submit() {
1058 if (this.$refs.form.validate()) { 1058 if (this.$refs.form.validate()) {
1059 let addUserData = { 1059 let addUserData = {
1060 name: this.addUser.name, 1060 name: this.addUser.name,
1061 email: this.addUser.email, 1061 email: this.addUser.email,
1062 dob: this.addUser.dob, 1062 dob: this.addUser.dob,
1063 gender: this.addUser.gender, 1063 gender: this.addUser.gender,
1064 religion: this.addUser.religion, 1064 religion: this.addUser.religion,
1065 role: this.addUser.role, 1065 role: this.addUser.role,
1066 address: this.addUser.presentAddress, 1066 address: this.addUser.presentAddress,
1067 countryCode: this.addedPhoneNumberCode, 1067 countryCode: this.addedPhoneNumberCode,
1068 phone: this.addUser.mobileNo, 1068 phone: this.addUser.mobileNo,
1069 religion: this.addUser.religion, 1069 religion: this.addUser.religion,
1070 joiningDate: this.addUser.joinDate, 1070 joiningDate: this.addUser.joinDate,
1071 }; 1071 };
1072 if (this.imageUrl) { 1072 if (this.imageUrl) {
1073 var str = this.imageUrl; 1073 var str = this.imageUrl;
1074 const [baseUrl, imageUrl] = str.split(/,/); 1074 const [baseUrl, imageUrl] = str.split(/,/);
1075 addUserData.profilePicUrl = imageUrl; 1075 addUserData.profilePicUrl = imageUrl;
1076 } 1076 }
1077 this.loading = true; 1077 this.loading = true;
1078 http() 1078 http()
1079 .post("/createUser", addUserData) 1079 .post("/createUser", addUserData)
1080 .then((response) => { 1080 .then((response) => {
1081 this.imageUrl = ""; 1081 this.imageUrl = "";
1082 this.getUsersList(); 1082 this.getUsersList();
1083 this.snackbar = true; 1083 this.snackbar = true;
1084 this.addUserDialog = false; 1084 this.addUserDialog = false;
1085 this.text = response.data.message; 1085 this.text = response.data.message;
1086 this.color = "green"; 1086 this.color = "green";
1087 this.clear(); 1087 this.clear();
1088 this.loading = false; 1088 this.loading = false;
1089 }) 1089 })
1090 .catch((error) => { 1090 .catch((error) => {
1091 this.loading = false; 1091 this.loading = false;
1092 this.snackbar = true; 1092 this.snackbar = true;
1093 this.color = "error"; 1093 this.color = "error";
1094 this.text = error.response.data.message; 1094 this.text = error.response.data.message;
1095 }); 1095 });
1096 } 1096 }
1097 }, 1097 },
1098 clear() { 1098 clear() {
1099 this.$refs.form.reset(); 1099 this.$refs.form.reset();
1100 this.imageUrl = ""; 1100 this.imageUrl = "";
1101 }, 1101 },
1102 save() { 1102 save() {
1103 this.loading = true; 1103 this.loading = true;
1104 for (let i = 0; i < this.userRole.length; i++) { 1104 for (let i = 0; i < this.userRole.length; i++) {
1105 if (this.userRole[i].name === this.editedItem.role) { 1105 if (this.userRole[i].name === this.editedItem.role) {
1106 this.editedItem.role = this.userRole[i].role; 1106 this.editedItem.role = this.userRole[i].role;
1107 } 1107 }
1108 } 1108 }
1109 this.editedItem.userId = this.editedItem._id; 1109 this.editedItem.userId = this.editedItem._id;
1110 this.editedItem.countryCode = this.editedPhoneNumberCode 1110 this.editedItem.countryCode = this.editedPhoneNumberCode
1111 if (this.imageUrl) { 1111 if (this.imageUrl) {
1112 var str = this.imageUrl; 1112 var str = this.imageUrl;
1113 const [baseUrl, imageUrl] = str.split(/,/); 1113 const [baseUrl, imageUrl] = str.split(/,/);
1114 this.editedItem.upload = imageUrl; 1114 this.editedItem.upload = imageUrl;
1115 } 1115 }
1116 http() 1116 http()
1117 .put("/updateUser", this.editedItem) 1117 .put("/updateUser", this.editedItem)
1118 .then((response) => { 1118 .then((response) => {
1119 this.snackbar = true; 1119 this.snackbar = true;
1120 this.text = response.data.message; 1120 this.text = response.data.message;
1121 this.color = "green"; 1121 this.color = "green";
1122 this.loading = false; 1122 this.loading = false;
1123 this.getUsersList(); 1123 this.getUsersList();
1124 this.close(); 1124 this.close();
1125 }) 1125 })
1126 .catch((error) => { 1126 .catch((error) => {
1127 this.loading = false; 1127 this.loading = false;
1128 this.snackbar = true; 1128 this.snackbar = true;
1129 this.text = error.response.data.message; 1129 this.text = error.response.data.message;
1130 this.color = "error"; 1130 this.color = "error";
1131 }); 1131 });
1132 }, 1132 },
1133 getRole() { 1133 getRole() {
1134 this.showLoader = true; 1134 this.showLoader = true;
1135 var token = this.$store.state.token; 1135 var token = this.$store.state.token;
1136 http() 1136 http()
1137 .get("/getRolesList", { 1137 .get("/getRolesList", {
1138 headers: { Authorization: "Bearer " + token }, 1138 headers: { Authorization: "Bearer " + token },
1139 }) 1139 })
1140 .then((response) => { 1140 .then((response) => {
1141 this.userRole = response.data.data; 1141 this.userRole = response.data.data;
1142 this.showLoader = false; 1142 this.showLoader = false;
1143 this.userRole = response.data.data; 1143 this.userRole = response.data.data;
1144 var removedRoles = _.remove(this.userRole, function (c) { 1144 var removedRoles = _.remove(this.userRole, function (c) {
1145 //remove if color is green or yellow 1145 //remove if color is green or yellow
1146 return ( 1146 return (
1147 c.name === "ADMIN" || 1147 c.name === "ADMIN" ||
1148 c.name === "SUPERADMIN" || 1148 c.name === "SUPERADMIN" ||
1149 c.name === "TEACHER" || 1149 c.name === "TEACHER" ||
1150 c.name === "STUDENT" || 1150 c.name === "STUDENT" ||
1151 c.name === "PARENT" 1151 c.name === "PARENT"
1152 ); 1152 );
1153 }); 1153 });
1154 }) 1154 })
1155 .catch((error) => { 1155 .catch((error) => {
1156 this.showLoader = false; 1156 this.showLoader = false;
1157 }); 1157 });
1158 }, 1158 },
1159 suspendStatus(suspendStatus, id) { 1159 suspendStatus(suspendStatus, id) {
1160 let suspendStatusData = { 1160 let suspendStatusData = {
1161 userId: id, 1161 userId: id,
1162 status: suspendStatus, 1162 status: suspendStatus,
1163 }; 1163 };
1164 this.showLoader = true; 1164 this.showLoader = true;
1165 http() 1165 http()
1166 .put("/suspendUserAccount", suspendStatusData) 1166 .put("/suspendUserAccount", suspendStatusData)
1167 .then((response) => { 1167 .then((response) => {
1168 this.getUsersList(); 1168 this.getUsersList();
1169 this.text = response.data.message; 1169 this.text = response.data.message;
1170 this.snackbar = true; 1170 this.snackbar = true;
1171 this.showLoader = false; 1171 this.showLoader = false;
1172 }) 1172 })
1173 .catch((error) => { 1173 .catch((error) => {
1174 // console.log(error.response.data.data); 1174 // console.log(error.response.data.data);
1175 this.snackbar = true; 1175 this.snackbar = true;
1176 this.color = "success"; 1176 this.color = "success";
1177 this.text = error.response.data.message; 1177 this.text = error.response.data.message;
1178 this.showLoader = false; 1178 this.showLoader = false;
1179 }); 1179 });
1180 }, 1180 },
1181 displaySearch() { 1181 displaySearch() {
1182 (this.show = false), (this.showSearch = true); 1182 (this.show = false), (this.showSearch = true);
1183 }, 1183 },
1184 closeSearch() { 1184 closeSearch() {
1185 this.showSearch = false; 1185 this.showSearch = false;
1186 this.show = true; 1186 this.show = true;
1187 this.search = ""; 1187 this.search = "";
1188 }, 1188 },
1189 }, 1189 },
1190 mounted() { 1190 mounted() {
1191 this.getUsersList(); 1191 this.getUsersList();
1192 this.getRole(); 1192 this.getRole();
1193 }, 1193 },
1194 }; 1194 };
1195 </script> 1195 </script>
src/script/parents.js
Diff comments   View file @d0ffa80
1 export default () => { 1 export default () => {
2 2
3 const parents = [{ 3 const parents = [{
4 "email": "digital@theideazfactory.com", 4 "email": "digital@theideazfactory.com",
5 "fatherName": "Abhishek", 5 "fatherName": "Abhishek",
6 "motherName": "Rita", 6 "motherName": "Rita",
7 "motherCellNo": "8989786789", 7 "motherCellNo": "8989786789",
8 "fatherCellNo": "9898981234", 8 "fatherCellNo": "9898981234",
9 "countryCode": "IN", 9 "countryCode": "+91",
10 "password": "" 10 "password": ""
11 11
12 }, 12 },
13 { 13 {
14 "email": "Rampal@viithiisys.com", 14 "email": "Rampal@viithiisys.com",
15 "fatherName": "suresh", 15 "fatherName": "suresh",
16 "motherName": "rita kumari", 16 "motherName": "rita kumari",
17 "fatherCellNo": "9898987867", 17 "fatherCellNo": "9898987867",
18 "countryCode": "IN", 18 "countryCode": "+91",
19 "motherCellNo": "9768576536", 19 "motherCellNo": "9768576536",
20 "password": "" 20 "password": ""
21 } 21 }
22 ] 22 ]
23 return parents; 23 return parents;
24 24
25 } 25 }
src/script/students.js
Diff comments   View file @d0ffa80
1 export default () => { 1 export default () => {
2 const students = [{ 2 const students = [{
3 "name": "Rishav Singla", 3 "name": "Rishav Singla",
4 "email": "rsingla.rishu@gmail.com", 4 "email": "rsingla.rishu@gmail.com",
5 "className": "1", 5 "className": "1",
6 "sectionName": "A", 6 "sectionName": "A",
7 "rollNo": "1", 7 "rollNo": "1",
8 "dob": "08-10-1993", 8 "dob": "08-10-1993",
9 "gender": "Male", 9 "gender": "Male",
10 "bloodGroup": "A+", 10 "bloodGroup": "A+",
11 "mobile": "9914092452", 11 "mobile": "9914092452",
12 "height": "5'11", 12 "height": "5'11",
13 "medicalNotes": "No", 13 "medicalNotes": "No",
14 "city": "Chandigarh", 14 "city": "Chandigarh",
15 "country": "India", 15 "country": "India",
16 "presentAddress": "Mohali Sector ", 16 "presentAddress": "Mohali Sector ",
17 "state": "Punjab", 17 "state": "Punjab",
18 "allergies": "No", 18 "allergies": "No",
19 "establishmentYear": "2019", 19 "establishmentYear": "2019",
20 "fatherCellNo": "09988772222", 20 "fatherCellNo": "09988772222",
21 "countryCode": "IN", 21 "countryCode": "+91",
22 "fatherName": "Raj", 22 "fatherName": "Raj",
23 "parentEmail": "rajkumar123@gmail.com", 23 "parentEmail": "rajkumar123@gmail.com",
24 "motherCellNo": "8877112266", 24 "motherCellNo": "8877112266",
25 "motherName": "Simran", 25 "motherName": "Simran",
26 "permanentAddress": "Mohali", 26 "permanentAddress": "Mohali",
27 "pincode": "160062", 27 "pincode": "160062",
28 "presentAddress": "Mohali Sector ", 28 "presentAddress": "Mohali Sector ",
29 "role": 4, 29 "role": 4,
30 "rollNo": "1", 30 "rollNo": "1",
31 "weight": "72", 31 "weight": "72",
32 "password": "" 32 "password": ""
33 }, 33 },
34 { 34 {
35 "name": "Shubham Chugh", 35 "name": "Shubham Chugh",
36 "email": "shubham@theideazfactory.com", 36 "email": "shubham@theideazfactory.com",
37 "className": "10", 37 "className": "10",
38 "sectionName": "A", 38 "sectionName": "A",
39 "rollNo": "2", 39 "rollNo": "2",
40 "dob": "29-05-1994", 40 "dob": "29-05-1994",
41 "gender": "Male", 41 "gender": "Male",
42 "bloodGroup": "A+", 42 "bloodGroup": "A+",
43 "mobile": "8077362128", 43 "mobile": "8077362128",
44 "countryCode": "IN",
45 "height": "5'8", 44 "height": "5'8",
46 "medicalNotes": "No", 45 "medicalNotes": "No",
47 "motherCellNo": "7878654323", 46 "motherCellNo": "7878654323",
48 "city": "Chandigarh", 47 "city": "Chandigarh",
49 "country": "India", 48 "country": "India",
50 "presentAddress": "#1571, ground floor, sector 7C", 49 "presentAddress": "#1571, ground floor, sector 7C",
51 "state": "Chandigarh", 50 "state": "Chandigarh",
52 "allergies": "No", 51 "allergies": "No",
53 "establishmentYear": "2019", 52 "establishmentYear": "2019",
54 "parentEmail": "SureshKumar321@gmail.com", 53 "parentEmail": "SureshKumar321@gmail.com",
55 "fatherCellNo": "09898787865", 54 "fatherCellNo": "09898787865",
56 "countryCode": "IN", 55 "countryCode": "+91",
57 "fatherName": "Suresh Kumar", 56 "fatherName": "Suresh Kumar",
58 "motherName": "Shinki", 57 "motherName": "Shinki",
59 "permanentAddress": "Sector 43 Chandigarh", 58 "permanentAddress": "Sector 43 Chandigarh",
60 "pincode": " 160036", 59 "pincode": " 160036",
61 "presentAddress": "Sector 43 Chandigarh", 60 "presentAddress": "Sector 43 Chandigarh",
62 "role": 4, 61 "role": 4,
63 "rollNo": "2", 62 "rollNo": "2",
64 "weight": "70", 63 "weight": "70",
65 "password": "" 64 "password": ""
66 }, 65 },
67 ] 66 ]
68 return students; 67 return students;
69 } 68 }
src/script/teachers.js
Diff comments   View file @d0ffa80
1 export default () => { 1 export default () => {
2 2
3 const teachers = [{ 3 const teachers = [{
4 "name": "Test Teacher", 4 "name": "Test Teacher",
5 "email": "shubhamchugh1992@gmail.com", 5 "email": "shubhamchugh1992@gmail.com",
6 "dob": "01-05-1994", 6 "dob": "01-05-1994",
7 "city": "Chandigarh", 7 "city": "Chandigarh",
8 "country": "India", 8 "country": "India",
9 "presentAddress": "SCO 34 second floor", 9 "presentAddress": "SCO 34 second floor",
10 "countryCode": "IN", 10 "countryCode": "IN",
11 "mobileNo": "08558875847", 11 "mobileNo": "08558875847",
12 "state": "Chandigarh", 12 "state": "Chandigarh",
13 "pincode": "160071", 13 "pincode": "160071",
14 "joinDate": "18-11-2019" 14 "joinDate": "18-11-2019"
15 }, 15 },
16 { 16 {
17 "name": "Kuldeep Kumar", 17 "name": "Kuldeep Kumar",
18 "email": "kuldeep.kumar@viithiisys.com", 18 "email": "kuldeep.kumar@viithiisys.com",
19 "dob": "10-01-1995", 19 "dob": "10-01-1995",
20 "city": "Mohali", 20 "city": "Mohali",
21 "country": "India", 21 "country": "India",
22 "presentAddress": "sector 71 Mohali", 22 "presentAddress": "sector 71 Mohali",
23 "countryCode": "IN", 23 "countryCode": "+91",
24 "mobileNo": "7009191451", 24 "mobileNo": "7009191451",
25 "state": "Punjab", 25 "state": "Punjab",
26 "pincode": "160072", 26 "pincode": "160072",
27 "joinDate": "23-04-2018" 27 "joinDate": "23-04-2018"
28 }, 28 },
29 { 29 {
30 "name": "Sunny Negi", 30 "name": "Sunny Negi",
31 "email": "sunny.negi@viithiisys.com", 31 "email": "sunny.negi@viithiisys.com",
32 "dob": "14-01-1995", 32 "dob": "14-01-1995",
33 "city": "Phanckula", 33 "city": "Phanckula",
34 "country": "India", 34 "country": "India",
35 "presentAddress": "sector 71 Mohali", 35 "presentAddress": "sector 71 Mohali",
36 "countryCode": "IN", 36 "countryCode": "+91",
37 "mobileNo": "8989981451", 37 "mobileNo": "8989981451",
38 "state": "haryana", 38 "state": "haryana",
39 "pincode": "160073", 39 "pincode": "160073",
40 "joinDate": "24-04-2018" 40 "joinDate": "24-04-2018"
41 } 41 }
42 ] 42 ]
43 return teachers; 43 return teachers;
44 } 44 }
src/script/users.js
Diff comments   View file @d0ffa80
1 export default () => { 1 export default () => {
2 2
3 const users = [{ 3 const users = [{
4 "name": "Neeraj", 4 "name": "Neeraj",
5 "email": "neeraj.sharma@viithiisys.com", 5 "email": "neeraj.sharma@viithiisys.com",
6 "dob": "14-01-1995", 6 "dob": "14-01-1995",
7 "gender": "Male", 7 "gender": "Male",
8 "role": "LIBRARIAN", 8 "role": "LIBRARIAN",
9 "religion": "Hindu", 9 "religion": "Hindu",
10 "address": "Mohali", 10 "address": "Mohali",
11 "phone": "1234567890", 11 "phone": "1234567890",
12 "countryCode": "IN", 12 "countryCode": "+91",
13 "joiningDate": "17-08-2016", 13 "joiningDate": "17-08-2016",
14 }, 14 },
15 { 15 {
16 "name": "Rishav", 16 "name": "Rishav",
17 "email": "rishav.singla@viithiisys.com", 17 "email": "rishav.singla@viithiisys.com",
18 "dob": "12-08-1995", 18 "dob": "12-08-1995",
19 "gender": "Male", 19 "gender": "Male",
20 "role": "ACCOUNTANT", 20 "role": "ACCOUNTANT",
21 "religion": "Hindu", 21 "religion": "Hindu",
22 "address": "Punjab", 22 "address": "Punjab",
23 "phone": "9878768790", 23 "phone": "9878768790",
24 "countryCode": "IN", 24 "countryCode": "+91",
25 "joiningDate": "28-03-2016", 25 "joiningDate": "28-03-2016",
26 } 26 }
27 ] 27 ]
28 return users; 28 return users;
29 29
30 } 30 }