Optimiere das Worship Management-Formular: Entferne redundante Codeabschnitte, verbessere die Benutzeroberfläche durch Anpassungen der Abstände und Padding-Werte, und vereinheitliche die Struktur der Eingabefelder. Füge eine neue Auswahl für das Jahr hinzu, um die liturgischen Daten zu laden.

src/content/admin/WorshipManagement.vue

@@ -1,36 +1,29 @@
 <template>
   <div class="worship-management">
     <h2>Gottesdienst Verwaltung</h2>
+    <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>
     <form @submit.prevent="saveWorship">
       <label for="eventPlaceId">Veranstaltungsort:</label>
       <multiselect v-model="selectedEventPlace" :options="eventPlaces" label="name" track-by="id"
         placeholder="Veranstaltungsort wählen"></multiselect>
 
-      <label for="date">Datum:</label>
-      <input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">
-
       <label for="dayName">Name des Tags:</label>
       <div class="liturgical-day-section">
-        <multiselect 
+        <multiselect v-model="selectedDayName" :options="dayNameOptions" :multiple="false" :taggable="true"
-          v-model="selectedDayName" 
+          @tag="addDayNameTag" placeholder="Tag-Name wählen oder eingeben" label="name" track-by="name">
-          :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="date">Datum:</label>
+      <input type="date" id="date" v-model="worshipData.date" required @change="updateDayNameFromDate">
+
       <label for="time">Uhrzeit:</label>
       <input type="time" id="time" v-model="worshipData.time" required>
 
@@ -38,27 +31,13 @@
       <input type="text" id="title" v-model="worshipData.title" required>
 
       <label for="organizer">Gestalter:</label>
-      <multiselect 
+      <multiselect v-model="selectedOrganizers" :options="organizerOptions" :multiple="true" :taggable="true"
-        v-model="selectedOrganizers" 
+        @tag="addOrganizerTag" placeholder="Gestalter wählen oder neu eingeben" label="name" track-by="name">
-        :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>
-      <multiselect 
+      <multiselect v-model="selectedSacristans" :options="sacristanOptions" :multiple="true" :taggable="true"
-        v-model="selectedSacristans" 
+        @tag="addSacristanTag" placeholder="Küsterdienst wählen oder neu eingeben" label="name" track-by="name">
-        :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>
@@ -84,17 +63,9 @@
     </form>
 
     <div class="filter-section">
-      <input 
+      <input v-model="searchDate" type="date" class="search-input" placeholder="Nach Datum suchen..." />
-        v-model="searchDate" 
-        type="date" 
-        class="search-input"
-        placeholder="Nach Datum suchen..."
-      />
       <label class="checkbox-label">
-        <input 
+        <input v-model="showPastWorships" type="checkbox" />
-          v-model="showPastWorships" 
-          type="checkbox"
-        />
         Vergangene Gottesdienste anzeigen
       </label>
       <button v-if="searchDate" @click="clearSearch" type="button" class="clear-button">
@@ -103,7 +74,8 @@
     </div>
 
     <ul>
-      <li v-for="worship in filteredWorships" :key="worship.id" :class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
+      <li v-for="worship in filteredWorships" :key="worship.id"
+        :class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
         <span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
         <button @click="editWorship(worship)">Bearbeiten</button>
         <button @click="deleteWorship(worship.id)">Löschen</button>
