From 9cadaf3f519fdc56eb42617c93634b315bd08385 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 7 Oct 2025 16:42:11 +0200
Subject: [PATCH] =?UTF-8?q?F=C3=BCge=20Such-=20und=20Filteroptionen=20f?=
 =?UTF-8?q?=C3=BCr=20Gottesdienste=20hinzu:=20Erm=C3=B6gliche=20die=20Such?=
 =?UTF-8?q?e=20nach=20Datum=20und=20die=20Anzeige=20vergangener=20Gottesdi?=
 =?UTF-8?q?enste=20im=20Worship=20Management-Bereich.=20Implementiere=20ei?=
 =?UTF-8?q?ne=20Funktion=20zum=20Zur=C3=BCcksetzen=20der=20Suche.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content/admin/WorshipManagement.vue | 119 +++++++++++++++++++++++-
 1 file changed, 117 insertions(+), 2 deletions(-)

diff --git a/src/content/admin/WorshipManagement.vue b/src/content/admin/WorshipManagement.vue
index 32be261..28ef77e 100644
--- a/src/content/admin/WorshipManagement.vue
+++ b/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;
 }