Skip to content

Commit b972a08

Browse files
jioojioo
committed
Added attendance settings module
- Updated account settings
1 parent 22cc89e commit b972a08

File tree

9 files changed

+202
-34
lines changed

9 files changed

+202
-34
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</v-list-tile-content>
5959
</v-list-tile>
6060

61-
<v-list-tile :to="{ name: 'settings' }" v-if="isAuthenticated"
61+
<v-list-tile :to="{ name: 'account-settings' }" v-if="isAuthenticated"
6262
v-ripple active-class="orange--text" >
6363
<v-list-tile-action>
6464
<v-icon>settings</v-icon>

‎WebClient/src/components/employee-login.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ export default {
5151
return {
5252
valid: false,
5353
form: {
54-
cardno: '123456',
55-
password: '123456'
54+
cardno: '',
55+
password: ''
5656
},
5757
required: (value) => !!value || 'This field is required.'
5858
}

‎WebClient/src/components/login.vue‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export default {
4545
return {
4646
valid: false,
4747
form: {
48-
username: 'admin',
49-
password: '123456'
48+
username: '',
49+
password: ''
5050
},
5151
required: (value) => !!value || 'This field is required.'
5252
}
@@ -57,23 +57,30 @@ export default {
5757
},
5858
5959
methods: {
60-
loginUser () {
60+
async loginUser () {
6161
if (this.$refs.form.validate()) {
6262
63-
this.$axios.post('auth/login', JSON.stringify(this.form)).then((res) => {
64-
this.$store.dispatch('LOGIN', res)
65-
const currentUserRole = res.user.roles
66-
if(currentUserRole.includes('Admin')) {
67-
this.$router.push({ name: 'employees' })
68-
} else {
69-
this.$router.push({ name: 'logs' })
70-
}
71-
})
63+
// authenticate user
64+
const result = await this.$axios.post('auth/login', JSON.stringify(this.form))
65+
await this.$store.dispatch('LOGIN', result)
66+
67+
// set up default attendance settings
68+
const defaultSettings = await this.$axios.get('config')
69+
await this.$store.dispatch('SET_SETTINGS', defaultSettings)
70+
71+
// redirect according to role
72+
const currentUserRole = result.user.roles
73+
if(currentUserRole.includes('Admin')) {
74+
this.$router.push({ name: 'employees' })
75+
} else {
76+
this.$router.push({ name: 'logs' })
77+
}
7278
}
7379
},
7480
75-
logout () {
76-
this.$store.dispatch('LOGOUT')
81+
async logout () {
82+
await this.$store.dispatch('REMOVE_SETTINGS')
83+
await this.$store.dispatch('LOGOUT')
7784
}
7885
},
7986

‎WebClient/src/components/logs/list-filter.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-container grid-list-md>
3-
<v-layout row wrap>
3+
<v-layout row wrap v-if="isRole('Admin')">
44
<v-flex md6>
55
<v-text-field
66
label="Search Name"
@@ -87,6 +87,7 @@
8787
</v-container>
8888
</template>
8989
<script>
90+
import { mapGetters } from "vuex"
9091
import moment from 'moment'
9192
9293
export default {
@@ -119,6 +120,10 @@ export default {
119120
}
120121
},
121122
123+
computed: {
124+
...mapGetters(["currentUser"]),
125+
},
126+
122127
methods: {
123128
clear () {
124129
this.resetFilter()
@@ -136,6 +141,11 @@ export default {
136141
})
137142
},
138143
144+
isRole (params) {
145+
const checkRole = this.currentUser.roles
146+
return checkRole.includes(params)
147+
},
148+
139149
resetFilter() {
140150
this.filter = {
141151
startDate: '',

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<v-toolbar dark color="orange">
55
<v-toolbar-title>Logs</v-toolbar-title>
66
<v-spacer></v-spacer>
7+
<v-btn large icon :to="{ path: '/logs/settings' }" v-if="isRole('Admin')">
8+
<v-icon large color="white">settings</v-icon>
9+
</v-btn>
710
</v-toolbar>
811

912
<v-card-title>
@@ -108,11 +111,11 @@ export default {
108111
},
109112
110113
setDefaultSettings () {
111-
const { TimeIn, TimeOut, GracePeriod } = this.settings
114+
const { timeIn, timeOut, gracePeriod } = this.settings
112115
this.config = {
113-
gracePeriod: GracePeriod,
114-
timeIn: moment(TimeIn, 'LTS').add(GracePeriod, 'm'),
115-
timeOut: moment(TimeOut, 'LTS')
116+
gracePeriod: gracePeriod,
117+
timeIn: moment(timeIn, 'LTS').add(gracePeriod, 'm'),
118+
timeOut: moment(timeOut, 'LTS')
116119
}
117120
},
118121
@@ -135,7 +138,6 @@ export default {
135138
newMeta.endDate = endDate
136139
newMeta.search = search
137140
138-
console.log(newMeta)
139141
this.getlist(newMeta)
140142
},
141143

‎WebClient/src/components/logs/settings.vue‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<v-flex md12 class="pt-4">
3+
<v-card class="elevation-12">
4+
<v-toolbar dark color="orange">
5+
<v-btn icon :loading="isLoading" :to="{ name: 'logs' }">
6+
<v-icon>arrow_back</v-icon>
7+
</v-btn>
8+
<v-toolbar-title>Update Attendance Settings</v-toolbar-title>
9+
<v-spacer></v-spacer>
10+
</v-toolbar>
11+
<v-card-text>
12+
<v-container grid-list-md>
13+
<v-form ref="form">
14+
15+
<v-layout row wrap>
16+
<v-flex md6>
17+
<v-menu
18+
ref="menu"
19+
:close-on-content-click="false"
20+
v-model="menu.timeIn"
21+
:nudge-right="40"
22+
:return-value.sync="form.timeIn"
23+
lazy
24+
transition="scale-transition"
25+
offset-y
26+
full-width
27+
max-width="290px"
28+
min-width="290px">
29+
30+
<v-text-field
31+
box
32+
color="orange"
33+
slot="activator"
34+
v-model="form.timeIn"
35+
label="Time In"
36+
readonly></v-text-field>
37+
38+
<v-time-picker
39+
v-if="menu.timeIn"
40+
v-model="form.timeIn"
41+
full-width
42+
format="24hr"
43+
@change="$refs.menu.save(form.timeIn)"></v-time-picker>
44+
</v-menu>
45+
</v-flex>
46+
</v-layout>
47+
48+
<v-layout row wrap>
49+
<v-flex md6>
50+
<v-menu
51+
ref="menu"
52+
:close-on-content-click="false"
53+
v-model="menu.timeOut"
54+
:nudge-right="40"
55+
:return-value.sync="form.timeOut"
56+
lazy
57+
transition="scale-transition"
58+
offset-y
59+
full-width
60+
max-width="290px"
61+
min-width="290px">
62+
63+
<v-text-field
64+
box
65+
color="orange"
66+
slot="activator"
67+
v-model="form.timeOut"
68+
label="Time Out"
69+
readonly></v-text-field>
70+
71+
<v-time-picker
72+
v-if="menu.timeOut"
73+
v-model="form.timeOut"
74+
full-width
75+
format="24hr"
76+
@change="$refs.menu.save(form.timeOut)"></v-time-picker>
77+
</v-menu>
78+
</v-flex>
79+
</v-layout>
80+
81+
<v-layout row wrap>
82+
<v-flex md6>
83+
<v-text-field
84+
box
85+
label="Grace Period (Minutes)"
86+
color="orange"
87+
v-model="form.gracePeriod"
88+
v-validate="'required|numeric|min_value:0|max_value:60'"
89+
data-vv-name="Grace Period"
90+
:error-messages="errors.collect('Grace Period')"></v-text-field>
91+
</v-flex>
92+
</v-layout>
93+
94+
<v-layout row wrap>
95+
<v-btn color="success" :loading="isLoading" @click.prevent="submit">Update</v-btn>
96+
</v-layout>
97+
</v-form>
98+
</v-container>
99+
</v-card-text>
100+
</v-card>
101+
</v-flex>
102+
</template>
103+
104+
<script>
105+
import { mapGetters } from 'vuex'
106+
107+
export default {
108+
data () {
109+
return {
110+
form: {},
111+
menu: {
112+
timeIn: false,
113+
timeOut: false
114+
}
115+
}
116+
},
117+
118+
computed: {
119+
...mapGetters(["isLoading", "settings"]),
120+
},
121+
122+
methods: {
123+
async submit () {
124+
// validate form
125+
await this.$validator.validateAll()
126+
127+
// Check if all fields are valid
128+
if (this.errors.items.length === 0) {
129+
const result = await this.$axios.put('config', JSON.stringify(this.form))
130+
await this.$store.dispatch('SET_SETTINGS', result)
131+
132+
this.$notify({ type: 'success', text: 'Attendance Settings has been updated!' })
133+
this.$router.push({ name: 'logs' })
134+
}
135+
}
136+
},
137+
138+
mounted () {
139+
this.form = this.settings
140+
}
141+
}
142+
</script>

‎WebClient/src/router.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ const router = new Router({
8080
component: () => import('./components/logs/list.vue'),
8181
meta: { auth: true }
8282
},
83+
{
84+
path: 'settings',
85+
component: () => import('./components/logs/settings.vue'),
86+
meta: { auth: true, roles: ['Admin'] }
87+
},
8388
{
8489
path: 'update',
8590
component: () => import('./components/logs/update.vue'),
@@ -102,10 +107,10 @@ const router = new Router({
102107
* ------------------------------------------------------
103108
*/
104109
{
105-
path: '/settings',
106-
name: 'settings',
110+
path: '/account-settings',
111+
name: 'account-settings',
107112
meta: { auth: true },
108-
component: () => import('@/views/settings')
113+
component: () => import('@/views/account-settings')
109114
}
110115
]
111116
})

‎WebClient/src/store/modules/settings-module.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
const state = {
2-
settings: {
3-
TimeIn: '9:00',
4-
TimeOut: '18:00',
5-
GracePeriod: '15'
6-
}
2+
settings: {}
73
}
84

95
const getters = {
@@ -19,15 +15,21 @@ const mutations = {
1915
UPDATE_SETTINGS (state, payload) {
2016
let index = state.settings.findIndex(x => x.Id == payload.Id)
2117
state.settings.splice(index, 1, payload)
18+
},
19+
REMOVE_SETTINGS (state) {
20+
state.settings = {}
2221
}
2322
}
2423

2524
const actions = {
26-
FETCH_SETTINGS ({commit}) {
27-
commit('SET_SETTINGS', {})
25+
SET_SETTINGS ({commit}, payload) {
26+
commit('SET_SETTINGS', payload)
2827
},
29-
SETTINGS_EDIT ({commit}, payload) {
28+
UPDATE_SETTINGS ({commit}, payload) {
3029
commit('UPDATE_SETTINGS', payload)
30+
},
31+
REMOVE_SETTINGS ({commit}) {
32+
commit('REMOVE_SETTINGS')
3133
}
3234
}
3335

WebClient/src/views/settings.vue renamed to WebClient/src/views/account-settings.vue

File renamed without changes.

0 commit comments

Comments
 (0)