Many Changes

spaces/pages/employees/absenceRequests/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="main">
+
+    <UButton @click="router.push(`/employees/absenceRequests/create/`)">+ Abwesenheit</UButton>
+
+    <UTable
+        :rows="dataStore.absenceRequests"
+        :columns="columns"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+    >
+      <template #approved-data="{row}">
+        <span v-if="!row.approved">
+          Genehmigung offen
+        </span>
+        <span
+            v-else-if="row.approved"
+            class="text-primary"
+        >
+          Genemigt
+        </span>
+        <span
+            v-else
+            class="text-rose"
+        >
+          Abgelehnt
+        </span>
+      </template>
+      <template #user-data="{row}">
+        {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : ""}}
+      </template>
+    </UTable>
+
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+const mode = ref("show")
+
+const columns = [
+  {
+    key: "approved",
+    label: "Genehmigt",
+    sortable: true
+  },
+  {
+    key: "user",
+    label: "Mitarbeiter",
+    sortable: true
+  },{
+    key: "reason",
+    label: "Grund",
+    sortable: true
+  },{
+    key: "start",
+    label: "Start",
+    sortable: true
+  },{
+    key: "end",
+    label: "Ende",
+    sortable: true
+  },{
+    key: "note",
+    label: "Notizen",
+    sortable: true
+  }
+]
+
+
+const selectItem = (item) => {
+  router.push(`/employees/absenceRequests/show/${item.id} `)
+}
+</script>
+
+<style scoped>
+
+</style>