Verbessere die Auswahl von liturgischen Tagen im Worship Management: Filtere nur zukünftige Tage, formatiere die Anzeige mit Datum und Namen und aktualisiere die Logik zur Auswahl und Speicherung des liturgischen Tages. Optimiere die Handhabung von Tags und deren Zuordnung im Formular.

src/content/admin/WorshipManagement.vue

@@ -244,9 +244,33 @@ export default {
         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 }));
+        // Nur zukünftige Tage anzeigen
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        
+        const futureDays = response.data.filter(day => {
+          const dayDate = new Date(day.date);
+          dayDate.setHours(0, 0, 0, 0);
+          return dayDate >= today;
+        });
+        
+        // Sortiere nach Datum
+        futureDays.sort((a, b) => new Date(a.date) - new Date(b.date));
+        
+        // Erstelle Optionen mit Datum und Name: "30.11.2025 - 1. Advent"
+        this.dayNameOptions = futureDays.map(day => {
+          const date = new Date(day.date);
+          const formattedDate = date.toLocaleDateString('de-DE', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+          });
+          return {
+            name: `${formattedDate} - ${day.dayName}`,
+            dayName: day.dayName,
+            date: day.date
+          };
+        });
       } catch (error) {
         console.error('Fehler beim Abrufen der liturgischen Tage:', error);
       }
@@ -294,7 +318,11 @@ export default {
       });
       
       if (liturgicalDay) {
-        this.selectedDayName = { name: liturgicalDay.dayName };
+        // Finde die passende Option mit formatiertem Datum
+        const option = this.dayNameOptions.find(opt => opt.date === selectedDate);
+        if (option) {
+          this.selectedDayName = option;
+        }
         this.worshipData.dayName = liturgicalDay.dayName;
         console.log('Liturgischer Tag gefunden:', liturgicalDay.dayName);
       } else {
@@ -307,46 +335,14 @@ export default {
       });
     },
     updateDateFromDayName() {
-      if (!this.selectedDayName || !this.selectedDayName.name) {
+      if (!this.selectedDayName || !this.selectedDayName.date) {
         return;
       }
       
-      // Finde liturgischen Tag mit diesem Namen
-      // Wenn es mehrere gibt (z.B. mehrere Sonntage), nimm den nächsten in der Zukunft
-      const today = new Date();
-      today.setHours(0, 0, 0, 0);
-      
-      const matchingDays = this.liturgicalDays.filter(day => 
-        day.dayName === this.selectedDayName.name
-      );
-      
-      if (matchingDays.length > 0) {
-        // Sortiere nach Datum
-        matchingDays.sort((a, b) => new Date(a.date) - new Date(b.date));
-        
-        // Finde den nächsten Tag in der Zukunft oder heute
-        let selectedDay = matchingDays.find(day => {
-          const dayDate = new Date(day.date);
-          dayDate.setHours(0, 0, 0, 0);
-          return dayDate >= today;
-        });
-        
-        // Wenn keiner in der Zukunft, nimm den letzten vergangenen
-        if (!selectedDay) {
-          selectedDay = matchingDays[matchingDays.length - 1];
-        }
-        
-        // Setze das Datum
-        const dayDate = typeof selectedDay.date === 'string' 
-          ? selectedDay.date 
-          : selectedDay.date.split('T')[0];
-        
-        this.worshipData.date = dayDate;
-        this.worshipData.dayName = selectedDay.dayName;
-        console.log('Datum gesetzt auf:', dayDate, 'für', selectedDay.dayName);
-      } else {
-        console.log('Kein Datum gefunden für Tag:', this.selectedDayName.name);
-      }
+      // Das Datum ist bereits in der Option enthalten
+      this.worshipData.date = this.selectedDayName.date;
+      this.worshipData.dayName = this.selectedDayName.dayName;
+      console.log('Datum gesetzt auf:', this.selectedDayName.date, 'für', this.selectedDayName.dayName);
     },
     async saveWorship() {
       try {
@@ -355,7 +351,7 @@ export default {
           eventPlaceId: this.selectedEventPlace ? this.selectedEventPlace.id : null,
           organizer: this.selectedOrganizers.map(org => org.name).join(', '),
           sacristanService: this.selectedSacristans.map(sac => sac.name).join(', '),
-          dayName: this.selectedDayName ? this.selectedDayName.name : ''
+          dayName: this.selectedDayName ? this.selectedDayName.dayName : ''
         };
 
         if (this.editMode) {
@@ -386,8 +382,15 @@ export default {
         ? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
         : [];
       
-      // Setze dayName
-      this.selectedDayName = worship.dayName ? { name: worship.dayName } : null;
+      // Setze dayName - finde die passende Option
+      if (worship.dayName) {
+        const option = this.dayNameOptions.find(opt => 
+          opt.dayName === worship.dayName && opt.date === this.worshipData.date
+        );
+        this.selectedDayName = option || null;
+      } else {
+        this.selectedDayName = null;
+      }
       
       this.editMode = true;
       this.editId = worship.id;
@@ -445,9 +448,15 @@ export default {
       this.selectedSacristans.push(tag);
     },
     addDayNameTag(newTag) {
-      const tag = { name: newTag };
+      // Wenn manuell ein Tag eingegeben wird, ohne Datum
+      const tag = { 
+        name: newTag,
+        dayName: newTag,
+        date: this.worshipData.date || null
+      };
       this.dayNameOptions.push(tag);
       this.selectedDayName = tag;
+      this.worshipData.dayName = newTag;
     }
   }
 };