From 8071e8ef91c8fa8d572548dd9e104e32050fee32 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Tue, 16 Nov 2021 16:57:44 +0100
Subject: [PATCH 1/5] first commit, created New.vue...

---
 src/router/index.ts         | 9 +++++++++
 src/views/Employees/New.vue | 0
 2 files changed, 9 insertions(+)
 create mode 100644 src/views/Employees/New.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 0dfec62..38dae25 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,6 +30,15 @@ const routes: Array<RouteRecordRaw> = [
       requiresAdmin: true,
     }
   },
+  {
+    path: '/employees/new',
+    name: 'Employees/New',
+    component: () => import('@/views/Employees/Details.vue'),
+    meta: {
+      requiresAuth: true,
+      requiresAdmin: true
+    }
+  },
   {
     path: '/employees/:id',
     name: 'Employees/Details',
diff --git a/src/views/Employees/New.vue b/src/views/Employees/New.vue
new file mode 100644
index 0000000..e69de29

From 6f237ff8fad4e70fd11964a74779e36067a9e52d Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Wed, 17 Nov 2021 03:35:49 +0100
Subject: [PATCH 2/5] Employees-Index: Create new User.

---
 src/components/Employees/EmployeeForm.vue     | 307 ++++++++++++++++++
 .../EmployeeFormControls.vue}                 |   0
 src/components/Schedule/Schedule.vue          |   2 +-
 src/components/VNavigation.vue                |   1 +
 src/router/index.ts                           |   2 +-
 src/stores/employee.ts                        |  53 ++-
 src/stores/employees.ts                       |  89 +----
 src/types/employees.d.ts                      |  23 ++
 src/types/schedule-data.d.ts                  |  13 -
 src/views/Employees/Details.vue               | 244 +-------------
 src/views/Employees/New.vue                   |  17 +
 src/views/Login.vue                           |   4 -
 12 files changed, 408 insertions(+), 347 deletions(-)
 create mode 100644 src/components/Employees/EmployeeForm.vue
 rename src/components/{VProfileControls.vue => Employees/EmployeeFormControls.vue} (100%)
 create mode 100644 src/types/employees.d.ts

