Payment methode now selectable

2026-08-05 16:53:35 +02:00
parent 7919d04dc3
commit daff70b4fe
22 changed files with 705 additions and 81 deletions
@@ -0,0 +1,47 @@
+<script setup>
+import TextEditor from "../../../../../../Views/Components/TextEditor.vue";
+
+// Generische, schema-getriebene Eingabefelder eines Zahlungsmoduls. Wiederverwendbar für künftige
+// Verfahren (SEPA, PayPal): das jeweilige Modul liefert das Schema, hier wird nur gerendert.
+const props = defineProps({
+    // [{ name, label, type, required }] -- z.B. aus participantOptionsSchema einer Zahlungsmethode.
+    schema: {type: Array, default: () => []},
+    // v-model: Objekt { optionName: value }
+    modelValue: {type: Object, default: () => ({})},
+})
+const emit = defineEmits(['update:modelValue'])
+
+function setValue(name, value) {
+    emit('update:modelValue', {...props.modelValue, [name]: value})
+}
+</script>
+
+<template>
+    <table class="form-table">
+        <tr v-for="option in schema" :key="option.name">
+            <td>
+                {{ option.label }}<span v-if="option.required" class="required-marker">*</span>:
+            </td>
+            <td>
+                <TextEditor
+                    v-if="option.type === 'richtext'"
+                    :modelValue="modelValue[option.name] ?? ''"
+                    @update:modelValue="value => setValue(option.name, value)"
+                />
+                <input
+                    v-else
+                    type="text"
+                    :value="modelValue[option.name] ?? ''"
+                    @input="event => setValue(option.name, event.target.value)"
+                />
+            </td>
+        </tr>
+    </table>
+</template>
+
+<style scoped>
+.required-marker {
+    color: #ef4444;
+    margin-left: 2px;
+}
+</style>