viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 91df7a13defc2def3e4b97331658e95b7bf49443

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

hid Admin from user

Showing 1 changed file with 2 additions and 5 deletions   Show diff stats
src/pages/User/user.vue
Diff comments   View file @91df7a1
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> 4 <v-dialog v-model="editUserDialog" max-width="1100px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit 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 <v-flex xs12 sm6> 175 <v-flex xs12 sm6>
176 <v-layout> 176 <v-layout>
177 <v-flex xs4 class="pt-4 subheading"> 177 <v-flex xs4 class="pt-4 subheading">
178 <label class="right">Phone:</label> 178 <label class="right">Phone:</label>
179 </v-flex> 179 </v-flex>
180 <v-flex xs8 class="ml-3"> 180 <v-flex xs8 class="ml-3">
181 <v-text-field 181 <v-text-field
182 v-model="editedItem.phone" 182 v-model="editedItem.phone"
183 placeholder="fill your MobileNo" 183 placeholder="fill your MobileNo"
184 name="mobileNo" 184 name="mobileNo"
185 type="number" 185 type="number"
186 required 186 required
187 ></v-text-field> 187 ></v-text-field>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-flex> 190 </v-flex>
191 <v-flex xs12 sm6> 191 <v-flex xs12 sm6>
192 <v-layout> 192 <v-layout>
193 <v-flex xs4 class="pt-4 subheading"> 193 <v-flex xs4 class="pt-4 subheading">
194 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 194 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
195 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 195 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs8 class="ml-3"> 197 <v-flex xs8 class="ml-3">
198 <v-autocomplete 198 <v-autocomplete
199 v-model="editedItem.role" 199 v-model="editedItem.role"
200 :label="editedItem.role" 200 :label="editedItem.role"
201 :items="userRole" 201 :items="userRole"
202 item-text="name" 202 item-text="name"
203 item-value="role" 203 item-value="role"
204 required 204 required
205 ></v-autocomplete> 205 ></v-autocomplete>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 </v-flex> 208 </v-flex>
209 </v-layout> 209 </v-layout>
210 <v-layout wrap> 210 <v-layout wrap>
211 <v-flex xs12 sm6> 211 <v-flex xs12 sm6>
212 <v-layout> 212 <v-layout>
213 <v-flex xs4 class="pt-4 subheading"> 213 <v-flex xs4 class="pt-4 subheading">
214 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 214 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
215 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label> 215 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
216 </v-flex> 216 </v-flex>
217 <v-flex xs8 class="ml-3"> 217 <v-flex xs8 class="ml-3">
218 <v-text-field 218 <v-text-field
219 label="Select Image" 219 label="Select Image"
220 @click="pickFile" 220 @click="pickFile"
221 v-model="imageName" 221 v-model="imageName"
222 append-icon="attach_file" 222 append-icon="attach_file"
223 ></v-text-field> 223 ></v-text-field>
224 </v-flex> 224 </v-flex>
225 </v-layout> 225 </v-layout>
226 </v-flex> 226 </v-flex>
227 <v-flex xs12 sm6> 227 <v-flex xs12 sm6>
228 <v-layout> 228 <v-layout>
229 <v-flex xs4 class="pt-4 subheading"> 229 <v-flex xs4 class="pt-4 subheading">
230 <label class="right">Address:</label> 230 <label class="right">Address:</label>
231 </v-flex> 231 </v-flex>
232 <v-flex xs8 class="ml-3"> 232 <v-flex xs8 class="ml-3">
233 <v-text-field 233 <v-text-field
234 name="input-4-3" 234 name="input-4-3"
235 v-model="editedItem.address" 235 v-model="editedItem.address"
236 placeholder="fill Your Address" 236 placeholder="fill Your Address"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 </v-layout> 242 </v-layout>
243 <v-layout> 243 <v-layout>
244 <v-flex xs12 sm12> 244 <v-flex xs12 sm12>
245 <v-card-actions class="hidden-sm-only hidden-xs-only"> 245 <v-card-actions class="hidden-sm-only hidden-xs-only">
246 <v-spacer></v-spacer> 246 <v-spacer></v-spacer>
247 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 247 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
248 </v-card-actions> 248 </v-card-actions>
249 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only"> 249 <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
250 <v-spacer></v-spacer> 250 <v-spacer></v-spacer>
251 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn> 251 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
252 <v-spacer></v-spacer> 252 <v-spacer></v-spacer>
253 </v-card-actions> 253 </v-card-actions>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-card-text> 256 </v-card-text>
257 </v-card> 257 </v-card>
258 </v-dialog> 258 </v-dialog>
259 <!-- ****** PROFILE User DETAILS ****** --> 259 <!-- ****** PROFILE User DETAILS ****** -->
260 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable> 260 <v-dialog v-model="viewUserDialog" max-width="560px" scrollable>
261 <v-card flat class="card-style pa-3" dark> 261 <v-card flat class="card-style pa-3" dark>
262 <v-layout> 262 <v-layout>
263 <v-flex xs12> 263 <v-flex xs12>
264 <label class="title text-xs-center">View User</label> 264 <label class="title text-xs-center">View User</label>
265 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon> 265 <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-card-text> 268 <v-card-text>
269 <v-container grid-list-md> 269 <v-container grid-list-md>
270 <v-layout wrap> 270 <v-layout wrap>
271 <v-flex> 271 <v-flex>
272 <v-flex align-center justify-center layout text-xs-center> 272 <v-flex align-center justify-center layout text-xs-center>
273 <v-avatar size="100px"> 273 <v-avatar size="100px">
274 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 274 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
275 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 275 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
276 </v-avatar> 276 </v-avatar>
277 </v-flex> 277 </v-flex>
278 <v-layout> 278 <v-layout>
279 <v-flex xs4 sm6> 279 <v-flex xs4 sm6>
280 <h5 class="right my-1"> 280 <h5 class="right my-1">
281 <b>Name:</b> 281 <b>Name:</b>
282 </h5> 282 </h5>
283 </v-flex> 283 </v-flex>
284 <v-flex sm6 xs8> 284 <v-flex sm6 xs8>
285 <h5 class="my-1">{{ editedItem.name }}</h5> 285 <h5 class="my-1">{{ editedItem.name }}</h5>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs4 sm6> 289 <v-flex xs4 sm6>
290 <h5 class="right my-1"> 290 <h5 class="right my-1">
291 <b>Email:</b> 291 <b>Email:</b>
292 </h5> 292 </h5>
293 </v-flex> 293 </v-flex>
294 <v-flex sm6 xs8> 294 <v-flex sm6 xs8>
295 <h5 class="my-1">{{ editedItem.email }}</h5> 295 <h5 class="my-1">{{ editedItem.email }}</h5>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout> 298 <v-layout>
299 <v-flex xs4 sm6> 299 <v-flex xs4 sm6>
300 <h5 class="right my-1"> 300 <h5 class="right my-1">
301 <b>Gender:</b> 301 <b>Gender:</b>
302 </h5> 302 </h5>
303 </v-flex> 303 </v-flex>
304 <v-flex sm6 xs8> 304 <v-flex sm6 xs8>
305 <h5 class="my-1">{{ editedItem.gender }}</h5> 305 <h5 class="my-1">{{ editedItem.gender }}</h5>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs4 sm6> 309 <v-flex xs4 sm6>
310 <h5 class="right my-1"> 310 <h5 class="right my-1">
311 <b>Religion:</b> 311 <b>Religion:</b>
312 </h5> 312 </h5>
313 </v-flex> 313 </v-flex>
314 <v-flex sm6 xs8> 314 <v-flex sm6 xs8>
315 <h5 class="my-1">{{ editedItem.religion }}</h5> 315 <h5 class="my-1">{{ editedItem.religion }}</h5>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <v-layout> 318 <v-layout>
319 <v-flex xs4 sm6> 319 <v-flex xs4 sm6>
320 <h5 class="right my-1"> 320 <h5 class="right my-1">
321 <b>Role:</b> 321 <b>Role:</b>
322 </h5> 322 </h5>
323 </v-flex> 323 </v-flex>
324 <v-flex sm6 xs8> 324 <v-flex sm6 xs8>
325 <h5 class="my-1">{{ editedItem.role }}</h5> 325 <h5 class="my-1">{{ editedItem.role }}</h5>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 <v-layout> 328 <v-layout>
329 <v-flex xs4 sm6> 329 <v-flex xs4 sm6>
330 <h5 class="right my-1"> 330 <h5 class="right my-1">
331 <b>Phone:</b> 331 <b>Phone:</b>
332 </h5> 332 </h5>
333 </v-flex> 333 </v-flex>
334 <v-flex sm6 xs8> 334 <v-flex sm6 xs8>
335 <h5 class="my-1">{{ editedItem.phone }}</h5> 335 <h5 class="my-1">{{ editedItem.phone }}</h5>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 <v-layout> 338 <v-layout>
339 <v-flex xs4 sm6> 339 <v-flex xs4 sm6>
340 <h5 class="right my-1"> 340 <h5 class="right my-1">
341 <b>JoiningDate:</b> 341 <b>JoiningDate:</b>
342 </h5> 342 </h5>
343 </v-flex> 343 </v-flex>
344 <v-flex sm6 xs8> 344 <v-flex sm6 xs8>
345 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5> 345 <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs4 sm6> 349 <v-flex xs4 sm6>
350 <h5 class="right my-1"> 350 <h5 class="right my-1">
351 <label class="right hidden-sm-only hidden-xs-only"> 351 <label class="right hidden-sm-only hidden-xs-only">
352 <b>Date of Birth:</b> 352 <b>Date of Birth:</b>
353 </label> 353 </label>
354 <label class="right hidden-lg-only hidden-xl-only hidden-md-only"> 354 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
355 <b>D.O.B:</b> 355 <b>D.O.B:</b>
356 </label> 356 </label>
357 </h5> 357 </h5>
358 </v-flex> 358 </v-flex>
359 <v-flex sm6 xs8> 359 <v-flex sm6 xs8>
360 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 360 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
361 </v-flex> 361 </v-flex>
362 </v-layout> 362 </v-layout>
363 <v-layout> 363 <v-layout>
364 <v-flex xs4 sm6> 364 <v-flex xs4 sm6>
365 <h5 class="right my-1"> 365 <h5 class="right my-1">
366 <b>Address:</b> 366 <b>Address:</b>
367 </h5> 367 </h5>
368 </v-flex> 368 </v-flex>
369 <v-flex sm6 xs8> 369 <v-flex sm6 xs8>
370 <h5 class="my-1">{{ editedItem.address }}</h5> 370 <h5 class="my-1">{{ editedItem.address }}</h5>
371 </v-flex> 371 </v-flex>
372 </v-layout> 372 </v-layout>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 </v-container> 375 </v-container>
376 </v-card-text> 376 </v-card-text>
377 </v-card> 377 </v-card>
378 </v-dialog> 378 </v-dialog>
379 379
380 <!-- ****** EXISTING-USER TABLE DATA****** --> 380 <!-- ****** EXISTING-USER TABLE DATA****** -->
381 <v-toolbar color="transparent" flat> 381 <v-toolbar color="transparent" flat>
382 <v-btn 382 <v-btn
383 fab 383 fab
384 dark 384 dark
385 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 385 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
386 small 386 small
387 @click="addUserDialog = true" 387 @click="addUserDialog = true"
388 > 388 >
389 <v-icon dark>add</v-icon> 389 <v-icon dark>add</v-icon>
390 </v-btn> 390 </v-btn>
391 <v-btn 391 <v-btn
392 round 392 round
393 class="open-dialog-button hidden-sm-only hidden-xs-only" 393 class="open-dialog-button hidden-sm-only hidden-xs-only"
394 dark 394 dark
395 @click="addUserDialog = true" 395 @click="addUserDialog = true"
396 > 396 >
397 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User 397 <v-icon class="white--text pr-1" size="20">add</v-icon>Add User
398 </v-btn> 398 </v-btn>
399 <v-spacer></v-spacer> 399 <v-spacer></v-spacer>
400 <v-card-title class="body-1" v-show="show"> 400 <v-card-title class="body-1" v-show="show">
401 <v-btn icon large flat @click="displaySearch"> 401 <v-btn icon large flat @click="displaySearch">
402 <v-avatar size="27"> 402 <v-avatar size="27">
403 <img src="/static/icon/search.png" alt="icon" /> 403 <img src="/static/icon/search.png" alt="icon" />
404 </v-avatar> 404 </v-avatar>
405 </v-btn> 405 </v-btn>
406 </v-card-title> 406 </v-card-title>
407 <v-flex xs8 sm8 lg2 md3 v-show="showSearch"> 407 <v-flex xs8 sm8 lg2 md3 v-show="showSearch">
408 <v-layout> 408 <v-layout>
409 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 409 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
410 <v-icon @click="closeSearch" color="error">close</v-icon> 410 <v-icon @click="closeSearch" color="error">close</v-icon>
411 </v-layout> 411 </v-layout>
412 </v-flex> 412 </v-flex>
413 </v-toolbar> 413 </v-toolbar>
414 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search"> 414 <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">
415 <template slot="items" slot-scope="props"> 415 <template slot="items" slot-scope="props">
416 <td class="td td-row">{{ props.index + 1 }}</td> 416 <td class="td td-row">{{ props.index + 1 }}</td>
417 <td class="td td-row text-xs-center"> 417 <td class="td td-row text-xs-center">
418 <v-avatar size="40"> 418 <v-avatar size="40">
419 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 419 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
420 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 420 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
421 </v-avatar> 421 </v-avatar>
422 </td> 422 </td>
423 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 423 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
424 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 424 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
425 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td> 425 <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
426 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td> 426 <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
427 <td class="text-xs-center td td-row">{{ props.item.phone }}</td> 427 <td class="text-xs-center td td-row">{{ props.item.phone }}</td>
428 <td class="text-xs-center td td-row"> 428 <td class="text-xs-center td td-row">
429 <v-switch 429 <v-switch
430 class="pl-3" 430 class="pl-3"
431 v-model="props.item.status" 431 v-model="props.item.status"
432 @change="suspendStatus(props.item.status,props.item._id)" 432 @change="suspendStatus(props.item.status,props.item._id)"
433 ></v-switch> 433 ></v-switch>
434 </td> 434 </td>
435 <td class="text-xs-center td td-row"> 435 <td class="text-xs-center td td-row">
436 <span> 436 <span>
437 <v-tooltip top> 437 <v-tooltip top>
438 <img 438 <img
439 slot="activator" 439 slot="activator"
440 style="cursor:pointer; width:25px; height:25px; " 440 style="cursor:pointer; width:25px; height:25px; "
441 class="mr-3" 441 class="mr-3"
442 @click="profile(props.item)" 442 @click="profile(props.item)"
443 src="/static/icon/view.png" 443 src="/static/icon/view.png"
444 /> 444 />
445 <span>View</span> 445 <span>View</span>
446 </v-tooltip> 446 </v-tooltip>
447 <v-tooltip top> 447 <v-tooltip top>
448 <img 448 <img
449 slot="activator" 449 slot="activator"
450 style="cursor:pointer; width:20px; height:18px; " 450 style="cursor:pointer; width:20px; height:18px; "
451 class="mr-3" 451 class="mr-3"
452 @click="editItem(props.item)" 452 @click="editItem(props.item)"
453 src="/static/icon/edit.png" 453 src="/static/icon/edit.png"
454 /> 454 />
455 <span>Edit</span> 455 <span>Edit</span>
456 </v-tooltip> 456 </v-tooltip>
457 <v-tooltip top> 457 <v-tooltip top>
458 <img 458 <img
459 slot="activator" 459 slot="activator"
460 style="cursor:pointer; width:20px; height:20px; " 460 style="cursor:pointer; width:20px; height:20px; "
461 class="mr-3" 461 class="mr-3"
462 @click="deleteItem(props.item)" 462 @click="deleteItem(props.item)"
463 src="/static/icon/delete.png" 463 src="/static/icon/delete.png"
464 /> 464 />
465 <span>Delete</span> 465 <span>Delete</span>
466 </v-tooltip> 466 </v-tooltip>
467 </span> 467 </span>
468 </td> 468 </td>
469 </template> 469 </template>
470 <v-alert 470 <v-alert
471 slot="no-results" 471 slot="no-results"
472 :value="true" 472 :value="true"
473 color="error" 473 color="error"
474 icon="warning" 474 icon="warning"
475 >Your search for "{{ search }}" found no results.</v-alert> 475 >Your search for "{{ search }}" found no results.</v-alert>
476 </v-data-table> 476 </v-data-table>
477 <!-- ****** Add User Data****** --> 477 <!-- ****** Add User Data****** -->
478 <v-dialog v-model="addUserDialog" max-width="900px"> 478 <v-dialog v-model="addUserDialog" max-width="900px">
479 <v-card flat class="card-style pa-2" dark> 479 <v-card flat class="card-style pa-2" dark>
480 <v-layout> 480 <v-layout>
481 <v-flex xs12> 481 <v-flex xs12>
482 <label class="title text-xs-center">Add User</label> 482 <label class="title text-xs-center">Add User</label>
483 <v-icon size="24" class="right" @click="addUserDialog = false">cancel</v-icon> 483 <v-icon size="24" class="right" @click="addUserDialog = false">cancel</v-icon>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 <v-form ref="form" v-model="valid" lazy-validation> 486 <v-form ref="form" v-model="valid" lazy-validation>
487 <v-container fluid> 487 <v-container fluid>
488 <v-layout> 488 <v-layout>
489 <v-flex 489 <v-flex
490 xs12 490 xs12
491 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 491 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
492 > 492 >
493 <v-avatar size="80px"> 493 <v-avatar size="80px">
494 <img src="/static/icon/user.png" v-if="!imageUrl" /> 494 <img src="/static/icon/user.png" v-if="!imageUrl" />
495 </v-avatar> 495 </v-avatar>
496 <img 496 <img
497 :src="imageUrl" 497 :src="imageUrl"
498 height="150" 498 height="150"
499 v-if="imageUrl" 499 v-if="imageUrl"
500 style="border-radius:50%; width:150px" 500 style="border-radius:50%; width:150px"
501 /> 501 />
502 </v-flex> 502 </v-flex>
503 </v-layout> 503 </v-layout>
504 <v-layout> 504 <v-layout>
505 <v-flex xs12 sm6> 505 <v-flex xs12 sm6>
506 <v-layout> 506 <v-layout>
507 <v-flex xs4 class="pt-4 subheading"> 507 <v-flex xs4 class="pt-4 subheading">
508 <label class="right">Name:</label> 508 <label class="right">Name:</label>
509 </v-flex> 509 </v-flex>
510 <v-flex xs8 class="ml-3"> 510 <v-flex xs8 class="ml-3">
511 <v-text-field 511 <v-text-field
512 v-model="addUser.name" 512 v-model="addUser.name"
513 placeholder="fill your Name" 513 placeholder="fill your Name"
514 name="name" 514 name="name"
515 type="text" 515 type="text"
516 :rules="nameRules" 516 :rules="nameRules"
517 required 517 required
518 ></v-text-field> 518 ></v-text-field>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 </v-flex> 521 </v-flex>
522 <v-flex xs12 sm6> 522 <v-flex xs12 sm6>
523 <v-layout> 523 <v-layout>
524 <v-flex xs4 class="pt-4 subheading"> 524 <v-flex xs4 class="pt-4 subheading">
525 <label class="right">Email ID:</label> 525 <label class="right">Email ID:</label>
526 </v-flex> 526 </v-flex>
527 <v-flex xs8 class="ml-3"> 527 <v-flex xs8 class="ml-3">
528 <v-text-field 528 <v-text-field
529 placeholder="fill your email" 529 placeholder="fill your email"
530 :rules="emailRules" 530 :rules="emailRules"
531 v-model="addUser.email" 531 v-model="addUser.email"
532 type="text" 532 type="text"
533 name="email" 533 name="email"
534 required 534 required
535 ></v-text-field> 535 ></v-text-field>
536 </v-flex> 536 </v-flex>
537 </v-layout> 537 </v-layout>
538 </v-flex> 538 </v-flex>
539 </v-layout> 539 </v-layout>
540 <v-layout> 540 <v-layout>
541 <v-flex xs12 sm6> 541 <v-flex xs12 sm6>
542 <v-layout> 542 <v-layout>
543 <v-flex xs4 class="pt-4 subheading"> 543 <v-flex xs4 class="pt-4 subheading">
544 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label> 544 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
545 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label> 545 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
546 </v-flex> 546 </v-flex>
547 <v-flex xs8 class="ml-3"> 547 <v-flex xs8 class="ml-3">
548 <v-menu 548 <v-menu
549 ref="menu" 549 ref="menu"
550 :close-on-content-click="false" 550 :close-on-content-click="false"
551 v-model="menu" 551 v-model="menu"
552 :nudge-right="40" 552 :nudge-right="40"
553 lazy 553 lazy
554 transition="scale-transition" 554 transition="scale-transition"
555 offset-y 555 offset-y
556 full-width 556 full-width
557 min-width="290px" 557 min-width="290px"
558 > 558 >
559 <v-text-field 559 <v-text-field
560 slot="activator" 560 slot="activator"
561 :rules="dateRules" 561 :rules="dateRules"
562 v-model="addUser.dob" 562 v-model="addUser.dob"
563 placeholder="Select DOB" 563 placeholder="Select DOB"
564 ></v-text-field> 564 ></v-text-field>
565 <v-date-picker 565 <v-date-picker
566 ref="picker" 566 ref="picker"
567 v-model="addUser.dob" 567 v-model="addUser.dob"
568 :max="new Date().toISOString().substr(0, 10)" 568 :max="new Date().toISOString().substr(0, 10)"
569 min="1950-01-01" 569 min="1950-01-01"
570 @input="menu = false" 570 @input="menu = false"
571 ></v-date-picker> 571 ></v-date-picker>
572 </v-menu> 572 </v-menu>
573 </v-flex> 573 </v-flex>
574 </v-layout> 574 </v-layout>
575 </v-flex> 575 </v-flex>
576 <v-flex xs12 sm6> 576 <v-flex xs12 sm6>
577 <v-layout> 577 <v-layout>
578 <v-flex xs4 class="pt-4 subheading"> 578 <v-flex xs4 class="pt-4 subheading">
579 <label class="right">Gender:</label> 579 <label class="right">Gender:</label>
580 </v-flex> 580 </v-flex>
581 <v-flex xs8 class="ml-3"> 581 <v-flex xs8 class="ml-3">
582 <v-select 582 <v-select
583 v-model="addUser.gender" 583 v-model="addUser.gender"
584 :items="gender" 584 :items="gender"
585 label="Selct Gender " 585 label="Selct Gender "
586 :rules="genderRules" 586 :rules="genderRules"
587 required 587 required
588 ></v-select> 588 ></v-select>
589 </v-flex> 589 </v-flex>
590 </v-layout> 590 </v-layout>
591 </v-flex> 591 </v-flex>
592 </v-layout> 592 </v-layout>
593 <v-layout> 593 <v-layout>
594 <v-flex xs12 sm6> 594 <v-flex xs12 sm6>
595 <v-layout> 595 <v-layout>
596 <v-flex xs4 class="pt-4 subheading"> 596 <v-flex xs4 class="pt-4 subheading">
597 <label class="right">Religion:</label> 597 <label class="right">Religion:</label>
598 </v-flex> 598 </v-flex>
599 <v-flex xs8 class="ml-3"> 599 <v-flex xs8 class="ml-3">
600 <v-text-field 600 <v-text-field
601 v-model="addUser.religion" 601 v-model="addUser.religion"
602 placeholder="fill your Religion" 602 placeholder="fill your Religion"
603 name="Religion" 603 name="Religion"
604 type="text" 604 type="text"
605 :rules="religionRules" 605 :rules="religionRules"
606 required 606 required
607 ></v-text-field> 607 ></v-text-field>
608 </v-flex> 608 </v-flex>
609 </v-layout> 609 </v-layout>
610 </v-flex> 610 </v-flex>
611 <v-flex xs12 sm6> 611 <v-flex xs12 sm6>
612 <v-layout> 612 <v-layout>
613 <v-flex xs4 class="pt-4 subheading"> 613 <v-flex xs4 class="pt-4 subheading">
614 <label class="right">JoiningDate:</label> 614 <label class="right">JoiningDate:</label>
615 </v-flex> 615 </v-flex>
616 <v-flex xs8 class="ml-3"> 616 <v-flex xs8 class="ml-3">
617 <v-menu 617 <v-menu
618 ref="menu1" 618 ref="menu1"
619 :close-on-content-click="false" 619 :close-on-content-click="false"
620 v-model="menu1" 620 v-model="menu1"
621 :nudge-right="40" 621 :nudge-right="40"
622 lazy 622 lazy
623 transition="scale-transition" 623 transition="scale-transition"
624 offset-y 624 offset-y
625 full-width 625 full-width
626 min-width="290px" 626 min-width="290px"
627 > 627 >
628 <v-text-field 628 <v-text-field
629 slot="activator" 629 slot="activator"
630 :rules="joinDateRules" 630 :rules="joinDateRules"
631 v-model="addUser.joinDate" 631 v-model="addUser.joinDate"
632 placeholder="Select date" 632 placeholder="Select date"
633 ></v-text-field> 633 ></v-text-field>
634 <v-date-picker 634 <v-date-picker
635 ref="picker" 635 ref="picker"
636 v-model="addUser.joinDate" 636 v-model="addUser.joinDate"
637 :max="new Date().toISOString().substr(0, 10)" 637 :max="new Date().toISOString().substr(0, 10)"
638 min="1950-01-01" 638 min="1950-01-01"
639 @input="menu1 = false" 639 @input="menu1 = false"
640 ></v-date-picker> 640 ></v-date-picker>
641 </v-menu> 641 </v-menu>
642 </v-flex> 642 </v-flex>
643 </v-layout> 643 </v-layout>
644 </v-flex> 644 </v-flex>
645 </v-layout> 645 </v-layout>
646 <v-layout> 646 <v-layout>
647 <v-flex xs12 sm6> 647 <v-flex xs12 sm6>
648 <v-layout> 648 <v-layout>
649 <v-flex xs4 class="pt-4 subheading"> 649 <v-flex xs4 class="pt-4 subheading">
650 <label class="right">Phone :</label> 650 <label class="right">Phone :</label>
651 </v-flex> 651 </v-flex>
652 <v-flex xs8 class="ml-3"> 652 <v-flex xs8 class="ml-3">
653 <v-text-field 653 <v-text-field
654 v-model="addUser.mobileNo" 654 v-model="addUser.mobileNo"
655 placeholder="fill your Phone Number" 655 placeholder="fill your Phone Number"
656 name="mobileNo" 656 name="mobileNo"
657 type="number" 657 type="number"
658 :rules="mobileNoRules" 658 :rules="mobileNoRules"
659 required 659 required
660 ></v-text-field> 660 ></v-text-field>
661 </v-flex> 661 </v-flex>
662 </v-layout> 662 </v-layout>
663 </v-flex> 663 </v-flex>
664 <v-flex xs12 sm6> 664 <v-flex xs12 sm6>
665 <v-layout> 665 <v-layout>
666 <v-flex xs4 class="pt-4 subheading"> 666 <v-flex xs4 class="pt-4 subheading">
667 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label> 667 <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
668 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 668 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
669 </v-flex> 669 </v-flex>
670 <v-flex xs8 class="ml-3"> 670 <v-flex xs8 class="ml-3">
671 <v-autocomplete 671 <v-autocomplete
672 v-model="addUser.role" 672 v-model="addUser.role"
673 :rules="role" 673 :rules="role"
674 :items="userRole" 674 :items="userRole"
675 item-text="name" 675 item-text="name"
676 item-value="name" 676 item-value="name"
677 placeholder="Select Role Name" 677 placeholder="Select Role Name"
678 required 678 required
679 ></v-autocomplete> 679 ></v-autocomplete>
680 </v-flex> 680 </v-flex>
681 </v-layout> 681 </v-layout>
682 </v-flex> 682 </v-flex>
683 </v-layout> 683 </v-layout>
684 <v-layout wrap> 684 <v-layout wrap>
685 <!-- <v-flex xs12 sm6> 685 <!-- <v-flex xs12 sm6>
686 <v-layout> 686 <v-layout>
687 <v-flex xs4 class="pt-4 subheading"> 687 <v-flex xs4 class="pt-4 subheading">
688 <label class="right">Username:</label> 688 <label class="right">Username:</label>
689 </v-flex> 689 </v-flex>
690 <v-flex xs8 class="ml-3"> 690 <v-flex xs8 class="ml-3">
691 <v-text-field 691 <v-text-field
692 v-model="addUser.userName" 692 v-model="addUser.userName"
693 placeholder="fill your User Name" 693 placeholder="fill your User Name"
694 type="text" 694 type="text"
695 :rules="userNameRules" 695 :rules="userNameRules"
696 required 696 required
697 ></v-text-field> 697 ></v-text-field>
698 </v-flex> 698 </v-flex>
699 </v-layout> 699 </v-layout>
700 </v-flex> --> 700 </v-flex> -->
701 <v-flex xs12 sm6> 701 <v-flex xs12 sm6>
702 <v-layout> 702 <v-layout>
703 <v-flex xs4 class="pt-4 subheading"> 703 <v-flex xs4 class="pt-4 subheading">
704 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label> 704 <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
705 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label> 705 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
706 </v-flex> 706 </v-flex>
707 <v-flex xs8 class="ml-3"> 707 <v-flex xs8 class="ml-3">
708 <v-text-field 708 <v-text-field
709 label="Select Image" 709 label="Select Image"
710 @click="pickFile" 710 @click="pickFile"
711 v-model="imageName" 711 v-model="imageName"
712 append-icon="attach_file" 712 append-icon="attach_file"
713 ></v-text-field> 713 ></v-text-field>
714 <input 714 <input
715 type="file" 715 type="file"
716 style="display:none" 716 style="display:none"
717 ref="image" 717 ref="image"
718 accept="image/*" 718 accept="image/*"
719 @change="onFilePicked" 719 @change="onFilePicked"
720 /> 720 />
721 </v-flex> 721 </v-flex>
722 </v-layout> 722 </v-layout>
723 </v-flex> 723 </v-flex>
724 <v-flex xs12 sm6> 724 <v-flex xs12 sm6>
725 <v-layout> 725 <v-layout>
726 <v-flex xs4 class="pt-4 subheading"> 726 <v-flex xs4 class="pt-4 subheading">
727 <label class="right">Address:</label> 727 <label class="right">Address:</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 name="input-4-3" 731 name="input-4-3"
732 v-model="addUser.presentAddress" 732 v-model="addUser.presentAddress"
733 :rules="presentAddress" 733 :rules="presentAddress"
734 placeholder="fill Your present Address" 734 placeholder="fill Your present Address"
735 required 735 required
736 ></v-text-field> 736 ></v-text-field>
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> 741 <v-layout>
742 <v-flex xs12 sm12> 742 <v-flex xs12 sm12>
743 <v-layout class="right"> 743 <v-layout class="right">
744 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn> 744 <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
745 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 745 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
746 </v-layout> 746 </v-layout>
747 </v-flex> 747 </v-flex>
748 </v-layout> 748 </v-layout>
749 </v-container> 749 </v-container>
750 </v-form> 750 </v-form>
751 </v-card> 751 </v-card>
752 </v-dialog> 752 </v-dialog>
753 <div class="loader" v-if="showLoader"> 753 <div class="loader" v-if="showLoader">
754 <v-progress-circular indeterminate color="white"></v-progress-circular> 754 <v-progress-circular indeterminate color="white"></v-progress-circular>
755 </div> 755 </div>
756 <v-snackbar 756 <v-snackbar
757 :timeout="timeout" 757 :timeout="timeout"
758 :top="y === 'top'" 758 :top="y === 'top'"
759 :right="x === 'right'" 759 :right="x === 'right'"
760 :vertical="mode === 'vertical'" 760 :vertical="mode === 'vertical'"
761 v-model="snackbar" 761 v-model="snackbar"
762 :color="color" 762 :color="color"
763 >{{ text }}</v-snackbar> 763 >{{ text }}</v-snackbar>
764 </v-container> 764 </v-container>
765 </template> 765 </template>
766 766
767 <script> 767 <script>
768 import http from "@/Services/http.js"; 768 import http from "@/Services/http.js";
769 import Util from "@/util"; 769 import Util from "@/util";
770 import moment from "moment"; 770 import moment from "moment";
771 import _ from 'lodash'; 771 import _ from 'lodash';
772 772
773 export default { 773 export default {
774 data: () => ({ 774 data: () => ({
775 component: "report-generate", 775 component: "report-generate",
776 snackbar: false, 776 snackbar: false,
777 y: "top", 777 y: "top",
778 x: "right", 778 x: "right",
779 mode: "", 779 mode: "",
780 timeout: 3000, 780 timeout: 3000,
781 color: "", 781 color: "",
782 text: "", 782 text: "",
783 show: true, 783 show: true,
784 showSearch: false, 784 showSearch: false,
785 showLoader: false, 785 showLoader: false,
786 loading: false, 786 loading: false,
787 addUserDialog: false, 787 addUserDialog: false,
788 date: null, 788 date: null,
789 search: "", 789 search: "",
790 menu: false, 790 menu: false,
791 menu1: false, 791 menu1: false,
792 menu2: false, 792 menu2: false,
793 menu3: false, 793 menu3: false,
794 viewUserDialog: false, 794 viewUserDialog: false,
795 editUserDialog: false, 795 editUserDialog: false,
796 valid: true, 796 valid: true,
797 isActive: true, 797 isActive: true,
798 newActive: false, 798 newActive: false,
799 pagination: { 799 pagination: {
800 rowsPerPage: 10 800 rowsPerPage: 10
801 }, 801 },
802 imageData: {}, 802 imageData: {},
803 imageName: "", 803 imageName: "",
804 imageUrl: "", 804 imageUrl: "",
805 imageFile: "", 805 imageFile: "",
806 nameRules: [v => !!v || "Name is required"], 806 nameRules: [v => !!v || "Name is required"],
807 dateRules: [v => !!v || " DOB is required"], 807 dateRules: [v => !!v || " DOB is required"],
808 genderRules: [v => !!v || " Gender Name is required"], 808 genderRules: [v => !!v || " Gender Name is required"],
809 pincode: [v => !!v || " Pincode is required"], 809 pincode: [v => !!v || " Pincode is required"],
810 role: [v => !!v || "Role Name is required"], 810 role: [v => !!v || "Role Name is required"],
811 permanentAddress: [v => !!v || " Permanent Address is required"], 811 permanentAddress: [v => !!v || " Permanent Address is required"],
812 presentAddress: [v => !!v || " Present Address is required"], 812 presentAddress: [v => !!v || " Present Address is required"],
813 mobileNoRules: [v => !!v || "Phone Number is required"], 813 mobileNoRules: [v => !!v || "Phone Number is required"],
814 religionRules: [v => !!v || "Religion Name is required"], 814 religionRules: [v => !!v || "Religion Name is required"],
815 joinDateRules: [v => !!v || " Join Date is required"], 815 joinDateRules: [v => !!v || " Join Date is required"],
816 userNameRules: [v => !!v || " User Name is required"], 816 userNameRules: [v => !!v || " User Name is required"],
817 passwordRules: [v => !!v || " Password is required"], 817 passwordRules: [v => !!v || " Password is required"],
818 errorMessages: "", 818 errorMessages: "",
819 userRole: [], 819 userRole: [],
820 emailRules: [ 820 emailRules: [
821 v => !!v || "E-mail is required", 821 v => !!v || "E-mail is required",
822 v => 822 v =>
823 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 823 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
824 "E-mail must be valid" 824 "E-mail must be valid"
825 ], 825 ],
826 gender: ["Male", "Female"], 826 gender: ["Male", "Female"],
827 headers: [ 827 headers: [
828 { 828 {
829 text: "No", 829 text: "No",
830 align: "", 830 align: "",
831 sortable: false, 831 sortable: false,
832 value: "No" 832 value: "No"
833 }, 833 },
834 { 834 {
835 text: "Profile Pic", 835 text: "Profile Pic",
836 value: "profilePicUrl", 836 value: "profilePicUrl",
837 sortable: false, 837 sortable: false,
838 align: "center" 838 align: "center"
839 }, 839 },
840 { text: "Name", value: "name", sortable: false, align: "center" }, 840 { text: "Name", value: "name", sortable: false, align: "center" },
841 { text: "Email", value: "email", sortable: false, align: "center" }, 841 { text: "Email", value: "email", sortable: false, align: "center" },
842 { text: "DOB", value: "dob", sortable: false, align: "center" }, 842 { text: "DOB", value: "dob", sortable: false, align: "center" },
843 { 843 {
844 text: "Joining Date", 844 text: "Joining Date",
845 value: "joiningDate", 845 value: "joiningDate",
846 sortable: false, 846 sortable: false,
847 align: "center" 847 align: "center"
848 }, 848 },
849 { 849 {
850 text: "Phone", 850 text: "Phone",
851 value: "phone", 851 value: "phone",
852 sortable: false, 852 sortable: false,
853 align: "center" 853 align: "center"
854 }, 854 },
855 { 855 {
856 text: "Status", 856 text: "Status",
857 value: "status", 857 value: "status",
858 sortable: false, 858 sortable: false,
859 align: "center" 859 align: "center"
860 }, 860 },
861 { text: "Action", value: "", sortable: false, align: "center" } 861 { text: "Action", value: "", sortable: false, align: "center" }
862 ], 862 ],
863 Users: [], 863 Users: [],
864 editedIndex: -1, 864 editedIndex: -1,
865 upload: "", 865 upload: "",
866 editedItem: { 866 editedItem: {
867 role: "", 867 role: "",
868 name: "", 868 name: "",
869 email: "", 869 email: "",
870 dob: null, 870 dob: null,
871 gender: "", 871 gender: "",
872 role: "", 872 role: "",
873 address: "", 873 address: "",
874 phone: "", 874 phone: "",
875 religion: "", 875 religion: "",
876 joiningDate: null 876 joiningDate: null
877 }, 877 },
878 addUser: { 878 addUser: {
879 role: "", 879 role: "",
880 name: "", 880 name: "",
881 email: "", 881 email: "",
882 dob: null, 882 dob: null,
883 gender: "", 883 gender: "",
884 pincode: "", 884 pincode: "",
885 role: "", 885 role: "",
886 permanentAddress: "", 886 permanentAddress: "",
887 presentAddress: "", 887 presentAddress: "",
888 mobileNo: "", 888 mobileNo: "",
889 religion: "", 889 religion: "",
890 joiningDate: null 890 joiningDate: null
891 } 891 }
892 }), 892 }),
893 watch: { 893 watch: {
894 menu(val) { 894 menu(val) {
895 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 895 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
896 }, 896 },
897 menu1(val) { 897 menu1(val) {
898 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 898 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
899 } 899 }
900 }, 900 },
901 methods: { 901 methods: {
902 save(date) { 902 save(date) {
903 this.$refs.menu.save(date); 903 this.$refs.menu.save(date);
904 }, 904 },
905 save(date) { 905 save(date) {
906 this.$refs.menu1.save(date); 906 this.$refs.menu1.save(date);
907 }, 907 },
908 pickFile() { 908 pickFile() {
909 this.$refs.image.click(); 909 this.$refs.image.click();
910 }, 910 },
911 onFilePicked(e) { 911 onFilePicked(e) {
912 // console.log(e) 912 // console.log(e)
913 const files = e.target.files; 913 const files = e.target.files;
914 this.upload = e.target.files[0]; 914 this.upload = e.target.files[0];
915 console.log("imageData-upload========>", this.upload); 915 console.log("imageData-upload========>", this.upload);
916 if (files[0] !== undefined) { 916 if (files[0] !== undefined) {
917 this.imageName = files[0].name; 917 this.imageName = files[0].name;
918 if (this.imageName.lastIndexOf(".") <= 0) { 918 if (this.imageName.lastIndexOf(".") <= 0) {
919 return; 919 return;
920 } 920 }
921 const fr = new FileReader(); 921 const fr = new FileReader();
922 fr.readAsDataURL(files[0]); 922 fr.readAsDataURL(files[0]);
923 fr.addEventListener("load", () => { 923 fr.addEventListener("load", () => {
924 this.imageUrl = fr.result; 924 this.imageUrl = fr.result;
925 this.imageFile = files[0]; // this is an image file that can be sent to server... 925 this.imageFile = files[0]; // this is an image file that can be sent to server...
926 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 926 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
927 // console.log("upload=======>", this.imageData.imageUrl); 927 // console.log("upload=======>", this.imageData.imageUrl);
928 console.log("imageFile", this.imageUrl); 928 console.log("imageFile", this.imageUrl);
929 }); 929 });
930 } else { 930 } else {
931 this.imageName = ""; 931 this.imageName = "";
932 this.imageFile = ""; 932 this.imageFile = "";
933 this.imageUrl = ""; 933 this.imageUrl = "";
934 } 934 }
935 }, 935 },
936 dates: function(date) { 936 dates: function(date) {
937 return moment(date).format("MMMM DD, YYYY"); 937 return moment(date).format("MMMM DD, YYYY");
938 }, 938 },
939 getUsersList() { 939 getUsersList() {
940 this.showLoader = true; 940 this.showLoader = true;
941 var token = this.$store.state.token; 941 var token = this.$store.state.token;
942 http() 942 http()
943 .get("/getUsersList", { 943 .get("/getUsersList", {
944 headers: { Authorization: "Bearer " + token } 944 headers: { Authorization: "Bearer " + token }
945 }) 945 })
946 .then(response => { 946 .then(response => {
947 this.Users = response.data.data; 947 this.Users = response.data.data;
948 this.showLoader = false; 948 this.showLoader = false;
949 }) 949 })
950 .catch(error => { 950 .catch(error => {
951 this.showLoader = false; 951 this.showLoader = false;
952 if (error.response.status === 401) { 952 if (error.response.status === 401) {
953 this.$router.replace({ path: "/" }); 953 this.$router.replace({ path: "/" });
954 this.$store.dispatch("setToken", null); 954 this.$store.dispatch("setToken", null);
955 this.$store.dispatch("Id", null); 955 this.$store.dispatch("Id", null);
956 } 956 }
957 }); 957 });
958 }, 958 },
959 editItem(item) { 959 editItem(item) {
960 this.editedIndex = this.Users.indexOf(item); 960 this.editedIndex = this.Users.indexOf(item);
961 this.editedItem = Object.assign({}, item); 961 this.editedItem = Object.assign({}, item);
962 this.editedItem.dob = 962 this.editedItem.dob =
963 this.editedItem.dob != undefined 963 this.editedItem.dob != undefined
964 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 964 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
965 : (this.editedItem.dob = ""); 965 : (this.editedItem.dob = "");
966 for (let i = 0; i < this.userRole.length; i++) { 966 for (let i = 0; i < this.userRole.length; i++) {
967 if (this.userRole[i].role === this.editedItem.role) { 967 if (this.userRole[i].role === this.editedItem.role) {
968 this.editedItem.role = this.userRole[i].name; 968 this.editedItem.role = this.userRole[i].name;
969 } 969 }
970 } 970 }
971 this.editUserDialog = true; 971 this.editUserDialog = true;
972 }, 972 },
973 profile(item) { 973 profile(item) {
974 this.editedIndex = this.Users.indexOf(item); 974 this.editedIndex = this.Users.indexOf(item);
975 this.editedItem = Object.assign({}, item); 975 this.editedItem = Object.assign({}, item);
976 this.viewUserDialog = true; 976 this.viewUserDialog = true;
977 for (let i = 0; i < this.userRole.length; i++) { 977 for (let i = 0; i < this.userRole.length; i++) {
978 if (this.userRole[i].role === this.editedItem.role) { 978 if (this.userRole[i].role === this.editedItem.role) {
979 this.editedItem.role = this.userRole[i].name; 979 this.editedItem.role = this.userRole[i].name;
980 } 980 }
981 } 981 }
982 }, 982 },
983 deleteItem(item) { 983 deleteItem(item) {
984 let deleteUser = { 984 let deleteUser = {
985 userId: item._id 985 userId: item._id
986 }; 986 };
987 http() 987 http()
988 .delete( 988 .delete(
989 "/deleteUser", 989 "/deleteUser",
990 confirm("Are you sure you want to delete this?") && { 990 confirm("Are you sure you want to delete this?") && {
991 params: deleteUser 991 params: deleteUser
992 } 992 }
993 ) 993 )
994 .then(response => { 994 .then(response => {
995 this.snackbar = true; 995 this.snackbar = true;
996 this.text = response.data.message; 996 this.text = response.data.message;
997 this.color = "green"; 997 this.color = "green";
998 this.getUsersList(); 998 this.getUsersList();
999 }) 999 })
1000 .catch(error => { 1000 .catch(error => {
1001 this.snackbar = true; 1001 this.snackbar = true;
1002 this.color = "error"; 1002 this.color = "error";
1003 this.text = error.response.data.message; 1003 this.text = error.response.data.message;
1004 }); 1004 });
1005 }, 1005 },
1006 close() { 1006 close() {
1007 this.editUserDialog = false; 1007 this.editUserDialog = false;
1008 }, 1008 },
1009 closeProfileDialog() { 1009 closeProfileDialog() {
1010 this.viewUserDialog = false; 1010 this.viewUserDialog = false;
1011 }, 1011 },
1012 submit() { 1012 submit() {
1013 if (this.$refs.form.validate()) { 1013 if (this.$refs.form.validate()) {
1014 let addUserData = { 1014 let addUserData = {
1015 name: this.addUser.name, 1015 name: this.addUser.name,
1016 email: this.addUser.email, 1016 email: this.addUser.email,
1017 dob: this.addUser.dob, 1017 dob: this.addUser.dob,
1018 gender: this.addUser.gender, 1018 gender: this.addUser.gender,
1019 religion: this.addUser.religion, 1019 religion: this.addUser.religion,
1020 role: this.addUser.role, 1020 role: this.addUser.role,
1021 address: this.addUser.presentAddress, 1021 address: this.addUser.presentAddress,
1022 phone: this.addUser.mobileNo, 1022 phone: this.addUser.mobileNo,
1023 religion: this.addUser.religion, 1023 religion: this.addUser.religion,
1024 joiningDate: this.addUser.joinDate 1024 joiningDate: this.addUser.joinDate
1025 }; 1025 };
1026 if (this.imageUrl) { 1026 if (this.imageUrl) {
1027 var str = this.imageUrl; 1027 var str = this.imageUrl;
1028 const [baseUrl, imageUrl] = str.split(/,/); 1028 const [baseUrl, imageUrl] = str.split(/,/);
1029 addUserData.profilePicUrl = imageUrl; 1029 addUserData.profilePicUrl = imageUrl;
1030 } 1030 }
1031 this.loading = true; 1031 this.loading = true;
1032 http() 1032 http()
1033 .post("/createUser", addUserData) 1033 .post("/createUser", addUserData)
1034 .then(response => { 1034 .then(response => {
1035 this.imageUrl = ""; 1035 this.imageUrl = "";
1036 this.getUsersList(); 1036 this.getUsersList();
1037 this.snackbar = true; 1037 this.snackbar = true;
1038 this.addUserDialog = false; 1038 this.addUserDialog = false;
1039 this.text = response.data.message; 1039 this.text = response.data.message;
1040 this.color = "green"; 1040 this.color = "green";
1041 this.clear(); 1041 this.clear();
1042 this.loading = false; 1042 this.loading = false;
1043 }) 1043 })
1044 .catch(error => { 1044 .catch(error => {
1045 this.loading = false; 1045 this.loading = false;
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 }, 1051 },
1052 clear() { 1052 clear() {
1053 this.$refs.form.reset(); 1053 this.$refs.form.reset();
1054 this.imageUrl = ""; 1054 this.imageUrl = "";
1055 }, 1055 },
1056 save() { 1056 save() {
1057 this.loading = true; 1057 this.loading = true;
1058 for (let i = 0; i < this.userRole.length; i++) { 1058 for (let i = 0; i < this.userRole.length; i++) {
1059 if (this.userRole[i].name === this.editedItem.role) { 1059 if (this.userRole[i].name === this.editedItem.role) {
1060 this.editedItem.role = this.userRole[i].role; 1060 this.editedItem.role = this.userRole[i].role;
1061 } 1061 }
1062 } 1062 }
1063 this.editedItem.userId = this.editedItem._id; 1063 this.editedItem.userId = this.editedItem._id;
1064 if (this.imageUrl) { 1064 if (this.imageUrl) {
1065 var str = this.imageUrl; 1065 var str = this.imageUrl;
1066 const [baseUrl, imageUrl] = str.split(/,/); 1066 const [baseUrl, imageUrl] = str.split(/,/);
1067 this.editedItem.upload = imageUrl; 1067 this.editedItem.upload = imageUrl;
1068 } 1068 }
1069 http() 1069 http()
1070 .put("/updateUser", this.editedItem) 1070 .put("/updateUser", this.editedItem)
1071 .then(response => { 1071 .then(response => {
1072 this.snackbar = true; 1072 this.snackbar = true;
1073 this.text = response.data.message; 1073 this.text = response.data.message;
1074 this.color = "green"; 1074 this.color = "green";
1075 this.loading = false; 1075 this.loading = false;
1076 this.getUsersList(); 1076 this.getUsersList();
1077 this.close(); 1077 this.close();
1078 }) 1078 })
1079 .catch(error => { 1079 .catch(error => {
1080 this.loading = false; 1080 this.loading = false;
1081 this.snackbar = true; 1081 this.snackbar = true;
1082 this.text = error.response.data.message; 1082 this.text = error.response.data.message;
1083 this.color = "error"; 1083 this.color = "error";
1084 }); 1084 });
1085 }, 1085 },
1086 getRole() { 1086 getRole() {
1087 this.showLoader = true; 1087 this.showLoader = true;
1088 var token = this.$store.state.token; 1088 var token = this.$store.state.token;
1089 http() 1089 http()
1090 .get("/getRolesList", { 1090 .get("/getRolesList", {
1091 headers: { Authorization: "Bearer " + token } 1091 headers: { Authorization: "Bearer " + token }
1092 }) 1092 })
1093 .then(response => { 1093 .then(response => {
1094 this.userRole = response.data.data; 1094 this.userRole = response.data.data;
1095 this.showLoader = false; 1095 this.showLoader = false;
1096 this.userRole = response.data.data; 1096 this.userRole = response.data.data;
1097 console.log("response 1- ",response.data.data,"user role 1- ",this.userRole)
1098 var removedRoles = _.remove(this.userRole, function(c) { 1097 var removedRoles = _.remove(this.userRole, function(c) {
1099 //remove if color is green or yellow 1098 //remove if color is green or yellow
1100 return c.name === "SUPERADMIN" || c.name === "TEACHER" || c.name === "STUDENT" || c.name === "PARENT" ; 1099 return c.name === "ADMIN" ||c.name === "SUPERADMIN" || c.name === "TEACHER" || c.name === "STUDENT" || c.name === "PARENT" ;
1101 }); 1100 });
1102 console.log("response - ",response.data.data,"user role - ",this.userRole,"removed - ",removedRoles)
1103
1104 }) 1101 })
1105 .catch(error => { 1102 .catch(error => {
1106 this.showLoader = false; 1103 this.showLoader = false;
1107 1104
1108 }); 1105 });
1109 }, 1106 },
1110 suspendStatus(suspendStatus, id) { 1107 suspendStatus(suspendStatus, id) {
1111 let suspendStatusData = { 1108 let suspendStatusData = {
1112 userId: id, 1109 userId: id,
1113 status: suspendStatus 1110 status: suspendStatus
1114 }; 1111 };
1115 this.showLoader = true; 1112 this.showLoader = true;
1116 http() 1113 http()
1117 .put("/suspendUserAccount", suspendStatusData) 1114 .put("/suspendUserAccount", suspendStatusData)
1118 .then(response => { 1115 .then(response => {
1119 this.getUsersList(); 1116 this.getUsersList();
1120 this.text = response.data.message; 1117 this.text = response.data.message;
1121 this.snackbar = true; 1118 this.snackbar = true;
1122 this.showLoader = false; 1119 this.showLoader = false;
1123 }) 1120 })
1124 .catch(error => { 1121 .catch(error => {
1125 // console.log(error.response.data.data); 1122 // console.log(error.response.data.data);
1126 this.snackbar = true; 1123 this.snackbar = true;
1127 this.text = error.response.data.message; 1124 this.text = error.response.data.message;
1128 this.showLoader = false; 1125 this.showLoader = false;
1129 }); 1126 });
1130 }, 1127 },
1131 displaySearch() { 1128 displaySearch() {
1132 (this.show = false), (this.showSearch = true); 1129 (this.show = false), (this.showSearch = true);
1133 }, 1130 },
1134 closeSearch() { 1131 closeSearch() {
1135 this.showSearch = false; 1132 this.showSearch = false;
1136 this.show = true; 1133 this.show = true;
1137 this.search = ""; 1134 this.search = "";
1138 } 1135 }
1139 }, 1136 },
1140 mounted() { 1137 mounted() {
1141 this.getUsersList(); 1138 this.getUsersList();
1142 this.getRole(); 1139 this.getRole();
1143 } 1140 }
1144 }; 1141 };
1145 </script> 1142 </script>