arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(avrop): Fixed issue with filtering and paginating. (TV-714)

Browse Source 
Squashed commit of the following:

commit 74e3471f042b67308db3a7639cd475c7ae10402b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Oct 1 09:23:48 2021 +0200

    readded page-check for pagination

commit 99e7e1c2f7a6435a795892242cdb4356e15b3987
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Oct 1 09:09:46 2021 +0200

    Changed params handling inside avrop
This commit is contained in:
Erik Tiekstra
2021-10-01 15:28:53 +02:00
parent 002e26c088
commit 93556d4885
7 changed files with 121 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html
View File

@@ -1,4 +1,4 @@
<div class="avrop-filters" *ngIf="filtersAreLoading$ | async; else loadingRef">
<div class="avrop-filters" *ngIf="(filtersAreLoading$ | async) === false; else loadingRef">
<div class="avrop-filters__filter-wrapper" *ngIf="availableTjanster$ | async as availableTjanster">
<msfa-multiselect
[multiselectTitle]="'Tjänster'"

2
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts
View File

@@ -24,7 +24,7 @@ export class AvropFiltersComponent {
this.availableKommuner$,
this.availableTjanster$,
this.availableUtforandeVerksamheter$,
]).pipe(map(([kommuner, tjanster, uv]) => !!(kommuner && tjanster && uv)));
]).pipe(map(([kommuner, tjanster, uv]) => !(kommuner && tjanster && uv)));
constructor(private avropService: AvropService) {}

4
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html
View File

@@ -1,5 +1,5 @@
<digi-ng-skeleton-base *ngIf="avropLoading" [afCount]="3" afText="Laddar nya deltagare"></digi-ng-skeleton-base>
<div *ngIf="availableAvrop?.length" class="avrop-list">
<div class="avrop-list">
<msfa-loader *ngIf="avropLoading" type="absolute"></msfa-loader>
<ul class="avrop-list__list">
<li *ngFor="let avrop of avropRows">
<msfa-avrop-row

3
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.scss
View File

@@ -1,6 +1,9 @@
@import 'mixins/list';
.avrop-list {
position: relative;
z-index: 0;
&__list {
@include msfa__reset-list;
display: flex;

3
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts
View File

@@ -1,13 +1,14 @@
import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
import { AvropRowModule } from '../avrop-row/avrop-row.module';
import { AvropListComponent } from './avrop-list.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [AvropListComponent],
imports: [CommonModule, AvropRowModule, DigiNgSkeletonBaseModule],
imports: [CommonModule, AvropRowModule, LoaderModule, DigiNgSkeletonBaseModule],
exports: [AvropListComponent],
})
export class AvropListModule {}

18
apps/mina-sidor-fa/src/app/shared/models/api/params.model.ts
View File

