Handling of event addons

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,27 @@ const form = reactive({
     amountPaid: '',
     amountExpected: '',
     cocStatus: '',
+    participationOptions: {},
+    selectedAddons: {},
 });
 
+// Teilnahmeoptionen des Events (Definition mit Titel/Frage/Optionen).
+const participationQuestions = computed(() => staticProps.event?.participationOptions ?? []);
+
+// Zusatzoptionen (Event-Addons) des Events.
+const eventAddons = computed(() => staticProps.event?.addons ?? []);
+
+// 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 ?? '—';
+}
+
+// Hat der Teilnehmer diesen Zusatz gebucht? – für die Ansicht.
+function isAddonSelected(addonKey) {
+    return (props.participant?.selectedAddons ?? []).some(a => a.addonKey === addonKey);
+}
+
 watch(
     () => props.participant,
     (participant) => {
@@ -94,6 +113,12 @@ 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])
+        );
+        form.selectedAddons = Object.fromEntries(
+            (participant?.selectedAddons ?? []).map(a => [a.addonKey, true])
+        );
     },
     { immediate: true }
 );
@@ -388,6 +413,43 @@ function saveParticipant() {
                 </table>
             </div>
         </div>
+
+        <div class="participationData" v-if="participationQuestions.length > 0 || eventAddons.length > 0">
+            <div>
+                <template v-if="participationQuestions.length > 0">
+                    <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>
+                </template>
+            </div>
+            <div>
+                <template v-if="eventAddons.length > 0">
+                    <h3>Zusatzoptionen</h3>
+                    <table>
+                        <tr v-for="addon in eventAddons" :key="addon.key">
+                            <th>{{ addon.title }}</th>
+                            <td>
+                                <span v-if="!staticProps.editMode">{{ isAddonSelected(addon.key) ? 'Ja' : '—' }}</span>
+                                <input v-else type="checkbox" v-model="form.selectedAddons[addon.key]"/>
+                            </td>
+                        </tr>
+                    </table>
+                </template>
+            </div>
+        </div>
     </div>
 
     <button v-if="!staticProps.editMode" class="button" @click="enableEditMode">Bearbeiten</button>
@@ -407,6 +469,10 @@ function saveParticipant() {
     gap: 20px;
 }
 
+.participationData table tr th {
+    width: 200px;
+}
+
 .participationData div {
     flex: 1;
     vertical-align: top;