Changes

spaces/pages/settings/profiles/show/[id].vue

@@ -0,0 +1,113 @@
+<script setup>
+const dataStore = useDataStore()
+const route = useRoute()
+
+const itemInfo = ref({})
+
+const setupPage = () => {
+  if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
+}
+
+setupPage()
+
+</script>
+
+<template>
+  <UDashboardNavbar
+    :title="itemInfo.fullName"
+  >
+  </UDashboardNavbar>
+
+  <UTabs
+    class="p-5"
+    :items="[
+        {
+          label: 'Informationen'
+        },{
+          label: 'Zeiterfassung'
+        },{
+          label: 'Vertragsdaten'
+        }
+    ]"
+  >
+    <template #item="{item}">
+      <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'">
+          <Toolbar>
+            <UButton
+                @click="dataStore.updateItem('profiles',itemInfo)"
+            >
+              Speichern
+            </UButton>
+          </Toolbar>
+          <InputGroup class="w-full">
+            <UFormGroup
+              label="Anrede"
+              class="w-60"
+            >
+              <UInput
+                v-model="itemInfo.salutation"
+              />
+            </UFormGroup>
+            <UFormGroup
+              label="Vorname"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.firstName"
+              />
+            </UFormGroup>
+            <UFormGroup
+              label="Nachname"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.lastName"
+              />
+            </UFormGroup>
+          </InputGroup><InputGroup class="w-full">
+            <UFormGroup
+              label="Mitarbeiternummer"
+              class="w-60"
+            >
+              <UInput
+                v-model="itemInfo.employeeNumber"
+              />
+            </UFormGroup>
+          </InputGroup>
+        </div>
+        <div v-if="item.label === 'Vertragsdaten'">
+          <Toolbar>
+            <UButton
+                @click="dataStore.updateItem('profiles',itemInfo)"
+            >
+              Speichern
+            </UButton>
+          </Toolbar>
+          <InputGroup class="w-full">
+            <UFormGroup
+              label="Wöchentliche Arbeitszeit"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.weeklyWorkingHours"
+              />
+            </UFormGroup>
+            <UFormGroup
+              label="Urlaubstage"
+              class="flex-auto"
+            >
+              <UInput
+                v-model="itemInfo.annualPaidLeaveDays"
+              />
+            </UFormGroup>
+          </InputGroup>
+        </div>
+      </UCard>
+    </template>
+  </UTabs>
+</template>
+
+<style scoped>
+
+</style>