Employees-Index: Create new User.

Fixes #25

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
  */

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>

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>

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" 

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())

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)
         }
     }
 })

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()
 })