feat(deltagare): Added list with reports. (TV-732)

Squashed commit of the following:

commit 225a54c520c3cceaccd348b587df83e8e2050e2d
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 15:00:30 2021 +0200

    Added error-handling to reports fetch

commit 876e8d1a338f8f910086868083bb0b4d61fcff63
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 14:50:51 2021 +0200

    Added pagination preparation

commit 5e90bc4c0b6079852c05628f1b7fa79cc7f2bc9a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Oct 6 14:32:46 2021 +0200

    Added reports list to reports tab

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.html

@@ -1,4 +1,4 @@
-<div class="reports">
+<div class="reports-list">
   <digi-table af-variation="secondary">
     <table>
       <thead>
@@ -9,10 +9,8 @@
 
       <tbody>
         <tr *ngFor="let report of reports">
-          <th scope="row">
+          <th scope="row">{{ report.type }}</th>
-            <a [routerLink]="report?.id">{{ report.type }}</a>
+          <td>{{ report.date | date:'longDate' }} {{ report.date | date:'shortTime' }}</td>
-          </th>
-          <td>{{ report.sendDate | localDate }}</td>
           <td>{{ report.status }}</td>
         </tr>
       </tbody>
@@ -20,14 +18,13 @@
   </digi-table>
 
   <digi-navigation-pagination
-    *ngIf="totalPage > 1"
+    *ngIf="paginationMeta"
-    class="reports__pagination"
+    class="reports-list__pagination"
     [afTotalPages]="totalPage"
     [afCurrentResultStart]="currentResultStart"
     [afCurrentResultEnd]="currentResultEnd"
     [afTotalResults]="count"
-    (afOnPageChange)="setNewPage($event.detail)"
+    (afOnPageChange)="emitNewPage($event.detail)"
-    af-result-name="reports"
+    af-result-name="rapporter"
-  >
+  ></digi-navigation-pagination>
-  </digi-navigation-pagination>
 </div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.scss

@@ -1,6 +1,6 @@
 @import 'apps/mina-sidor-fa/src/styles/variables/gutters';
 
