bugfix multiple query parameters

also add test for query parameters
cevi · Nov 24, 2024 · 25cd496 · 25cd496
1 parent f1b91be
commit 25cd496
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 30 deletions.
diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Version 1.0.13, 24.11.2024
 
 - feature: multi select for organisations
+- bugfix: allow multiple query parameters to be set
 - chore: bump @angular-eslint/eslint-plugin to 18.3.1
 - chore: bump typescript-eslint to 8.6.0
 - chore: bump @typescript/eslint-plugin to 8.14.0

diff --git a/frontend/src/app/event/components/eventlist.component.html b/frontend/src/app/event/components/eventlist.component.html
@@ -7,10 +7,7 @@
   Filter:
   <mat-form-field>
     <mat-label>Organisation</mat-label>
-    <mat-select
-      multiple
-      [formControl]="this.organisationFilter"
-      [value]="this.filter.groups">
+    <mat-select multiple [formControl]="this.organisationFilter">
       <app-select-check-all
         [model]="this.organisationFilter"
         [values]="this.organisations"></app-select-check-all>

diff --git a/frontend/src/app/event/components/eventlist.component.spec.ts b/frontend/src/app/event/components/eventlist.component.spec.ts
@@ -13,7 +13,11 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { provideRouter } from '@angular/router';
+import {
+  ActivatedRoute,
+  convertToParamMap,
+  provideRouter,
+} from '@angular/router';
 
 describe('EventlistComponent', () => {
   let fixture: ComponentFixture<EventListComponent>;
@@ -59,6 +63,21 @@ describe('EventlistComponent', () => {
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
         provideRouter([{ path: '**', component: EventListComponent }]),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParamMap: of(
+              convertToParamMap({
+                organisation: 'Cevi',
+                type: 'EVENT',
+                text: 'abc',
+                kursart: 'def',
+                freeSeats: 'true',
+                applicationOpen: 'true',
+              })
+            ),
+          },
+        },
       ],
     }).compileComponents();
 
@@ -75,22 +94,22 @@ describe('EventlistComponent', () => {
     expect(sut.isLoadingMasterdata).toEqual(false);
     expect(sut.data.data.length).toEqual(1);
   });
+  it('initial filter from query parameters', () => {
+    sut.ngOnInit();
+    expect(sut.filter.groups).toEqual(['Cevi']);
+    expect(sut.filter.eventType).toEqual('EVENT');
+    expect(sut.nameFilter.getRawValue()).toEqual('abc');
+    expect(sut.filter.kursart).toEqual('def');
+    expect(sut.filter.hasAvailablePlaces).toBeTrue();
+    expect(sut.filter.isApplicationOpen).toBeTrue();
+  });
   it('translateEventTypes', () => {
     let result = sut.translateEventTypes('COURSE');
     expect(result).toEqual('Kurs');
 
     result = sut.translateEventTypes('EVENT');
     expect(result).toEqual('Anlass');
   });
-  it('filterByOrganisation', () => {
-    const fnc = spyOn(eventService, 'getEventsWithFilter').and.returnValue(
-      of(events)
-    );
-    sut.filterByOrganisation({ value: ['Cevi Alpin'] } as MatSelectChange);
-    expect(fnc).toHaveBeenCalledWith({
-      groups: ['Cevi Alpin'],
-    } as CeviEventFilter);
-  });
   it('filterByEventType', () => {
     const fnc = spyOn(eventService, 'getEventsWithFilter').and.returnValue(
       of(events)
@@ -116,6 +135,15 @@ describe('EventlistComponent', () => {
       hasAvailablePlaces: true,
     } as CeviEventFilter);
   });
+  it('filterByIsApplicationOpen', () => {
+    const fnc = spyOn(eventService, 'getEventsWithFilter').and.returnValue(
+      of(events)
+    );
+    sut.filterByIsApplicationOpen({ value: true } as MatSelectChange);
+    expect(fnc).toHaveBeenCalledWith({
+      isApplicationOpen: true,
+    } as CeviEventFilter);
+  });
   it('hasFreeSeats', () => {
     expect(sut.hasFreeSeats(events[0])).toBe('Ja');
   });

diff --git a/frontend/src/app/event/components/eventlist.component.ts b/frontend/src/app/event/components/eventlist.component.ts
@@ -106,16 +106,21 @@ export class EventListComponent implements OnInit {
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(params => {
       if (params.has('organisation')) {
-        this.filter.groups = params.getAll('organisation');
-      } else if (params.has('type')) {
+        this.organisationFilter.setValue(params.getAll('organisation'));
+      }
+      if (params.has('type')) {
         this.filter.eventType = params.get('type') as CeviEventType;
-      } else if (params.has('text')) {
+      }
+      if (params.has('text')) {
         this.nameFilter.setValue(params.get('text'));
-      } else if (params.has('kursart')) {
+      }
+      if (params.has('kursart')) {
         this.filter.kursart = params.get('kursart');
-      } else if (params.has('freeSeats')) {
+      }
+      if (params.has('freeSeats')) {
         this.filter.hasAvailablePlaces = params.get('freeSeats') === 'true';
-      } else if (params.has('applicationOpen')) {
+      }
+      if (params.has('applicationOpen')) {
         this.filter.isApplicationOpen =
           params.get('applicationOpen') === 'true';
       }
@@ -147,16 +152,6 @@ export class EventListComponent implements OnInit {
     }
   }
 
-  filterByOrganisationForm() {
-    this.filter.groups = this.organisationFilter.value;
-    this.loadEventsWithFilter();
-  }
-
-  filterByOrganisation($event: MatSelectChange) {
-    this.filter.groups = $event.value;
-    this.loadEventsWithFilter();
-  }
-
   filterByEventType($event: MatSelectChange) {
     this.filter.eventType = $event.value;
     this.loadEventsWithFilter();