wowowowowo

2026-05-28 15:15:41 +01:00
parent 8f603122e2
commit 5b977c1f41
129 changed files with 9943 additions and 722 deletions
--- a/resources/js/pages/operations/Index.vue
+++ b/resources/js/pages/operations/Index.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import OperationTimeline from "@/components/operations/OperationTimeline.vue";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import AppLayout from "@/layouts/AppLayout.vue";
+import { Head, Link, router, usePage, usePoll } from "@inertiajs/vue3";
+import { computed } from "vue";
+
+const props = defineProps<{
+    operations: Record<string, any>;
+    filters: Record<string, string>;
+    operationKinds: Record<string, string>;
+    operationStatuses: Record<string, string>;
+}>();
+
+const operationRows = computed(() => props.operations.data ?? []);
+const page = usePage();
+
+usePoll(5000, {}, { keepAlive: true });
+
+const setFilter = (key: string, value: string | null): void => {
+    router.get(
+        route("operations.index", { organisation: page.props.organisation.id }),
+        { ...props.filters, [key]: value || undefined },
+        { preserveState: true, replace: true },
+    );
+};
+</script>
+
+<template>
+    <Head title="Operations" />
+
+    <AppLayout
+        :breadcrumbs="[
+            {
+                title: 'Operations',
+                href: route('operations.index', { organisation: $page.props.organisation.id }),
+            },
+        ]"
+    >
+        <div class="flex h-full flex-1 flex-col gap-4 p-4">
+            <div>
+                <h2 class="text-3xl font-bold tracking-tight">Operations</h2>
+                <p class="mt-1 text-sm text-muted-foreground">
+                    Organisation-wide execution history and logs.
+                </p>
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Filters</CardTitle>
+                </CardHeader>
+                <CardContent class="flex flex-wrap gap-2">
+                    <Button
+                        size="sm"
+                        :variant="!filters.kind ? 'default' : 'secondary'"
+                        @click="setFilter('kind', null)"
+                    >
+                        All kinds
+                    </Button>
+                    <Button
+                        v-for="kind in operationKinds"
+                        :key="kind"
+                        size="sm"
+                        :variant="filters.kind === kind ? 'default' : 'secondary'"
+                        @click="setFilter('kind', kind)"
+                    >
+                        {{ kind.replace('_', ' ') }}
+                    </Button>
+                    <Button
+                        v-for="status in operationStatuses"
+                        :key="status"
+                        size="sm"
+                        :variant="filters.status === status ? 'default' : 'outline'"
+                        @click="setFilter('status', filters.status === status ? null : status)"
+                    >
+                        {{ status.replace('-', ' ') }}
+                    </Button>
+                </CardContent>
+            </Card>
+
+            <OperationTimeline :operations="operationRows" show-target />
+
+            <div v-if="operations.links?.length > 3" class="flex flex-wrap gap-2">
+                <Button
+                    v-for="link in operations.links"
+                    :key="link.label"
+                    :as="link.url ? Link : 'button'"
+                    :href="link.url ?? undefined"
+                    size="sm"
+                    :variant="link.active ? 'default' : 'secondary'"
+                    :disabled="!link.url"
+                    v-html="link.label"
+                />
+            </div>
+        </div>
+    </AppLayout>
+</template>