duty-schedule-fe/src/views/Employees/Details.vue

<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 || !user.isAdmin"
            /> 

            <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 { useUser } from '@/stores/user'
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 user = useUser()

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?.toString() !== oldParam?.toString()) {
        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>