Implemented additional event information

app/Domains/Event/Views/Partials/ParticipantData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, reactive, watch} from "vue";
+import {computed, onMounted, reactive, watch} from "vue";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
 import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
 
@@ -60,8 +60,18 @@ const form = reactive({
     amountPaid: '',
     amountExpected: '',
     cocStatus: '',
+    participationOptions: {},
 });
 
+// Teilnahmeoptionen des Events (Definition mit Titel/Frage/Optionen).
+const participationQuestions = computed(() => staticProps.event?.participationOptions ?? []);
+
+// Gewählte Antwort (Options-Label) eines Teilnehmers zu einer Frage – für die Ansicht „Titel: Antwort".
+function answerLabelFor(questionKey) {
+    const answer = (props.participant?.participationOptions ?? []).find(o => o.questionKey === questionKey);
+    return answer?.valueLabel ?? '—';
+}
+
 watch(
     () => props.participant,
     (participant) => {
@@ -94,6 +104,9 @@ watch(
         form.amountPaid = participant?.amountPaid.short ?? '';
         form.amountExpected = participant?.amountExpected.short ?? '';
         form.cocStatus = participant?.efz_status ?? '';
+        form.participationOptions = Object.fromEntries(
+            (participant?.participationOptions ?? []).map(o => [o.questionKey, o.value])
+        );
     },
     { immediate: true }
 );
@@ -388,6 +401,27 @@ function saveParticipant() {
                 </table>
             </div>
         </div>
+
+        <div class="participationData" v-if="participationQuestions.length > 0">
+            <div>
+                <h3>Teilnahmeoptionen</h3>
+                <table>
+                    <tr v-for="question in participationQuestions" :key="question.key">
+                        <th>{{ question.title || question.label }}</th>
+                        <td>
+                            <span v-if="!staticProps.editMode">{{ answerLabelFor(question.key) }}</span>
+                            <select v-else v-model="form.participationOptions[question.key]">
+                                <option value="">— keine —</option>
+                                <option v-for="option in question.options" :key="option.value" :value="option.value">
+                                    {{ option.label }}
+                                </option>
+                            </select>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+            <div></div>
+        </div>
     </div>
 
     <button v-if="!staticProps.editMode" class="button" @click="enableEditMode">Bearbeiten</button>
@@ -407,6 +441,10 @@ function saveParticipant() {
     gap: 20px;
 }
 
+.participationData table tr th {
+    width: 200px;
+}
+
 .participationData div {
     flex: 1;
     vertical-align: top;