Basic implementation of payment methods

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

@@ -15,11 +15,13 @@
 
     const dynmicProps = reactive({
         localGroups: [],
-        eatingHabits:[]
+        eatingHabits:[],
+        paymentMethods: []
     });
 
     const contributingLocalGroups = ref([])
     const eatingHabits = ref([]);
+    const paymentMethods = ref([]);
 
     const errors = reactive({})
 
@@ -46,9 +48,18 @@
 
         contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
         eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
+        paymentMethods.value = props.event.paymentMethods?.map(t => t.id) ?? []
     });
 
     async function save() {
+        if (paymentMethods.value.length === 0) {
+            toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
+            return
+        } else if(paymentMethods.value.length > 1) {
+            toast.error('Aktuell wird nur exakt eine Zahlungseinstellung unterstützt.')
+            return
+        }
+
         const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
             method: 'POST',
             headers: {
@@ -68,6 +79,7 @@
                 supportPerson: formData.supportPerson,
                 contributingLocalGroups: contributingLocalGroups.value,
                 eatingHabits: eatingHabits.value,
+                paymentMethods: paymentMethods.value,
             }
         })
 
@@ -75,7 +87,7 @@
             toast.success('Einstellungen wurden erfolgreich gespeichert.')
             emit('close')
         } else {
-            toast.error('Beim Speichern ist ein Fehler aufgetreten.')
+            toast.error(response.message ?? 'Beim Speichern ist ein Fehler aufgetreten.')
         }
     }
 
@@ -199,6 +211,17 @@
                             <label style="padding-left: 5px;" :for="'eatinghabit' + eatingHabit.id">{{eatingHabit.name}}</label>
                         </td>
                     </tr>
+
+                    <tr>
+                        <th style="padding-top: 40px !important;">Zahlungsmöglichkeiten</th>
+                    </tr>
+
+                    <tr v-for="paymentMethod in  dynmicProps.paymentMethods">
+                        <td>
+                            <input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.id" v-model="paymentMethods" />
+                            <label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{paymentMethod.name}}</label>
+                        </td>
+                    </tr>
                 </table>
 
 

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

@@ -49,6 +49,7 @@ const form = reactive({
     departure: '',
     participationType: '',
     eatingHabit: '',
+    paymentMethod: '',
     allergies: '',
     intolerances: '',
     medications: '',
@@ -82,6 +83,7 @@ watch(
         form.departure = participant?.departureDate ?? '';
         form.participationType = participant?.participation_type ?? '';
         form.eatingHabit = participant?.eating_habit ?? '';
+        form.paymentMethod = participant?.payment_method ?? '';
         form.allergies = participant?.allergies ?? '';
         form.intolerances = participant?.intolerances ?? '';
         form.medications = participant?.medications ?? '';
@@ -206,7 +208,7 @@ function saveParticipant() {
                     <tr>
                         <th>Telefon</th>
                         <td>
-                            <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_1"</DialableTelephoneNumber>
+                            <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_1" />
                             <input v-else v-model="form.phone_1" type="text" />
                         </td>
                     </tr>
@@ -230,7 +232,7 @@ function saveParticipant() {
                     <tr>
                         <th>Ansprechperson Telefon</th>
                         <td>
-                            <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_2"</DialableTelephoneNumber>
+                            <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_2" />
                             <input v-else v-model="form.phone_2" type="text" />
                         </td>
                     </tr>
@@ -284,6 +286,20 @@ function saveParticipant() {
                             </select>
                         </td>
                     </tr>
+                    <tr>
+                        <th>Zahlungsmethode</th>
+                        <td>
+                            <span v-if="!staticProps.editMode">{{ props.participant.paymentMethod }}</span>
+                            <select v-else v-model="form.paymentMethod">
+                                <option
+                                    v-for="paymentMethod in staticProps.event.paymentMethods"
+                                    :value="paymentMethod.slug"
+                                >
+                                    {{ paymentMethod.name }}
+                                </option>
+                            </select>
+                        </td>
+                    </tr>
                     <tr>
                         <th>eFZ-Status</th>
                         <td>