work in progress: predefinedmutations

resources/js/components/AddMutationForm.vue

@@ -2,17 +2,46 @@
 import { useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
-const props = defineProps<{
-    dynamicId: string;
-    ledgerId: string;
-}>();
+const props = withDefaults(
+    defineProps<{
+        dynamicId: string;
+        ledgerId: string;
+        predefinedMutations?: Array<{
+            id: string;
+            name: string;
+            description: string | null;
+            amount: number;
+        }>;
+    }>(),
+    {
+        predefinedMutations: () => [],
+    }
+);
 
 const form = useForm({
     amount: 0,
     description: '',
+    predefined_mutation_id: null as string | null,
     media: [] as File[],
 });
 
+function selectPredefinedMutation(event: Event) {
+    const select = event.target as HTMLSelectElement;
+    const selectedId = select.value;
+    if (!selectedId) {
+        form.predefined_mutation_id = null;
+        form.amount = 0;
+        form.description = '';
+        return;
+    }
+    const mutation = props.predefinedMutations.find(m => m.id === selectedId);
+    if (mutation) {
+        form.predefined_mutation_id = mutation.id;
+        form.amount = mutation.amount;
+        form.description = mutation.description || mutation.name;
+    }
+}
+
 function handleMutationFileChange(event: Event) {
     const files = (event.target as HTMLInputElement).files;
 
@@ -44,6 +73,28 @@ function submit() {
     <div class="c-add-mutation-form">
         <h4 class="c-add-mutation-form__title">Add Mutation</h4>
         <form @submit.prevent="submit" class="c-add-mutation-form__form">
+            
+            <!-- Predefined Templates Selection -->
+            <div v-if="predefinedMutations && predefinedMutations.length > 0" class="c-add-mutation-form__field">
+                <label for="predefined_mutation" class="c-add-mutation-form__label"
+                    >Apply Predefined Template</label
+                >
+                <select
+                    id="predefined_mutation"
+                    class="c-add-mutation-form__select"
+                    @change="selectPredefinedMutation"
+                >
+                    <option value="">-- Choose a predefined template (optional) --</option>
+                    <option
+                        v-for="item in predefinedMutations"
+                        :key="item.id"
+                        :value="item.id"
+                    >
+                        {{ item.name }} ({{ item.amount >= 0 ? '+' : '' }}{{ item.amount }} points)
+                    </option>
+                </select>
+            </div>
+
             <div class="c-add-mutation-form__field">
                 <label for="amount" class="c-add-mutation-form__label"
                     >Amount</label
@@ -151,6 +202,10 @@ function submit() {
     @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
 }
 
+.c-add-mutation-form__select {
+    @apply mt-1 block w-full rounded-md border 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-add-mutation-form__input {
     @apply mt-1 block w-full rounded-md border 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;
 }

resources/js/pages/Ledgers/Show.vue

@@ -45,6 +45,12 @@ const props = defineProps<{
         alignment: string;
         status: string;
         media?: Array<{ id: number; url: string; mime_type: string }>;
+        predefined_mutations?: Array<{
+            id: string;
+            name: string;
+            description: string | null;
+            amount: number;
+        }>;
         mutations: Array<{
             id: number;
             user_id: number;
@@ -262,7 +268,7 @@ function isOwnerUser(userId: number): boolean {
             </div>
 
             <!-- Add Mutation Form Component -->
-            <AddMutationForm :dynamic-id="dynamic.id" :ledger-id="ledger.id" />
+            <AddMutationForm :dynamic-id="dynamic.id" :ledger-id="ledger.id" :predefined-mutations="ledger.predefined_mutations" />
 
             <!-- Mutation List Component -->
             <MutationList