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>
@@ -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;
 }