Changes

spaces/pages/profiles/create.vue

@@ -0,0 +1,97 @@
+<script setup>
+const router = useRouter()
+const route = useRoute()
+const dataStore = useDataStore()
+
+const itemInfo = ref({})
+
+const createProfile = async () => {
+  let data = {
+    fullName: `${itemInfo.value.firstName} ${itemInfo.value.lastName}`,
+    ...itemInfo.value
+  }
+
+  await dataStore.createNewItem("profiles", data)
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Mitarbeiter erstellen">
+    <template #right>
+      <UButton
+        color="rose"
+        @click="router.push(`/profiles`)"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+        @click="createProfile"
+      >
+        Erstellen
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+
+  <UForm
+    class="p-5"
+  >
+    <UFormGroup
+      label="Anrede"
+    >
+      <UInput
+        required
+        v-model="itemInfo.salutation"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Vorname"
+    >
+      <UInput
+        required
+        v-model="itemInfo.firstName"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Nachname"
+    >
+      <UInput
+        required
+        v-model="itemInfo.lastName"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Mitarbeiter Nummer"
+    >
+      <UInput
+        v-model="itemInfo.employeeNumber"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="E-Mail"
+    >
+      <UInput
+          v-model="itemInfo.email"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Handynummer"
+    >
+      <UInput
+          v-model="itemInfo.mobileTel"
+      />
+    </UFormGroup>
+    <UFormGroup
+      label="Festnetznummer"
+    >
+      <UInput
+          v-model="itemInfo.fixedTel"
+      />
+    </UFormGroup>
+  </UForm>
+
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/profiles/index.vue

@@ -0,0 +1,45 @@
+<script setup>
+  const dataStore = useDataStore()
+  const router = useRouter()
+
+
+  const templateColumns = [
+    {
+      key: 'fullName',
+      label: "Name:",
+      sortable: true
+    },
+    {
+      key: "email",
+      label: "E-Mail:",
+      sortable: true
+    }
+  ]
+  const selectedColumns = ref(templateColumns)
+  const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+</script>
+
+<template>
+  <UDashboardNavbar title="Benutzer Einstellungen">
+      <template #right>
+        <UButton
+          @click="router.push(`/profiles/create`)"
+        >
+          + Mitarbeiter
+        </UButton>
+      </template>
+  </UDashboardNavbar>
+
+  <UTable
+    :rows="dataStore.profiles"
+    @select="(item) => router.push(`/profiles/show/${item.id}`)"
+    :columns="columns"
+  >
+
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/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>