diff --git a/src/content/admin/EventManagement.vue b/src/content/admin/EventManagement.vue index a024963..9e7e9dc 100644 --- a/src/content/admin/EventManagement.vue +++ b/src/content/admin/EventManagement.vue @@ -10,6 +10,23 @@ :contactPersons="contactPersons" @saved="handleEventSaved" @cancelled="handleEventCancelled" /> + +
| {{ event.name }} | {{ getEventTypeCaption(event.eventTypeId) }} | {{ event.date }} | @@ -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;