Füge Such- und Filterfunktionen für Veranstaltungen hinzu: Ermögliche die Suche nach Name, Typ und Beschreibung sowie die Anzeige vergangener Events im Event-Management-Bereich.

src/content/admin/EventManagement.vue

@@ -10,6 +10,23 @@
                :contactPersons="contactPersons" 
                @saved="handleEventSaved" 
                @cancelled="handleEventCancelled" />
+    
+    <div class="filter-section">
+      <input 
+        v-model="searchQuery" 
+        type="text" 
+        placeholder="Suche nach Name, Typ, Beschreibung..." 
+        class="search-input"
+      />
+      <label class="checkbox-label">
+        <input 
+          v-model="showPastEvents" 
+          type="checkbox"
+        />
+        Vergangene Events anzeigen
+      </label>
+    </div>
+
     <table>
       <thead>
         <tr>
@@ -23,7 +40,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="event in events" :key="event.id">
+        <tr v-for="event in filteredEvents" :key="event.id">
           <td>{{ event.name }}</td>
           <td>{{ getEventTypeCaption(event.eventTypeId) }}</td>
           <td>{{ event.date }}</td>
@@ -56,8 +73,52 @@ export default {
       eventTypes: [],
       selectedEvent: null,
       showForm: false,
+      searchQuery: '',
+      showPastEvents: false,
     };
   },
+  computed: {
+    filteredEvents() {
+      let filtered = this.events;
+
+      // Filter vergangene Events aus
+      if (!this.showPastEvents) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        
+        filtered = filtered.filter(event => {
+          // Events mit Wochentag (ohne festes Datum) immer anzeigen
+          if (event.dayOfWeek !== null && event.dayOfWeek !== undefined && !event.date) {
+            return true;
+          }
+          // Events mit Datum: nur zukünftige oder heutige anzeigen
+          if (event.date) {
+            const eventDate = new Date(event.date);
+            eventDate.setHours(0, 0, 0, 0);
+            return eventDate >= today;
+          }
+          // Events ohne Datum und ohne Wochentag anzeigen
+          return true;
+        });
+      }
+
+      // Suchfilter anwenden
+      if (this.searchQuery.trim()) {
+        const query = this.searchQuery.toLowerCase();
+        filtered = filtered.filter(event => {
+          const name = event.name ? event.name.toLowerCase() : '';
+          const description = event.description ? event.description.toLowerCase() : '';
+          const eventType = this.getEventTypeCaption(event.eventTypeId).toLowerCase();
+          
+          return name.includes(query) || 
+                 description.includes(query) || 
+                 eventType.includes(query);
+        });
+      }
+
+      return filtered;
+    }
+  },
   async created() {
     await this.fetchData();
   },
@@ -137,6 +198,40 @@ export default {
   margin: 0 auto;
 }
 
+.filter-section {
+  margin: 20px 0;
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  flex: 1;
+  min-width: 250px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #4CAF50;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-label input[type="checkbox"] {
+  cursor: pointer;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;