@@ -1,5 +1,6 @@
import { SortOrder } from '@msfa-enums/sort-order.enum';
import { DeltagareCompact } from '@msfa-models/deltagare.model';
import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
import { EmployeeCompactResponse } from './employee.response.model';
export interface Params {
@@ -9,16 +10,29 @@ export interface Params {
export interface PaginationParams {
page: number;
limit: number;
}
export interface SortParams {
sort: string;
order: SortOrder;
}
export interface FilterParams {
search?: string;
}
export interface DeltagareParams extends PaginationParams {
export interface DeltagareParams extends PaginationParams, SortParams {
sort: keyof DeltagareCompact;
onlyMyDeltagare: boolean;
}
export interface EmployeeParams extends PaginationParams {
export interface EmployeeParams extends PaginationParams, SortParams, FilterParams {
sort: keyof EmployeeCompactResponse;
onlyEmployeesWithoutAuthorization: boolean;
}
export interface AvropParams extends PaginationParams {
filteredTjanster: MultiselectFilterOption[];
filteredUtforandeVerksamheter: MultiselectFilterOption[];
filteredKommuner: MultiselectFilterOption[];
}

170
apps/mina-sidor-fa/src/app/shared/services/avrop.service.ts
View File

@@ -1,11 +1,11 @@
import { Injectable } from '@angular/core';
import { Params } from '@msfa-models/api/params.model';
import { AvropParams, Params } from '@msfa-models/api/params.model';
import { AvropCompact, AvropCompactData } from '@msfa-models/avrop.model';
import { Handledare } from '@msfa-models/handledare.model';
import { AvropApiService } from '@msfa-services/api/avrop-api.service';
import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
import { BehaviorSubject, combineLatest, Observable, of } from 'rxjs';
import { filter, map, switchMap, tap } from 'rxjs/operators';
import { distinctUntilChanged, filter, map, shareReplay, switchMap, tap } from 'rxjs/operators';
type Step = 1 | 2 | 3 | 4;
@@ -13,11 +13,13 @@ type Step = 1 | 2 | 3 | 4;
providedIn: 'root',
})
export class AvropService {
private _limit$ = new BehaviorSubject<number>(5);
private _page$ = new BehaviorSubject<number>(1);
private _filteredTjanster$ = new BehaviorSubject<MultiselectFilterOption[]>(null);
private _filteredUtforandeVerksamheter$ = new BehaviorSubject<MultiselectFilterOption[]>(null);
private _filteredKommuner$ = new BehaviorSubject<MultiselectFilterOption[]>(null);
private _params$ = new BehaviorSubject<AvropParams>({
page: 1,
limit: 5,
filteredTjanster: null,
filteredUtforandeVerksamheter: null,
filteredKommuner: null,
});
private _selectedAvrop$ = new BehaviorSubject<AvropCompact[]>([]);
private _avropIsLocked$ = new BehaviorSubject<boolean>(null);
private _selectedHandledareId$ = new BehaviorSubject<string>(null);
@@ -26,12 +28,23 @@ export class AvropService {
private _error$ = new BehaviorSubject<string>(null);
private _avropLoading$ = new BehaviorSubject<boolean>(false);
public avropLoading$: Observable<boolean> = this._avropLoading$.asObservable();
public handledareIsConfirmed$: Observable<boolean> = this._handledareIsConfirmed$.asObservable();
public avropIsSubmitted$: Observable<boolean> = this._avropIsSubmitted$.asObservable();
public error$: Observable<string> = this._error$.asObservable();
public showUnauthorizedError$: Observable<boolean> = this.avropApiService.showUnauthorizedError$;
public filteredTjanster$: Observable<MultiselectFilterOption[]> = this._filteredTjanster$.asObservable();
public filteredUtforandeVerksamheter$: Observable<
MultiselectFilterOption[]
> = this._filteredUtforandeVerksamheter$.asObservable();
public filteredKommuner$: Observable<MultiselectFilterOption[]> = this._filteredKommuner$.asObservable();
public filteredTjanster$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
map(({ filteredTjanster }) => filteredTjanster),
distinctUntilChanged()
);
public filteredUtforandeVerksamheter$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
map(({ filteredUtforandeVerksamheter }) => filteredUtforandeVerksamheter),
distinctUntilChanged((prevFilter, currFilter) => JSON.stringify(prevFilter) === JSON.stringify(currFilter))
);
public filteredKommuner$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
map(({ filteredKommuner }) => filteredKommuner),
distinctUntilChanged()
);
public selectedAvrop$: Observable<AvropCompact[]> = this._selectedAvrop$.asObservable();
public avropIsLocked$: Observable<boolean> = this._avropIsLocked$.asObservable();
public selectedHandledare$: Observable<Handledare | null> = this._selectedHandledareId$.pipe(
@@ -43,21 +56,10 @@ export class AvropService {
: of(null as null)
)
);
public handledareIsConfirmed$: Observable<boolean> = this._handledareIsConfirmed$.asObservable();
public avropIsSubmitted$: Observable<boolean> = this._avropIsSubmitted$.asObservable();
public error$: Observable<string> = this._error$.asObservable();
public showUnauthorizedError$: Observable<boolean> = this.avropApiService.showUnauthorizedError$;
public avropData$: Observable<AvropCompactData> = combineLatest([
this._filteredTjanster$,
this._filteredUtforandeVerksamheter$,
this._filteredKommuner$,
this._page$,
this._limit$,
this._avropIsSubmitted$,
]).pipe(
public avropData$: Observable<AvropCompactData> = combineLatest([this._avropIsSubmitted$, this._params$]).pipe(
switchMap(() => {
this._avropLoading$.next(true);
return this.avropApiService.fetchAvrop$(this.filtersForAvrop).pipe(
return this.avropApiService.fetchAvrop$(this._filtersForAvrop).pipe(
tap(() => {
this._avropLoading$.next(false);
})
@@ -65,22 +67,35 @@ export class AvropService {
})
);
public availableTjanster$: Observable<MultiselectFilterOption[]> = combineLatest([
this._filteredUtforandeVerksamheter$,
this._filteredKommuner$,
]).pipe(switchMap(() => this.avropApiService.fetchAvailableTjanster$(this.filtersForTjanster)));
public availableUtforandeVerksamheter$: Observable<MultiselectFilterOption[]> = combineLatest([
this._filteredTjanster$,
this._filteredKommuner$,
]).pipe(
switchMap(() => this.avropApiService.fetchAvailableUtforandeVerksamheter$(this.filtersForUtforandeVerksamheter))
public availableTjanster$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
distinctUntilChanged(
(prevParams, currParams) =>
prevParams.filteredKommuner === currParams.filteredKommuner &&
prevParams.filteredUtforandeVerksamheter === currParams.filteredUtforandeVerksamheter
),
switchMap(() => this.avropApiService.fetchAvailableTjanster$(this._filtersForTjanster)),
shareReplay(1)
);
public availableKommuner$: Observable<MultiselectFilterOption[]> = combineLatest([
this._filteredTjanster$,
this._filteredUtforandeVerksamheter$,
]).pipe(switchMap(() => this.avropApiService.fetchAvailableKommuner$(this.filtersForKommuner)));
public availableUtforandeVerksamheter$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
distinctUntilChanged(
(prevParams, currParams) =>
prevParams.filteredKommuner === currParams.filteredKommuner &&
prevParams.filteredTjanster === currParams.filteredTjanster
),
switchMap(() => this.avropApiService.fetchAvailableUtforandeVerksamheter$(this._filtersForUtforandeVerksamheter)),
shareReplay(1)
);
public availableKommuner$: Observable<MultiselectFilterOption[]> = this._params$.pipe(
distinctUntilChanged(
(prevParams, currParams) =>
prevParams.filteredUtforandeVerksamheter === currParams.filteredUtforandeVerksamheter &&
prevParams.filteredTjanster === currParams.filteredTjanster
),
switchMap(() => this.avropApiService.fetchAvailableKommuner$(this._filtersForKommuner)),
shareReplay(1)
);
private _lockedAvrop$: Observable<AvropCompact[]> = combineLatest([this.selectedAvrop$, this.avropIsLocked$]).pipe(
map(([selectedAvrop, isLocked]) => (isLocked ? selectedAvrop : null))
@@ -97,14 +112,18 @@ export class AvropService {
this._avropIsSubmitted$,
]).pipe(
map(([confirmedHandledare, avropIsLocked, avropIsSubmitted]) =>
AvropService.calculateStep(confirmedHandledare, avropIsLocked, avropIsSubmitted)
AvropService._getCalculatedStep(confirmedHandledare, avropIsLocked, avropIsSubmitted)
),
tap(() => {
window.scrollTo(0, 0);
})
);
private static calculateStep(confirmedHandledare: boolean, avropIsLocked: boolean, avropIsSubmitted: boolean): Step {
private static _getCalculatedStep(
confirmedHandledare: boolean,
avropIsLocked: boolean,
avropIsSubmitted: boolean
): Step {
if (avropIsLocked) {
if (confirmedHandledare) {
if (avropIsSubmitted) {
@@ -118,56 +137,56 @@ export class AvropService {
return 1;
}
private get tjanstKoder(): { tjanstKoder: string[] } | null {
return this._filteredTjanster$.value?.length
? { tjanstKoder: this._filteredTjanster$.value.map(tjanst => tjanst.id) }
: null;
private get _tjanstKoder(): { tjanstKoder: string[] } | null {
const params = this._params$.getValue();
return params.filteredTjanster?.length ? { tjanstKoder: params.filteredTjanster.map(tjanst => tjanst.id) } : null;
}
private get kommunKoder(): { kommunKoder: string[] } | null {
return this._filteredKommuner$.value?.length
? { kommunKoder: this._filteredKommuner$.value.map(kommun => kommun.id) }
: null;
private get _kommunKoder(): { kommunKoder: string[] } | null {
const params = this._params$.getValue();
return params.filteredKommuner?.length ? { kommunKoder: params.filteredKommuner.map(kommun => kommun.id) } : null;
}
private get utforandeverksamhetIds(): { utforandeverksamhetIds: string[] } | null {
return this._filteredUtforandeVerksamheter$.value?.length
private get _utforandeverksamhetIds(): { utforandeverksamhetIds: string[] } | null {
const params = this._params$.getValue();
return params.filteredUtforandeVerksamheter?.length
? {
utforandeverksamhetIds: this._filteredUtforandeVerksamheter$.value.map(
utforandeverksamhetIds: params.filteredUtforandeVerksamheter.map(
utforandeVerksamhet => utforandeVerksamhet.id
),
}
: null;
}
private get filtersForAvrop(): Params {
private get _filtersForAvrop(): Params {
const { page, limit } = this._params$.getValue();
return {
...this.tjanstKoder,
...this.kommunKoder,
...this.utforandeverksamhetIds,
page: this._page$.value.toString(),
limit: this._limit$.value.toString(),
...this._tjanstKoder,
...this._kommunKoder,
...this._utforandeverksamhetIds,
page: page.toString(),
limit: limit.toString(),
};
}
private get filtersForTjanster(): Params {
private get _filtersForTjanster(): Params {
return {
...this.kommunKoder,
...this.utforandeverksamhetIds,
...this._kommunKoder,
...this._utforandeverksamhetIds,
};
}
private get filtersForUtforandeVerksamheter(): Params {
private get _filtersForUtforandeVerksamheter(): Params {
return {
...this.tjanstKoder,
...this.kommunKoder,
...this._tjanstKoder,
...this._kommunKoder,
};
}
private get filtersForKommuner(): Params {
private get _filtersForKommuner(): Params {
return {
...this.tjanstKoder,
...this.utforandeverksamhetIds,
...this._tjanstKoder,
...this._utforandeverksamhetIds,
};
}
@@ -232,15 +251,15 @@ export class AvropService {
}
public setSelectedTjanster(selectedFilterOptions: MultiselectFilterOption[]): void {
this._filteredTjanster$.next(selectedFilterOptions);
this._params$.next({ ...this._params$.getValue(), filteredTjanster: selectedFilterOptions, page: 1 });
}
public setSelectedUtforandeVerksamheter(selectedFilterOptions: MultiselectFilterOption[]): void {
this._filteredUtforandeVerksamheter$.next(selectedFilterOptions);
this._params$.next({ ...this._params$.getValue(), filteredUtforandeVerksamheter: selectedFilterOptions, page: 1 });
}
public setSelectedKommuner(selectedFilterOptions: MultiselectFilterOption[]): void {
this._filteredKommuner$.next(selectedFilterOptions);
this._params$.next({ ...this._params$.getValue(), filteredKommuner: selectedFilterOptions, page: 1 });
}
public goToStep1(): void {
@@ -252,22 +271,25 @@ export class AvropService {
}
public removeKommun(kommunToRemove: MultiselectFilterOption): void {
this.setSelectedKommuner(this._filteredKommuner$.value.filter(selectedKommun => selectedKommun !== kommunToRemove));
const params = this._params$.getValue();
this.setSelectedKommuner(params.filteredKommuner.filter(selectedKommun => selectedKommun !== kommunToRemove));
}
public removeUtforandeVerksamhet(utforandeVerksamhetToRemove: MultiselectFilterOption): void {
const params = this._params$.getValue();
this.setSelectedUtforandeVerksamheter(
this._filteredUtforandeVerksamheter$.value.filter(
params.filteredUtforandeVerksamheter.filter(
selectedUtforandeVerksamhet => selectedUtforandeVerksamhet !== utforandeVerksamhetToRemove
)
);
}
public removeTjanst(tjanstToRemove: MultiselectFilterOption): void {
this.setSelectedTjanster(this._filteredTjanster$.value.filter(selectedTjanst => selectedTjanst !== tjanstToRemove));
const params = this._params$.getValue();
this.setSelectedTjanster(params.filteredTjanster.filter(selectedTjanst => selectedTjanst !== tjanstToRemove));
}
public setPage(page: number): void {
this._page$.next(page);
this._params$.next({ ...this._params$.getValue(), page });
}
}