Cost units can be edited

app/Domains/CostUnit/Views/List.vue

@@ -0,0 +1,84 @@
+<script setup>
+import {reactive, inject, onMounted} from 'vue';
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
+import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+import TabbedPage from "../../../Views/Components/TabbedPage.vue";
+import {toast} from "vue3-toastify";
+
+
+import ListCostUnits from "./Partials/ListCostUnits.vue";
+
+
+const props = defineProps({
+    message: String,
+
+    data: {
+        type: [Array, Object],
+        default: () => []
+    },
+    cost_unit_id: {
+        type: Number,
+        default: 0
+    },
+
+    invoice_id: {
+        type: Number,
+        default: 0
+    }
+
+
+})
+
+// Prüfen, ob ein ?id= Parameter in der URL übergeben wurde
+const urlParams = new URLSearchParams(window.location.search)
+const initialCostUnitId = props.cost_unit_id
+const initialInvoiceId = props.invoice_id
+
+const tabs = [
+    {
+        title: 'Aktuelle Veranstaltungen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/current-events",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+
+    },
+    {
+        title: 'Laufende Tätigkeiten',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/current-running-jobs",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+    {
+        title: 'Geschlossene Kostenstellen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/closed-cost-units",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+    {
+        title: 'Archivierte Kostenstellen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/archived-cost-units",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+]
+
+onMounted(() => {
+    if (undefined !== props.message) {
+        toast.success(props.message)
+    }
+})
+</script>
+
+<template>
+    <AppLayout title="Kostenstellen">
+        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
+            <tabbed-page :tabs="tabs" :initial-tab-id="initialCostUnitId" :initial-sub-tab-id="initialInvoiceId" />
+
+        </shadowed-box>
+    </AppLayout>
+</template>