Configurations for payment modules

app/Domains/Admin/Views/Partials/TenantPaymentMethods.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
 import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
 import { toast } from "vue3-toastify";
@@ -15,14 +15,31 @@ const { request } = useAjax()
 
 const paymentMethods = ref(props.data.paymentMethods ?? [])
 const editing = ref(null)
-const form = ref({ name: '', description: '', active: true })
+const form = ref({ name: '', description: '', active: true, configuration: {} })
+
+// Sind alle Pflichtfelder des aktuell bearbeiteten Moduls befüllt? Der Server ist die
+// eigentliche Autorität (Guard), das hier dient nur der Bedienführung.
+const requiredComplete = computed(() => {
+    if (!editing.value) return true
+    return (editing.value.optionsSchema ?? [])
+        .filter(option => option.required)
+        .every(option => {
+            const value = form.value.configuration[option.name]
+            return value !== undefined && value !== null && value !== ''
+        })
+})
 
 function edit(paymentMethod) {
     editing.value = paymentMethod
+    const configuration = {}
+    for (const option of paymentMethod.optionsSchema ?? []) {
+        configuration[option.name] = paymentMethod.configuration?.[option.name] ?? ''
+    }
     form.value = {
         name: paymentMethod.name,
         description: paymentMethod.description ?? '',
         active: paymentMethod.active,
+        configuration,
     }
 }
 
@@ -79,7 +96,17 @@ async function save() {
                 <tr><th>Name:</th><td><input type="text" v-model="form.name" class="form-input" /></td></tr>
                 <tr><th>Slug:</th><td>{{ editing.slug }}</td></tr>
                 <tr><th>Beschreibung:</th><td><textarea v-model="form.description" class="form-input"></textarea></td></tr>
-                <tr><th>Aktiv:</th><td><input type="checkbox" v-model="form.active" /></td></tr>
+                <tr v-for="option in editing.optionsSchema ?? []" :key="option.name">
+                    <th>{{ option.label }}<span v-if="option.required" class="required-marker">*</span>:</th>
+                    <td><input type="text" v-model="form.configuration[option.name]" class="form-input" /></td>
+                </tr>
+                <tr>
+                    <th>Aktiv:</th>
+                    <td>
+                        <input type="checkbox" v-model="form.active" :disabled="!requiredComplete && !form.active" />
+                        <span v-if="!requiredComplete" class="hint">Bitte zuerst alle Pflichtfelder (*) ausfüllen, um zu aktivieren.</span>
+                    </td>
+                </tr>
             </table>
             <div class="btn-group">
                 <button class="btn-save" @click="save">Speichern</button>
@@ -177,6 +204,18 @@ async function save() {
     box-sizing: border-box;
 }
 
+.required-marker {
+    color: #ef4444;
+    margin-left: 2px;
+}
+
+.hint {
+    display: block;
+    margin-top: 4px;
+    font-size: 0.8rem;
+    color: #b45309;
+}
+
 .btn-group {
     display: flex;
     gap: 10px;