Refactored employee-Details to fit store and fetch / persist logic into pinia store. Added a clean state to reset to.

src/views/EmployeesDetails.vue

@@ -69,8 +69,8 @@
                     {{}}
                 </div>
                 <label for="password-repeat" class="form-label">Neues Passwort wiederholen:</label>
-                <input type="password" v-model="state.user.passwordRepeat" id="password-repeat" class="form-control mb-3" :class="{'is-invalid': classIsInvalid('user', 'passwordRepeat')}" :disabled="!editEmployee" >
-                <div v-for="(error) in v$.user.passwordRepeat.$errors" class="invalid-feedback" id="passwordRepeatFeedback">
+                <input type="password" v-model="state.user.passwordConfirm" id="password-repeat" class="form-control mb-3" :class="{'is-invalid': classIsInvalid('user', 'passwordConfirm')}" :disabled="!editEmployee" >
+                <div v-for="(error) in v$.user.passwordConfirm.$errors" class="invalid-feedback" id="passwordRepeatFeedback">
                     {{error.$message}}
                 </div>
 
@@ -99,59 +99,18 @@
 
 <script setup lang="ts">
 
-type ResultData = {
-	employee: {
-		id: number,
-		firstName: string,
-		lastName: string,
-		shorthand: string,
-		phone: string,
-		mobile: string,
-		email: string,
-		contractHours: number,
-		hasUser: Boolean,
-	},
-	user: {
-		id?: number,
-		username?: string
-	}
-}
-
 import VProfileControls from '@/components/VProfileControls.vue';
-import { reactive, onMounted, computed, ref, watch } from 'vue'
-import { useUser } from '@/stores/user';
-import axios from '@/axios'
-import { useNotifications } from '@/stores/notifications';
+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'
 
-const userStore = useUser()
-const useNotification = useNotifications()
 const route = useRoute()
+const state = useEmployee()
 
 const editEmployee = ref(false)
 
-let state = reactive({
-    employee: {
-       id: NaN,
-        firstName: '',
-        lastName: '',
-        shorthand: '',
-        phone: '',
-        mobile: '',
-        email: '',
-        contractHours: '',
-        hasUser: false 
-    },
-    user: {
-        id: NaN,
-        username: '',
-        password: '',
-        passwordRepeat: ''
-    }
-})
-
 const rules = computed(() => ({
     employee: {
         firstName: { 
@@ -166,35 +125,26 @@ const rules = computed(() => ({
         }
     },
     user: {
-        passwordRepeat: {
+        passwordConfirm: {
             sameAs: helpers.withMessage('Die eingebebenen Passwörter müssen übereinstimmen', sameAs(state.user.password))
         }
     }
 }))
 
-const v$ = useVuelidate(rules, state)
+
+const v$ = useVuelidate(rules,
+{
+    employee: state.employee,
+    user: state.user
+}
+)
 
 const createUser = ref(false)
 
 async function onUpdateEmployee() {
     if(await v$.value.$validate()){
-        if(state.user.password !== undefined && state.user.password.length > 0){
-            // push user
-        }
-        try {
-            const result = await axios.patch('employees/'+state.employee.id, state.employee, 
-                {
-                    headers: { 
-                        'Authorization': 'Bearer '+userStore.token
-                    }
-                }
-            )
-            onToggleEdit()  
-        }
-        catch(error){
-            if(error instanceof Error) useNotification.add('danger', error.message)
-            else console.log(error)
-        }
+        await state.persist()
+        onToggleEdit()
     }
 }   
 
@@ -205,19 +155,19 @@ function onEnter() {
 function onToggleEdit() {
     editEmployee.value = !editEmployee.value
     v$.value.$reset()
-    getEmployee()
+    state.reset()
 }
 
 watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName]) => {
     if(newName === oldName && newParam !== oldParam) {
-        getEmployee()
+        state.fetchFromApi(route.params.id)
         createUser.value = false
     }
 })
 
-function classIsInvalid<E extends 'user' | 'employee'>(entity: E, field: E extends 'user' ? 'passwordRepeat' : 'firstName' | 'email' | 'contractHours') : boolean {
+function classIsInvalid<E extends 'user' | 'employee'>(entity: E, field: E extends 'user' ? 'passwordConfirm' : 'firstName' | 'email' | 'contractHours') : boolean {
     if(entity === 'user'){
-        let fU = field as 'passwordRepeat'
+        let fU = field as 'passwordConfirm'
         return v$.value.user[fU].$dirty && v$.value.user[fU].$invalid
     }
     else if (entity === 'employee') {
@@ -227,23 +177,8 @@ function classIsInvalid<E extends 'user' | 'employee'>(entity: E, field: E exten
     return false
 }
 
-async function getEmployee() {
-    try {
-        const data : ResultData = await <ResultData>(await axios.get('employees/'+route.params.id, {
-            headers: { 
-                'Authorization': 'Bearer '+userStore.token
-            }
-        })).data
-
-        Object.assign(state, data)  
-    }
-    catch(err){
-        if(err instanceof Error) useNotification.add('danger', err.message, -1)
-    }
-}
-
 onMounted(async () => {
-    getEmployee()
+    state.fetchFromApi(route.params.id)
 })
 
 </script>