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

feat(deltagare-handelser): implemented pagination for the list of handelser

Browse Source 
Squashed commit of the following:

commit 7fbfcae5b57f7c8b499f3298eade192f6651217d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:56:24 2021 +0200

    removed unused import

commit e8c4f1e6d5400b668f58994f839de0a9cdcf18a2
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:12:34 2021 +0200

    corrected some typo

commit 148e734ef7362e9cf677c186a5ddc7ecdef46e09
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 15:10:33 2021 +0200

    moved some methods from api-service to their own service

commit c052f3e99425f47e8f86341734ed163b77bce784
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 14:38:19 2021 +0200

    added loader to show when data is being fetched from server

commit 9d1003a9ce6046f2f51916bb09bf71539df4a211
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 14:20:47 2021 +0200

    updated css variable import

commit b941806cbe5532b9e72d4ecac95487bcba94c98f
Merge: 5a548ac1 f857b1ae
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 13:53:38 2021 +0200

    Merge branch 'develop' into feature/TV-843-paginering-deltager-handelser

commit 5a548ac17a339f480ba53aca421fea3931497c9d
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 12:59:19 2021 +0200

    deltagare-handelser: implemented onDestroy method to reset the params when the dialog window is closed

commit af7c624e52085d72b9de1fef921bfebaafa712d9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 12:50:04 2021 +0200

    implemented pagination to deltagare handelser

commit 4f77302fed3957addfb4aff0597473b0580f5d94
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Thu Oct 28 09:09:44 2021 +0200

    deltagare händelse - implement pagination
This commit is contained in:
Aden Hassan
2021-10-28 16:03:18 +02:00
parent f857b1ae20
commit 7528fef6bf
6 changed files with 133 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
View File

@@ -1,23 +1,21 @@
<div class="deltagare-list-handelser">
<p>
Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong>
</p>
<p>Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong></p>
<ui-loader *ngIf="handelserLoading$ | async" uiType="absolute"></ui-loader>
<digi-table af-size="s" *ngIf="deltagareHandelser$ | async; let deltagareHandelser">
<ng-container
*ngIf="deltagareHandelser.length > 0; else noEvents"
>
<ng-container *ngIf="deltagareHandelser.length > 0; else noEvents">
<table>
<caption class="msfa__a11y-sr-only">Lista med alla händelser för {{deltagare?.fullName}}</caption>
<caption class="msfa__a11y-sr-only">
Lista med alla händelser för {{deltagare?.fullName}}
</caption>
<thead>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
</tr>
<tr>
<th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
<th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let handelse of deltagareHandelser;">
<td class="deltagare-list-handelser__table-cell">
<digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
@@ -38,14 +36,25 @@
</td>
</ng-template>
</tr>
</tbody>
</table>
</ng-container>
</digi-table>
<ng-container *ngIf="paginationMeta$ | async as paginationMeta">
<digi-navigation-pagination
*ngIf="paginationMeta?.totalPage > 1"
class="deltagare-list-handelser__pagination"
[afTotalPages]="paginationMeta?.totalPage"
[afInitActivePage]="paginationMeta?.page"
[afCurrentResultStart]="currentResultStart(paginationMeta)"
[afCurrentResultEnd]="currentResultEnd(paginationMeta)"
[afTotalResults]="paginationMeta?.count"
(afOnPageChange)="setNewPage($event.detail)"
af-result-name="händelser"
>
</digi-navigation-pagination>
</ng-container>
</div>
<ng-template #noEvents>
Inga händelser har inkommit.
</ng-template>
<ng-template #noEvents> Inga händelser har inkommit. </ng-template>

8
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss
View File

@@ -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.

40
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
View File

@@ -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<DeltagareHandelse[]>;
paginationMeta$: Observable<PaginationMeta>;
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);
}
}

8
apps/mina-sidor-fa/src/app/shared/models/deltagare-handelse.model.ts
View File

@@ -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(

21
apps/mina-sidor-fa/src/app/shared/services/api/deltagare-handelser-api.service.ts
View File

@@ -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<DeltagareHandelse[]> {
fetchDeltagareHandelser$(
genomforandeReferens: number,
handelserParams: PaginationParams
): Observable<DeltagareHandelseData> {
if (!genomforandeReferens) {
throw new Error('Genomförandereferens kunde inte hittas.');
}
const params: Params = { page: handelserParams.page.toString() };
return this.httpClient
.get<DeltagareHandelserApiResponse>(`${this._apiBaseUrl}/deltagare/${genomforandeReferens}/handelser`)
.get<DeltagareHandelserApiResponse>(`${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,
};
}
})
);

43
apps/mina-sidor-fa/src/app/shared/services/deltagare-handelser.service.ts Normal file
View File

@@ -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<PaginationParams>(DEFAULT_PARAMS);
private _genomforandeReferens$ = new BehaviorSubject<number>(null);
private _handelserLoading$ = new BehaviorSubject<boolean>(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);
}
}