Implement worship organizer selection with multiselect component in WorshipManagement.vue: Replace text input with a multiselect for better user experience, add fetching logic for worship leaders, and enhance organizer handling with tagging support.

src/content/admin/WorshipManagement.vue

@@ -145,7 +145,18 @@
                     Gestalter:
                     <span v-if="isFieldChanged(worship, 'organizer')" class="old-value">(alt: {{ getOldValue(worship, 'organizer') }})</span>
                   </label>
-                  <input type="text" v-model="worship.organizer" />
+                  <multiselect
+                    v-model="worship._selectedOrganizer"
+                    :options="worshipLeaderOptions"
+                    label="displayName"
+                    track-by="displayName"
+                    :multiple="false"
+                    :taggable="true"
+                    :allow-empty="true"
+                    placeholder="Gestalter wählen oder eingeben"
+                    @tag="(newTag) => addImportOrganizerTag(worship, newTag)"
+                    @update:modelValue="(value) => setImportOrganizer(worship, value)"
+                  />
                 </div>
                 <div class="field-group" :class="{ 'field-changed': isFieldChanged(worship, 'collection') }">
                   <label>
@@ -317,6 +328,7 @@ export default {
       worships: [],
       eventPlaces: [],
       organizerOptions: [],
+      worshipLeaderOptions: [],
       sacristanOptions: [],
       selectedOrganizers: [],
       selectedSacristans: [],
@@ -412,6 +424,7 @@ export default {
     await this.fetchEventPlaces();
     await this.fetchWorships();
     await this.fetchWorshipOptions();
+    await this.fetchWorshipLeaders();
     await this.fetchLiturgicalDays();
     this.hasNewsletterPreview = !!localStorage.getItem('newsletter_import_last_result');
     this.applyNewsletterDraft();
@@ -435,6 +448,7 @@ export default {
                 time: w.time || '',
                 title: w.title || '',
                 organizer: w.organizer || '',
+                _selectedOrganizer: this.resolveImportOrganizerOption(w.organizer || ''),
                 collection: w.collection || '',
                 sacristanService: w.sacristanService || '',
                 organPlaying: w.organPlaying || '',
@@ -525,6 +539,50 @@ export default {
         console.error('Fehler beim Abrufen der Worship-Optionen:', error);
       }
     },
+    async fetchWorshipLeaders() {
+      try {
+        const response = await axios.get('/worship-leaders');
+        this.worshipLeaderOptions = (response.data || []).map((leader) => {
+          const name = String(leader.name || '').trim();
+          const code = String(leader.code || '').trim();
+          return {
+            id: leader.id,
+            name,
+            code,
+            displayName: code ? `${name} (${code})` : name,
+          };
+        });
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Worship-Leads:', error);
+        this.worshipLeaderOptions = [];
+      }
+    },
+    resolveImportOrganizerOption(organizerValue) {
+      const value = String(organizerValue || '').trim();
+      if (!value) return null;
+      const lower = value.toLowerCase();
+      const option = this.worshipLeaderOptions.find(
+        (o) => o.name.toLowerCase() === lower || (o.code && o.code.toLowerCase() === lower)
+      );
+      if (option) return option;
+      return { id: null, name: value, code: '', displayName: value };
+    },
+    setImportOrganizer(worship, selected) {
+      if (!selected) {
+        worship._selectedOrganizer = null;
+        worship.organizer = '';
+        return;
+      }
+      worship._selectedOrganizer = selected;
+      worship.organizer = selected.name || selected.displayName || '';
+    },
+    addImportOrganizerTag(worship, newTag) {
+      const value = String(newTag || '').trim();
+      if (!value) return;
+      const option = { id: null, name: value, code: '', displayName: value };
+      this.worshipLeaderOptions.push(option);
+      this.setImportOrganizer(worship, option);
+    },
     async fetchLiturgicalDays() {
       try {
         const response = await axios.get('/liturgical-days');
@@ -845,7 +903,8 @@ export default {
               _replaceExistingIds: w._replaceExistingIds || [],
               _importChoice: w._importChoice || (w._hasDayPlaceConflict ? 'keepExisting' : 'import'),
               neighborInvitation: !!w.neighborInvitation,
-              selfInformation: !!w.selfInformation
+              selfInformation: !!w.selfInformation,
+              _selectedOrganizer: this.resolveImportOrganizerOption(w.organizer || '')
             };
           });
           this.importErrors = response.data.errors || [];