diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html index 9263183..f0996fc 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html @@ -1,23 +1,21 @@
-

- Genomförandereferens: {{deltagare?.genomforandeReferens}} -

+

Genomförandereferens: {{deltagare?.genomforandeReferens}}

+ - + - + - - - - - + + + + + - - -
Lista med alla händelser för {{deltagare?.fullName}} + Lista med alla händelser för {{deltagare?.fullName}} +
InkomHändelseEffekt
InkomHändelseEffekt
@@ -38,14 +36,25 @@
+ + + + +
- - Inga händelser har inkommit. - + Inga händelser har inkommit. diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss index 8123921..e023f57 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss @@ -1,10 +1,9 @@ +@import 'variables/gutters'; .deltagare-list-handelser { - &__heading-row { white-space: nowrap; } - &__table-cell { white-space: nowrap; } @@ -12,6 +11,11 @@ &__avbrott-cell { color: var(--digi--ui--color--danger); } + + &__pagination { + display: block; + margin-top: $digi--layout--gutter--l; + } } // DA: Digins maxbredd är hårt satt till 540px (!?) Bör vara auto tycker jag. diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts index f17a99e..85a0679 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts @@ -1,9 +1,11 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { DeltagareHandelserApiService } from '@msfa-services/api/deltagare-handelser-api.service'; +import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { DeltagareHandelse } from '@msfa-models/deltagare-handelse.model'; import { Observable } from 'rxjs'; import { IconType } from '@msfa-enums/icon-type.enum'; import { DeltagareCompact } from '@msfa-models/deltagare.model'; +import { PaginationMeta } from '@msfa-models/pagination-meta.model'; +import { map } from 'rxjs/operators'; +import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.service'; @Component({ selector: 'msfa-deltagare-list-handelser-dialog', @@ -11,22 +13,46 @@ import { DeltagareCompact } from '@msfa-models/deltagare.model'; styleUrls: ['./deltagare-list-handelser-dialog.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DeltagareListHandelserDialogComponent implements OnInit { +export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy { @Input() deltagare: DeltagareCompact; iconType = IconType; deltagareHandelser$: Observable; + paginationMeta$: Observable; + handelserLoading$ = this.deltagareHandelserService.handelserLoading$; - constructor(private deltagareHandelserApiService: DeltagareHandelserApiService) { } + constructor(private deltagareHandelserService: DeltagareHandelserService) {} + + ngOnDestroy(): void { + this.deltagareHandelserService.resetParams(); + } ngOnInit(): void { if (this.deltagare) { - this.deltagareHandelser$ = this.deltagareHandelserApiService.fetchDeltagareHandelser$( - this.deltagare.genomforandeReferens + this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens); + this.deltagareHandelser$ = this.deltagareHandelserService.deltagareHandelserData$.pipe( + map(handelse => handelse.data) + ); + + this.paginationMeta$ = this.deltagareHandelserService.deltagareHandelserData$.pipe( + map(handelse => handelse.meta) ); } } getHandelseDate(handelse: DeltagareHandelse, handelseDate?: string): Date { - return handelseDate === 'receivedDate' ? new Date(handelse.receivedDate) : new Date(handelse.effectDate); + return handelseDate === 'receivedDate' ? new Date(handelse.receivedDate) : new Date(handelse.effectDate); + } + + currentResultStart(paginationMeta: PaginationMeta): number { + return (paginationMeta?.page - 1) * paginationMeta?.limit + 1; + } + + currentResultEnd(paginationMeta: PaginationMeta): number { + const end = this.currentResultStart(paginationMeta) + paginationMeta?.limit - 1; + return end < paginationMeta?.count ? end : paginationMeta?.count; + } + + setNewPage(page: number): void { + this.deltagareHandelserService.setPage(page); } } diff --git a/apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts b/apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts index 0300d8a..b7da7d7 100644 --- a/apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts +++ b/apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts @@ -1,3 +1,5 @@ +import { PaginationMeta } from './pagination-meta.model'; + const GENOMFORANDEHANDELSE_EFFECT_MAP = { Inrapporteringsdatum_GP: 'Inskickad datum', Godkannandedatum_GP: 'Godkänd datum', @@ -21,6 +23,11 @@ export interface DeltagareHandelse { effectDescription: string; } +export interface DeltagareHandelseData { + data: DeltagareHandelse[]; + meta: PaginationMeta; +} + interface DeltagareHandelseApiResponse { description: string; receivedDate: Date; @@ -31,6 +38,7 @@ interface DeltagareHandelseApiResponse { export interface DeltagareHandelserApiResponse { data: DeltagareHandelseApiResponse[]; + meta: PaginationMeta; } export function mapDeltagareHandelseApiResponse( diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts index 4f44fce..aab6803 100644 --- a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts +++ b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts @@ -1,8 +1,9 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { environment } from '@msfa-environment'; +import { PaginationParams, Params } from '@msfa-models/api/params.model'; import { - DeltagareHandelse, + DeltagareHandelseData, DeltagareHandelserApiResponse, mapDeltagareHandelseApiResponse, } from '@msfa-models/deltagare-handelse.model'; @@ -14,19 +15,29 @@ import { map } from 'rxjs/operators'; }) export class DeltagareHandelserApiService { private _apiBaseUrl = `${environment.api.url}`; + constructor(private httpClient: HttpClient) {} - fetchDeltagareHandelser$(genomforandeReferens: number): Observable { + fetchDeltagareHandelser$( + genomforandeReferens: number, + handelserParams: PaginationParams + ): Observable { if (!genomforandeReferens) { throw new Error('Genomförandereferens kunde inte hittas.'); } + const params: Params = { page: handelserParams.page.toString() }; + return this.httpClient - .get(`${this._apiBaseUrl}/deltagare/${genomforandeReferens}/handelser`) + .get(`${this._apiBaseUrl}/deltagare/${genomforandeReferens}/handelser`, { params }) .pipe( - map(({ data }) => { + map(({ data, meta }) => { if (data) { - return data.map(genomforandeHandelse => mapDeltagareHandelseApiResponse(genomforandeHandelse)); + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + return { + data: data.map(genomforandeHandelse => mapDeltagareHandelseApiResponse(genomforandeHandelse)), + meta, + }; } }) ); diff --git a/apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts b/apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts new file mode 100644 index 0000000..c4e0413 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts @@ -0,0 +1,43 @@ +import { Injectable } from '@angular/core'; +import { PaginationParams } from '@msfa-models/api/params.model'; +import { BehaviorSubject, combineLatest } from 'rxjs'; +import { switchMap, tap } from 'rxjs/operators'; +import { DeltagareHandelserApiService } from './api/deltagare-handelser-api.service'; + +const DEFAULT_PARAMS: PaginationParams = { + page: 1, + limit: 10, +}; + +@Injectable({ + providedIn: 'root', +}) +export class DeltagareHandelserService { + private _params$ = new BehaviorSubject(DEFAULT_PARAMS); + private _genomforandeReferens$ = new BehaviorSubject(null); + private _handelserLoading$ = new BehaviorSubject(false); + handelserLoading$ = this._handelserLoading$.asObservable(); + + deltagareHandelserData$ = combineLatest([this._genomforandeReferens$, this._params$]).pipe( + switchMap(([genomforandeReferens, params]) => { + this._handelserLoading$.next(true); + return this.deltagareHandelserApiService + .fetchDeltagareHandelser$(genomforandeReferens, params) + .pipe(tap(() => this._handelserLoading$.next(false))); + }) + ); + + constructor(private deltagareHandelserApiService: DeltagareHandelserApiService) {} + + public setPage(page: number): void { + this._params$.next({ ...this._params$.getValue(), page }); + } + + public setGenomforandeReferens$(genomforandeReferens: number): void { + this._genomforandeReferens$.next(genomforandeReferens); + } + + public resetParams(): void { + this._params$.next(DEFAULT_PARAMS); + } +}