-.reports {
+.reports-list {
   &__pagination {
     display: block;
     margin-top: var(--digi--layout--gutter);

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
-import { Report } from '@msfa-models/reports.model';
+import { Report } from '@msfa-models/report.model';
 
 @Component({
   selector: 'msfa-reports-list',
@@ -20,7 +20,7 @@ export class ReportsListComponent {
     },
     {
       label: 'Inskickad datum',
-      key: 'sendDate',
+      key: 'date',
     },
     {
       label: 'Status',
@@ -29,7 +29,7 @@ export class ReportsListComponent {
   ];
 
   get currentPage(): number {
-    return this.paginationMeta.page;
+    return this.paginationMeta?.page;
   }
 
   get totalPage(): number {
@@ -37,19 +37,19 @@ export class ReportsListComponent {
   }
 
   get count(): number {
-    return this.paginationMeta.count;
+    return this.paginationMeta?.count;
   }
 
   get currentResultStart(): number {
-    return (this.currentPage - 1) * this.paginationMeta.limit + 1;
+    return (this.currentPage - 1) * this.paginationMeta?.limit + 1;
   }
 
   get currentResultEnd(): number {
-    const end = this.currentResultStart + this.paginationMeta.limit - 1;
+    const end = this.currentResultStart + this.paginationMeta?.limit - 1;
     return end < this.count ? end : this.count;
   }
 
-  setNewPage(page: number): void {
+  emitNewPage(page: number): void {
     this.paginated.emit(page);
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="reportsData$ | async as reportsData; else loadingRef" class="deltagare-tab-reports">
+<div class="deltagare-tab-reports">
   <form [formGroup]="reportPickerFormGroup" class="deltagare-tab-reports__form">
     <h3>Skapa ny rapport</h3>
     <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
@@ -16,25 +16,26 @@
       Du måste välja en rapporttyp
     </digi-form-validation-message>
   </form>
-  <div
+  <div class="deltagare-tab-reports__cta-wrapper">
-    *ngIf="currentGenomforandeReferens$ | async as currentGenomforandeReferens"
-    class="deltagare-tab-reports__cta-wrapper"
-  >
     <digi-ng-link-button
-      (click)="onFormSubmitted($event, reportsFormControl.value, currentGenomforandeReferens)"
+      (click)="onFormSubmitted($event, reportsFormControl.value)"
       afText="Skapa ny rapport"
     ></digi-ng-link-button>
   </div>
-  <div>
+  <ng-container *ngIf="reportsData; else loadingRef">
     <h3>Inskickade rapporter</h3>
     <msfa-reports-list
-      (paginated)="setNewPage($event)"
+      *ngIf="reportsData.data.length; else noReports"
-      [paginationMeta]="reportsData.meta"
       [reports]="reportsData.data"
+      [paginationMeta]="reportsData.meta"
+      (paginated)="emitNewPage($event)"
     ></msfa-reports-list>
-  </div>
+  </ng-container>
 </div>
 
+<ng-template #noReports>
+  <p>Inga rapporter finns registrerad.</p>
+</ng-template>
 <ng-template #loadingRef>
   <msfa-loader type="padded"></msfa-loader>
 </ng-template>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts

@@ -1,11 +1,9 @@
 import { FormSelectItem } from '@af/digi-ng/_form/form-select';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
-import { ReportsData } from '@msfa-models/reports.model';
+import { ReportsData } from '@msfa-models/report.model';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { RequiredValidator } from '@msfa-utils/validators/required.validator';
-import { distinctUntilChanged, map, shareReplay, switchMap } from 'rxjs/operators';
-import { DeltagareCardService } from '../../deltagare-card.service';
 
 @Component({
   selector: 'msfa-deltagare-tab-reports',
@@ -14,80 +12,50 @@ import { DeltagareCardService } from '../../deltagare-card.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabReportsComponent {
+  @Input() reportsData: ReportsData;
+  @Input() genomforandeReferens: number;
+  @Output() reportsPaginated = new EventEmitter<number>();
+
   readonly reportsFormControlName = 'reports';
-  public currentGenomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
-    map(params => params.genomforandeReferens as string),
-    distinctUntilChanged(
-      ([prevGenomforandeReferens], [currGenomforandeReferens]) => prevGenomforandeReferens === currGenomforandeReferens
-    ),
-    map(genomforandeReferens => +genomforandeReferens)
-  );
   reportPickerFormGroup: FormGroup = this.formBuilder.group({
-    // eslint-disable-next-line  @typescript-eslint/unbound-method
+    reports: this.formBuilder.control('', [RequiredValidator('Rapporttyp')]),
-    reports: this.formBuilder.control('', [Validators.required]),
   });
   selectableReportTypes: Array<FormSelectItem> = [
     { name: 'Avvikelse', value: 'avvikelse' },
     { name: 'Gemensam Planering', value: 'planering' },
   ];
-  selectedReportType: FormSelectItem;
-  private _limit$ = new BehaviorSubject<number>(20);
-  private _page$ = new BehaviorSubject<number>(1);
-  reportsData$: Observable<ReportsData> = combineLatest([
-    this.currentGenomforandeReferens$,
-    this._limit$,
-    this._page$,
-  ]).pipe(
-    switchMap(([genomforandeReferens, limit, page]) =>
-      this.deltagareCardService.fetchReports$(limit, page, genomforandeReferens)
-    ),
-    shareReplay(1)
-  );
-  private _type$ = new BehaviorSubject<FormSelectItem>(null);
 
-  constructor(
+  constructor(private formBuilder: FormBuilder, private router: Router) {}
-    private activatedRoute: ActivatedRoute,
-    private deltagareCardService: DeltagareCardService,
-    private formBuilder: FormBuilder,
-    private router: Router
-  ) {}
 
   get reportsFormControl(): AbstractControl | null {
     return this.reportPickerFormGroup?.get(this.reportsFormControlName);
   }
 
-  onFormSubmitted(event: Event, reportType: string, genomforandeReferens: number): void {
+  onFormSubmitted(event: Event, reportType: string): void {
     event.preventDefault();
+    this.reportsFormControl.markAsTouched();
+
+    if (this.reportsFormControl.invalid) {
+      return;
+    }
 
     switch (reportType) {
       case 'planering':
-        if (this.reportsFormControl.valid) {
+        void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/gemensam-planering`);
-          void this.router.navigate([`/deltagare/${genomforandeReferens}/gemensam-planering`]);
-        }
         break;
       case 'avvikelse':
-        if (this.reportsFormControl.valid) {
+        void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/avvikelserapport`);
-          void this.router.navigate([`/deltagare/${genomforandeReferens}/avvikelserapport`]);
-        }
         break;
       default:
         return;
     }
 
-    this.reportsFormControl.markAsTouched();
-
     if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
       return;
     }
-
-    const selectedReportType = this.selectableReportTypes.find(report => {
-      return report.value === this.reportsFormControl.value;
-    });
-
-    this._type$.next(selectedReportType);
   }
 
-  setNewPage(page: number): void {
+  emitNewPage(page: number): void {
-    this._page$.next(page);
+    this.reportsPaginated.emit(page);
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html

@@ -31,7 +31,11 @@
           *ngIf="reportingTabVisible"
         >
           <ng-container *ngIf="activeTab === '1'">
-            <msfa-deltagare-tab-reports></msfa-deltagare-tab-reports>
+            <msfa-deltagare-tab-reports
+              [reportsData]="reportsData$ | async"
+              [genomforandeReferens]="currentGenomforandeReferens$ | async"
+              (reportsPaginated)="setNewPage($event)"
+            ></msfa-deltagare-tab-reports>
           </ng-container>
         </digi-navigation-tab>
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Feature } from '@msfa-enums/feature.enum';
 import { RoleEnum } from '@msfa-enums/role.enum';
 import { environment } from '@msfa-environment';
+import { PaginationParams } from '@msfa-models/api/params.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { ContactInformation } from '@msfa-models/contact-information.model';
 import { Disability } from '@msfa-models/disability.model';
@@ -10,6 +11,7 @@ import { DriversLicense } from '@msfa-models/drivers-license.model';
 import { Education } from '@msfa-models/education.model';
 import { Handledare } from '@msfa-models/handledare.model';
 import { HighestEducation } from '@msfa-models/highest-education.model';
+import { ReportsData } from '@msfa-models/report.model';
 import { Role } from '@msfa-models/role.model';
 import { WorkExperience } from '@msfa-models/work-experience.model';
 import { UserService } from '@msfa-services/api/user.service';
@@ -25,6 +27,12 @@ import { DeltagareCardService } from './deltagare-card.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareCardComponent {
+  private _reportsParams$ = new BehaviorSubject<PaginationParams>({ page: 1, limit: 20 });
+  private _activeFeatures: Feature[] = environment.activeFeatures;
+  private _activeTab$ = new BehaviorSubject<string>('0');
+  activeTab$: Observable<string> = this._activeTab$.asObservable();
+  private _userRoles: Role[] = this.userService.userRolesSnapshot;
+
   currentGenomforandeReferens$: Observable<number> = this.activatedRoute.params.pipe(
     map(params => params.genomforandeReferens as string),
     distinctUntilChanged(
@@ -69,6 +77,12 @@ export class DeltagareCardComponent {
     distinctUntilChanged((prevAvrop, currAvrop) => prevAvrop.id === currAvrop.id),
     switchMap(avropInformation => this.handledareService.fetchAvailableHandledare$([avropInformation.id]))
   );
+  reportsData$: Observable<ReportsData> = combineLatest([this._reportsParams$, this.currentGenomforandeReferens$]).pipe(
+    switchMap(([params, genomforandeReferens]) =>
+      this.deltagareCardService.fetchReports$(genomforandeReferens, params)
+    ),
+    shareReplay(1)
+  );
   tab0Loading$: Observable<boolean> = combineLatest([this.contactInformation$, this.avropInformation$]).pipe(
     map(([contactInformation, avropInformation]) => !(contactInformation && avropInformation)),
     startWith(true)
@@ -93,10 +107,6 @@ export class DeltagareCardComponent {
     map(([disabilities, avropInformation, workLanguages]) => !(disabilities && avropInformation && workLanguages)),
     startWith(true)
   );
-  private _activeFeatures: Feature[] = environment.activeFeatures;
-  private _activeTab$ = new BehaviorSubject<string>('0');
-  activeTab$: Observable<string> = this._activeTab$.asObservable();
-  private _userRoles: Role[] = this.userService.userRolesSnapshot;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -136,4 +146,8 @@ export class DeltagareCardComponent {
   setActiveTab(tab: number): void {
     this._activeTab$.next(tab.toString());
   }
+
+  setNewPage(page: number): void {
+    this._reportsParams$.next({ ...this._reportsParams$.getValue(), page });
+  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
+import { PaginationParams } from '@msfa-models/api/params.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { ContactInformation } from '@msfa-models/contact-information.model';
 import { Disability } from '@msfa-models/disability.model';
 import { DriversLicense } from '@msfa-models/drivers-license.model';
 import { Education } from '@msfa-models/education.model';
 import { HighestEducation } from '@msfa-models/highest-education.model';
-import { ReportsData } from '@msfa-models/reports.model';
+import { ReportsData } from '@msfa-models/report.model';
 import { WorkExperience } from '@msfa-models/work-experience.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { HandledareService } from '@msfa-services/handledare.service';
@@ -52,7 +53,7 @@ export class DeltagareCardService {
     return this.deltagareApiService.fetchDisabilities$(genomforandeReferens);
   }
 
-  public fetchReports$(limit: number, page: number, genomforandeReferens: number): Observable<ReportsData> {
+  public fetchReports$(genomforandeReferens: number, params: PaginationParams): Observable<ReportsData> {
-    return this.deltagareApiService.fetchReports$(limit, page, genomforandeReferens);
+    return this.deltagareApiService.fetchReports$(genomforandeReferens, params);
   }
 }

apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts

@@ -1,4 +1,7 @@
 export enum ReportType {
   FRANVARO = 'franvaro',
   AVVIKELSE = 'avvikelse',
+  GemensamPlanering = 'Gemensam planering',
+  Franvaro = 'Frånvaro',
+  Avvikelse = 'Avvikelse',
 }

apps/mina-sidor-fa/src/app/shared/models/api/report.response.model.ts

@@ -1,13 +1,15 @@
+import { ReportType } from '@msfa-enums/report-type.enum';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
-import { Report } from '@msfa-models/reports.model';
 
 export interface ReportResponse {
-  data: Report[];
+  id: string;
+  genomforandeReferens: string;
+  typAvRapport: ReportType;
+  inskickadDatum: string;
+  statusRapport: string;
+  ciamUserId: string;
+}
+export interface ReportsDataResponse {
+  data: ReportResponse[];
   meta: PaginationMeta;
 }
-
-export interface ReportsApiResponseData {
-  type: string;
-  sendDate: Date;
-  status: string;
-}

apps/mina-sidor-fa/src/app/shared/models/report.model.ts

@@ -0,0 +1,29 @@
+import { ReportType } from '@msfa-enums/report-type.enum';
+import { ReportResponse } from './api/report.response.model';
+import { PaginationMeta } from './pagination-meta.model';
+
+export interface Report {
+  id: string;
+  genomforandeReferens: string;
+  type: string;
+  date: Date;
+  status: string;
+  ciamUserId: string;
+}
+
+export interface ReportsData {
+  data: Report[];
+  meta: PaginationMeta;
+}
+
+export function mapResponseToReport(data: ReportResponse): Report {
+  const { id, genomforandeReferens, typAvRapport, inskickadDatum, statusRapport, ciamUserId } = data;
+  return {
+    id,
+    genomforandeReferens,
+    type: (ReportType[typAvRapport] as string) || 'Okänd',
+    date: new Date(inskickadDatum),
+    status: statusRapport,
+    ciamUserId,
+  };
+}

apps/mina-sidor-fa/src/app/shared/models/reports.model.ts

@@ -1,22 +0,0 @@
-import { ReportsApiResponseData } from './api/report.response.model';
-import { PaginationMeta } from './pagination-meta.model';
-
-export interface Report {
-  type: string;
-  sendDate: Date;
-  status: string;
-}
-
-export interface ReportsData {
-  data: Report[];
-  meta: PaginationMeta;
-}
-
-export function mapReportsResponseToReport(data: ReportsApiResponseData): Report {
-  const { type, sendDate, status } = data;
-  return {
-    type,
-    sendDate,
-    status
-  }
-}

apps/mina-sidor-fa/src/app/shared/services/api/deltagare.api.service.ts

@@ -8,7 +8,8 @@ import { DisabilityResponse } from '@msfa-models/api/disability.response.model';
 import { DriversLicenseResponse } from '@msfa-models/api/drivers-license.response.model';
 import { EducationsResponse } from '@msfa-models/api/educations.response.model';
 import { HighestEducationResponse } from '@msfa-models/api/highest-education.response.model';
-import { DeltagareParams, Params } from '@msfa-models/api/params.model';
+import { DeltagareParams, PaginationParams, Params } from '@msfa-models/api/params.model';
+import { ReportsDataResponse } from '@msfa-models/api/report.response.model';
 import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
 import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
 import { WorkLanguagesResponse } from '@msfa-models/api/work-languages.response.model';
@@ -20,7 +21,7 @@ import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/driver
 import { Education, mapResponseToEducation } from '@msfa-models/education.model';
 import { CustomError, errorToCustomError } from '@msfa-models/error/custom-error';
 import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
-import { ReportsData } from '@msfa-models/reports.model';
+import { mapResponseToReport, ReportsData } from '@msfa-models/report.model';
 import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
 import { sortFromToDates } from '@msfa-utils/sort.util';
 import { BehaviorSubject, Observable, of } from 'rxjs';
@@ -31,6 +32,7 @@ import { catchError, map } from 'rxjs/operators';
 })
 export class DeltagareApiService {
   private _apiBaseUrl = `${environment.api.url}/deltagare`;
+  private _apiReportUrl = `${environment.api.url}/handlingar`;
   private _deltagareLoading$ = new BehaviorSubject<boolean>(false);
   public deltagareLoading$: Observable<boolean> = this._deltagareLoading$.asObservable();
   private _showUnauthorizedError$ = new BehaviorSubject<boolean>(false);
@@ -75,28 +77,24 @@ export class DeltagareApiService {
       );
   }
 
-  public fetchReports$(limit: number, page: number, genomforandeReferens: number): Observable<ReportsData> {
+  public fetchReports$(genomforandeReferens: number, paginationParams: PaginationParams): Observable<ReportsData> {
-    return of({ data: [], meta: null });
+    const { page, limit } = paginationParams;
+    const params: { [param: string]: string | string[] } = {
+      genomforandeReferens: genomforandeReferens.toString(),
+      page: page.toString(),
+      limit: limit.toString(),
+    };
 
-    // TODO:  When the API/Mock-API has implemented the endpoint, we can remove use following code
+    return this.httpClient
-    //        to make API-requests.
+      .get<ReportsDataResponse>(`${this._apiReportUrl}`, { params })
-
+      .pipe(
-    // const params: { [param: string]: string | string[] } = {
+        map(({ data, meta }) => ({ data: data.map(report => mapResponseToReport(report)), meta })),
-    //   id: genomforandeReferens.toString(),
+        catchError((error: Error) => {
-    //   limit: limit.toString(),
+          throw new CustomError(
-    //   page: page.toString(),
+            errorToCustomError({ ...error, message: `Kunde inte hämta rapporter.\n\n${error.message}` })
-    // };
+          );
-
+        })
-    // return this.httpClient
+      );
-    //   .get<ReportResponse>(`${this._apiBaseUrl}/report`, {
-    //     params,
-    //   })
-    //   .pipe(
-    //     map(({ data, meta }) => {
-    //       data.sort((reportA, reportB) => (+reportA.sendDate < +reportB.sendDate ? 1 : -1));
-    //       return { data: data.map(report => mapReportsResponseToReport(report)), meta };
-    //     })
-    //   );
   }
 
   public fetchContactInformation$(genomforandeReferens: number): Observable<ContactInformation> {