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

Implemented creation and updating of users.

Browse Source
This commit is contained in:
Sockenklaus
2021-11-03 00:36:41 +01:00
parent a9b394bf09
commit cfcfeba170
3 changed files with 131 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/views/EmployeesDetails.vue
View File

@@ -1,6 +1,12 @@
<template>
<VProfileControls class="mb-5" :isActive="editEmployee" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
<VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
<h5>Clean State</h5>
{{ state.clean.user }}
<br>
<h5>Dirty State</h5>
{{ state.user }}
<form @keydown.enter="onEnter" class="text-start">
<div class="row mb-5">
@@ -10,10 +16,10 @@
<label for="first-name" class="form-label">Vorname:</label>
<input
type="text"
v-model="state.employee.firstName"
v-model.trim="state.employee.firstName"
id="first-name"
class="form-control"
:class="{'is-invalid' : classIsInvalid('employee', 'firstName')}"
:class="classIsInvalid(v$.employee.firstName)"
:disabled="!editEmployee"
>
<div
@@ -24,24 +30,35 @@
</div>
<label for="last-name" class="form-label">Nachname:</label>
<input type="text" v-model="state.employee.lastName" id="last-name" class="form-control" :disabled="!editEmployee">
<input type="text" v-model.trim="state.employee.lastName" id="last-name" class="form-control" :disabled="!editEmployee">
<label for="shorthand" class="form-label">Kürzel:</label>
<input type="text" v-model="state.employee.shorthand" id="shorthand" class="form-control" :disabled="!editEmployee">
<input
type="text"
v-model.trim="state.employee.shorthand"
id="shorthand"
class="form-control"
:class="classIsInvalid(v$.employee.shorthand)"
:disabled="!editEmployee"
>
<div v-for="(error) in v$.employee.shorthand.$errors" class="invalid-feedback" id="shorthandFeedback">
{{ error.$message }}
</div>
</div>
<div class="col ps-5 border-start">
<h4 class="">Kontaktdaten</h4>
<label for="phone" class="form-label">Telefonnummer:</label>
<input type="phone" v-model="state.employee.phone" id="phone" class="form-control" :disabled="!editEmployee">
<input type="phone" v-model.trim="state.employee.phone" id="phone" class="form-control" :disabled="!editEmployee">
<label for="mobile" class="form-label">Handynummer:</label>
<input type="mobile" v-model="state.employee.mobile" id="mobile" class="form-control" :disabled="!editEmployee">
<input type="mobile" v-model.trim="state.employee.mobile" id="mobile" class="form-control" :disabled="!editEmployee">
<label for="email" class="form-label">E-Mail-Adresse:</label>
<input
type="email"
v-model="state.employee.email"
v-model.trim="state.employee.email"
id="email"
class="form-control"
:class="{'is-invalid': classIsInvalid('employee', 'email')}" :disabled="!editEmployee"
:class="classIsInvalid(v$.employee.email)"
:disabled="!editEmployee"
>
<div v-for="(error) in v$.employee.email.$errors" class="invalid-feedback" id="emailFeedback">
{{error.$message}}
@@ -53,7 +70,14 @@
<div class="col pe-5">
<h4 class="">Vertragsinformationen:</h4>
<label for="contract-hours" class="form-label">Wochenstunden:</label>
<input type="number" v-model="state.employee.contractHours" id="contract-hours" class="form-control" :class="{'is-invalid' : classIsInvalid('employee', 'contractHours')}" :disabled="!editEmployee">
<input
type="number"
v-model.number="state.employee.contractHours"
id="contract-hours"
class="form-control"
:class="classIsInvalid(v$.employee.contractHours)"
:disabled="!editEmployee"
>
<div v-for="(error) in v$.employee.contractHours.$errors" class="invalid-feedback" id="contractHoursFeedback">
{{error.$message}}
</div>
@@ -62,39 +86,54 @@
<h4>Benutzerinformationen:</h4>
<template v-if="state.employee.hasUser || createUser">
<label for="username" class="form-label">Benutzername:</label>
<input type="text" v-model="state.user.username" id="username" class="form-control" :disabled="!createUser" >
<input
type="text"
v-model.trim="state.user.username"
id="username"
class="form-control"
:class="classIsInvalid(v$.user.username)"
:disabled="!createUser"
>
<div v-for="(error) in v$.user.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" id="password" class="form-control" :disabled="!editEmployee">
<div id="passwordFeedback" class="invalid-feedback">
{{}}
<input
type="password"
v-model="state.user.password"
id="password"
class="form-control"
:class="classIsInvalid(v$.user.password)"
:disabled="!editEmployee && !createUser"
>
<div v-for="(error) in v$.user.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" id="password-repeat" class="form-control mb-3" :class="{'is-invalid': classIsInvalid('user', 'passwordConfirm')}" :disabled="!editEmployee" >
<input
type="password"
v-model="state.user.passwordConfirm"
id="password-repeat"
class="form-control mb-3"
:class="classIsInvalid(v$.user.passwordConfirm)"
:disabled="!editEmployee && !createUser"
>
<div v-for="(error) in v$.user.passwordConfirm.$errors" class="invalid-feedback" id="passwordRepeatFeedback">
{{error.$message}}
</div>
<template v-if="createUser">
<button class="btn btn-success me-3">
<i class="bi bi-save"></i>
Benutzer speichern
</button>
<button class="btn btn-outline-secondary" @click="createUser = false">
<i class="bi bi-x-lg"></i>
Abbrecchen
</button>
</template>
</template>
<template v-else>
<p>Kein Benutzer vorhanden</p>
<button class="btn btn-primary" @click="createUser=true">Benutzer erstellen</button>
<button class="btn btn-primary" @click="onCreateUser()">Benutzer erstellen</button>
</template>
</div>
</div>
</form>
<VProfileControls class="mt-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
</template>
<script setup lang="ts">
@@ -104,7 +143,7 @@ import { onMounted, computed, ref, watch } from 'vue'
import { useEmployee } from '@/stores/employee'
import { useRoute } from 'vue-router';
import useVuelidate from '@vuelidate/core'
import { required, email, between, decimal, sameAs, helpers } from '@vuelidate/validators'
import { required, email, between, decimal, sameAs, helpers, requiredIf } from '@vuelidate/validators'
const route = useRoute()
const state = useEmployee()
@@ -114,19 +153,28 @@ const editEmployee = ref(false)
const rules = computed(() => ({
employee: {
firstName: {
required: helpers.withMessage('Vorname ist erforderlich.', required)
required: required
},
shorthand: {
required: required
},
email: {
email: helpers.withMessage('Muss eine korrekte E-Mail-Adresse enthalten.', email)
email: email
},
contractHours: {
decimal,
betweenValue: helpers.withMessage('Vertragsstunden müssen zwischen 0 und 40 liegen', between(0, 40))
betweenValue: between(0, 40)
}
},
user: {
username: {
requiredIf: requiredIf(() => createUser.value && isNaN(state.user.id))
},
password: {
requiredIf: requiredIf(() => createUser.value && isNaN(state.user.id))
},
passwordConfirm: {
sameAs: helpers.withMessage('Die eingebebenen Passwörter müssen übereinstimmen', sameAs(state.user.password))
sameAs: sameAs(state.user.password)
}
}
}))
@@ -153,11 +201,20 @@ function onEnter() {
}
function onToggleEdit() {
editEmployee.value = !editEmployee.value
if(createUser.value) {
editEmployee.value = false
createUser.value = false
}
else editEmployee.value = !editEmployee.value
v$.value.$reset()
state.reset()
}
function onCreateUser() {
createUser.value = true
}
watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName]) => {
if(newName === oldName && newParam !== oldParam) {
state.fetchFromApi(route.params.id)
@@ -165,16 +222,9 @@ watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName
}
})
function classIsInvalid<E extends 'user' | 'employee'>(entity: E, field: E extends 'user' ? 'passwordConfirm' : 'firstName' | 'email' | 'contractHours') : boolean {
if(entity === 'user'){
let fU = field as 'passwordConfirm'
return v$.value.user[fU].$dirty && v$.value.user[fU].$invalid
}
else if (entity === 'employee') {
let fE = field as 'firstName' | 'email' | 'contractHours'
return v$.value.employee[fE].$dirty && v$.value.employee[fE].$invalid
}
return false
function classIsInvalid(object : any) : string {
return object.$dirty && object.$invalid ? 'is-invalid' : ''
}
onMounted(async () => {