@@ -168,7 +140,7 @@ export default {
       if (!this.showPastWorships) {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
-        
+
         filtered = filtered.filter(worship => {
           if (worship.date) {
             const worshipDate = new Date(worship.date);
@@ -183,7 +155,7 @@ export default {
       if (this.searchDate) {
         const searchDateObj = new Date(this.searchDate);
         searchDateObj.setHours(0, 0, 0, 0);
-        
+
         filtered = filtered.filter(worship => {
           if (worship.date) {
             const worshipDate = new Date(worship.date);
@@ -243,20 +215,20 @@ export default {
       try {
         const response = await axios.get('/liturgical-days');
         this.liturgicalDays = response.data;
-        
+
         // 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);
@@ -280,7 +252,7 @@ export default {
         alert('Bitte wählen Sie ein Jahr aus');
         return;
       }
-      
+
       this.isLoading = true;
       try {
         const response = await axios.post('/liturgical-days/load-year', {
@@ -303,20 +275,20 @@ export default {
       if (!this.worshipData.date) {
         return;
       }
-      
+
       // Setze Flag, um Endlosschleife zu vermeiden
       this.isUpdatingFromDate = true;
-      
+
       // Normalisiere das Datum (HTML input gibt YYYY-MM-DD zurück)
       const selectedDate = this.worshipData.date;
-      
+
       // Finde liturgischen Tag für das gewählte Datum
       const liturgicalDay = this.liturgicalDays.find(day => {
         // Vergleiche nur das Datum (ignoriere mögliche Zeitstempel)
         const dayDate = typeof day.date === 'string' ? day.date : day.date.split('T')[0];
         return dayDate === selectedDate;
       });
-      
+
       if (liturgicalDay) {
         // Finde die passende Option mit formatiertem Datum
         const option = this.dayNameOptions.find(opt => opt.date === selectedDate);
@@ -328,7 +300,7 @@ export default {
       } else {
         console.log('Kein liturgischer Tag gefunden für:', selectedDate);
       }
-      
+
       // Reset Flag nach kurzer Verzögerung
       this.$nextTick(() => {
         this.isUpdatingFromDate = false;
@@ -338,7 +310,7 @@ export default {
       if (!this.selectedDayName || !this.selectedDayName.date) {
         return;
       }
-      
+
       // Das Datum ist bereits in der Option enthalten
       this.worshipData.date = this.selectedDayName.date;
       this.worshipData.dayName = this.selectedDayName.dayName;
@@ -373,25 +345,25 @@ 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 
+      this.selectedOrganizers = worship.organizer
         ? worship.organizer.split(',').map(org => ({ name: org.trim() }))
         : [];
-      this.selectedSacristans = worship.sacristanService 
+      this.selectedSacristans = worship.sacristanService
         ? worship.sacristanService.split(',').map(sac => ({ name: sac.trim() }))
         : [];
-      
+
       // Setze dayName - finde die passende Option
       if (worship.dayName) {
-        const option = this.dayNameOptions.find(opt => 
+        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;
     },
@@ -449,7 +421,7 @@ export default {
     },
     addDayNameTag(newTag) {
       // Wenn manuell ein Tag eingegeben wird, ohne Datum
-      const tag = { 
+      const tag = {
         name: newTag,
         dayName: newTag,
         date: this.worshipData.date || null
@@ -475,35 +447,41 @@ export default {
 form {
   display: grid;
   grid-template-columns: 180px 1fr;
-  gap: 15px 20px;
+  gap: 8px 20px;
   align-items: start;
 }
 
-form > label {
+form>label {
   margin: 0;
-  padding-top: 8px;
+  padding-top: 6px;
   text-align: right;
   font-weight: 500;
 }
 
-form > input[type="text"],
+form>input[type="text"],
-form > input[type="date"],
+form>input[type="date"],
-form > input[type="time"],
+form>input[type="time"] {
-form > .multiselect,
+  width: 100%;
-form > .liturgical-day-section {
+  max-width: 500px;
+  padding: 6px 10px;
+  font-size: 14px;
+}
+
+form>.multiselect,
+form>.liturgical-day-section {
   width: 100%;
   max-width: 500px;
 }
 
-form > input[type="checkbox"] {
+form>input[type="checkbox"] {
   justify-self: start;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
-form > button {
+form>button {
   grid-column: 1 / -1;
   justify-self: start;
-  margin-top: 10px;
+  margin-top: 8px;
 }
 
 .filter-section {
@@ -563,18 +541,18 @@ form > button {
 .liturgical-day-section {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
   max-width: 500px;
 }
 
 .liturgical-loader {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
 }
 
 .year-select {
-  padding: 8px 12px;
+  padding: 6px 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
   font-size: 14px;
@@ -588,7 +566,7 @@ form > button {
 }
 
 .load-year-button {
-  padding: 8px 16px;
+  padding: 6px 12px;
   background-color: #2196F3;
   color: white;
   border: none;
@@ -596,6 +574,7 @@ form > button {
   cursor: pointer;
   white-space: nowrap;
   margin: 0;
+  font-size: 14px;
 }
 
 .load-year-button:hover:not(:disabled) {
@@ -647,7 +626,7 @@ li:hover .tooltip {
   opacity: 1;
 }
 
-li > span {
+li>span {
   flex: 1;
 }