over naar uuids, policies, predefined mutations aan kunnen passen

2026-06-21 23:09:38 +02:00
parent 06e5600447
commit 1e0782385b
46 changed files with 1287 additions and 160 deletions
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { Head, useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+import AppLayout from '@/layouts/AppLayout.vue';
+
+const props = defineProps<{
+    dynamic: {
+        id: number;
+        name: string;
+    };
+    ledger: {
+        id: number;
+        name: string;
+        rules: string;
+    };
+}>();
+
+const form = useForm({
+    name: props.ledger.name,
+    rules: props.ledger.rules,
+});
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.ledger.name,
+        href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
+    },
+    {
+        name: 'Edit',
+        href: route('dynamics.ledgers.edit', [props.dynamic.id, props.ledger.id]),
+    },
+];
+
+function submit() {
+    form.put(route('dynamics.ledgers.update', [props.dynamic.id, props.ledger.id]));
+}
+</script>
+
+<template>
+    <Head title="Edit Ledger" />
+
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <div class="c-ledger-edit">
+            <div class="c-ledger-edit__container">
+                <div class="c-ledger-edit__card">
+                    <div class="c-ledger-edit__body">
+                        <h3 class="c-ledger-edit__title">
+                            Edit {{ ledger.name }}
+                        </h3>
+
+                        <form @submit.prevent="submit" class="c-ledger-edit__form">
+                            <div class="c-ledger-edit__field">
+                                <label for="name" class="c-ledger-edit__label">Name</label>
+                                <input v-model="form.name" id="name" type="text" class="c-ledger-edit__input" />
+                            </div>
+
+                            <div class="c-ledger-edit__field">
+                                <label for="rules" class="c-ledger-edit__label">Rules</label>
+                                <textarea v-model="form.rules" id="rules" rows="4" class="c-ledger-edit__textarea"></textarea>
+                            </div>
+
+                            <div class="c-ledger-edit__actions">
+                                <button type="submit" :disabled="form.processing" class="c-ledger-edit__submit-btn">
+                                    Save
+                                </button>
+                                <Link
+                                    :href="route('dynamics.ledgers.close', [dynamic.id, ledger.id])"
+                                    method="put"
+                                    as="button"
+                                    class="c-ledger-edit__submit-btn c-ledger-edit__submit-btn--danger"
+                                >
+                                    Close Ledger
+                                </Link>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-ledger-edit {
+    @apply py-12;
+}
+
+.c-ledger-edit__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-ledger-edit__card {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-ledger-edit__body {
+    @apply p-6 text-gray-900 dark:text-gray-100;
+}
+
+.c-ledger-edit__title {
+    @apply text-lg font-medium;
+}
+
+.c-ledger-edit__form {
+    @apply mt-6 space-y-6;
+}
+
+.c-ledger-edit__field {
+    @apply block;
+}
+
+.c-ledger-edit__label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+.c-ledger-edit__input {
+    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-ledger-edit__textarea {
+    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+}
+
+.c-ledger-edit__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-ledger-edit__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300;
+}
+
+.c-ledger-edit__submit-btn--danger {
+    @apply bg-red-600 hover:bg-red-500 focus:bg-red-500 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:focus:bg-red-400 dark:active:bg-red-600;
+}
+</style>
@@ -212,6 +212,12 @@ function isOwnerUser(userId: number): boolean {
                            >
                                Predefined Mutations
                            </InertiaLink>
+                            <InertiaLink
+                                :href="route('dynamics.ledgers.edit', [dynamic.id, ledger.id])"
+                                class="c-ledger-show__manage-btn"
+                            >
+                                Edit Ledger
+                            </InertiaLink>
                        </div>
                    </div>