diff --git a/src/components/Employees/EmployeeForm.vue b/src/components/Employees/EmployeeForm.vue
new file mode 100644
index 0000000..ca2f1c0
--- /dev/null
+++ b/src/components/Employees/EmployeeForm.vue
@@ -0,0 +1,307 @@
+<template>
+    <EmployeeFormControls 
+        class="mb-5" 
+        :isActive="editEmployee || createUser" 
+        @save="submitForm" 
+        @toggleEdit="toggleEdit" 
+    />
+
+<form class="text-start" @keyup.enter="submitForm">
+    <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 || !userStore.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 || userEnabled"
+                    @click="toggleCreateUser"
+                    :disabled="userEnabled"
+                >
+                <label for="userEnabledSwitch" class="form-check-label h5">{{ labelUserEnabled }}</label>
+            </div>
+            <template v-if="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>
+</form>
+
+    <EmployeeFormControls 
+        class="mt-5" 
+        :isActive="editEmployee || createUser" 
+        @save="submitForm" 
+        @toggleEdit="toggleEdit"
+    />
+
+
+</template>
+<script setup lang="ts">
+import { toRefs, ref, computed, onMounted } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
+import { required, email, between, decimal, sameAs, requiredIf, helpers } from '@vuelidate/validators'
+import { storeToRefs } from 'pinia'
+import { useUser } from '@/stores/user'
+import { useEmployee } from '@/stores/employee'
+import EmployeeFormControls from '@/components/Employees/EmployeeFormControls.vue'
+import { IMaskComponent as MaskInput } from 'vue-imask'
+
+
+/**
+ * Props
+ */
+const props = defineProps<{
+    id?: string | string[]
+}>()
+
+/**
+ * Stores
+ */
+const userStore = useUser()
+const employeeStore = useEmployee()
+const { employee, userEnabled } = storeToRefs(employeeStore)
+
+/**
+ * Local Refs
+ */
+const createUser = ref(false)
+const strContractHours = ref('')
+const editEmployee = ref(props.id ? false : true)
+
+/**
+ * Vuelidate Validator
+ */
+ function validateApiErrors(field: string, rule: string) {
+    const apiErrors = employeeStore.apiValidationErrors
+    const error = apiErrors.find((element) => {
+        return element.field === field && element.rule === rule
+    })
+
+    if(error === undefined){
+        return true
+    }
+    else return helpers.withMessage(error.message, () => false)
+}
+
+ const rules = computed(() => ({
+    firstName: { 
+        required: required 
+    },
+    shorthand: {
+        required: required,
+        validateApiErrors: validateApiErrors("shorthand", "unique")
+    },
+    email: { 
+        email: email 
+    },
+    contractHours: {
+        decimal,
+        betweenValue: between(0, 40)
+    },
+    username: {
+        requiredIf: requiredIf(() => createUser.value),
+        unique: validateApiErrors('username', 'unique')
+    },
+    password: {
+        requiredIf: requiredIf(() => createUser.value)
+    },
+    passwordConfirm: {
+        sameAs: sameAs(employee.value.password)
+    }
+}))
+
+const v$ = useVuelidate(rules, employee)
+
+
+/**
+ * Getters for dynamic classes and labels
+ */
+function classIsInvalid(validator: any) : string {
+    return validator.$dirty && validator.$invalid ? 'is-invalid' : ''
+}
+const labelUserEnabled = computed(() => {
+    return userEnabled ? 'Benutzerinformationen' : 'Kein Benutzer vorhanden'
+})
+
+/**
+ * Actions
+ */
+function toggleCreateUser() {
+    createUser.value = !createUser.value
+}
+
+function toggleEdit() {
+    if(createUser.value) {
+        editEmployee.value = false
+        createUser.value = false
+    }
+    else editEmployee.value = !editEmployee.value
+
+    v$.value.$reset()
+    employeeStore.reset()
+}
+
+async function submitForm(){
+    if(await v$.value.$validate()) {
+        if(employee.value.id){
+            employeeStore.patchEmployee()
+            // werte apiValidation aus!!!
+            
+            toggleEdit()
+        }
+        else {
+            employeeStore.postEmployee()
+            // werte apiValidation aus!!!
+        }
+    }
+}
+
+/**
+ * Initialize the Component  
+ */
+onMounted(() => {
+    if(props.id !== undefined) {
+        employeeStore.fetchFromApi(props.id)
+    }
+    else {
+        employeeStore.$reset()
+    }
+})
+</script>
+
+<script lang="scss">
+
+</script>
\ No newline at end of file
diff --git a/src/components/VProfileControls.vue b/src/components/Employees/EmployeeFormControls.vue
similarity index 100%
rename from src/components/VProfileControls.vue
rename to src/components/Employees/EmployeeFormControls.vue
diff --git a/src/components/Schedule/Schedule.vue b/src/components/Schedule/Schedule.vue
index c45ed80..b8cf864 100644
--- a/src/components/Schedule/Schedule.vue
+++ b/src/components/Schedule/Schedule.vue
@@ -3,7 +3,7 @@
 AddEmployeeModal(
         
         :searchData="store.state.rows" 
-        :searchFields="['first_name', 'last_name']" 
+        :searchFields="['firstName', 'lastName']" 
         :searchRow="addEmployeeRow" 
         :modalId="modalId" 
         @emitResult="addEmployee($event)"
diff --git a/src/components/VNavigation.vue b/src/components/VNavigation.vue
index e456bb8..c2a47ae 100644
--- a/src/components/VNavigation.vue
+++ b/src/components/VNavigation.vue
@@ -2,6 +2,7 @@
     <nav class="nav justify-content-center border-bottom mb-4 pb-2 d-flex">
 		<router-link class="nav-link" :to="{name: 'Home'}">Home</router-link>
         <router-link v-if="userStore.isAdmin" :to="{name: 'Employees/Index'}" class="nav-link">Mitarbeiter</router-link>
+        <router-link v-if="userStore.isAdmin" :to="{name: 'Employees/New'}" class="nav-link">Neuer Mitarbeiter</router-link>
         <div class="ms-auto"></div>
         <router-link 
             v-if="userStore.isLoggedIn" 
diff --git a/src/router/index.ts b/src/router/index.ts
index 38dae25..af5f1b4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,7 +33,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/employees/new',
     name: 'Employees/New',
-    component: () => import('@/views/Employees/Details.vue'),
+    component: () => import('@/views/Employees/New.vue'),
     meta: {
       requiresAuth: true,
       requiresAdmin: true
diff --git a/src/stores/employee.ts b/src/stores/employee.ts
index 879e3bc..51adf1a 100644
--- a/src/stores/employee.ts
+++ b/src/stores/employee.ts
@@ -2,6 +2,7 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
 import axios from '@/axios'
 import { useUser } from './user'
 import { useNotifications } from './notifications'
+import Axios from 'axios'
 
 const user = useUser()
 const notifications = useNotifications()
@@ -12,7 +13,7 @@ export const useEmployee = defineStore({
     state: () => {
         return {
             clean: {
-                /** @type Employee */
+                /** @type { Employee } */
                 employee: {
                     id: NaN,
                     firstName: '',
@@ -25,7 +26,8 @@ export const useEmployee = defineStore({
                     isActive: false,
                     username: '',
                     password: '',
-                    passwordConfirm: ''
+                    passwordConfirm: '',
+                    role: ''
                 },
             },
 
@@ -42,8 +44,12 @@ export const useEmployee = defineStore({
                 isActive: false,
                 username: '',
                 password: '',
-                passwordConfirm: ''
+                passwordConfirm: '',
+                role: ''
             },
+
+            /** @type { EmployeeApiValidationError[] } */
+            apiValidationErrors: Array<EmployeeApiValidationError>(),
         }
     },
 
@@ -77,8 +83,17 @@ export const useEmployee = defineStore({
             Object.assign(this.employee, this.clean.employee)
         },
 
-        /** TODO: #23 Persist user if password is changed */
         async persist() {
+
+            if(this.employee.id){
+                this.patchEmployee()
+            }
+            else {
+                this.postEmployee()
+            }
+        },
+
+        async patchEmployee() {
             try {
                 let result
                 let payload = Object.assign({}, this.employee)
@@ -109,7 +124,35 @@ export const useEmployee = defineStore({
                 }
                 else console.log(error)
             }
-        }
+        },
+
+        async postEmployee() {
+            let result
+            try {
+                result = await axios.post<Employee>(
+                    'employees',
+                    this.employee,
+                    {
+                        headers: user.header
+                    }
+                )
+
+                this.assignTruthyValues(this.employee, result.data)
+                this.assignTruthyValues(this.clean.employee, result.data)
+                notifications.add('success', result.statusText)
+
+                console.log(result)
+            }
+            catch(error){
+                console.log("enter catch")
+                if(Axios.isAxiosError(error)) {
+                    console.log("enter axios error")
+                    let data = error.response?.data as { errors: EmployeeApiValidationError[] }
+                    console.log(data)
+                    this.apiValidationErrors = [...data.errors]
+                }
+            }
+        },
     },
 
     getters: {
diff --git a/src/stores/employees.ts b/src/stores/employees.ts
index 7722543..d456b8f 100644
--- a/src/stores/employees.ts
+++ b/src/stores/employees.ts
@@ -9,7 +9,7 @@ export default defineStore('employees', () => {
     const user = useUser()
 
     const state = reactive({
-        rows: Array<any>(),
+        rows: Array<Employee>(),
         columns: Array<string>(),
 
         meta : {
@@ -91,89 +91,4 @@ export default defineStore('employees', () => {
         setPage
     }
 
-})
-
-/* 
-export const useEmployees = defineStore('employees', {
-    state: () => {
-        return { 
-            /**
-            *   @type any[]
-             
-            rows: Array<any>(),
-
-            meta: {
-                current_page: NaN,
-                first_page: NaN,
-                last_page: NaN,
-                per_page: NaN,
-                total: NaN
-            },
-
-            columns: Array<string>(),
-
-            limit: 10,
-            page: 1,
-            sort_by: '',
-            simple_search: ''
-        }
-    },
-
-    actions: {
-        /**
-        *   @param: {number} limit          - QueryString: limit=20 etc.
-        *   @param: {number} page           - QueryString: page=1 etc.
-        *   @param: {string} sortBy         - QueryString: sort_by=asc(col1),desc(col2),...
-        *   @param: {string} simpleSearch   - QueryString: simple_search=query(col1,col2,...)
-        **
-        async fetchFromApi() {
-            try {
-                
-                const data : any = (await axios.get(
-                    '/employees',
-                    {
-                        params: {
-                            limit: this.limit,
-                            page: this.page,
-                            sort_by: this.sort_by,
-                            simple_search: this.simple_search
-                        },
-                        headers: user.header
-                    }
-                )).data
-
-                Object.assign(this.meta, data.meta)
-                this.rows = _cloneDeep(data.data)
-
-                this.columns = this.fetchColumns()
-            }
-            catch(err) {
-                console.log(err)
-            }
-        },
-
-        fetchColumns() : string[] {
-            if(this.rows[0]){
-                return Object.keys(this.rows[0])
-            }
-            return []
-        },
-
-        setLimit(limit : number) {
-            this.limit = limit
-            this.fetchFromApi()
-        },
-        setSortBy(sortBy : string) {
-            this.sort_by = sortBy
-            this.fetchFromApi()
-        },
-        setSimpleSearch(simpleSearch : string) {
-            this.simple_search = simpleSearch
-            this.fetchFromApi()
-        },
-        setPage(page : number) {
-            this.page = page
-            this.fetchFromApi()
-        }
-    }
-}) */
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/types/employees.d.ts b/src/types/employees.d.ts
new file mode 100644
index 0000000..d2d3a8e
--- /dev/null
+++ b/src/types/employees.d.ts
@@ -0,0 +1,23 @@
+type Employee = {
+    id: number,
+    firstName: string,
+    lastName: string,
+    email: string,
+    phone: string,
+    mobile: string,
+    role: string,
+    shorthand: string,
+    contractHours?: number,
+    username?: string,
+    password?: string,
+    passwordConfirm?: string,
+    isActive: boolean,
+    createdAt?: Date,
+    updatedAt?: Date
+}
+
+type EmployeeApiValidationError = {
+    rule: string,
+    field: keyof Employee,
+    message: string
+}
\ No newline at end of file
diff --git a/src/types/schedule-data.d.ts b/src/types/schedule-data.d.ts
index fa74e99..cd54422 100644
--- a/src/types/schedule-data.d.ts
+++ b/src/types/schedule-data.d.ts
@@ -2,19 +2,6 @@ type ScheduleData = [
     ...ScheduleMonth[]
 ]
 
-type Employee = {
-    id: number,
-    first_name: string,
-    last_name: string,
-    email: string,
-    phone: string,
-    mobile: string,
-    role: string,
-    shorthand: string,
-    contractHours?: number
-    username?: string
-}
-
 type ScheduleRow = {
     dates : (Date | null)[],
     employees : Employee[]
diff --git a/src/views/Employees/Details.vue b/src/views/Employees/Details.vue
index 3105a6e..25504e0 100644
--- a/src/views/Employees/Details.vue
+++ b/src/views/Employees/Details.vue
@@ -1,256 +1,28 @@
 <template>
-<form class="text-start">
-    <VProfileControls class="mb-5" :isActive="editEmployee || createUser" @save="onUpdateEmployee" @toggleEdit="onToggleEdit" />
+<div>
+    <EmployeeForm
+    :id="route.params.id"
 
-    <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>
+    />
+</div>
 
 
 </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 EmployeeForm from '@/components/Employees/EmployeeForm.vue'
 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>
 
diff --git a/src/views/Employees/New.vue b/src/views/Employees/New.vue
index e69de29..aa9c30f 100644
--- a/src/views/Employees/New.vue
+++ b/src/views/Employees/New.vue
@@ -0,0 +1,17 @@
+<template>
+
+<div>
+    <EmployeeForm />
+</div>
+
+</template>
+
+<script setup lang="ts">
+
+import EmployeeForm from '@/components/Employees/EmployeeForm.vue';
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index d0e8c89..e9ba0f6 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -95,10 +95,6 @@ watch(input, () => {
     v$.value.$reset()
 })
 
-userStore.$subscribe((mutation, state) => {
-   // if(state.isLoggedIn) router.push({name: 'Home'})
-})
-
 async function onClick() { 
     if(await v$.value.$validate()) {
         await userStore.login(input.username, input.password, router)

From 6ba4b38552d63fb9924474a455f05adc9b1b8dc4 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sat, 27 Nov 2021 23:30:29 +0100
Subject: [PATCH 3/5] Employees-Index: Create new User. did some work on issue
 #25

---
 src/components/Employees/EmployeeForm.vue | 26 +++++++++++++++++------
 src/stores/employee.ts                    |  3 +++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Employees/EmployeeForm.vue b/src/components/Employees/EmployeeForm.vue
index ca2f1c0..4b23e5e 100644
--- a/src/components/Employees/EmployeeForm.vue
+++ b/src/components/Employees/EmployeeForm.vue
@@ -5,6 +5,7 @@
         @save="submitForm" 
         @toggleEdit="toggleEdit" 
     />
+    {{employeeStore.employee }}
 
 <form class="text-start" @keyup.enter="submitForm">
     <div class="row mb-5">
@@ -170,7 +171,8 @@
 
 </template>
 <script setup lang="ts">
-import { toRefs, ref, computed, onMounted } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { useVuelidate } from '@vuelidate/core'
 import { required, email, between, decimal, sameAs, requiredIf, helpers } from '@vuelidate/validators'
 import { storeToRefs } from 'pinia'
@@ -178,6 +180,7 @@ import { useUser } from '@/stores/user'
 import { useEmployee } from '@/stores/employee'
 import EmployeeFormControls from '@/components/Employees/EmployeeFormControls.vue'
 import { IMaskComponent as MaskInput } from 'vue-imask'
+import employees from '@/stores/employees'
 
 
 /**
@@ -193,6 +196,7 @@ const props = defineProps<{
 const userStore = useUser()
 const employeeStore = useEmployee()
 const { employee, userEnabled } = storeToRefs(employeeStore)
+const router = useRouter()
 
 /**
  * Local Refs
@@ -211,7 +215,7 @@ const editEmployee = ref(props.id ? false : true)
     })
 
     if(error === undefined){
-        return true
+        return true // return helpers.withMessage("", () => true) doesn't work!!!!
     }
     else return helpers.withMessage(error.message, () => false)
 }
@@ -277,18 +281,26 @@ function toggleEdit() {
 async function submitForm(){
     if(await v$.value.$validate()) {
         if(employee.value.id){
-            employeeStore.patchEmployee()
-            // werte apiValidation aus!!!
+            await employeeStore.patchEmployee()
             
             toggleEdit()
         }
-        else {
-            employeeStore.postEmployee()
-            // werte apiValidation aus!!!
+        else if(await employeeStore.postEmployee()){
+            router.push({name: "Employees/Index"})
         }
     }
 }
 
+/**
+ * Watch State
+ */
+watch(employee, () => {
+    v$.value.$reset()
+    employeeStore.apiValidationErrors = []
+},{
+    deep: true
+})
+
 /**
  * Initialize the Component  
  */
diff --git a/src/stores/employee.ts b/src/stores/employee.ts
index 51adf1a..96839cf 100644
--- a/src/stores/employee.ts
+++ b/src/stores/employee.ts
@@ -3,6 +3,7 @@ import axios from '@/axios'
 import { useUser } from './user'
 import { useNotifications } from './notifications'
 import Axios from 'axios'
+import { stubFalse } from 'lodash'
 
 const user = useUser()
 const notifications = useNotifications()
@@ -142,6 +143,7 @@ export const useEmployee = defineStore({
                 notifications.add('success', result.statusText)
 
                 console.log(result)
+                return true
             }
             catch(error){
                 console.log("enter catch")
@@ -151,6 +153,7 @@ export const useEmployee = defineStore({
                     console.log(data)
                     this.apiValidationErrors = [...data.errors]
                 }
+                return false
             }
         },
     },

From a0a03ea9ee20526671439ea4d3bcc8cdecf66036 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 28 Nov 2021 09:02:27 +0100
Subject: [PATCH 4/5] fine tuned error handling. working on #25

---
 src/components/Employees/EmployeeForm.vue | 17 +++++++----------
 src/stores/employee.ts                    | 22 ++++++++++++++--------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/Employees/EmployeeForm.vue b/src/components/Employees/EmployeeForm.vue
index 4b23e5e..dab9d67 100644
--- a/src/components/Employees/EmployeeForm.vue
+++ b/src/components/Employees/EmployeeForm.vue
@@ -5,8 +5,6 @@
         @save="submitForm" 
         @toggleEdit="toggleEdit" 
     />
-    {{employeeStore.employee }}
-
 <form class="text-start" @keyup.enter="submitForm">
     <div class="row mb-5">
         <div class="col pe-5">
@@ -180,8 +178,6 @@ import { useUser } from '@/stores/user'
 import { useEmployee } from '@/stores/employee'
 import EmployeeFormControls from '@/components/Employees/EmployeeFormControls.vue'
 import { IMaskComponent as MaskInput } from 'vue-imask'
-import employees from '@/stores/employees'
-
 
 /**
  * Props
@@ -247,7 +243,7 @@ const editEmployee = ref(props.id ? false : true)
     }
 }))
 
-const v$ = useVuelidate(rules, employee)
+const v$ = useVuelidate(rules, employee) // error because wrong return type in validateApiErrors()...
 
 
 /**
@@ -279,13 +275,14 @@ function toggleEdit() {
 }
 
 async function submitForm(){
-    if(await v$.value.$validate()) {
+
+    if(await v$.value.$validate()){
         if(employee.value.id){
-            await employeeStore.patchEmployee()
-            
-            toggleEdit()
+            if(await employeeStore.patchEmployee()){
+                toggleEdit()
+            }
         }
-        else if(await employeeStore.postEmployee()){
+        else if(await employeeStore.postEmployee()) {
             router.push({name: "Employees/Index"})
         }
     }
diff --git a/src/stores/employee.ts b/src/stores/employee.ts
index 96839cf..43a3be5 100644
--- a/src/stores/employee.ts
+++ b/src/stores/employee.ts
@@ -3,7 +3,6 @@ import axios from '@/axios'
 import { useUser } from './user'
 import { useNotifications } from './notifications'
 import Axios from 'axios'
-import { stubFalse } from 'lodash'
 
 const user = useUser()
 const notifications = useNotifications()
@@ -117,13 +116,19 @@ export const useEmployee = defineStore({
                 
                 Object.assign(this.clean.employee, this.employee)
                 notifications.add('success', result.statusText)
+                return true
             }
             catch(error) {
-                if(error instanceof Error) {
-                    console.log(error)
+                console.log("Patch Employee Error")
+                if(Axios.isAxiosError(error)) {
+                    let data = error.response?.data as { errors: EmployeeApiValidationError[] }
+                    this.apiValidationErrors = [...data.errors]
+                }
+                else if(error instanceof Error) {
                     notifications.add('danger', error.message, -1)
                 }
-                else console.log(error)
+                console.log(error)
+                return false
             }
         },
 
@@ -142,17 +147,18 @@ export const useEmployee = defineStore({
                 this.assignTruthyValues(this.clean.employee, result.data)
                 notifications.add('success', result.statusText)
 
-                console.log(result)
                 return true
             }
             catch(error){
-                console.log("enter catch")
+                console.log("Post Employee Error")
                 if(Axios.isAxiosError(error)) {
-                    console.log("enter axios error")
                     let data = error.response?.data as { errors: EmployeeApiValidationError[] }
-                    console.log(data)
                     this.apiValidationErrors = [...data.errors]
                 }
+                else if(error instanceof Error) {
+                    notifications.add('danger', error.message, -1)
+                }
+                console.log(error)
                 return false
             }
         },

From 0f91587bfda93c7144a5f590349d8e8a1f154064 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 28 Nov 2021 14:13:45 +0100
Subject: [PATCH 5/5] Employees-Index: Create new User. Fixes #25

---
 src/components/Employees/EmployeeForm.vue     | 25 +++++++++++++------
 .../Employees/EmployeeFormControls.vue        | 15 ++++++-----
 src/components/Employees/IndexControls.vue    | 20 +++++++++++++++
 src/components/VNavigation.vue                |  1 -
 src/stores/employees.ts                       |  2 +-
 src/stores/settings.ts                        |  4 ---
 src/views/Employees/Index.vue                 |  3 +++
 7 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Employees/IndexControls.vue

diff --git a/src/components/Employees/EmployeeForm.vue b/src/components/Employees/EmployeeForm.vue
index dab9d67..cd76fb7 100644
--- a/src/components/Employees/EmployeeForm.vue
+++ b/src/components/Employees/EmployeeForm.vue
@@ -1,10 +1,13 @@
 <template>
-    <EmployeeFormControls 
-        class="mb-5" 
-        :isActive="editEmployee || createUser" 
-        @save="submitForm" 
-        @toggleEdit="toggleEdit" 
-    />
+
+<EmployeeFormControls 
+    class="mb-5" 
+    :isActive="editEmployee || createUser"
+    :isNew="isNew"
+    @save="submitForm" 
+    @toggleEdit="toggleEdit" 
+/>
+
 <form class="text-start" @keyup.enter="submitForm">
     <div class="row mb-5">
         <div class="col pe-5">
@@ -161,7 +164,8 @@
 
     <EmployeeFormControls 
         class="mt-5" 
-        :isActive="editEmployee || createUser" 
+        :isActive="editEmployee || createUser"
+        :isNew="isNew"
         @save="submitForm" 
         @toggleEdit="toggleEdit"
     />
@@ -256,6 +260,13 @@ const labelUserEnabled = computed(() => {
     return userEnabled ? 'Benutzerinformationen' : 'Kein Benutzer vorhanden'
 })
 
+/**
+ *
+ */
+
+const isNew = computed(() => {
+    return props.id ? false : true
+})
 /**
  * Actions
  */
diff --git a/src/components/Employees/EmployeeFormControls.vue b/src/components/Employees/EmployeeFormControls.vue
index 2a69927..6c36c72 100644
--- a/src/components/Employees/EmployeeFormControls.vue
+++ b/src/components/Employees/EmployeeFormControls.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 
-import { toRef } from 'vue'
+import { toRefs } from 'vue'
 
-
-const props = defineProps(['isActive'])
+const props = defineProps<{
+    isActive: boolean,
+    isNew: boolean
+}>()
 const emit = defineEmits(['save', 'toggleEdit'])
 
-const isActive = toRef(props, 'isActive')
+const { isActive } = toRefs(props)
 
 function onEdit() {
     emit('toggleEdit')
@@ -23,8 +25,9 @@ function onCancel() {
 </script>
 
 <template>
+
 <div class="d-flex">
-    <router-link type="button" :to="{name: 'Home'}" class="btn btn-outline-secondary">
+    <router-link type="button" :to="{name: 'Employees/Index'}" class="btn btn-outline-secondary">
         <i class="bi bi-chevron-left"></i>
         Zurück
     </router-link>
@@ -35,7 +38,7 @@ function onCancel() {
                 <i class="bi bi-save"></i>
                 Mitarbeiter speichern
             </button>
-            <button v-if="isActive" type="button" @click="onCancel" class="btn btn-outline-secondary ms-3">
+            <button v-if="isActive && !isNew" type="button" @click="onCancel" class="btn btn-outline-secondary ms-3">
                 <i class="bi bi-x-lg"></i>
                 Abbrechen
             </button>
diff --git a/src/components/Employees/IndexControls.vue b/src/components/Employees/IndexControls.vue
new file mode 100644
index 0000000..aba648f
--- /dev/null
+++ b/src/components/Employees/IndexControls.vue
@@ -0,0 +1,20 @@
+<template>
+<div class="d-flex mb-4">
+    <router-link type="button" :to="{name: 'Home'}" class="btn btn-outline-secondary">
+        <i class="bi bi-chevron-left"></i>
+        Zurück
+    </router-link>
+
+    <router-link type="button" :to="{name: 'Employees/New'}" class="btn btn-success ms-auto">
+        <i class="bi bi-save"></i>
+        Neuer Mitarbeiter
+    </router-link> 
+</div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/src/components/VNavigation.vue b/src/components/VNavigation.vue
index c2a47ae..e456bb8 100644
--- a/src/components/VNavigation.vue
+++ b/src/components/VNavigation.vue
@@ -2,7 +2,6 @@
     <nav class="nav justify-content-center border-bottom mb-4 pb-2 d-flex">
 		<router-link class="nav-link" :to="{name: 'Home'}">Home</router-link>
         <router-link v-if="userStore.isAdmin" :to="{name: 'Employees/Index'}" class="nav-link">Mitarbeiter</router-link>
-        <router-link v-if="userStore.isAdmin" :to="{name: 'Employees/New'}" class="nav-link">Neuer Mitarbeiter</router-link>
         <div class="ms-auto"></div>
         <router-link 
             v-if="userStore.isLoggedIn" 
diff --git a/src/stores/employees.ts b/src/stores/employees.ts
index d456b8f..92f4b5e 100644
--- a/src/stores/employees.ts
+++ b/src/stores/employees.ts
@@ -41,7 +41,7 @@ export default defineStore('employees', () => {
                 }
             )).data
 
-            Object.assign(state.meta, data.meta)            
+            _assign(state.meta, data.meta)
             state.rows = _cloneDeep(data.data)
             
             _assign(state.columns, fetchColumns())
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 605d61c..fe15e76 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -37,8 +37,6 @@ export const useSettings = defineStore({
                     headers: user.header
                 })
 
-                console.log(result) 
-
                 result.data.forEach((element) => {
                     this.settings[_camelCase(element.key)] = JSON.parse(element.value)
                 })
@@ -67,7 +65,6 @@ export const useSettings = defineStore({
                     settings.push({key: _kebabCase(key), value: JSON.stringify(value)})
                 }
             }           
-            console.log(settings)
             const result = await axios.post('settings',
             {
                 settings
@@ -75,7 +72,6 @@ export const useSettings = defineStore({
             {
                 headers: user.header
             })
-            console.log(result)
         }
     }
 })
\ No newline at end of file
diff --git a/src/views/Employees/Index.vue b/src/views/Employees/Index.vue
index b99b762..e80e6d2 100644
--- a/src/views/Employees/Index.vue
+++ b/src/views/Employees/Index.vue
@@ -8,6 +8,7 @@
 
     @update-columns-selected="updateColumnsSelected"
 />
+<IndexControls />
 
 <SimpleSearch 
     :columns="settings.employeesIndexColumnsSelected"
@@ -57,6 +58,7 @@
 <script setup lang="ts">
 import SimpleSearch from '@/components/Employees/SimpleSearch.vue';
 import IndexSettingsModal from '@/components/Employees/IndexSettingsModal.vue';
+import IndexControls from '@/components/Employees/IndexControls.vue';
 import VPaginator from '@/components/VPaginator.vue';
 import { onMounted, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -77,6 +79,7 @@ const sort_by = reactive({
 })
 
 onMounted(async () =>{
+    console.log("Employees Index onMounted")
     await store.fetchFromApi()
     await settingsStore.fetchFromApi()
 })