Füge Unterstützung für liturgische Tage im Worship Management hinzu: Implementiere Multiselect für die Auswahl von Tag-Namen und lade die verfügbaren liturgischen Tage. Aktualisiere das Formular zur Anzeige und Auswahl des liturgischen Tages basierend auf dem Datum.

src/content/admin/WorshipManagement.vue

@@ -7,10 +7,29 @@
         placeholder="Veranstaltungsort wählen"></multiselect>
 
       <label for="date">Datum:</label>
-      <input type="date" id="date" v-model="worshipData.date" required>
+      <input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">
 
       <label for="dayName">Name des Tags:</label>
-      <input type="text" id="dayName" v-model="worshipData.dayName" required>
+      <div class="liturgical-day-section">
+        <multiselect 
+          v-model="selectedDayName" 
+          :options="dayNameOptions" 
+          :multiple="false"
+          :taggable="true"
+          @tag="addDayNameTag"
+          placeholder="Tag-Name wählen oder eingeben"
+          label="name"
+          track-by="name">
+        </multiselect>
+        <div class="liturgical-loader">
+          <select v-model="selectedYear" class="year-select">
+            <option v-for="year in availableYears" :key="year" :value="year">{{ year }}</option>
+          </select>
+          <button type="button" @click="loadLiturgicalYear" class="load-year-button" :disabled="isLoading">
+            {{ isLoading ? 'Lade...' : 'Kirchenjahr laden' }}
+          </button>
+        </div>
+      </div>
 
       <label for="time">Uhrzeit:</label>
       <input type="time" id="time" v-model="worshipData.time" required>
@@ -103,6 +122,7 @@ export default {
   name: 'WorshipManagement',
   components: { Multiselect },
   data() {
+    const currentYear = new Date().getFullYear();
     return {
       worships: [],
       eventPlaces: [],
@@ -110,6 +130,12 @@ export default {
       sacristanOptions: [],
       selectedOrganizers: [],
       selectedSacristans: [],
+      dayNameOptions: [],
+      liturgicalDays: [],
+      selectedDayName: null,
+      selectedYear: currentYear,
+      availableYears: [currentYear, currentYear + 1, currentYear + 2],
+      isLoading: false,
       worshipData: {
         eventPlaceId: null,
         date: '',
@@ -124,6 +150,7 @@ export default {
         introLine: '',
         sacristanService: '',
         website: '',
+        dayName: '',
       },
       selectedEventPlace: null,
       editMode: false,
@@ -173,6 +200,7 @@ export default {
     await this.fetchEventPlaces();
     await this.fetchWorships();
     await this.fetchWorshipOptions();
+    await this.fetchLiturgicalDays();
   },
   methods: {
     formatTime,
@@ -202,13 +230,62 @@ export default {
         console.error('Fehler beim Abrufen der Worship-Optionen:', error);
       }
     },
+    async fetchLiturgicalDays() {
+      try {
+        const response = await axios.get('/liturgical-days');
+        this.liturgicalDays = response.data;
+        
+        // Erstelle Optionen für Multiselect
+        const uniqueNames = [...new Set(response.data.map(day => day.dayName))];
+        this.dayNameOptions = uniqueNames.sort().map(name => ({ name }));
+      } catch (error) {
+        console.error('Fehler beim Abrufen der liturgischen Tage:', error);
+      }
+    },
+    async loadLiturgicalYear() {
+      if (!this.selectedYear) {
+        alert('Bitte wählen Sie ein Jahr aus');
+        return;
+      }
+      
+      this.isLoading = true;
+      try {
+        const response = await axios.post('/liturgical-days/load-year', {
+          year: this.selectedYear
+        });
+        alert(response.data.message);
+        await this.fetchLiturgicalDays();
+      } catch (error) {
+        console.error('Fehler beim Laden des Kirchenjahres:', error);
+        if (error.response && error.response.data && error.response.data.message) {
+          alert('Fehler: ' + error.response.data.message);
+        } else {
+          alert('Fehler beim Laden des Kirchenjahres');
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    updateDayNameFromDate() {
+      if (!this.worshipData.date) {
+        return;
+      }
+      
+      // Finde liturgischen Tag für das gewählte Datum
+      const liturgicalDay = this.liturgicalDays.find(day => day.date === this.worshipData.date);
+      if (liturgicalDay) {
+        this.selectedDayName = { name: liturgicalDay.dayName };
+        this.worshipData.dayName = liturgicalDay.dayName;
+      }
+    },
     async saveWorship() {
       try {
         const payload = {
           ...this.worshipData,
           eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null,
           organizer: this.selectedOrganizers.map(org => org.name).join(', '),
-          sacristanService: this.selectedSacristans.map(sac => sac.name).join(', ')
+          sacristanService: this.selectedSacristans.map(sac => sac.name).join(', '),
+          dayName: this.selectedDayName ? this.selectedDayName.name : ''
         };
 
         if (this.editMode) {
@@ -239,6 +316,9 @@ export default {
         ? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
         : [];
       
+      // Setze dayName
+      this.selectedDayName = worship.dayName ? { name: worship.dayName } : null;
+      
       this.editMode = true;
       this.editId = worship.id;
     },
@@ -262,11 +342,13 @@ export default {
         selfInformation: false,
         highlightTime: false,
         neighborInvitation: false,
-        introLine: ''
+        introLine: '',
+        dayName: ''
       };
       this.selectedEventPlace = null;
       this.selectedOrganizers = [];
       this.selectedSacristans = [];
+      this.selectedDayName = null;
       this.editMode = false;
       this.editId = null;
     },
@@ -291,6 +373,11 @@ export default {
       const tag = { name: newTag };
       this.sacristanOptions.push(tag);
       this.selectedSacristans.push(tag);
+    },
+    addDayNameTag(newTag) {
+      const tag = { name: newTag };
+      this.dayNameOptions.push(tag);
+      this.selectedDayName = tag;
     }
   }
 };
@@ -373,6 +460,52 @@ button {
   background-color: #d32f2f;
 }
 
+.liturgical-day-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.liturgical-loader {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.year-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.year-select:focus {
+  outline: none;
+  border-color: #4CAF50;
+}
+
+.load-year-button {
+  padding: 8px 16px;
+  background-color: #2196F3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.load-year-button:hover:not(:disabled) {
+  background-color: #1976D2;
+}
+
+.load-year-button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
 ul {
   margin-top: 20px;
 }