added input masks to EmployeeDetails, started implementing Employees/Index. Updated to Vue 3.2.21
This commit is contained in:
Sockenklaus
268
src/views/Employees/Details.vue
Normal file
268
src/views/Employees/Details.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
|
||||
<form class="text-start">
|
||||
<VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
|
||||
|
||||
<div class="row mb-5">
|
||||
<div class="col pe-5">
|
||||
<h4 class="">Persönliche Informationen</h4>
|
||||
|
||||
<label for="first-name" class="form-label">Vorname:</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model.trim="employee.firstName"
|
||||
id="first-name"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.firstName)"
|
||||
:disabled="!editEmployee"
|
||||
>
|
||||
<div
|
||||
v-for="(error) in v$.firstName.$errors"
|
||||
class="invalid-feedback"
|
||||
id="firstNameFeedback">
|
||||
{{error.$message}}
|
||||
</div>
|
||||
|
||||
<label for="last-name" class="form-label">Nachname:</label>
|
||||
<input type="text" v-model.trim="employee.lastName" id="last-name" class="form-control" :disabled="!editEmployee">
|
||||
|
||||
<label for="shorthand" class="form-label">Kürzel:</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model.trim="employee.shorthand"
|
||||
id="shorthand"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.shorthand)"
|
||||
:disabled="!editEmployee"
|
||||
>
|
||||
|
||||
<div v-for="(error) in v$.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>
|
||||
<MaskInput
|
||||
type="tel"
|
||||
id="phone"
|
||||
v-model="employee.phone"
|
||||
:mask="'000[00]{ / }0000 [0000]'"
|
||||
class="form-control"
|
||||
:disabled="!editEmployee"
|
||||
placeholder="_____ / ____ ____"
|
||||
/>
|
||||
<label for="mobile" class="form-label">Handynummer:</label>
|
||||
<MaskInput
|
||||
type="tel"
|
||||
v-model="employee.mobile"
|
||||
:mask="'000[00]{ / }[0000] [0000]'"
|
||||
id="mobile"
|
||||
class="form-control"
|
||||
:disabled="!editEmployee"
|
||||
placeholder="_____ / ____ ____"
|
||||
/>
|
||||
<label for="email" class="form-label">E-Mail-Adresse:</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model.trim="employee.email"
|
||||
id="email"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.email)"
|
||||
:disabled="!editEmployee"
|
||||
>
|
||||
<div v-for="(error) in v$.email.$errors" class="invalid-feedback" id="emailFeedback">
|
||||
{{error.$message}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col pe-5">
|
||||
<h4 class="">Vertragsinformationen:</h4>
|
||||
<label for="contract-hours" min="0" max="40" class="form-label">Wochenstunden:</label>
|
||||
|
||||
<MaskInput
|
||||
v-model:typed="employee.contractHours"
|
||||
v-model="strContractHours"
|
||||
:mask="Number"
|
||||
:signed="false"
|
||||
@click="$event.target.select()"
|
||||
|
||||
id="contract-hours"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.contractHours)"
|
||||
:disabled="!editEmployee"
|
||||
/>
|
||||
|
||||
<div v-for="(error) in v$.contractHours.$errors" class="invalid-feedback" id="contractHoursFeedback">
|
||||
{{error.$message}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col ps-5 border-start">
|
||||
<div class="form-check form-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
class="form-check-input"
|
||||
id="userEnabledSwitch"
|
||||
:checked="createUser || state.userEnabled"
|
||||
@click="onToggleCreateUser"
|
||||
:disabled="state.userEnabled"
|
||||
>
|
||||
<label for="userEnabledSwitch" class="form-check-label h5">{{ labelUserEnabled }}</label>
|
||||
</div>
|
||||
<template v-if="state.userEnabled || createUser">
|
||||
<label for="username" class="form-label">Benutzername:</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model.trim="employee.username"
|
||||
id="username"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.username)"
|
||||
:disabled="!createUser"
|
||||
>
|
||||
<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="employee.password"
|
||||
id="password"
|
||||
class="form-control"
|
||||
:class="classIsInvalid(v$.password)"
|
||||
:disabled="!editEmployee && !createUser"
|
||||
>
|
||||
<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="employee.passwordConfirm"
|
||||
id="password-repeat"
|
||||
class="form-control mb-3"
|
||||
:class="classIsInvalid(v$.passwordConfirm)"
|
||||
:disabled="!editEmployee && !createUser"
|
||||
>
|
||||
<div v-for="(error) in v$.passwordConfirm.$errors" class="invalid-feedback" id="passwordRepeatFeedback">
|
||||
{{error.$message}}
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<VProfileControls class="mt-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
|
||||
</form>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import VProfileControls from '@/components/VProfileControls.vue';
|
||||
import { onMounted, computed, ref, watch } from 'vue'
|
||||
import { useEmployee } from '@/stores/employee'
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required, email, between, decimal, sameAs, requiredIf } from '@vuelidate/validators'
|
||||
import { IMaskComponent as MaskInput } from 'vue-imask'
|
||||
|
||||
const route = useRoute()
|
||||
const state = useEmployee()
|
||||
|
||||
const { employee } = storeToRefs(state)
|
||||
|
||||
const editEmployee = ref(false)
|
||||
const strContractHours = ref('')
|
||||
|
||||
const rules = computed(() => ({
|
||||
firstName: {
|
||||
required: required
|
||||
},
|
||||
shorthand: {
|
||||
required: required
|
||||
},
|
||||
email: {
|
||||
email: email
|
||||
},
|
||||
contractHours: {
|
||||
decimal,
|
||||
betweenValue: between(0, 40)
|
||||
},
|
||||
username: {
|
||||
requiredIf: requiredIf(() => createUser.value)
|
||||
},
|
||||
password: {
|
||||
requiredIf: requiredIf(() => createUser.value)
|
||||
},
|
||||
passwordConfirm: {
|
||||
sameAs: sameAs(employee.value.password)
|
||||
}
|
||||
}))
|
||||
|
||||
|
||||
const v$ = useVuelidate(rules, employee)
|
||||
|
||||
const createUser = ref(false)
|
||||
|
||||
async function onUpdateEmployee() {
|
||||
if(await v$.value.$validate()){
|
||||
await state.persist()
|
||||
onToggleEdit()
|
||||
}
|
||||
}
|
||||
|
||||
function onToggleCreateUser() {
|
||||
createUser.value = !createUser.value
|
||||
}
|
||||
|
||||
function onToggleEdit() {
|
||||
if(createUser.value) {
|
||||
editEmployee.value = false
|
||||
createUser.value = false
|
||||
}
|
||||
else editEmployee.value = !editEmployee.value
|
||||
|
||||
v$.value.$reset()
|
||||
state.reset()
|
||||
}
|
||||
|
||||
watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName]) => {
|
||||
if(newName === oldName && newParam !== oldParam) {
|
||||
state.fetchFromApi(route.params.id)
|
||||
createUser.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function classIsInvalid(object : any) : string {
|
||||
|
||||
return object.$dirty && object.$invalid ? 'is-invalid' : ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
state.fetchFromApi(route.params.id)
|
||||
})
|
||||
|
||||
const labelUserEnabled = computed(() => {
|
||||
return state.userEnabled ? 'Benutzerinformationen' : 'Kein Benutzer vorhanden'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.form-label {
|
||||
margin-top: 0.75rem
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user