kursfilter in frontend

issue #7
cevi · Jan 3, 2024 · e4a27c6 · e4a27c6
1 parent 709b02f
commit e4a27c6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/frontend/src/app/event/components/eventlist.component.html b/frontend/src/app/event/components/eventlist.component.html
@@ -25,6 +25,15 @@
     <mat-label>Text im Name</mat-label>
     <input type="text" [formControl]="this.nameFilter" matInput>
   </mat-form-field>
+  <mat-form-field>
+    <mat-label>Kursart</mat-label>
+    <mat-select (selectionChange)="filterByKursart($event)">
+      <mat-option value="all">Alle</mat-option>
+      @for (kursart of kursarten; track kursart) {
+        <mat-option [value]="kursart">{{kursart}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
 }
 
 @if (this.isLoadingMasterdata || this.isLoading) {

diff --git a/frontend/src/app/event/components/eventlist.component.ts b/frontend/src/app/event/components/eventlist.component.ts
@@ -29,13 +29,15 @@ export class EventListComponent {
   title = 'eventoverview';
   events = new MatTableDataSource([] as CeviEvent[]);
   organisations = [] as string[];
+  kursarten = [] as string[];
   types = [] as string[];
   isLoading = true;
   isError = false;
   isLoadingMasterdata = true;
   isErrorMasterdata = false;
   organisation = 'all';
   eventType = 'all';
+  kursart = 'all';
 
   displayedColumns: string[] = ['group', 'name', 'startsAt', 'finishAt', 'link'];
   public nameFilter!: FormControl;
@@ -67,6 +69,7 @@ export class EventListComponent {
       next: (data: Masterdata) => {
         this.organisations = data.organisations.map(o => o.name);
         this.types = data.eventTypes;
+        this.kursarten = data.kursarten.map(k => k.name);
         this.isLoadingMasterdata = false
       },
       error: (e: any) => {
@@ -96,8 +99,13 @@ export class EventListComponent {
     this.loadEventsWithFilter();
   }
 
+  filterByKursart($event: MatSelectChange) {
+    this.kursart = $event.value;
+    this.loadEventsWithFilter();
+  }
+
   loadEventsWithFilter() {
-    this.service.getEventsWithFilter(this.organisation, this.eventType, this.nameFilter.value).subscribe({
+    this.service.getEventsWithFilter(this.organisation, this.eventType, this.nameFilter.value, this.kursart).subscribe({
       next: (data: CeviEvent[]) => {
         this.events.data = data;
         this.isLoading = false},

diff --git a/frontend/src/app/event/services/event.service.ts b/frontend/src/app/event/services/event.service.ts
@@ -18,7 +18,7 @@ export interface CeviEvent {
 export class EventService {
   constructor(private http: HttpClient) { }
 
-  getEventsWithFilter(filterOrganisation: string, filterEventType: string, nameFilter: string) {
+  getEventsWithFilter(filterOrganisation: string, filterEventType: string, nameFilter: string, kursartFilter: string) {
     let params = new HttpParams();
 
     if (filterOrganisation !== 'all') {
@@ -30,6 +30,9 @@ export class EventService {
     if (nameFilter !== '') {
       params = params.set('nameContains', nameFilter);
     }
+    if (kursartFilter !== 'all') {
+      params = params.set('kursartFilter', kursartFilter);
+    }
 
     return this.http.get<CeviEvent[]>(environment.apiUri + '/events?' + params.toString());
   }

diff --git a/frontend/src/app/event/services/masterdata.service.ts b/frontend/src/app/event/services/masterdata.service.ts
@@ -5,12 +5,17 @@ import { environment } from '../../../environments/environment';
 export interface Masterdata {
   organisations: Organisation[];
   eventTypes: string[];
+  kursarten: Kursart[];
 }
 
 export interface Organisation {
   name: string;
 }
 
+export interface Kursart {
+  name: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })