Event addons bookable

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

@@ -61,17 +61,26 @@ const form = reactive({
     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) => {
@@ -107,6 +116,9 @@ watch(
         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 }
 );
@@ -402,25 +414,41 @@ function saveParticipant() {
             </div>
         </div>
 
-        <div class="participationData" v-if="participationQuestions.length > 0">
+        <div class="participationData" v-if="participationQuestions.length > 0 || eventAddons.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>
+                <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>
         </div>
     </div>