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

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

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(

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<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,
+            };
           }
         })
       );

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<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);
+  }
+}