viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 7bb043c068b5e70767dcb75948e8b526c55d1981

Authored by Shikha Mishra
1 parent 7151b71ec9
Exists in master and in 3 other branches amber-development, development, ui-design

set validation in roles

Showing 2 changed files with 31 additions and 17 deletions   Show diff stats
src/pages/Payroll/manageSalary.vue
Diff comments   View file @7bb043c
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-layout wrap> 3 <v-layout wrap>
4 <v-flex xs12 sm6> 4 <v-flex xs12 sm6>
5 <v-layout> 5 <v-layout>
6 <v-flex xs4 class="pt-4 subheading"> 6 <v-flex xs4 class="pt-4 subheading">
7 <label class="right hidden-sm-only hidden-xs-only">Role:</label> 7 <label class="right hidden-sm-only hidden-xs-only">Role:</label>
8 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label> 8 <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
9 </v-flex> 9 </v-flex>
10 <v-flex xs8 class="ml-3"> 10 <v-flex xs8 class="ml-3">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.role" 12 v-model="getReport.role"
13 :rules="role" 13 :rules="role"
14 :items="getRoles" 14 :items="getRoles"
15 item-text="name" 15 item-text="name"
16 item-value="role" 16 item-value="role"
17 placeholder="Select Role" 17 placeholder="Select Role"
18 @change="getUserDetailWithRoles" 18 @change="getUserDetailWithRoles"
19 required 19 required
20 ></v-autocomplete> 20 ></v-autocomplete>
21 </v-flex> 21 </v-flex>
22 </v-layout> 22 </v-layout>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 25
26 <!-- *** Salary Data *** --> 26 <!-- *** Salary Data *** -->
27 <v-data-table 27 <v-data-table
28 :headers="headers" 28 :headers="headers"
29 :items="roleList" 29 :items="roleList"
30 :pagination.sync="pagination" 30 :pagination.sync="pagination"
31 :search="search" 31 :search="search"
32 > 32 >
33 <template slot="items" slot-scope="props"> 33 <template slot="items" slot-scope="props">
34 <tr class="tr"> 34 <tr class="tr">
35 <td class="td td-row">{{ props.index + 1}}</td> 35 <td class="td td-row">{{ props.index + 1}}</td>
36 <td class="td td-row text-xs-center"> 36 <td class="td td-row text-xs-center">
37 <v-avatar size="40"> 37 <v-avatar size="40">
38 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 38 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
39 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 39 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
40 </v-avatar> 40 </v-avatar>
41 </td> 41 </td>
42 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 42 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
43 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td> 43 <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
44 <td class="text-xs-center td td-row"> 44 <td class="text-xs-center td td-row">
45 <span> 45 <span>
46 <v-tooltip top> 46 <v-tooltip top>
47 <img 47 <img
48 slot="activator" 48 slot="activator"
49 style="cursor:pointer; width:25px; height:25px; " 49 style="cursor:pointer; width:25px; height:25px; "
50 class="mr-3" 50 class="mr-3"
51 @click="profile(props.item)" 51 @click="profile(props.item)"
52 src="/static/icon/view.png" 52 src="/static/icon/view.png"
53 /> 53 />
54 <span>View</span> 54 <span>View</span>
55 </v-tooltip> 55 </v-tooltip>
56 <v-tooltip top> 56 <v-tooltip top>
57 <img 57 <img
58 slot="activator" 58 slot="activator"
59 style="cursor:pointer; width:20px; height:18px; " 59 style="cursor:pointer; width:20px; height:18px; "
60 class="mr-3" 60 class="mr-3"
61 @click="editItem(props.item)" 61 @click="editItem(props.item)"
62 src="/static/icon/edit.png" 62 src="/static/icon/edit.png"
63 /> 63 />
64 <span>Edit</span> 64 <span>Edit</span>
65 </v-tooltip> 65 </v-tooltip>
66 <v-tooltip top> 66 <v-tooltip top>
67 <img 67 <img
68 slot="activator" 68 slot="activator"
69 style="cursor:pointer; width:20px; height:20px; " 69 style="cursor:pointer; width:20px; height:20px; "
70 @click="deleteItem(props.item)" 70 @click="deleteItem(props.item)"
71 src="/static/icon/delete.png" 71 src="/static/icon/delete.png"
72 class="mr-3" 72 class="mr-3"
73 /> 73 />
74 <span>Delete</span> 74 <span>Delete</span>
75 </v-tooltip> 75 </v-tooltip>
76 </span> 76 </span>
77 </td> 77 </td>
78 </tr> 78 </tr>
79 </template> 79 </template>
80 <v-alert 80 <v-alert
81 slot="no-results" 81 slot="no-results"
82 :value="true" 82 :value="true"
83 color="error" 83 color="error"
84 icon="warning" 84 icon="warning"
85 >Your search for "{{ search }}" found no results.</v-alert> 85 >Your search for "{{ search }}" found no results.</v-alert>
86 </v-data-table> 86 </v-data-table>
87 87
88 <!-- ****** PROFILE VIEW ****** --> 88 <!-- ****** PROFILE VIEW ****** -->
89 89
90 <v-dialog v-model="profileSalaryDialog"> 90 <v-dialog v-model="profileSalaryDialog">
91 <v-card flat class="text-xs-center white--text"> 91 <v-card flat class="text-xs-center white--text">
92 <v-layout> 92 <v-layout>
93 <v-flex xs12 class="card-style pa-2"> 93 <v-flex xs12 class="card-style pa-2">
94 <label class="title text-xs-center">View Manage Salary</label> 94 <label class="title text-xs-center">View Manage Salary</label>
95 <v-icon 95 <v-icon
96 size="24" 96 size="24"
97 color="white" 97 color="white"
98 class="right" 98 class="right"
99 @click="profileSalaryDialog = false" 99 @click="profileSalaryDialog = false"
100 >cancel</v-icon> 100 >cancel</v-icon>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-layout wrap> 103 <v-layout wrap>
104 <v-flex xs12 sm12 md4> 104 <v-flex xs12 sm12 md4>
105 <v-card flat> 105 <v-card flat>
106 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 106 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
107 <v-card-text> 107 <v-card-text>
108 <v-container> 108 <v-container>
109 <v-layout wrap> 109 <v-layout wrap>
110 <v-flex xs12> 110 <v-flex xs12>
111 <v-layout> 111 <v-layout>
112 <v-flex 112 <v-flex
113 xs12 113 xs12
114 class="text-xs-center text-sm-center text-md-center text-lg-center" 114 class="text-xs-center text-sm-center text-md-center text-lg-center"
115 > 115 >
116 <v-avatar size="80px"> 116 <v-avatar size="80px">
117 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 117 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
118 <img 118 <img
119 :src="editedItem.profilePicUrl" 119 :src="editedItem.profilePicUrl"
120 v-else-if="editedItem.profilePicUrl" 120 v-else-if="editedItem.profilePicUrl"
121 /> 121 />
122 </v-avatar> 122 </v-avatar>
123 </v-flex> 123 </v-flex>
124 </v-layout> 124 </v-layout>
125 <v-layout> 125 <v-layout>
126 <v-flex xs12 sm12> 126 <v-flex xs12 sm12>
127 <h3 class="text-xs-center"> 127 <h3 class="text-xs-center">
128 <b>{{ editedItem.name }}</b> 128 <b>{{ editedItem.name }}</b>
129 </h3> 129 </h3>
130 <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p> 130 <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-layout style="border: 1px solid lightgrey;"> 133 <v-layout style="border: 1px solid lightgrey;">
134 <v-flex xs6 sm6 class="pa-0"> 134 <v-flex xs6 sm6 class="pa-0">
135 <h4 class="right"> 135 <h4 class="right">
136 <b>Join Date :</b> 136 <b>Join Date :</b>
137 </h4> 137 </h4>
138 </v-flex> 138 </v-flex>
139 <v-flex sm6 xs6 class="pa-0"> 139 <v-flex sm6 xs6 class="pa-0">
140 <h4>{{ editedItem.joinDate }}</h4> 140 <h4>{{ editedItem.joinDate }}</h4>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 <v-layout style="border: 1px solid lightgrey;"> 143 <v-layout style="border: 1px solid lightgrey;">
144 <v-flex xs6 sm6 class="pa-0"> 144 <v-flex xs6 sm6 class="pa-0">
145 <h4 class="right"> 145 <h4 class="right">
146 <b>Date of Birth :</b> 146 <b>Date of Birth :</b>
147 </h4> 147 </h4>
148 </v-flex> 148 </v-flex>
149 <v-flex sm6 xs6 class="pa-0"> 149 <v-flex sm6 xs6 class="pa-0">
150 <h4>{{ editedItem.dob }}</h4> 150 <h4>{{ editedItem.dob }}</h4>
151 </v-flex> 151 </v-flex>
152 </v-layout> 152 </v-layout>
153 <v-layout style="border: 1px solid lightgrey;"> 153 <v-layout style="border: 1px solid lightgrey;">
154 <v-flex xs6 sm6 class="pa-0"> 154 <v-flex xs6 sm6 class="pa-0">
155 <h4 class="right"> 155 <h4 class="right">
156 <b>Phone No :</b> 156 <b>Phone No :</b>
157 </h4> 157 </h4>
158 </v-flex> 158 </v-flex>
159 <v-flex sm6 xs6 class="pa-0"> 159 <v-flex sm6 xs6 class="pa-0">
160 <h4>{{ editedItem.mobileNo }}</h4> 160 <h4>{{ editedItem.mobileNo }}</h4>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-container> 165 </v-container>
166 </v-card-text> 166 </v-card-text>
167 </v-card> 167 </v-card>
168 </v-flex> 168 </v-flex>
169 <v-flex xs12 sm12 md8 v-if="viewSalary"> 169 <v-flex xs12 sm12 md8 v-if="viewSalary">
170 <v-card flat> 170 <v-card flat>
171 <v-flex xs12 sm12> 171 <v-flex xs12 sm12>
172 <v-container fluid grid-list-md> 172 <v-container fluid grid-list-md>
173 <v-layout wrap> 173 <v-layout wrap>
174 <v-flex xs12 sm12 md6> 174 <v-flex xs12 sm12 md6>
175 <v-card flat> 175 <v-card flat>
176 <v-form ref="form" lazy-validation class="py-4"> 176 <v-form ref="form" lazy-validation class="py-4">
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 hidden-xs-only">Salary Grades :</label> 179 <label class="right hidden-xs-only">Salary Grades :</label>
180 </v-flex> 180 </v-flex>
181 <v-flex xs8 sm7 class="ml-3"> 181 <v-flex xs8 sm7 class="ml-3">
182 <v-flex xs8 sm7 class="ml-3"> 182 <v-flex xs8 sm7 class="ml-3">
183 <v-text-field 183 <v-text-field
184 solo 184 solo
185 v-model="editedItem.salaryTemplate.salaryGrades" 185 v-model="editedItem.salaryTemplate.salaryGrades"
186 readonly 186 readonly
187 ></v-text-field> 187 ></v-text-field>
188 </v-flex> 188 </v-flex>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 <v-layout> 191 <v-layout>
192 <v-flex xs4 class="pt-4 subheading"> 192 <v-flex xs4 class="pt-4 subheading">
193 <label class="right">Basic Salary :</label> 193 <label class="right">Basic Salary :</label>
194 </v-flex> 194 </v-flex>
195 <v-flex xs8 sm7 class="ml-3"> 195 <v-flex xs8 sm7 class="ml-3">
196 <v-flex xs8 sm7 class="ml-3"> 196 <v-flex xs8 sm7 class="ml-3">
197 <v-text-field 197 <v-text-field
198 solo 198 solo
199 v-model="editedItem.salaryTemplate.basicSalary" 199 v-model="editedItem.salaryTemplate.basicSalary"
200 readonly 200 readonly
201 ></v-text-field> 201 ></v-text-field>
202 </v-flex> 202 </v-flex>
203 </v-flex> 203 </v-flex>
204 </v-layout> 204 </v-layout>
205 </v-form> 205 </v-form>
206 </v-card> 206 </v-card>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm12 md5></v-flex> 208 <v-flex xs12 sm12 md5></v-flex>
209 <v-flex xs12 sm12 md6> 209 <v-flex xs12 sm12 md6>
210 <v-card flat> 210 <v-card flat>
211 <v-toolbar> 211 <v-toolbar>
212 <h3>Allowances</h3> 212 <h3>Allowances</h3>
213 </v-toolbar> 213 </v-toolbar>
214 <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" :key="index"> 214 <v-layout
215 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances"
216 :key="index"
217 >
215 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 218 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
216 <v-text-field 219 <v-text-field
217 readonly 220 readonly
218 solo 221 solo
219 label="Enter Allowances Label" 222 label="Enter Allowances Label"
220 v-model="editedItem.allowancesName" 223 v-model="editedItem.allowancesName"
221 ></v-text-field> 224 ></v-text-field>
222 </v-flex> 225 </v-flex>
223 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 226 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
224 <v-text-field 227 <v-text-field
225 readonly 228 readonly
226 solo 229 solo
227 v-model="editedItem.allowancesValue" 230 v-model="editedItem.allowancesValue"
228 label="Enter Allowances Value" 231 label="Enter Allowances Value"
229 ></v-text-field> 232 ></v-text-field>
230 </v-flex> 233 </v-flex>
231 </v-layout> 234 </v-layout>
232 </v-card> 235 </v-card>
233 </v-flex> 236 </v-flex>
234 <v-flex xs12 sm12 md6> 237 <v-flex xs12 sm12 md6>
235 <v-card flat> 238 <v-card flat>
236 <v-toolbar> 239 <v-toolbar>
237 <h3>Deduction</h3> 240 <h3>Deduction</h3>
238 </v-toolbar> 241 </v-toolbar>
239 <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" :key="index"> 242 <v-layout
243 v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction"
244 :key="index"
245 >
240 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 246 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
241 <v-text-field 247 <v-text-field
242 readonly 248 readonly
243 solo 249 solo
244 label="Enter Deduction Label" 250 label="Enter Deduction Label"
245 v-model="editedItem.deductionName" 251 v-model="editedItem.deductionName"
246 ></v-text-field> 252 ></v-text-field>
247 </v-flex> 253 </v-flex>
248 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only"> 254 <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
249 <v-text-field 255 <v-text-field
250 readonly 256 readonly
251 solo 257 solo
252 label="Enter Deduction Value" 258 label="Enter Deduction Value"
253 v-model="editedItem.deductionValue" 259 v-model="editedItem.deductionValue"
254 ></v-text-field> 260 ></v-text-field>
255 </v-flex> 261 </v-flex>
256 </v-layout> 262 </v-layout>
257 <!-- <v-layout> 263 <!-- <v-layout>
258 <v-flex xs4 class="pt-4 subheading"> 264 <v-flex xs4 class="pt-4 subheading">
259 <v-text-field 265 <v-text-field
260 v-model="editedItem.salaryTemplate.deduction.deductionName" 266 v-model="editedItem.salaryTemplate.deduction.deductionName"
261 readonly 267 readonly
262 ></v-text-field> 268 ></v-text-field>
263 </v-flex> 269 </v-flex>
264 <v-flex xs8 sm7 class="ml-3"> 270 <v-flex xs8 sm7 class="ml-3">
265 <v-flex xs8 sm7 class="ml-3"> 271 <v-flex xs8 sm7 class="ml-3">
266 <v-text-field 272 <v-text-field
267 v-model="editedItem.salaryTemplate.deduction.deductionValue" 273 v-model="editedItem.salaryTemplate.deduction.deductionValue"
268 readonly 274 readonly
269 ></v-text-field> 275 ></v-text-field>
270 </v-flex> 276 </v-flex>
271 </v-flex> 277 </v-flex>
272 </v-layout> --> 278 </v-layout>-->
273 </v-card> 279 </v-card>
274 </v-flex> 280 </v-flex>
275 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 281 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
276 <v-card> 282 <v-card>
277 <v-toolbar> 283 <v-toolbar>
278 <h3>Total Salary Details</h3> 284 <h3>Total Salary Details</h3>
279 </v-toolbar> 285 </v-toolbar>
280 <v-layout> 286 <v-layout>
281 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 287 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
282 <v-text-field solo value="Gross Salary"></v-text-field> 288 <v-text-field solo value="Gross Salary"></v-text-field>
283 </v-flex> 289 </v-flex>
284 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 290 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
285 <v-flex xs8 sm7 class="ml-3"> 291 <v-flex xs8 sm7 class="ml-3">
286 <v-text-field 292 <v-text-field
287 v-model="editedItem.salaryTemplate.grossSalary" 293 v-model="editedItem.salaryTemplate.grossSalary"
288 solo 294 solo
289 readonly 295 readonly
290 ></v-text-field> 296 ></v-text-field>
291 </v-flex> 297 </v-flex>
292 </v-flex> 298 </v-flex>
293 </v-layout> 299 </v-layout>
294 <v-layout> 300 <v-layout>
295 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 301 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
296 <v-text-field solo value="Total Deduction"></v-text-field> 302 <v-text-field solo value="Total Deduction"></v-text-field>
297 </v-flex> 303 </v-flex>
298 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 304 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
299 <v-flex xs8 sm7 class="ml-3"> 305 <v-flex xs8 sm7 class="ml-3">
300 <v-text-field 306 <v-text-field
301 v-model="editedItem.salaryTemplate.totalDeduction" 307 v-model="editedItem.salaryTemplate.totalDeduction"
302 solo 308 solo
303 readonly 309 readonly
304 ></v-text-field> 310 ></v-text-field>
305 </v-flex> 311 </v-flex>
306 </v-flex> 312 </v-flex>
307 </v-layout> 313 </v-layout>
308 <v-layout> 314 <v-layout>
309 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 315 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
310 <v-text-field solo value="Net Salary"></v-text-field> 316 <v-text-field solo value="Net Salary"></v-text-field>
311 </v-flex> 317 </v-flex>
312 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 318 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
313 <v-flex xs8 sm7 class="ml-3"> 319 <v-flex xs8 sm7 class="ml-3">
314 <v-text-field 320 <v-text-field
315 v-model="editedItem.salaryTemplate.netSalary" 321 v-model="editedItem.salaryTemplate.netSalary"
316 solo 322 solo
317 readonly 323 readonly
318 ></v-text-field> 324 ></v-text-field>
319 </v-flex> 325 </v-flex>
320 </v-flex> 326 </v-flex>
321 </v-layout> 327 </v-layout>
322 </v-card> 328 </v-card>
323 </v-flex> 329 </v-flex>
324 </v-layout> 330 </v-layout>
325 </v-container> 331 </v-container>
326 </v-flex> 332 </v-flex>
327 </v-card> 333 </v-card>
328 </v-flex> 334 </v-flex>
329 <v-flex xs12 sm12 md8 v-if="viewHourly"> 335 <v-flex xs12 sm12 md8 v-if="viewHourly">
330 <v-card flat> 336 <v-card flat>
331 <v-flex xs12 sm12> 337 <v-flex xs12 sm12>
332 <v-container fluid grid-list-md> 338 <v-container fluid grid-list-md>
333 <v-layout wrap> 339 <v-layout wrap>
334 <v-flex xs12 sm12 md6> 340 <v-flex xs12 sm12 md6>
335 <v-card flat> 341 <v-card flat>
336 <v-form ref="form" lazy-validation class="py-4"> 342 <v-form ref="form" lazy-validation class="py-4">
337 <v-layout> 343 <v-layout>
338 <v-flex xs4 class="pt-4 subheading"> 344 <v-flex xs4 class="pt-4 subheading">
339 <label class="right hidden-xs-only">Hourly Grades :</label> 345 <label class="right hidden-xs-only">Hourly Grades :</label>
340 </v-flex> 346 </v-flex>
341 <v-flex xs8 sm7 class="ml-3"> 347 <v-flex xs8 sm7 class="ml-3">
342 <v-flex xs8 sm7 class="ml-3"> 348 <v-flex xs8 sm7 class="ml-3">
343 <v-text-field 349 <v-text-field
344 solo 350 solo
345 v-model="editedItem.hourlyTemplate.hourlyGrades" 351 v-model="editedItem.hourlyTemplate.hourlyGrades"
346 readonly 352 readonly
347 ></v-text-field> 353 ></v-text-field>
348 </v-flex> 354 </v-flex>
349 </v-flex> 355 </v-flex>
350 </v-layout> 356 </v-layout>
351 <v-layout> 357 <v-layout>
352 <v-flex xs4 class="pt-4 subheading"> 358 <v-flex xs4 class="pt-4 subheading">
353 <label class="right">Hourly Rate :</label> 359 <label class="right">Hourly Rate :</label>
354 </v-flex> 360 </v-flex>
355 <v-flex xs8 sm7 class="ml-3"> 361 <v-flex xs8 sm7 class="ml-3">
356 <v-flex xs8 sm7 class="ml-3"> 362 <v-flex xs8 sm7 class="ml-3">
357 <v-text-field 363 <v-text-field
358 solo 364 solo
359 v-model="editedItem.hourlyTemplate.hourlyRate" 365 v-model="editedItem.hourlyTemplate.hourlyRate"
360 readonly 366 readonly
361 ></v-text-field> 367 ></v-text-field>
362 </v-flex> 368 </v-flex>
363 </v-flex> 369 </v-flex>
364 </v-layout> 370 </v-layout>
365 </v-form> 371 </v-form>
366 </v-card> 372 </v-card>
367 </v-flex> 373 </v-flex>
368 <v-flex xs12 sm12 md12 style="padding-top: 1%;"> 374 <v-flex xs12 sm12 md12 style="padding-top: 1%;">
369 <v-card> 375 <v-card>
370 <v-toolbar> 376 <v-toolbar>
371 <h3>Total Salary Details</h3> 377 <h3>Total Salary Details</h3>
372 </v-toolbar> 378 </v-toolbar>
373 <v-layout> 379 <v-layout>
374 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 380 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
375 <v-text-field solo value="Gross Salary"></v-text-field> 381 <v-text-field solo value="Gross Salary"></v-text-field>
376 </v-flex> 382 </v-flex>
377 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 383 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
378 <v-flex xs8 sm7 class="ml-3"> 384 <v-flex xs8 sm7 class="ml-3">
379 <v-text-field 385 <v-text-field
380 v-model="editedItem.hourlyTemplate.grossSalary" 386 v-model="editedItem.hourlyTemplate.grossSalary"
381 solo 387 solo
382 readonly 388 readonly
383 ></v-text-field> 389 ></v-text-field>
384 </v-flex> 390 </v-flex>
385 </v-flex> 391 </v-flex>
386 </v-layout> 392 </v-layout>
387 <v-layout> 393 <v-layout>
388 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 394 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
389 <v-text-field solo value="Total Deduction"></v-text-field> 395 <v-text-field solo value="Total Deduction"></v-text-field>
390 </v-flex> 396 </v-flex>
391 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 397 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
392 <v-flex xs8 sm7 class="ml-3"> 398 <v-flex xs8 sm7 class="ml-3">
393 <v-text-field 399 <v-text-field
394 v-model="editedItem.hourlyTemplate.totalDeduction" 400 v-model="editedItem.hourlyTemplate.totalDeduction"
395 solo 401 solo
396 readonly 402 readonly
397 ></v-text-field> 403 ></v-text-field>
398 </v-flex> 404 </v-flex>
399 </v-flex> 405 </v-flex>
400 </v-layout> 406 </v-layout>
401 <v-layout> 407 <v-layout>
402 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only"> 408 <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
403 <v-text-field solo value="Net Hourly Rate"></v-text-field> 409 <v-text-field solo value="Net Hourly Rate"></v-text-field>
404 </v-flex> 410 </v-flex>
405 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only"> 411 <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
406 <v-flex xs8 sm7 class="ml-3"> 412 <v-flex xs8 sm7 class="ml-3">
407 <v-text-field 413 <v-text-field
408 v-model="editedItem.hourlyTemplate.netSalary" 414 v-model="editedItem.hourlyTemplate.netSalary"
409 solo 415 solo
410 readonly 416 readonly
411 ></v-text-field> 417 ></v-text-field>
412 </v-flex> 418 </v-flex>
413 </v-flex> 419 </v-flex>
414 </v-layout> 420 </v-layout>
415 </v-card> 421 </v-card>
416 </v-flex> 422 </v-flex>
417 </v-layout> 423 </v-layout>
418 </v-container> 424 </v-container>
419 </v-flex> 425 </v-flex>
420 </v-card> 426 </v-card>
421 </v-flex> 427 </v-flex>
422 </v-layout> 428 </v-layout>
423 </v-card> 429 </v-card>
424 </v-dialog> 430 </v-dialog>
425 431
426 <!-- ****** Edit Hourly Template ****** --> 432 <!-- ****** Edit Hourly Template ****** -->
427 <v-dialog v-model="editSalaryDialog" max-width="400px"> 433 <v-dialog v-model="editSalaryDialog" max-width="400px">
428 <v-card flat class="card-style pa-2" dark> 434 <v-card flat class="card-style pa-2" dark>
429 <v-layout> 435 <v-layout>
430 <v-flex xs12> 436 <v-flex xs12>
431 <label class="title text-xs-center">Edit Manage Salary</label> 437 <label class="title text-xs-center">Edit Manage Salary</label>
432 <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon> 438 <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon>
433 </v-flex> 439 </v-flex>
434 </v-layout> 440 </v-layout>
435 <v-form ref="form"> 441 <v-form ref="form">
436 <v-container fluid> 442 <v-container fluid>
437 <v-flex xs12 sm12> 443 <v-flex xs12 sm12>
438 <v-layout> 444 <v-layout>
439 <v-flex xs3 class="pt-4 subheading"> 445 <v-flex xs3 class="pt-4 subheading">
440 <label class="right">Salary:</label> 446 <label class="right">Salary:</label>
441 </v-flex> 447 </v-flex>
442 <v-flex xs8 sm7 class="ml-3"> 448 <v-flex xs8 sm7 class="ml-3">
443 <v-select 449 <v-select
444 :items="salary" 450 :items="salary"
445 v-model="editedItem.salary" 451 v-model="editedItem.salary"
446 placeholder="please fill this field" 452 placeholder="please fill this field"
447 @change="selectSalary()" 453 @change="selectSalary()"
448 ></v-select> 454 ></v-select>
449 </v-flex> 455 </v-flex>
450 </v-layout> 456 </v-layout>
451 </v-flex> 457 </v-flex>
452 <v-flex xs12 sm12> 458 <v-flex xs12 sm12>
453 <v-layout> 459 <v-layout>
454 <v-flex xs3 class="pt-4 subheading"> 460 <v-flex xs3 class="pt-4 subheading">
455 <label class="right">Template:</label> 461 <label class="right">Template:</label>
456 </v-flex> 462 </v-flex>
457 <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade"> 463 <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade">
458 <v-autocomplete 464 <v-autocomplete
459 v-model="editedItem.salaryId" 465 v-model="editedItem.salaryId"
460 :items="salaryData" 466 :items="salaryData"
461 item-text="salaryGrades" 467 item-text="salaryGrades"
462 item-value="_id" 468 item-value="_id"
463 placeholder="please fill this field" 469 placeholder="please fill this field"
464 @change="selectGrade()" 470 @change="selectGrade()"
465 required 471 required
466 ></v-autocomplete> 472 ></v-autocomplete>
467 </v-flex> 473 </v-flex>
468 <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades"> 474 <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades">
469 <v-autocomplete 475 <v-autocomplete
470 v-model="editedItem.salaryId" 476 v-model="editedItem.salaryId"
471 :items="hourlyData" 477 :items="hourlyData"
472 item-text="hourlyGrades" 478 item-text="hourlyGrades"
473 item-value="_id" 479 item-value="_id"
474 placeholder="please fill this field" 480 placeholder="please fill this field"
475 @change="selectGrade()" 481 @change="selectGrade()"
476 required 482 required
477 ></v-autocomplete> 483 ></v-autocomplete>
478 </v-flex> 484 </v-flex>
479 </v-layout> 485 </v-layout>
480 </v-flex> 486 </v-flex>
481 <v-layout> 487 <v-layout>
482 <v-flex xs12> 488 <v-flex xs12>
483 <v-layout> 489 <v-layout>
484 <v-spacer></v-spacer> 490 <v-spacer></v-spacer>
485 <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn> 491 <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn>
486 <v-spacer></v-spacer> 492 <v-spacer></v-spacer>
487 </v-layout> 493 </v-layout>
488 </v-flex> 494 </v-flex>
489 </v-layout> 495 </v-layout>
490 </v-container> 496 </v-container>
491 </v-form> 497 </v-form>
492 </v-card> 498 </v-card>
493 </v-dialog> 499 </v-dialog>
494 </v-container> 500 </v-container>
495 </template> 501 </template>
496 502
497 <script> 503 <script>
498 import http from "@/Services/http.js"; 504 import http from "@/Services/http.js";
499 import Util from "@/util"; 505 import Util from "@/util";
500 import moment from "moment"; 506 import moment from "moment";
501 export default { 507 export default {
502 data: () => ({ 508 data: () => ({
503 search: "", 509 search: "",
504 pagination: { 510 pagination: {
505 rowsPerPage: 10 511 rowsPerPage: 10
506 }, 512 },
507 513
508 role: [v => !!v || "Role Name is required"], 514 role: [v => !!v || "Role Name is required"],
509 getRoles: [], 515 getRoles: [],
510 teacherList: [], 516 teacherList: [],
511 roleList: [], 517 roleList: [],
512 salaryData: [], 518 salaryData: [],
513 hourlyData: [], 519 hourlyData: [],
514 salary: ["Monthly", "Hourly"], 520 salary: ["Monthly", "Hourly"],
515 521
516 salaryItem: "", 522 salaryItem: "",
517 523
518 getReport: { 524 getReport: {
519 role: "" 525 role: ""
520 }, 526 },
521 527
522 showTeacher: false, 528 showTeacher: false,
523 editSalaryDialog: false, 529 editSalaryDialog: false,
524 profileSalaryDialog: false, 530 profileSalaryDialog: false,
525 monthlyGrade: false, 531 monthlyGrade: false,
526 hourlyGrades: false, 532 hourlyGrades: false,
527 viewSalary: false, 533 viewSalary: false,
528 viewHourly: false, 534 viewHourly: false,
529 535
530 editedItem: { 536 editedItem: {
531 salaryTemplate: { 537 salaryTemplate: {
532 allowances: { 538 allowances: {},
533 539 deduction: {}
534 },
535 deduction: {
536
537 }
538 }, 540 },
539 hourlyTemplate: {} 541 hourlyTemplate: {}
540 }, 542 },
541 543
542 // salaryGrades: {}, 544 // salaryGrades: {},
543 // salaryTemplate: { 545 // salaryTemplate: {
544 // salaryGrades: "" 546 // salaryGrades: ""
545 // }, 547 // },
546 // salaryTemplate :{ 548 // salaryTemplate :{
547 // allowances: { 549 // allowances: {
548 // allowancesName: "", 550 // allowancesName: "",
549 // allowancesValue: "" 551 // allowancesValue: ""
550 // }, 552 // },
551 // deduction: { 553 // deduction: {
552 // deductionName: "", 554 // deductionName: "",
553 // deductionValue: "" 555 // deductionValue: ""
554 // } 556 // }
555 // }, 557 // },
556 558
557 headers: [ 559 headers: [
558 { 560 {
559 text: "No", 561 text: "No",
560 align: "", 562 align: "",
561 sortable: false, 563 sortable: false,
562 value: "No" 564 value: "No"
563 }, 565 },
564 { 566 {
565 text: "Profile Pic", 567 text: "Profile Pic",
566 value: "profilePicUrl", 568 value: "profilePicUrl",
567 sortable: false, 569 sortable: false,
568 align: "center" 570 align: "center"
569 }, 571 },
570 { text: "Name", value: "name", sortable: false, align: "center" }, 572 { text: "Name", value: "name", sortable: false, align: "center" },
571 { 573 {
572 text: "Join Date", 574 text: "Join Date",
573 value: "joinDate", 575 value: "joinDate",
574 sortable: false, 576 sortable: false,
575 align: "center" 577 align: "center"
576 }, 578 },
577 { text: "Action", value: "", sortable: false, align: "center" } 579 { text: "Action", value: "", sortable: false, align: "center" }
578 ], 580 ],
579 desserts: [], 581 desserts: []
580 }), 582 }),
581 583
582 methods: { 584 methods: {
583 close() { 585 close() {
584 this.editHourDialog = false; 586 this.editHourDialog = false;
585 }, 587 },
586 dates: function(date) { 588 dates: function(date) {
587 return moment(date).format("MMMM DD, YYYY"); 589 return moment(date).format("MMMM DD, YYYY");
588 }, 590 },
589 editItem(item) { 591 editItem(item) {
590 this.editedIndex = this.roleList.indexOf(item); 592 this.editedIndex = this.roleList.indexOf(item);
591 this.editedItem = Object.assign({}, item); 593 this.editedItem = Object.assign({}, item);
592 this.editSalaryDialog = true; 594 this.editSalaryDialog = true;
593 }, 595 },
594 profile(item) { 596 profile(item) {
595 this.editedIndex = this.roleList.indexOf(item); 597 this.editedIndex = this.roleList.indexOf(item);
596 this.editedItem = Object.assign({}, item); 598 this.editedItem = Object.assign({}, item);
597 this.profileSalaryDialog = true; 599 this.profileSalaryDialog = true;
598 // console.log("item", item); 600 // console.log("item", item);
599 if(item.salaryTemplate) { 601 if (item.salaryTemplate) {
600 this.viewSalary = true; 602 this.viewSalary = true;
601 this.viewHourly = false 603 this.viewHourly = false;
602 } else { 604 } else {
603 this.viewHourly = true; 605 this.viewHourly = true;
604 this.viewSalary = false 606 this.viewSalary = false;
605 } 607 }
606 }, 608 },
607 getRole() { 609 getRole() {
608 this.showLoader = true; 610 this.showLoader = true;
609 var token = this.$store.state.token; 611 var token = this.$store.state.token;
610 http() 612 http()
611 .get("/getRolesList", { 613 .get("/getRolesList", {
612 headers: { Authorization: "Bearer " + token } 614 headers: { Authorization: "Bearer " + token }
613 }) 615 })
614 .then(response => { 616 .then(response => {
615 this.getRoles = response.data.data; 617 this.getRoles = response.data.data;
616 if (this.getRoles[2].role !== 3) { 618 // if (this.getRoles[2].role !== 3) {
617 this.getRoles = response.data.data; 619 // this.getRoles = response.data.data;
618 console.log("roles", this.getRoles[2].role); 620 // console.log("roles", this.getRoles[2].role);
619 } 621 // }
622 this.getRoles = response.data.data;
623 var removedRoles = _.remove(this.getRoles, function(c) {
624 //remove if color is green or yellow
625 return c.role === 1 || c.role === 4 || c.role === 5;
626 // console.log(c);
627 });
620 this.showLoader = false; 628 this.showLoader = false;
621 }) 629 })
622 .catch(error => { 630 .catch(error => {
623 this.showLoader = false; 631 this.showLoader = false;
624 if (error.response.status === 401) { 632 if (error.response.status === 401) {
625 this.$router.replace({ path: "/" }); 633 this.$router.replace({ path: "/" });
626 this.$store.dispatch("setToken", null); 634 this.$store.dispatch("setToken", null);
627 this.$store.dispatch("Id", null); 635 this.$store.dispatch("Id", null);
628 } 636 }
629 }); 637 });
630 }, 638 },
631 639
632 getRoleInputs(role) { 640 getRoleInputs(role) {
633 // console.log("role", role); 641 // console.log("role", role);
634 if (role === 3) { 642 if (role === 3) {
635 this.showTeacher = true; 643 this.showTeacher = true;
636 this.getTeacherList(); 644 this.getTeacherList();
637 } 645 }
638 }, 646 },
639 647
640 getTeacherList() { 648 getTeacherList() {
641 this.showLoader = true; 649 this.showLoader = true;
642 var token = this.$store.state.token; 650 var token = this.$store.state.token;
643 http() 651 http()
644 .get("/getTeachersList", { 652 .get("/getTeachersList", {
645 headers: { Authorization: "Bearer " + token } 653 headers: { Authorization: "Bearer " + token }
646 }) 654 })
647 .then(response => { 655 .then(response => {
648 this.teacherList = response.data.data; 656 this.teacherList = response.data.data;
649 this.showTeacher = true; 657 this.showTeacher = true;
650 this.showLoader = false; 658 this.showLoader = false;
651 }) 659 })
652 .catch(error => { 660 .catch(error => {
653 this.showLoader = false; 661 this.showLoader = false;
654 if (error.response.status === 401) { 662 if (error.response.status === 401) {
655 this.$router.replace({ path: "/" }); 663 this.$router.replace({ path: "/" });
656 this.$store.dispatch("setToken", null); 664 this.$store.dispatch("setToken", null);
657 this.$store.dispatch("Id", null); 665 this.$store.dispatch("Id", null);
658 } 666 }
659 }); 667 });
660 }, 668 },
661 669
662 getUserDetailWithRoles() { 670 getUserDetailWithRoles() {
663 this.showLoader = true; 671 this.showLoader = true;
664 http() 672 http()
665 .get( 673 .get(
666 "/getUserDetailWithRoles", 674 "/getUserDetailWithRoles",
667 { params: { role: this.getReport.role } }, 675 { params: { role: this.getReport.role } },
668 { 676 {
669 headers: { Authorization: "Bearer " + this.token } 677 headers: { Authorization: "Bearer " + this.token }
670 } 678 }
671 ) 679 )
672 .then(response => { 680 .then(response => {
673 this.roleList = response.data.data; 681 this.roleList = response.data.data;
674 this.showLoader = false; 682 this.showLoader = false;
675 }) 683 })
676 .catch(err => { 684 .catch(err => {
677 this.showLoader = false; 685 this.showLoader = false;
678 }); 686 });
679 }, 687 },
680 getSalaryList() { 688 getSalaryList() {
681 this.showLoader = true; 689 this.showLoader = true;
682 this.loadingSearch = true; 690 this.loadingSearch = true;
683 http() 691 http()
684 .get("/getSalaryList", { 692 .get("/getSalaryList", {
685 headers: { Authorization: "Bearer " + this.token } 693 headers: { Authorization: "Bearer " + this.token }
686 }) 694 })
687 .then(response => { 695 .then(response => {
688 this.salaryData = response.data.data; 696 this.salaryData = response.data.data;
689 this.showLoader = false; 697 this.showLoader = false;
690 this.loadingSearch = false; 698 this.loadingSearch = false;
691 }) 699 })
692 .catch(error => { 700 .catch(error => {
693 // console.log("err====>", err); 701 // console.log("err====>", err);
694 this.showLoader = false; 702 this.showLoader = false;
695 this.loadingSearch = false; 703 this.loadingSearch = false;
696 this.snackbar = true; 704 this.snackbar = true;
697 this.text = error.response.data.message; 705 this.text = error.response.data.message;
698 if (error.response.status === 401) { 706 if (error.response.status === 401) {
699 this.$router.replace({ path: "/" }); 707 this.$router.replace({ path: "/" });
700 this.$store.dispatch("setToken", null); 708 this.$store.dispatch("setToken", null);
701 this.$store.dispatch("Id", null); 709 this.$store.dispatch("Id", null);
702 } 710 }
703 }); 711 });
704 }, 712 },
705 getHourlyList() { 713 getHourlyList() {
706 this.showLoader = true; 714 this.showLoader = true;
707 this.loadingSearch = true; 715 this.loadingSearch = true;
708 http() 716 http()
709 .get("/getHourlyList", { 717 .get("/getHourlyList", {
710 headers: { Authorization: "Bearer " + this.token } 718 headers: { Authorization: "Bearer " + this.token }
711 }) 719 })
712 .then(response => { 720 .then(response => {
713 this.hourlyData = response.data.data; 721 this.hourlyData = response.data.data;
714 this.showLoader = false; 722 this.showLoader = false;
715 this.loadingSearch = false; 723 this.loadingSearch = false;
716 }) 724 })
717 .catch(error => { 725 .catch(error => {
718 // console.log("err====>", err); 726 // console.log("err====>", err);
719 this.showLoader = false; 727 this.showLoader = false;
720 this.loadingSearch = false; 728 this.loadingSearch = false;
721 this.snackbar = true; 729 this.snackbar = true;
722 this.text = error.response.data.message; 730 this.text = error.response.data.message;
723 if (error.response.status === 401) { 731 if (error.response.status === 401) {
724 this.$router.replace({ path: "/" }); 732 this.$router.replace({ path: "/" });
725 this.$store.dispatch("setToken", null); 733 this.$store.dispatch("setToken", null);
726 this.$store.dispatch("Id", null); 734 this.$store.dispatch("Id", null);
727 } 735 }
728 }); 736 });
729 }, 737 },
730 editItem(item) { 738 editItem(item) {
731 this.editedIndex = this.salaryData.indexOf(item); 739 this.editedIndex = this.salaryData.indexOf(item);
732 this.editedIndex = this.hourlyData.indexOf(item); 740 this.editedIndex = this.hourlyData.indexOf(item);
733 this.editedItem = Object.assign({}, item); 741 this.editedItem = Object.assign({}, item);
734 this.editedItem.date = 742 this.editedItem.date =
735 this.editedItem.date != undefined 743 this.editedItem.date != undefined
736 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 744 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
737 : (this.editedItem.date = ""); 745 : (this.editedItem.date = "");
738 this.editSalaryDialog = true; 746 this.editSalaryDialog = true;
739 }, 747 },
740 selectSalary() { 748 selectSalary() {
741 if (this.editedItem.salary === "Monthly") { 749 if (this.editedItem.salary === "Monthly") {
742 this.monthlyGrade = true; 750 this.monthlyGrade = true;
743 this.hourlyGrades = false; 751 this.hourlyGrades = false;
744 } else { 752 } else {
745 this.monthlyGrade = false; 753 this.monthlyGrade = false;
746 this.hourlyGrades = true; 754 this.hourlyGrades = true;
747 } 755 }
748 }, 756 },
749 selectGrade() { 757 selectGrade() {
750 console.log("this.editedItem", this.editedItem); 758 console.log("this.editedItem", this.editedItem);
751 }, 759 },
752 selectView() { 760 selectView() {
753 if (this.editedItem.view.png === "Monthly") { 761 if (this.editedItem.view.png === "Monthly") {
754 this.viewSalary = true; 762 this.viewSalary = true;
755 this.viewHourly = false; 763 this.viewHourly = false;
756 } else { 764 } else {
757 this.viewSalary = false; 765 this.viewSalary = false;
758 this.viewHourly = true; 766 this.viewHourly = true;
759 } 767 }
760 }, 768 },
761 769
762 save() { 770 save() {
763 var updateSalary = { 771 var updateSalary = {
764 role: this.editedItem.role, 772 role: this.editedItem.role,
765 userId: this.editedItem._id, 773 userId: this.editedItem._id,
766 templateName: this.editedItem.salary, 774 templateName: this.editedItem.salary,
767 templateId: this.editedItem.salaryId 775 templateId: this.editedItem.salaryId
768 }; 776 };
769 http() 777 http()
770 .put("/updateUserSalary", updateSalary, { 778 .put("/updateUserSalary", updateSalary, {
771 headers: { 779 headers: {
772 Authorization: "Bearer " + this.token 780 Authorization: "Bearer " + this.token
773 } 781 }
774 }) 782 })
775 .then(response => { 783 .then(response => {
776 this.getUserDetailWithRoles(); 784 this.getUserDetailWithRoles();
777 this.close(); 785 this.close();
778 this.snackbar = true; 786 this.snackbar = true;
779 this.text = response.data.message; 787 this.text = response.data.message;
780 this.color = "green"; 788 this.color = "green";
781 this.editSalaryDialog = false; 789 this.editSalaryDialog = false;
782 }) 790 })
783 .catch(error => { 791 .catch(error => {
784 console.log("error", error); 792 console.log("error", error);
785 this.snackbar = true; 793 this.snackbar = true;
786 this.color = "red"; 794 this.color = "red";
787 }); 795 });
788 }, 796 },
789 797
790 deleteItem(item) { 798 deleteItem(item) {
791 // let deleteGrade = { 799 // let deleteGrade = {
792 // hourlyId: item._id 800 // hourlyId: item._id
793 // }; 801 // };
794 // http() 802 // http()
795 // .delete( 803 // .delete(
796 // "/deleteHourly", 804 // "/deleteHourly",
797 // confirm("Are you sure you want to delete this?") && { 805 // confirm("Are you sure you want to delete this?") && {
798 // params: deleteGrade 806 // params: deleteGrade
799 // }, 807 // },
800 // { 808 // {
801 // headers: { 809 // headers: {
802 // Authorization: "Bearer " + this.token 810 // Authorization: "Bearer " + this.token
803 // } 811 // }
804 // } 812 // }
805 // ) 813 // )
806 // .then(response => { 814 // .then(response => {
807 // this.snackbar = true; 815 // this.snackbar = true;
808 // // this.text = "Successfully Delete Salary "; 816 // // this.text = "Successfully Delete Salary ";
809 // this.text = response.data.message; 817 // this.text = response.data.message;
810 // this.color = "green"; 818 // this.color = "green";
811 // this.getUserDetailWithRoles(); 819 // this.getUserDetailWithRoles();
812 // }) 820 // })
813 // .catch(error => { 821 // .catch(error => {
814 // console.log("error", error); 822 // console.log("error", error);
815 // this.snackbar = true; 823 // this.snackbar = true;
816 // this.text = error.response.data.message; 824 // this.text = error.response.data.message;
817 // this.color = "red"; 825 // this.color = "red";
818 // }); 826 // });
819 } 827 }
820 828
821 // selectAllowances() { 829 // selectAllowances() {
822 // this.salaryTypeData.push({ 830 // this.salaryTypeData.push({
823 // allowancesValue: (this.salaryType.allowancesValue = "") 831 // allowancesValue: (this.salaryType.allowancesValue = "")
824 // }); 832 // });
825 // // console.log("this.salaryTypeData", this.salaryTypeData); 833 // // console.log("this.salaryTypeData", this.salaryTypeData);
826 // var totalAllowances = ""; 834 // var totalAllowances = "";
827 // this.salaryTypeData.forEach(allowancesValue_ => { 835 // this.salaryTypeData.forEach(allowancesValue_ => {
828 // if (allowancesValue_.allowancesValue != "") { 836 // if (allowancesValue_.allowancesValue != "") {
829 // // console.log("allowances", allowancesValue_.allowancesValue); 837 // // console.log("allowances", allowancesValue_.allowancesValue);
830 // totalAllowances = 838 // totalAllowances =
831 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 839 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
832 // } 840 // }
833 // this.grossSalary = 841 // this.grossSalary =
834 // totalAllowances + Number(this.salaryType.basicSalary); 842 // totalAllowances + Number(this.salaryType.basicSalary);
835 // }); 843 // });
836 // }, 844 // },
837 // allowancesAdd() { 845 // allowancesAdd() {
838 // this.editedItem.allowances.push({ 846 // this.editedItem.allowances.push({
839 // allowancesValue: (this.salaryType.allowancesValue = "") 847 // allowancesValue: (this.salaryType.allowancesValue = "")
840 // }); 848 // });
841 // var totalAllowances = ""; 849 // var totalAllowances = "";
842 // this.editedItem.allowances.forEach(allowancesValue_ => { 850 // this.editedItem.allowances.forEach(allowancesValue_ => {
843 // if (allowancesValue_.allowancesValue != "") { 851 // if (allowancesValue_.allowancesValue != "") {
844 // // console.log("allowances", allowancesValue_.allowancesValue); 852 // // console.log("allowances", allowancesValue_.allowancesValue);
845 // totalAllowances = 853 // totalAllowances =
846 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue); 854 // Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
847 // console.log("totalAllowances", totalAllowances); 855 // console.log("totalAllowances", totalAllowances);
848 // } 856 // }
849 // this.editedItem.grossSalary = 857 // this.editedItem.grossSalary =
850 // totalAllowances + Number(this.editedItem.basicSalary); 858 // totalAllowances + Number(this.editedItem.basicSalary);
851 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary); 859 // console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
852 // }); 860 // });
853 // }, 861 // },
854 // selectDeduction() { 862 // selectDeduction() {
855 // this.salaryTypeDeductionData.push({ 863 // this.salaryTypeDeductionData.push({
856 // deductionValue: (this.salaryType.deductionValue = "") 864 // deductionValue: (this.salaryType.deductionValue = "")
857 // }); 865 // });
858 // var totalDeductions = ""; 866 // var totalDeductions = "";
859 // this.salaryTypeDeductionData.forEach(deductionValue_ => { 867 // this.salaryTypeDeductionData.forEach(deductionValue_ => {
860 // if (deductionValue_.deductionValue != "") { 868 // if (deductionValue_.deductionValue != "") {
861 // // console.log("deduction", deductionValue_.deductionValue); 869 // // console.log("deduction", deductionValue_.deductionValue);
862 // totalDeductions = 870 // totalDeductions =
863 // Number(totalDeductions) + Number(deductionValue_.deductionValue); 871 // Number(totalDeductions) + Number(deductionValue_.deductionValue);
864 // } 872 // }
865 // }); 873 // });
866 // }, 874 // },
867 // deductionAdd() { 875 // deductionAdd() {
868 // this.editedItem.deduction.push({ 876 // this.editedItem.deduction.push({
869 // deductionValue: (this.salaryType.deductionValue = "") 877 // deductionValue: (this.salaryType.deductionValue = "")
870 // }); 878 // });
871 // var totalDeductions = ""; 879 // var totalDeductions = "";
872 // this.editedItem.deduction.forEach(deductionValue_ => { 880 // this.editedItem.deduction.forEach(deductionValue_ => {
873 // if (deductionValue_.deductionValue != "") { 881 // if (deductionValue_.deductionValue != "") {
874 // // console.log("deduction", deductionValue_.deductionValue); 882 // // console.log("deduction", deductionValue_.deductionValue);
875 // totalDeductions = 883 // totalDeductions =
876 // Number(totalDeductions) + Number(deductionValue_.deductionValue); 884 // Number(totalDeductions) + Number(deductionValue_.deductionValue);
877 // console.log("this.totalDeductions", totalDeductions); 885 // console.log("this.totalDeductions", totalDeductions);
878 // } 886 // }
879 // // this.editedItem.totalDeduction = totalDeductions; 887 // // this.editedItem.totalDeduction = totalDeductions;
880 // // console.log("this.totalDeduction", this.editedItem.totalDeduction); 888 // // console.log("this.totalDeduction", this.editedItem.totalDeduction);
881 // }); 889 // });
882 // }, 890 // },
883 // deleteSelectAllowances: function(index) { 891 // deleteSelectAllowances: function(index) {
884 // this.salaryTypeData.splice(index, 1); 892 // this.salaryTypeData.splice(index, 1);
885 // }, 893 // },
886 // deleteallowancesAdd: function(index) { 894 // deleteallowancesAdd: function(index) {
887 // this.editedItem.allowances.splice(index, 1); 895 // this.editedItem.allowances.splice(index, 1);
888 // }, 896 // },
889 // deleteSelectDeduction: function(index) { 897 // deleteSelectDeduction: function(index) {
890 // this.salaryTypeDeductionData.splice(index, 1); 898 // this.salaryTypeDeductionData.splice(index, 1);
891 // }, 899 // },
892 // deletedeductionAdd: function(index) { 900 // deletedeductionAdd: function(index) {
893 // this.editedItem.deduction.splice(index, 1); 901 // this.editedItem.deduction.splice(index, 1);
894 // }, 902 // },
895 // clear() { 903 // clear() {
896 // this.$refs.form.reset(); 904 // this.$refs.form.reset();
897 // this.disable = false; 905 // this.disable = false;
898 // } 906 // }
899 }, 907 },
900 908
901 mounted() { 909 mounted() {
902 this.token = this.$store.state.token; 910 this.token = this.$store.state.token;
903 this.getRole(); 911 this.getRole();
904 this.getSalaryList(); 912 this.getSalaryList();
src/pages/User/user.vue
Diff comments   View file @7bb043c
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 771
772 export default { 772 export default {
773 data: () => ({ 773 data: () => ({
774 component: "report-generate", 774 component: "report-generate",
775 snackbar: false, 775 snackbar: false,
776 y: "top", 776 y: "top",
777 x: "right", 777 x: "right",
778 mode: "", 778 mode: "",
779 timeout: 3000, 779 timeout: 3000,
780 color: "", 780 color: "",
781 text: "", 781 text: "",
782 show: true, 782 show: true,
783 showSearch: false, 783 showSearch: false,
784 showLoader: false, 784 showLoader: false,
785 loading: false, 785 loading: false,
786 addUserDialog: false, 786 addUserDialog: false,
787 date: null, 787 date: null,
788 search: "", 788 search: "",
789 menu: false, 789 menu: false,
790 menu1: false, 790 menu1: false,
791 menu2: false, 791 menu2: false,
792 menu3: false, 792 menu3: false,
793 viewUserDialog: false, 793 viewUserDialog: false,
794 editUserDialog: false, 794 editUserDialog: false,
795 valid: true, 795 valid: true,
796 isActive: true, 796 isActive: true,
797 newActive: false, 797 newActive: false,
798 pagination: { 798 pagination: {
799 rowsPerPage: 10 799 rowsPerPage: 10
800 }, 800 },
801 imageData: {}, 801 imageData: {},
802 imageName: "", 802 imageName: "",
803 imageUrl: "", 803 imageUrl: "",
804 imageFile: "", 804 imageFile: "",
805 nameRules: [v => !!v || "Name is required"], 805 nameRules: [v => !!v || "Name is required"],
806 dateRules: [v => !!v || " DOB is required"], 806 dateRules: [v => !!v || " DOB is required"],
807 genderRules: [v => !!v || " Gender Name is required"], 807 genderRules: [v => !!v || " Gender Name is required"],
808 pincode: [v => !!v || " Pincode is required"], 808 pincode: [v => !!v || " Pincode is required"],
809 role: [v => !!v || "Role Name is required"], 809 role: [v => !!v || "Role Name is required"],
810 permanentAddress: [v => !!v || " Permanent Address is required"], 810 permanentAddress: [v => !!v || " Permanent Address is required"],
811 presentAddress: [v => !!v || " Present Address is required"], 811 presentAddress: [v => !!v || " Present Address is required"],
812 mobileNoRules: [v => !!v || "Phone Number is required"], 812 mobileNoRules: [v => !!v || "Phone Number is required"],
813 religionRules: [v => !!v || "Religion Name is required"], 813 religionRules: [v => !!v || "Religion Name is required"],
814 joinDateRules: [v => !!v || " Join Date is required"], 814 joinDateRules: [v => !!v || " Join Date is required"],
815 userNameRules: [v => !!v || " User Name is required"], 815 userNameRules: [v => !!v || " User Name is required"],
816 passwordRules: [v => !!v || " Password is required"], 816 passwordRules: [v => !!v || " Password is required"],
817 errorMessages: "", 817 errorMessages: "",
818 userRole: [], 818 userRole: [],
819 emailRules: [ 819 emailRules: [
820 v => !!v || "E-mail is required", 820 v => !!v || "E-mail is required",
821 v => 821 v =>
822 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 822 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
823 "E-mail must be valid" 823 "E-mail must be valid"
824 ], 824 ],
825 gender: ["Male", "Female"], 825 gender: ["Male", "Female"],
826 headers: [ 826 headers: [
827 { 827 {
828 text: "No", 828 text: "No",
829 align: "", 829 align: "",
830 sortable: false, 830 sortable: false,
831 value: "No" 831 value: "No"
832 }, 832 },
833 { 833 {
834 text: "Profile Pic", 834 text: "Profile Pic",
835 value: "profilePicUrl", 835 value: "profilePicUrl",
836 sortable: false, 836 sortable: false,
837 align: "center" 837 align: "center"
838 }, 838 },
839 { text: "Name", value: "name", sortable: false, align: "center" }, 839 { text: "Name", value: "name", sortable: false, align: "center" },
840 { text: "Email", value: "email", sortable: false, align: "center" }, 840 { text: "Email", value: "email", sortable: false, align: "center" },
841 { text: "DOB", value: "dob", sortable: false, align: "center" }, 841 { text: "DOB", value: "dob", sortable: false, align: "center" },
842 { 842 {
843 text: "Joining Date", 843 text: "Joining Date",
844 value: "joiningDate", 844 value: "joiningDate",
845 sortable: false, 845 sortable: false,
846 align: "center" 846 align: "center"
847 }, 847 },
848 { 848 {
849 text: "Phone", 849 text: "Phone",
850 value: "phone", 850 value: "phone",
851 sortable: false, 851 sortable: false,
852 align: "center" 852 align: "center"
853 }, 853 },
854 { 854 {
855 text: "Status", 855 text: "Status",
856 value: "status", 856 value: "status",
857 sortable: false, 857 sortable: false,
858 align: "center" 858 align: "center"
859 }, 859 },
860 { text: "Action", value: "", sortable: false, align: "center" } 860 { text: "Action", value: "", sortable: false, align: "center" }
861 ], 861 ],
862 Users: [], 862 Users: [],
863 editedIndex: -1, 863 editedIndex: -1,
864 upload: "", 864 upload: "",
865 editedItem: { 865 editedItem: {
866 role: "", 866 role: "",
867 name: "", 867 name: "",
868 email: "", 868 email: "",
869 dob: null, 869 dob: null,
870 gender: "", 870 gender: "",
871 role: "", 871 role: "",
872 address: "", 872 address: "",
873 phone: "", 873 phone: "",
874 religion: "", 874 religion: "",
875 joiningDate: null 875 joiningDate: null
876 }, 876 },
877 addUser: { 877 addUser: {
878 role: "", 878 role: "",
879 name: "", 879 name: "",
880 email: "", 880 email: "",
881 dob: null, 881 dob: null,
882 gender: "", 882 gender: "",
883 pincode: "", 883 pincode: "",
884 role: "", 884 role: "",
885 permanentAddress: "", 885 permanentAddress: "",
886 presentAddress: "", 886 presentAddress: "",
887 mobileNo: "", 887 mobileNo: "",
888 religion: "", 888 religion: "",
889 joiningDate: null 889 joiningDate: null
890 } 890 }
891 }), 891 }),
892 watch: { 892 watch: {
893 menu(val) { 893 menu(val) {
894 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 894 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
895 }, 895 },
896 menu1(val) { 896 menu1(val) {
897 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 897 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
898 } 898 }
899 }, 899 },
900 methods: { 900 methods: {
901 save(date) { 901 save(date) {
902 this.$refs.menu.save(date); 902 this.$refs.menu.save(date);
903 }, 903 },
904 save(date) { 904 save(date) {
905 this.$refs.menu1.save(date); 905 this.$refs.menu1.save(date);
906 }, 906 },
907 pickFile() { 907 pickFile() {
908 this.$refs.image.click(); 908 this.$refs.image.click();
909 }, 909 },
910 onFilePicked(e) { 910 onFilePicked(e) {
911 // console.log(e) 911 // console.log(e)
912 const files = e.target.files; 912 const files = e.target.files;
913 this.upload = e.target.files[0]; 913 this.upload = e.target.files[0];
914 console.log("imageData-upload========>", this.upload); 914 console.log("imageData-upload========>", this.upload);
915 if (files[0] !== undefined) { 915 if (files[0] !== undefined) {
916 this.imageName = files[0].name; 916 this.imageName = files[0].name;
917 if (this.imageName.lastIndexOf(".") <= 0) { 917 if (this.imageName.lastIndexOf(".") <= 0) {
918 return; 918 return;
919 } 919 }
920 const fr = new FileReader(); 920 const fr = new FileReader();
921 fr.readAsDataURL(files[0]); 921 fr.readAsDataURL(files[0]);
922 fr.addEventListener("load", () => { 922 fr.addEventListener("load", () => {
923 this.imageUrl = fr.result; 923 this.imageUrl = fr.result;
924 this.imageFile = files[0]; // this is an image file that can be sent to server... 924 this.imageFile = files[0]; // this is an image file that can be sent to server...
925 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 925 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
926 // console.log("upload=======>", this.imageData.imageUrl); 926 // console.log("upload=======>", this.imageData.imageUrl);
927 console.log("imageFile", this.imageUrl); 927 console.log("imageFile", this.imageUrl);
928 }); 928 });
929 } else { 929 } else {
930 this.imageName = ""; 930 this.imageName = "";
931 this.imageFile = ""; 931 this.imageFile = "";
932 this.imageUrl = ""; 932 this.imageUrl = "";
933 } 933 }
934 }, 934 },
935 dates: function(date) { 935 dates: function(date) {
936 return moment(date).format("MMMM DD, YYYY"); 936 return moment(date).format("MMMM DD, YYYY");
937 }, 937 },
938 getUsersList() { 938 getUsersList() {
939 this.showLoader = true; 939 this.showLoader = true;
940 var token = this.$store.state.token; 940 var token = this.$store.state.token;
941 http() 941 http()
942 .get("/getUsersList", { 942 .get("/getUsersList", {
943 headers: { Authorization: "Bearer " + token } 943 headers: { Authorization: "Bearer " + token }
944 }) 944 })
945 .then(response => { 945 .then(response => {
946 this.Users = response.data.data; 946 this.Users = response.data.data;
947 this.showLoader = false; 947 this.showLoader = false;
948 }) 948 })
949 .catch(error => { 949 .catch(error => {
950 this.showLoader = false; 950 this.showLoader = false;
951 if (error.response.status === 401) { 951 if (error.response.status === 401) {
952 this.$router.replace({ path: "/" }); 952 this.$router.replace({ path: "/" });
953 this.$store.dispatch("setToken", null); 953 this.$store.dispatch("setToken", null);
954 this.$store.dispatch("Id", null); 954 this.$store.dispatch("Id", null);
955 } 955 }
956 }); 956 });
957 }, 957 },
958 editItem(item) { 958 editItem(item) {
959 this.editedIndex = this.Users.indexOf(item); 959 this.editedIndex = this.Users.indexOf(item);
960 this.editedItem = Object.assign({}, item); 960 this.editedItem = Object.assign({}, item);
961 this.editedItem.dob = 961 this.editedItem.dob =
962 this.editedItem.dob != undefined 962 this.editedItem.dob != undefined
963 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 963 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
964 : (this.editedItem.dob = ""); 964 : (this.editedItem.dob = "");
965 for (let i = 0; i < this.userRole.length; i++) { 965 for (let i = 0; i < this.userRole.length; i++) {
966 if (this.userRole[i].role === this.editedItem.role) { 966 if (this.userRole[i].role === this.editedItem.role) {
967 this.editedItem.role = this.userRole[i].name; 967 this.editedItem.role = this.userRole[i].name;
968 } 968 }
969 } 969 }
970 this.editUserDialog = true; 970 this.editUserDialog = true;
971 }, 971 },
972 profile(item) { 972 profile(item) {
973 this.editedIndex = this.Users.indexOf(item); 973 this.editedIndex = this.Users.indexOf(item);
974 this.editedItem = Object.assign({}, item); 974 this.editedItem = Object.assign({}, item);
975 this.viewUserDialog = true; 975 this.viewUserDialog = true;
976 for (let i = 0; i < this.userRole.length; i++) { 976 for (let i = 0; i < this.userRole.length; i++) {
977 if (this.userRole[i].role === this.editedItem.role) { 977 if (this.userRole[i].role === this.editedItem.role) {
978 this.editedItem.role = this.userRole[i].name; 978 this.editedItem.role = this.userRole[i].name;
979 } 979 }
980 } 980 }
981 }, 981 },
982 deleteItem(item) { 982 deleteItem(item) {
983 let deleteUser = { 983 let deleteUser = {
984 userId: item._id 984 userId: item._id
985 }; 985 };
986 http() 986 http()
987 .delete( 987 .delete(
988 "/deleteUser", 988 "/deleteUser",
989 confirm("Are you sure you want to delete this?") && { 989 confirm("Are you sure you want to delete this?") && {
990 params: deleteUser 990 params: deleteUser
991 } 991 }
992 ) 992 )
993 .then(response => { 993 .then(response => {
994 this.snackbar = true; 994 this.snackbar = true;
995 this.text = response.data.message; 995 this.text = response.data.message;
996 this.color = "green"; 996 this.color = "green";
997 this.getUsersList(); 997 this.getUsersList();
998 }) 998 })
999 .catch(error => { 999 .catch(error => {
1000 this.snackbar = true; 1000 this.snackbar = true;
1001 this.color = "error"; 1001 this.color = "error";
1002 this.text = error.response.data.message; 1002 this.text = error.response.data.message;
1003 }); 1003 });
1004 }, 1004 },
1005 close() { 1005 close() {
1006 this.editUserDialog = false; 1006 this.editUserDialog = false;
1007 }, 1007 },
1008 closeProfileDialog() { 1008 closeProfileDialog() {
1009 this.viewUserDialog = false; 1009 this.viewUserDialog = false;
1010 }, 1010 },
1011 submit() { 1011 submit() {
1012 if (this.$refs.form.validate()) { 1012 if (this.$refs.form.validate()) {
1013 let addUserData = { 1013 let addUserData = {
1014 name: this.addUser.name, 1014 name: this.addUser.name,
1015 email: this.addUser.email, 1015 email: this.addUser.email,
1016 dob: this.addUser.dob, 1016 dob: this.addUser.dob,
1017 gender: this.addUser.gender, 1017 gender: this.addUser.gender,
1018 religion: this.addUser.religion, 1018 religion: this.addUser.religion,
1019 role: this.addUser.role, 1019 role: this.addUser.role,
1020 address: this.addUser.presentAddress, 1020 address: this.addUser.presentAddress,
1021 phone: this.addUser.mobileNo, 1021 phone: this.addUser.mobileNo,
1022 religion: this.addUser.religion, 1022 religion: this.addUser.religion,
1023 joiningDate: this.addUser.joinDate 1023 joiningDate: this.addUser.joinDate
1024 }; 1024 };
1025 if (this.imageUrl) { 1025 if (this.imageUrl) {
1026 var str = this.imageUrl; 1026 var str = this.imageUrl;
1027 const [baseUrl, imageUrl] = str.split(/,/); 1027 const [baseUrl, imageUrl] = str.split(/,/);
1028 addUserData.profilePicUrl = imageUrl; 1028 addUserData.profilePicUrl = imageUrl;
1029 } 1029 }
1030 this.loading = true; 1030 this.loading = true;
1031 http() 1031 http()
1032 .post("/createUser", addUserData) 1032 .post("/createUser", addUserData)
1033 .then(response => { 1033 .then(response => {
1034 this.imageUrl = ""; 1034 this.imageUrl = "";
1035 this.getUsersList(); 1035 this.getUsersList();
1036 this.snackbar = true; 1036 this.snackbar = true;
1037 this.addUserDialog = false; 1037 this.addUserDialog = false;
1038 this.text = response.data.message; 1038 this.text = response.data.message;
1039 this.color = "green"; 1039 this.color = "green";
1040 this.clear(); 1040 this.clear();
1041 this.loading = false; 1041 this.loading = false;
1042 }) 1042 })
1043 .catch(error => { 1043 .catch(error => {
1044 this.loading = false; 1044 this.loading = false;
1045 this.snackbar = true; 1045 this.snackbar = true;
1046 this.color = "error"; 1046 this.color = "error";
1047 this.text = error.response.data.message; 1047 this.text = error.response.data.message;
1048 }); 1048 });
1049 } 1049 }
1050 }, 1050 },
1051 clear() { 1051 clear() {
1052 this.$refs.form.reset(); 1052 this.$refs.form.reset();
1053 this.imageUrl = ""; 1053 this.imageUrl = "";
1054 }, 1054 },
1055 save() { 1055 save() {
1056 this.loading = true; 1056 this.loading = true;
1057 for (let i = 0; i < this.userRole.length; i++) { 1057 for (let i = 0; i < this.userRole.length; i++) {
1058 if (this.userRole[i].name === this.editedItem.role) { 1058 if (this.userRole[i].name === this.editedItem.role) {
1059 this.editedItem.role = this.userRole[i].role; 1059 this.editedItem.role = this.userRole[i].role;
1060 } 1060 }
1061 } 1061 }
1062 this.editedItem.userId = this.editedItem._id; 1062 this.editedItem.userId = this.editedItem._id;
1063 if (this.imageUrl) { 1063 if (this.imageUrl) {
1064 var str = this.imageUrl; 1064 var str = this.imageUrl;
1065 const [baseUrl, imageUrl] = str.split(/,/); 1065 const [baseUrl, imageUrl] = str.split(/,/);
1066 this.editedItem.upload = imageUrl; 1066 this.editedItem.upload = imageUrl;
1067 } 1067 }
1068 http() 1068 http()
1069 .put("/updateUser", this.editedItem) 1069 .put("/updateUser", this.editedItem)
1070 .then(response => { 1070 .then(response => {
1071 this.snackbar = true; 1071 this.snackbar = true;
1072 this.text = response.data.message; 1072 this.text = response.data.message;
1073 this.color = "green"; 1073 this.color = "green";
1074 this.loading = false; 1074 this.loading = false;
1075 this.getUsersList(); 1075 this.getUsersList();
1076 this.close(); 1076 this.close();
1077 }) 1077 })
1078 .catch(error => { 1078 .catch(error => {
1079 this.loading = false; 1079 this.loading = false;
1080 this.snackbar = true; 1080 this.snackbar = true;
1081 this.text = error.response.data.message; 1081 this.text = error.response.data.message;
1082 this.color = "error"; 1082 this.color = "error";
1083 }); 1083 });
1084 }, 1084 },
1085 getRole() { 1085 getRole() {
1086 this.showLoader = true; 1086 this.showLoader = true;
1087 var token = this.$store.state.token; 1087 var token = this.$store.state.token;
1088 http() 1088 http()
1089 .get("/getRolesList", { 1089 .get("/getRolesList", {
1090 headers: { Authorization: "Bearer " + token } 1090 headers: { Authorization: "Bearer " + token }
1091 }) 1091 })
1092 .then(response => { 1092 .then(response => {
1093 this.userRole = response.data.data; 1093 this.userRole = response.data.data;
1094 this.showLoader = false; 1094 this.showLoader = false;
1095 this.userRole = response.data.data;
1096 var removedRoles = _.remove(this.userRole, function(c) {
1097 //remove if color is green or yellow
1098 return c.role === 1 || c.role === 3 || c.role === 4 || c.role === 5;
1099 // console.log(c);
1100 });
1095 }) 1101 })
1096 .catch(error => { 1102 .catch(error => {
1097 this.showLoader = false; 1103 this.showLoader = false;
1098 if (error.response.status === 401) { 1104 if (error.response.status === 401) {
1099 this.$router.replace({ path: "/" }); 1105 this.$router.replace({ path: "/" });
1100 this.$store.dispatch("setToken", null); 1106 this.$store.dispatch("setToken", null);
1101 this.$store.dispatch("Id", null); 1107 this.$store.dispatch("Id", null);
1102 } 1108 }
1103 }); 1109 });
1104 }, 1110 },
1105 suspendStatus(suspendStatus, id) { 1111 suspendStatus(suspendStatus, id) {
1106 let suspendStatusData = { 1112 let suspendStatusData = {
1107 userId: id, 1113 userId: id,
1108 status: suspendStatus 1114 status: suspendStatus
1109 }; 1115 };
1110 this.showLoader = true; 1116 this.showLoader = true;
1111 http() 1117 http()
1112 .put("/suspendUserAccount", suspendStatusData) 1118 .put("/suspendUserAccount", suspendStatusData)
1113 .then(response => { 1119 .then(response => {
1114 this.getUsersList(); 1120 this.getUsersList();
1115 this.text = response.data.message; 1121 this.text = response.data.message;
1116 this.snackbar = true; 1122 this.snackbar = true;
1117 this.showLoader = false; 1123 this.showLoader = false;
1118 }) 1124 })
1119 .catch(error => { 1125 .catch(error => {
1120 // console.log(error.response.data.data); 1126 // console.log(error.response.data.data);
1121 this.snackbar = true; 1127 this.snackbar = true;
1122 this.text = error.response.data.message; 1128 this.text = error.response.data.message;
1123 this.showLoader = false; 1129 this.showLoader = false;
1124 }); 1130 });
1125 }, 1131 },
1126 displaySearch() { 1132 displaySearch() {
1127 (this.show = false), (this.showSearch = true); 1133 (this.show = false), (this.showSearch = true);
1128 }, 1134 },
1129 closeSearch() { 1135 closeSearch() {
1130 this.showSearch = false; 1136 this.showSearch = false;
1131 this.show = true; 1137 this.show = true;
1132 this.search = ""; 1138 this.search = "";
1133 } 1139 }
1134 }, 1140 },
1135 mounted() { 1141 mounted() {
1136 this.getUsersList(); 1142 this.getUsersList();
1137 this.getRole(); 1143 this.getRole();
1138 } 1144 }
1139 }; 1145 };
1140 </script> 1146 </script>