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

93
src/views/EmployeesDetails.vue
View File

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