Füge neue Funktionalität zum Abrufen von Worship-Optionen hinzu: Implementiere Endpunkt für eindeutige Gestalter und Küsterdienste. Aktualisiere das Worship Management-Formular zur Verwendung von Multiselect-Komponenten für die Auswahl und Eingabe von Gestaltern und Küstern. Integriere die Fetch-Funktion für Worship-Optionen im Vue-Komponenten-Lifecycle.

src/content/admin/WorshipManagement.vue

@@ -19,10 +19,28 @@
       <input type="text" id="title" v-model="worshipData.title" required>
 
       <label for="organizer">Gestalter:</label>
-      <input type="text" id="organizer" v-model="worshipData.organizer">
+      <multiselect 
+        v-model="selectedOrganizers" 
+        :options="organizerOptions" 
+        :multiple="true"
+        :taggable="true"
+        @tag="addOrganizerTag"
+        placeholder="Gestalter wählen oder neu eingeben"
+        label="name"
+        track-by="name">
+      </multiselect>
 
       <label for="sacristanService">Küsterdienst:</label>
-      <input type="text" id="sacristanService" v-model="worshipData.sacristanService">
+      <multiselect 
+        v-model="selectedSacristans" 
+        :options="sacristanOptions" 
+        :multiple="true"
+        :taggable="true"
+        @tag="addSacristanTag"
+        placeholder="Küsterdienst wählen oder neu eingeben"
+        label="name"
+        track-by="name">
+      </multiselect>
 
       <label for="collection">Kollekte:</label>
       <input type="text" id="collection" v-model="worshipData.collection">
@@ -88,6 +106,10 @@ export default {
     return {
       worships: [],
       eventPlaces: [],
+      organizerOptions: [],
+      sacristanOptions: [],
+      selectedOrganizers: [],
+      selectedSacristans: [],
       worshipData: {
         eventPlaceId: null,
         date: '',
@@ -150,6 +172,7 @@ export default {
   async created() {
     await this.fetchEventPlaces();
     await this.fetchWorships();
+    await this.fetchWorshipOptions();
   },
   methods: {
     formatTime,
@@ -170,11 +193,22 @@ export default {
         console.error('Fehler beim Abrufen der Veranstaltungsorte:', error);
       }
     },
+    async fetchWorshipOptions() {
+      try {
+        const response = await axios.get('/worships/options');
+        this.organizerOptions = response.data.organizers.map(org => ({ name: org }));
+        this.sacristanOptions = response.data.sacristanServices.map(sac => ({ name: sac }));
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Worship-Optionen:', error);
+      }
+    },
     async saveWorship() {
       try {
         const payload = {
           ...this.worshipData,
-          eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null
+          eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null,
+          organizer: this.selectedOrganizers.map(org => org.name).join(', '),
+          sacristanService: this.selectedSacristans.map(sac => sac.name).join(', ')
         };
 
         if (this.editMode) {
@@ -185,6 +219,7 @@ export default {
 
         this.resetForm();
         await this.fetchWorships();
+        await this.fetchWorshipOptions();
       } catch (error) {
         console.error('Fehler beim Speichern des Gottesdienstes:', error);
       }
@@ -195,6 +230,15 @@ export default {
       this.worshipData.time = formatTime(worship.time);
       console.log(this.worshipData);
       this.selectedEventPlace = this.eventPlaces.find(ep => ep.id === worship.eventPlaceId);
+      
+      // Konvertiere kommaseparierte Strings zu Arrays für Multiselect
+      this.selectedOrganizers = worship.organizer 
+        ? worship.organizer.split(',').map(org => ({ name: org.trim() }))
+        : [];
+      this.selectedSacristans = worship.sacristanService 
+        ? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
+        : [];
+      
       this.editMode = true;
       this.editId = worship.id;
     },
@@ -221,6 +265,8 @@ export default {
         introLine: ''
       };
       this.selectedEventPlace = null;
+      this.selectedOrganizers = [];
+      this.selectedSacristans = [];
       this.editMode = false;
       this.editId = null;
     },
@@ -235,6 +281,16 @@ export default {
     },
     clearSearch() {
       this.searchDate = '';
+    },
+    addOrganizerTag(newTag) {
+      const tag = { name: newTag };
+      this.organizerOptions.push(tag);
+      this.selectedOrganizers.push(tag);
+    },
+    addSacristanTag(newTag) {
+      const tag = { name: newTag };
+      this.sacristanOptions.push(tag);
+      this.selectedSacristans.push(tag);
     }
   }
 };