From 25cd49663db5a5afa22fa3c0f5473f96f37022c3 Mon Sep 17 00:00:00 2001 From: Patrick Uhlmann Date: Mon, 25 Nov 2024 00:42:02 +0100 Subject: [PATCH] bugfix multiple query parameters also add test for query parameters --- frontend/CHANGELOG.md | 1 + .../event/components/eventlist.component.html | 5 +- .../components/eventlist.component.spec.ts | 48 +++++++++++++++---- .../event/components/eventlist.component.ts | 27 +++++------ 4 files changed, 51 insertions(+), 30 deletions(-) diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md index 0cb1793..84dc7d2 100644 --- 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 index b83133f..604f7b7 100644 --- a/frontend/src/app/event/components/eventlist.component.html +++ b/frontend/src/app/event/components/eventlist.component.html @@ -7,10 +7,7 @@ Filter: Organisation - + diff --git a/frontend/src/app/event/components/eventlist.component.spec.ts b/frontend/src/app/event/components/eventlist.component.spec.ts index 450a505..79f2e69 100644 --- 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; @@ -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,6 +94,15 @@ 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'); @@ -82,15 +110,6 @@ describe('EventlistComponent', () => { 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 index 5ecc70c..69fb88f 100644 --- 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();