Füge Such- und Filteroptionen für Gottesdienste hinzu: Ermögliche die Suche nach Datum und die Anzeige vergangener Gottesdienste im Worship Management-Bereich. Implementiere eine Funktion zum Zurücksetzen der Suche.

src/content/admin/WorshipManagement.vue

@@ -46,8 +46,27 @@
       <button type="button" @click="resetForm">Neuer Gottesdienst</button>
     </form>
 
+    <div class="filter-section">
+      <input 
+        v-model="searchDate" 
+        type="date" 
+        class="search-input"
+        placeholder="Nach Datum suchen..."
+      />
+      <label class="checkbox-label">
+        <input 
+          v-model="showPastWorships" 
+          type="checkbox"
+        />
+        Vergangene Gottesdienste anzeigen
+      </label>
+      <button v-if="searchDate" @click="clearSearch" type="button" class="clear-button">
+        Suche zurücksetzen
+      </button>
+    </div>
+
     <ul>
-      <li v-for="worship in worships" :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>
@@ -86,9 +105,48 @@ export default {
       },
       selectedEventPlace: null,
       editMode: false,
-      editId: null
+      editId: null,
+      searchDate: '',
+      showPastWorships: false,
     };
   },
+  computed: {
+    filteredWorships() {
+      let filtered = this.worships;
+
+      // Filter vergangene Gottesdienste aus
+      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);
+            worshipDate.setHours(0, 0, 0, 0);
+            return worshipDate >= today;
+          }
+          return true;
+        });
+      }
+
+      // Datumsfilter anwenden
+      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);
+            worshipDate.setHours(0, 0, 0, 0);
+            return worshipDate.getTime() === searchDateObj.getTime();
+          }
+          return false;
+        });
+      }
+
+      return filtered;
+    }
+  },
   async created() {
     await this.fetchEventPlaces();
     await this.fetchWorships();
@@ -174,6 +232,9 @@ export default {
       const currentDate = new Date();
       const inputDate = new Date(date);
       return inputDate < currentDate;
+    },
+    clearSearch() {
+      this.searchDate = '';
     }
   }
 };
@@ -202,6 +263,60 @@ button {
   margin-top: 20px;
 }
 
+.filter-section {
+  margin: 30px 0 20px;
+  padding: 15px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  flex-wrap: wrap;
+  border: 1px solid #ddd;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 200px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #4CAF50;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.checkbox-label input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.clear-button {
+  padding: 8px 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 0;
+}
+
+.clear-button:hover {
+  background-color: #d32f2f;
+}
+
 ul {
   margin-top: 20px;
 }