Skip to content

Commit aea493f

Browse files
jioojioo
committed
Added update password module in employees
- Updated error logging in axios plugins - Updated list in employee list
1 parent cabd673 commit aea493f

File tree

4 files changed

+154
-24
lines changed

4 files changed

+154
-24
lines changed

‎WebClient/src/components/_shared/navigation.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,11 @@ export default {
9898
},
9999
100100
methods: {
101+
101102
logout () {
102-
this.$store.dispatch('LOGOUT').then(() => {
103-
this.$router.push({ name: 'login' })
104-
})
103+
this.$router.push({ name: 'login' })
105104
},
105+
106106
isRole(param) {
107107
if(!this.currentUser) return
108108

‎WebClient/src/components/employee/list.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<v-progress-linear slot="progress" indeterminate></v-progress-linear>
2929

3030
<template slot="items" slot-scope="props">
31+
<td>{{ props.item.identity.userName }}</td>
3132
<td>{{ props.item.fullName }}</td>
3233
<td>{{ props.item.position }}</td>
3334
<td>{{ props.item.cardNo }}</td>
@@ -57,6 +58,7 @@ export default {
5758
search: "",
5859
pagination: {},
5960
headers: [
61+
{ text: "Username", value: "identity.userName" },
6062
{ text: "Employee Name", value: "fullName" },
6163
{ text: "Position", value: "position" },
6264
{ text: "Card No", value: "cardNo" },
@@ -87,6 +89,12 @@ export default {
8789
}
8890
},
8991
92+
watch: {
93+
items (val) {
94+
this.pagination.totalItems = val.length
95+
}
96+
},
97+
9098
mounted () {
9199
this.getList()
92100
}

‎WebClient/src/components/employee/update.vue‎

Lines changed: 127 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@
1010
</v-toolbar>
1111
<v-card-text>
1212
<v-container grid-list-md>
13-
<v-form v-model="valid" ref="form">
13+
<v-form v-model="formStates.form1.isValid" :ref="formStates.form1.name">
1414

1515
<v-layout row wrap>
1616
<v-flex md12 class="my-4" >
17-
<h2 class="orange--text">Employee Information</h2>
17+
<h2 class="orange--text">Update Information</h2>
1818
<v-divider color="white"></v-divider>
19+
<v-progress-linear :indeterminate="true" class="ma-0" v-show="formStates.form1.isLoading"></v-progress-linear>
1920
</v-flex>
2021
</v-layout>
2122

@@ -25,9 +26,17 @@
2526
box
2627
label="Name"
2728
color="orange"
28-
v-model="form.fullName"
29+
v-model="form.fullName"
2930
required
30-
:rules="[required]"></v-text-field>
31+
:rules="[required]"
32+
:disabled="!formStates.form1.isEdit"></v-text-field>
33+
</v-flex>
34+
<v-flex md2>
35+
<v-btn icon large dark class="mx-0"
36+
:color="!formStates.form1.isEdit ? 'teal' : 'grey'"
37+
@click.prevent.native="toggleEditState(formStates.form1.name)">
38+
<v-icon>{{ !formStates.form1.isEdit ? 'edit' : 'close' }}</v-icon>
39+
</v-btn>
3140
</v-flex>
3241
</v-layout>
3342

@@ -39,7 +48,8 @@
3948
color="orange"
4049
v-model="form.cardNo"
4150
required
42-
:rules="[required]"></v-text-field>
51+
:rules="[required]"
52+
:disabled="!formStates.form1.isEdit"></v-text-field>
4353
</v-flex>
4454
</v-layout>
4555

@@ -51,13 +61,71 @@
5161
color="orange"
5262
v-model="form.position"
5363
required
54-
:rules="[required]"></v-text-field>
64+
:rules="[required]"
65+
:disabled="!formStates.form1.isEdit"></v-text-field>
66+
</v-flex>
67+
</v-layout>
68+
69+
<v-layout row wrap>
70+
<v-scale-transition>
71+
<v-btn
72+
color="success"
73+
:loading="formStates.form1.isLoading"
74+
v-show="formStates.form1.isEdit"
75+
@click.prevent="submit({
76+
scope: formStates.form1.name,
77+
url: 'employee',
78+
successMessage: 'Employee Information has been successfully updated!'
79+
})">Submit</v-btn>
80+
</v-scale-transition>
81+
</v-layout>
82+
</v-form>
83+
84+
<v-form v-model="formStates.form2.isValid" :ref="formStates.form2.name">
85+
86+
<v-layout row wrap>
87+
<v-flex md12 class="my-4" >
88+
<h2 class="orange--text">Update Password</h2>
89+
<v-divider color="white"></v-divider>
90+
<v-progress-linear :indeterminate="true" class="ma-0" v-show="formStates.form2.isLoading"></v-progress-linear>
91+
</v-flex>
92+
</v-layout>
93+
94+
<v-layout row wrap>
95+
<v-flex md6>
96+
<v-text-field
97+
box
98+
label="New Password"
99+
type="Password"
100+
color="orange"
101+
v-model="form.newPassword"
102+
required
103+
:rules="[required, minLength]"
104+
:disabled="!formStates.form2.isEdit"></v-text-field>
105+
</v-flex>
106+
<v-flex md2>
107+
<v-btn icon large dark class="mx-0"
108+
:color="!formStates.form2.isEdit ? 'teal' : 'grey'"
109+
@click.prevent.native="toggleEditState(formStates.form2.name)">
110+
<v-icon>{{ !formStates.form2.isEdit ? 'edit' : 'close' }}</v-icon>
111+
</v-btn>
55112
</v-flex>
56113
</v-layout>
57114

58115
<v-layout row wrap>
59-
<v-btn color="success" :loading="isLoading" @click.prevent="submit">Submit</v-btn>
116+
<v-scale-transition>
117+
<v-btn
118+
color="success"
119+
:loading="formStates.form2.isLoading"
120+
v-show="formStates.form2.isEdit"
121+
@click.prevent="submit({
122+
scope: formStates.form2.name,
123+
url: 'accounts/update-password',
124+
successMessage: 'Password has been successfully updated!'
125+
})">Submit</v-btn>
126+
</v-scale-transition>
60127
</v-layout>
128+
61129
</v-form>
62130
</v-container>
63131
</v-card-text>
@@ -72,9 +140,27 @@ import store from '@/store'
72140
export default {
73141
data () {
74142
return {
75-
valid: false,
143+
originalData: {},
76144
form: {},
77-
required: (value) => !!value || 'This field is required.'
145+
formStates: {
146+
form1: {
147+
name: 'form1',
148+
isValid: false,
149+
isLoading: false,
150+
isEdit: false,
151+
},
152+
form2: {
153+
name: 'form2',
154+
isValid: false,
155+
isLoading: false,
156+
isEdit: false,
157+
}
158+
},
159+
required: (value) => !!value || 'This field is required.',
160+
minLength: function (value) {
161+
if(value == null || value.length >= 6) return true
162+
return 'Password must be atleast 6 characters.'
163+
}
78164
}
79165
},
80166
@@ -84,21 +170,45 @@ export default {
84170
85171
methods: {
86172
async getDetails () {
87-
this.form = await axios.get(`employee/${this.currentKey}`)
173+
this.originalData = await axios.get(`employee/${this.currentKey}`)
174+
this.originalData.userName = this.originalData.identity.userName
175+
},
176+
177+
resetToOriginalData () {
178+
this.form = Object.assign({}, this.originalData)
88179
},
89180
90-
submit () {
91-
if (this.$refs.form.validate()) {
92-
this.$axios.put('employee', JSON.stringify(this.form)).then(() => {
93-
this.$notify({ type: 'success', text: 'Employee has been successfully updated!' })
94-
this.$router.push({ name: 'employees' })
181+
toggleEditState (scope) {
182+
const state = this.formStates[scope].isEdit
183+
this.formStates[scope].isEdit = !state
184+
185+
if (scope === 'form2') this.$refs[scope].reset()
186+
if (state) this.resetToOriginalData()
187+
},
188+
189+
async submit (data) {
190+
const { scope, url, successMessage } = data
191+
192+
// Check if all fields are valid within the scope
193+
if (this.$refs[scope].validate()) {
194+
this.formStates[scope].isLoading = true
195+
196+
// Send put request
197+
await this.$axios.put(url, JSON.stringify(this.form)).then(() => {
198+
this.$notify({ type: 'success', text: successMessage })
199+
this.formStates[scope].isEdit = false
95200
})
201+
202+
// Update the originalData
203+
await this.getDetails()
204+
this.formStates[scope].isLoading = false
96205
}
97206
}
98207
},
99208
100-
mounted () {
101-
this.getDetails();
209+
async mounted () {
210+
await this.getDetails();
211+
this.resetToOriginalData();
102212
},
103213
104214
beforeRouteLeave (to, from, next) {

‎WebClient/src/plugins/axios.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,24 @@ _axios.interceptors.response.use(
4949
function (error) {
5050
// Do something with response error
5151
store.dispatch('LOADING_END')
52-
let message = error.response.data || defaultErrorMessage
52+
let message = ""
5353

54-
// Check if response is unauthorized
54+
// Get response status code
5555
const statusCode = error.response.status
56-
if (statusCode === 401) {
57-
message = "Session has expired"
56+
switch(statusCode) {
57+
// Unauthenticated user
58+
case 401:
59+
message = "Session has expired"
60+
break;
61+
62+
// Unauthorized user
63+
case 403:
64+
message = "You don't have permission to this page"
65+
break;
66+
67+
default:
68+
message = error.response.data || defaultErrorMessage
69+
break;
5870
}
5971

6072
// Global error notification

0 commit comments

Comments
 (0)