socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Included user-information in employee model

Browse Source
This commit is contained in:
Sockenklaus
2021-11-04 14:00:52 +01:00
parent cfcfeba170
commit b41ff6515d
3 changed files with 70 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/stores/employee.ts
View File

@@ -4,21 +4,17 @@ import { useUser } from './user'
import { useNotifications } from './notifications' import { useNotifications } from './notifications'
type ResultData = { type ResultData = {
employee: { id: number,
id: number, firstName: string,
firstName: string, lastName: string | undefined,
lastName: string, shorthand: string,
shorthand: string, phone: string | undefined,
phone: string, mobile: string | undefined,
mobile: string, email: string | undefined,
email: string, contractHours: number | undefined,
contractHours: number, isActive: boolean,
hasUser: boolean, username: string | undefined,
}, role: string
user?: {
id?: number,
username?: string
}
} }
const user = useUser() const user = useUser()
@@ -39,14 +35,11 @@ export const useEmployee = defineStore({
mobile: '', mobile: '',
email: '', email: '',
contractHours: NaN, contractHours: NaN,
hasUser: false isActive: false,
},
user: {
id: NaN,
username: '', username: '',
password: '', password: '',
passwordConfirm: '', passwordConfirm: ''
} },
}, },
employee: { employee: {
@@ -58,15 +51,11 @@ export const useEmployee = defineStore({
mobile: '', mobile: '',
email: '', email: '',
contractHours: NaN, contractHours: NaN,
hasUser: false isActive: false,
},
user: {
id: NaN,
username: '', username: '',
password: '', password: '',
passwordConfirm: '' passwordConfirm: ''
} },
} }
}, },
@@ -75,15 +64,14 @@ export const useEmployee = defineStore({
try { try {
const data : ResultData = await <ResultData>(await axios.get('employees/'+id, { const data : ResultData = await <ResultData>(await axios.get('employees/'+id, {
headers: { headers: user.header
'Authorization': 'Bearer '+user.token
}
})).data })).data
Object.assign(this.clean.employee, data.employee) console.log(this.clean.employee)
Object.assign(this.clean.user, data.user) console.log(data)
Object.assign(this.employee, data.employee),
Object.assign(this.user, data.user) Object.assign(this.clean.employee, data)
Object.assign(this.employee, data)
} }
catch(err){ catch(err){
if(err instanceof Error) notifications.add('danger', err.message, -1) if(err instanceof Error) notifications.add('danger', err.message, -1)
@@ -92,7 +80,6 @@ export const useEmployee = defineStore({
}, },
reset() { reset() {
Object.assign(this.user, this.clean.user)
Object.assign(this.employee, this.clean.employee) Object.assign(this.employee, this.clean.employee)
}, },
@@ -101,30 +88,6 @@ export const useEmployee = defineStore({
try { try {
let result let result
if(isNaN(this.user.id) && this.user.username.length > 0){
result = await axios.post(
'users',
{
username: this.user.username,
password: this.user.password
},
{
headers: user.header
}
)
}
else if (this.user.password.length > 0 && this.user.password === this.user.passwordConfirm){
result = await axios.patch(
'users/'+this.user.id,
{
password: this.user.password
},
{
headers: user.header
}
)
}
result = await axios.patch( result = await axios.patch(
'employees/'+this.employee.id, 'employees/'+this.employee.id,
this.employee, this.employee,
@@ -134,7 +97,6 @@ export const useEmployee = defineStore({
) )
Object.assign(this.clean.employee, this.employee) Object.assign(this.clean.employee, this.employee)
Object.assign(this.clean.user, this.user)
notifications.add('success', result.statusText) notifications.add('success', result.statusText)
} }
catch(error) { catch(error) {

11
src/stores/user.ts
View File

@@ -33,11 +33,12 @@ export const useUser = defineStore({
}, },
actions: { actions: {
async login(username: string, password: string): Promise< async login(username: string, password: string):
boolean | Promise<
'E_INVALID_AUTH_PASSWORD: Password mis-match' | boolean |
'E_INVALID_AUTH_UID: User not found' 'E_INVALID_AUTH_PASSWORD: Password mis-match' |
> { 'E_INVALID_AUTH_UID: User not found'
> {
const notifications = useNotifications() const notifications = useNotifications()

93
src/views/EmployeesDetails.vue
View File

@@ -3,10 +3,10 @@
<VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" /> <VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
<h5>Clean State</h5> <h5>Clean State</h5>
{{ state.clean.user }} {{ state.clean.employee }}
<br> <br>
<h5>Dirty State</h5> <h5>Dirty State</h5>
{{ state.user }} {{ state.employee }}
<form @keydown.enter="onEnter" class="text-start"> <form @keydown.enter="onEnter" class="text-start">
<div class="row mb-5"> <div class="row mb-5">
@@ -19,11 +19,11 @@
v-model.trim="state.employee.firstName" v-model.trim="state.employee.firstName"
id="first-name" id="first-name"
class="form-control" class="form-control"
:class="classIsInvalid(v$.employee.firstName)" :class="classIsInvalid(v$.firstName)"
:disabled="!editEmployee" :disabled="!editEmployee"
> >
<div <div
v-for="(error) in v$.employee.firstName.$errors" v-for="(error) in v$.firstName.$errors"
class="invalid-feedback" class="invalid-feedback"
id="firstNameFeedback"> id="firstNameFeedback">
{{error.$message}} {{error.$message}}
@@ -38,10 +38,10 @@
v-model.trim="state.employee.shorthand" v-model.trim="state.employee.shorthand"
id="shorthand" id="shorthand"
class="form-control" class="form-control"
:class="classIsInvalid(v$.employee.shorthand)" :class="classIsInvalid(v$.shorthand)"
:disabled="!editEmployee" :disabled="!editEmployee"
> >
<div v-for="(error) in v$.employee.shorthand.$errors" class="invalid-feedback" id="shorthandFeedback"> <div v-for="(error) in v$.shorthand.$errors" class="invalid-feedback" id="shorthandFeedback">
{{ error.$message }} {{ error.$message }}
</div> </div>
</div> </div>
@@ -57,10 +57,10 @@
v-model.trim="state.employee.email" v-model.trim="state.employee.email"
id="email" id="email"
class="form-control" class="form-control"
:class="classIsInvalid(v$.employee.email)" :class="classIsInvalid(v$.email)"
:disabled="!editEmployee" :disabled="!editEmployee"
> >
<div v-for="(error) in v$.employee.email.$errors" class="invalid-feedback" id="emailFeedback"> <div v-for="(error) in v$.email.$errors" class="invalid-feedback" id="emailFeedback">
{{error.$message}} {{error.$message}}
</div> </div>
</div> </div>
@@ -75,57 +75,57 @@
v-model.number="state.employee.contractHours" v-model.number="state.employee.contractHours"
id="contract-hours" id="contract-hours"
class="form-control" class="form-control"
:class="classIsInvalid(v$.employee.contractHours)" :class="classIsInvalid(v$.contractHours)"
:disabled="!editEmployee" :disabled="!editEmployee"
> >
<div v-for="(error) in v$.employee.contractHours.$errors" class="invalid-feedback" id="contractHoursFeedback"> <div v-for="(error) in v$.contractHours.$errors" class="invalid-feedback" id="contractHoursFeedback">
{{error.$message}} {{error.$message}}
</div> </div>
</div> </div>
<div class="col ps-5 border-start"> <div class="col ps-5 border-start">
<h4>Benutzerinformationen:</h4> <h4>Benutzerinformationen:</h4>
<template v-if="state.employee.hasUser || createUser"> <template v-if="state.employee.username || createUser">
<label for="username" class="form-label">Benutzername:</label> <label for="username" class="form-label">Benutzername:</label>
<input <input
type="text" type="text"
v-model.trim="state.user.username" v-model.trim="state.employee.username"
id="username" id="username"
class="form-control" class="form-control"
:class="classIsInvalid(v$.user.username)" :class="classIsInvalid(v$.username)"
:disabled="!createUser" :disabled="!createUser"
> >
<div v-for="(error) in v$.user.username.$errors" class="invalid-feedback" id="usernameFeedback"> <div v-for="(error) in v$.username.$errors" class="invalid-feedback" id="usernameFeedback">
{{ error.$message }} {{ error.$message }}
</div> </div>
<label for="password" class="form-label">Neues Passwort:</label> <label for="password" class="form-label">Neues Passwort:</label>
<input <input
type="password" type="password"
v-model="state.user.password" v-model="state.employee.password"
id="password" id="password"
class="form-control" class="form-control"
:class="classIsInvalid(v$.user.password)" :class="classIsInvalid(v$.password)"
:disabled="!editEmployee && !createUser" :disabled="!editEmployee && !createUser"
> >
<div v-for="(error) in v$.user.password.$errors" id="passwordFeedback" class="invalid-feedback"> <div v-for="(error) in v$.password.$errors" id="passwordFeedback" class="invalid-feedback">
{{error.$message}} {{error.$message}}
</div> </div>
<label for="password-repeat" class="form-label">Neues Passwort wiederholen:</label> <label for="password-repeat" class="form-label">Neues Passwort wiederholen:</label>
<input <input
type="password" type="password"
v-model="state.user.passwordConfirm" v-model="state.employee.passwordConfirm"
id="password-repeat" id="password-repeat"
class="form-control mb-3" class="form-control mb-3"
:class="classIsInvalid(v$.user.passwordConfirm)" :class="classIsInvalid(v$.passwordConfirm)"
:disabled="!editEmployee && !createUser" :disabled="!editEmployee && !createUser"
> >
<div v-for="(error) in v$.user.passwordConfirm.$errors" class="invalid-feedback" id="passwordRepeatFeedback"> <div v-for="(error) in v$.passwordConfirm.$errors" class="invalid-feedback" id="passwordRepeatFeedback">
{{error.$message}} {{error.$message}}
</div> </div>
</template> </template>
<template v-else> <template v-else>
<p>Kein Benutzer vorhanden</p> <p>Kein Benutzer vorhanden</p>
<button class="btn btn-primary" @click="onCreateUser()">Benutzer erstellen</button> <button class="btn btn-primary" @click.prevent="onCreateUser()">Benutzer erstellen</button>
</template> </template>
</div> </div>
</div> </div>
@@ -151,41 +151,32 @@ const state = useEmployee()
const editEmployee = ref(false) const editEmployee = ref(false)
const rules = computed(() => ({ const rules = computed(() => ({
employee: { firstName: {
firstName: { required: required
required: required
},
shorthand: {
required: required
},
email: {
email: email
},
contractHours: {
decimal,
betweenValue: between(0, 40)
}
}, },
user: { shorthand: {
username: { required: required
requiredIf: requiredIf(() => createUser.value && isNaN(state.user.id)) },
}, email: {
password: { email: email
requiredIf: requiredIf(() => createUser.value && isNaN(state.user.id)) },
}, contractHours: {
passwordConfirm: { decimal,
sameAs: sameAs(state.user.password) betweenValue: between(0, 40)
} },
username: {
requiredIf: requiredIf(() => createUser.value)
},
password: {
requiredIf: requiredIf(() => state.employee.username !== '')
},
passwordConfirm: {
sameAs: sameAs(state.employee.password)
} }
})) }))
const v$ = useVuelidate(rules, const v$ = useVuelidate(rules, state.employee)
{
employee: state.employee,
user: state.user
}
)
const createUser = ref(false) const createUser = ref(false)