Merge pull request #68 in TEA/mina-sidor-fa-web from TV-204-reporting-participant-card to develop

Squashed commit of the following:

commit f5bb97c0a50a84095ac147c775eb681943c2a5c1
Merge: 83b6a0b b06436a
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 20:24:46 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 83b6a0b2caa2267fc7dc682e8d846954d81ee4fc
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 08:11:07 2021 +0200

    TV-204 added endpoint for report

commit b54856d0d9bca9a97a342332679ee13ddbb0edb5
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 08:10:31 2021 +0200

    TV-204  test and linting issues

commit 22129a545a15137cd11bf3356185f496352ad72a
Merge: 39ab301 126c6e3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Sep 8 07:39:43 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 39ab3013798290b4fe34f997fd1525b4c30230bb
Merge: 50a0064 d9938cc
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Sep 2 23:13:35 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 50a006429b9712e11798e33659ce42d17aef6526
Merge: 67de27d 1f26e80
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 17:29:41 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 67de27dd36999635738046794609d3221f33c1b8
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 17:19:10 2021 +0200

    TV-204 review fixes

commit 005aea20d647848ba3ddf18b0538fdaad5bd011d
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Thu Aug 26 08:40:55 2021 +0200

    TV-204 Small fix to report-type.enum

commit 981ac20a147d6cde3e594b8475841fa4c5703ea3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Aug 26 00:18:20 2021 +0200

    TV-204 pass selected report type to deltagare.service

commit e21f8e1abb78deff2b9b06da6401ed9463a5d414
Merge: 3e059ed 0661d22
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 17:54:02 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit 3e059ed219bc95bd2cbd9a89ab4bd8f46b573c37
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 17:37:46 2021 +0200

    TV-204 deleted mockdata

commit af3aaf9018de004ea8cdc7d92505f68ce4597410
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 16:27:03 2021 +0200

    TV-204 changed to digi-ng-form-select, validation control

commit d844fb4bcc4196f7d412573ccc21c95c0de70e8f
Author: bjornahlen <bjorn.ahlen@arbetsformedlingen.se>
Date:   Wed Aug 25 13:35:17 2021 +0200

    TV-204 Changes to digi-form-select tag

commit 91957c7256594e1e2953262b03bf13b6b2704c8e
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 10:38:40 2021 +0200

    TV-204 deleted unused modules

commit 130ef0afd1a8f88b5065dce5aabdafec5fb27862
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Aug 25 10:22:48 2021 +0200

    TV-204 updated spec-file

commit 51bc86df92c638b6613fbd24d12054fbaf792b28
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 17:27:57 2021 +0200

    TV-204 changed to DigiNgLinkButton

commit ad2f5da7b4f1de798bcb4766e66416ca41bd4a6e
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 11:25:47 2021 +0200

    TV-204 api GET endpoint for reports is missing

commit 3effe1a4b74a55c82f697cb2c8f6221fc2558b83
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 11:17:04 2021 +0200

    moved code

commit 5cbb0d51adee361f8162f5319cc728a614002b19
Merge: fa0a2f9 59ce393
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 10:49:37 2021 +0200

    Merge branch 'develop' into TV-204-reporting-participant-card

commit fa0a2f9ebf5f8d8c218a50870a07194fa95d5213
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Aug 24 10:16:11 2021 +0200

    TV-204 prepair get request for reports, paginering

... and 11 more commits

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.scss

@@ -1,9 +1,9 @@
 @import 'variables/gutters';
 
 .employees-list {
-  &__column-head {
+  // &__column-head {
-    // padding: 0;
+  //   // padding: 0;
-  }
+  // }
 
   th,
   td {

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

@@ -0,0 +1,33 @@
+<div class="reports">
+  <digi-table af-variation="secondary">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col" *ngFor="let column of columnHeaders">{{column.label}}</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr *ngFor="let report of reports">
+          <th scope="row">
+            <a [routerLink]="report?.id">{{ report.type }}</a>
+          </th>
+          <td>{{ report.sendDate | localDate }}</td>
+          <td>{{ report.status }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </digi-table>
+
+  <digi-navigation-pagination
+    *ngIf="totalPage > 1"
+    class="reports__pagination"
+    [afTotalPages]="totalPage"
+    [afCurrentResultStart]="currentResultStart"
+    [afCurrentResultEnd]="currentResultEnd"
+    [afTotalResults]="count"
+    (afOnPageChange)="setNewPage($event.detail)"
+    af-result-name="reports"
+  >
+  </digi-navigation-pagination>
+</div>

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

@@ -0,0 +1,8 @@
+@import 'variables/gutters';
+
+.reports {
+  &__pagination {
+    display: block;
+    margin-top: var(--digi--layout--gutter);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { ReportsComponent } from './reports.component';
+
+describe('ReportsComponent', () => {
+  let component: ReportsComponent;
+  let fixture: ComponentFixture<ReportsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ReportsComponent],
+      imports: [RouterTestingModule]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { Report } from '@msfa-models/reports.model';
+
+@Component({
+  selector: 'msfa-reports',
+  templateUrl: './reports.component.html',
+  styleUrls: ['./reports.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReportsComponent {
+  @Input() reports: Report[];
+  @Input() paginationMeta: PaginationMeta;
+  @Output() paginated = new EventEmitter<number>();
+
+  columnHeaders: { label: string; key: keyof Report }[] = [
+    {
+      label: 'Typ av rapport',
+      key: 'type'
+    },
+    {
+      label: 'Inskickad datum',
+      key: 'sendDate',
+    },
+    {
+      label: 'Status',
+      key: 'status',
+    }
+  ];
+
+  get currentPage(): number {
+    return this.paginationMeta.page;
+  }
+
+  get totalPage(): number {
+    return this.paginationMeta?.totalPage;
+  }
+
+  get count(): number {
+    return this.paginationMeta.count;
+  }
+
+  get currentResultStart(): number {
+    return (this.currentPage - 1) * this.paginationMeta.limit + 1;
+  }
+
+  get currentResultEnd(): number {
+    const end = this.currentResultStart + this.paginationMeta.limit - 1;
+    return end < this.count ? end : this.count;
+  }
+
+  setNewPage(page: number): void {
+    this.paginated.emit(page);
+  }
+}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { ReportsComponent } from './reports.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ReportsComponent],
+  imports: [CommonModule, RouterModule, LocalDatePipeModule],
+  exports: [ReportsComponent]
+})
+export class ReportsModule { }

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

@@ -188,6 +188,47 @@
               </div>
             </div>
           </digi-navigation-tab>
+
+          <digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
+            <div class="deltagare-card__select-report">
+              <h3>Skapa ny rapport</h3>
+              <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
+              <form [formGroup]="reportPickerFormGroup">
+                <digi-ng-form-select
+                  [formControlName]="avvikelseFormControlName"
+                  afLabel="Välj rapporttyp"
+                  afPlaceholder="Välj rapporttyp"
+                  [afSelectItems]="selectableReportTypes"
+                  [afDisableValidStyle]="true"
+                  [afRequired]="true"
+                  [afInvalid]="avvikelseFormControl.invalid && avvikelseFormControl.touched"
+                >
+                </digi-ng-form-select>
+                <digi-form-validation-message
+                  af-variation="error"
+                  *ngIf="avvikelseFormControl.invalid && avvikelseFormControl.touched"
+                >
+                  Du måste välja en rapporttyp
+                </digi-form-validation-message>
+              </form>
+            </div>
+            <div class="deltagare-card__cta-wrapper">
+              <digi-ng-link-button
+                afText="Skapa ny rapport"
+                [afRoute]="avvikelseFormControl.valid ? ['/deltagare/rapportera', deltagare.id] : null"
+                (click)="onFormSubmitted($event)"
+              ></digi-ng-link-button>
+            </div>
+            <div>
+              <h3>Inskickade rapporter</h3>
+              <msfa-reports
+                *ngIf="reportsData$ | async as reportsData, else loadingRef"
+                [reports]="reportsData.data"
+                [paginationMeta]="reportsData?.meta"
+                (paginated)="setNewPage($event)"
+              ></msfa-reports>
+            </div>
+          </digi-navigation-tab>
         </digi-navigation-tabs>
       </digi-typography>
     </div>

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

@@ -14,6 +14,15 @@
     flex-basis: 0;
   }
 
+  &__select-report {
+    max-width: var(--digi--typography--text--max-width);
+  }
+
+  &__cta-wrapper {
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
+  }
+
   dd {
     margin: 0 0 1rem;
   }

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

@@ -1,6 +1,7 @@
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
 import { DeltagareCardComponent } from './deltagare-card.component';
@@ -13,7 +14,7 @@ describe('DeltagareCardComponent', () => {
     waitForAsync(() => {
       void TestBed.configureTestingModule({
         declarations: [DeltagareCardComponent, LayoutComponent],
-        imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule],
+        imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule, ReactiveFormsModule],
       }).compileComponents();
     })
   );

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

@@ -1,7 +1,10 @@
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@msfa-enums/icon-type.enum';
 import { Deltagare } from '@msfa-models/deltagare.model';
+import { ReportsData } from '@msfa-models/reports.model';
 import { WorkExperience } from '@msfa-models/work-experience.model';
 import { DeltagareService } from '@msfa-services/api/deltagare.service';
 import { Observable } from 'rxjs';
@@ -15,6 +18,18 @@ import { map } from 'rxjs/operators';
 })
 export class DeltagareCardComponent {
   deltagare$: Observable<Deltagare> = this.deltagareService.deltagare$;
+  reportsData$: Observable<ReportsData> = this.deltagareService.reportsData$;
+
+  readonly avvikelseFormControlName = 'avvikelse';
+
+  reportPickerFormGroup: FormGroup = this.formBuilder.group({
+      // eslint-disable-next-line  @typescript-eslint/unbound-method
+    avvikelse: this.formBuilder.control('', [Validators.required]),
+  });
+
+  selectableReportTypes: Array<FormSelectItem> = [{ name: 'Avvikelse', value: 'avvikelse' }];
+  selectedReportType: FormSelectItem;
+
   firstVisibleWorkExperiences$: Observable<WorkExperience[]> = this.deltagare$.pipe(
     map(deltagare => deltagare.workExperiences.slice(0, 2))
   );
@@ -25,11 +40,38 @@ export class DeltagareCardComponent {
   iconType = IconType;
   accordionExpanded = false;
 
-  constructor(private activatedRoute: ActivatedRoute, private deltagareService: DeltagareService) {
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private deltagareService: DeltagareService,
+    private formBuilder: FormBuilder) {
     this.deltagareService.setCurrentDeltagareId(this.activatedRoute.snapshot.params.deltagareId);
   }
 
+  get avvikelseFormControl(): AbstractControl | null {
+    return this.reportPickerFormGroup?.get(this.avvikelseFormControlName);
+  }
+
   toggleAccordionExpanded(): void {
     this.accordionExpanded = !this.accordionExpanded;
   }
+
+  setNewPage(page: number): void {
+    this.deltagareService.setPage(page);
+  }
+
+  onFormSubmitted(event: Event): void {
+    event.preventDefault();
+
+    this.avvikelseFormControl.markAsTouched();
+
+    if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
+      return;
+    }
+
+    const selectedReportType = this.selectableReportTypes.find(report => {
+      return report.value === this.avvikelseFormControl.value;
+    })
+
+    this.deltagareService.setReportType(selectedReportType);
+  }
 }

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

@@ -1,14 +1,18 @@
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
+import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { ReportsModule } from './components/reports/reports.module';
 import { DeltagareCardComponent } from './deltagare-card.component';
 
 @NgModule({
@@ -17,6 +21,7 @@ import { DeltagareCardComponent } from './deltagare-card.component';
   imports: [
     CommonModule,
     RouterModule.forChild([{ path: '', component: DeltagareCardComponent }]),
+    ReportsModule,
     LayoutModule,
     DigiNgLinkInternalModule,
     IconModule,
@@ -25,7 +30,10 @@ import { DeltagareCardComponent } from './deltagare-card.component';
     HideTextModule,
     DigiNgSkeletonBaseModule,
     DigiNgPopoverModule,
+    DigiNgLinkButtonModule,
+    DigiNgFormSelectModule,
+    ReactiveFormsModule
   ],
   exports: [DeltagareCardComponent],
 })
-export class DeltagareCardModule {}
+export class DeltagareCardModule { }

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

@@ -0,0 +1,4 @@
+export enum ReportStatus {
+  SKICKAD = 'Skickad',
+  OKAND = 'Okänd',
+}

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

@@ -0,0 +1,4 @@
+export enum ReportType {
+  AVVIKELSERAPPORT = 'Avvikelserapport',
+  OKAND = 'Okänd',
+}

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

@@ -0,0 +1,13 @@
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { Report } from '@msfa-models/reports.model';
+
+export interface ReportResponse {
+  data: Report[];
+  meta: PaginationMeta;
+}
+
+export interface ReportsApiResponseData {
+  type: string;
+  sendDate: Date;
+  status: string;
+}

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

@@ -0,0 +1,22 @@
+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.service.ts

@@ -1,3 +1,4 @@
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
@@ -10,6 +11,7 @@ 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 { ReportResponse } from '@msfa-models/api/report.response.model';
 import { Params } from '@msfa-models/api/params.model';
 import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
 import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
@@ -20,13 +22,14 @@ import {
   Deltagare,
   DeltagareCompact,
   DeltagareCompactData,
-  mapResponseToDeltagareCompact,
+  mapResponseToDeltagareCompact
 } from '@msfa-models/deltagare.model';
 import { Disability, mapResponseToDisability } from '@msfa-models/disability.model';
 import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/drivers-license.model';
 import { Education, mapResponseToEducation } from '@msfa-models/education.model';
 import { errorToCustomError } from '@msfa-models/error/custom-error';
 import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
+import { mapReportsResponseToReport, ReportsData } from '@msfa-models/reports.model';
 import { Sort } from '@msfa-models/sort.model';
 import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
 import { ErrorService } from '@msfa-services/error.service';
@@ -44,6 +47,8 @@ export class DeltagareService extends UnsubscribeDirective {
   private _page$ = new BehaviorSubject<number>(1);
   private _sort$ = new BehaviorSubject<Sort<keyof DeltagareCompact>>({ key: 'fullName', order: SortOrder.ASC });
   public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
+  private _reportType$ = new BehaviorSubject<FormSelectItem>(null);
+  reportType$: Observable<FormSelectItem> = this._reportType$.asObservable();
   private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
   public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
 
@@ -73,6 +78,11 @@ export class DeltagareService extends UnsubscribeDirective {
     switchMap(([limit, page, sort, onlyMyDeltagare]) => this._fetchAllDeltagare$(limit, page, sort, onlyMyDeltagare))
   );
 
+  public reportsData$: Observable<ReportsData> = combineLatest([
+    this._limit$,
+    this._page$
+  ]).pipe(switchMap(([limit, page]) => this._fetchReports$(limit, page)));
+
   public setSort(newSortKey: keyof DeltagareCompact): void {
     const currentSort = this._sort$.getValue();
     const order =
@@ -112,6 +122,32 @@ export class DeltagareService extends UnsubscribeDirective {
       );
   }
 
+  private _fetchReports$(
+    limit: number,
+    page: number
+  ): Observable<ReportsData> {
+    const params: { [param: string]: string | string[] } = {
+      limit: limit.toString(),
+      page: page.toString()
+    };
+
+    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 setReportType(reportType: FormSelectItem): void {
+    this._reportType$.next(reportType);
+  }
+
   public setCurrentDeltagareId(currentDeltagareId: string): void {
     this._deltagare$.next(null);
     this._currentDeltagareId$.next(currentDeltagareId);
@@ -158,8 +194,8 @@ export class DeltagareService extends UnsubscribeDirective {
       map(({ data }) =>
         data.utbildningar
           ? data.utbildningar.sort((a, b) =>
-              sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
+            sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
-            )
+          )
           : []
       ),
       map(educations => educations.map(utbildning => mapResponseToEducation(utbildning))),
@@ -253,27 +289,27 @@ export class DeltagareService extends UnsubscribeDirective {
           workExperiences,
           avropInformation,
         ]: [
-          ContactInformation,
+            ContactInformation,
-          DriversLicense,
+            DriversLicense,
-          HighestEducation,
+            HighestEducation,
-          Education[],
+            Education[],
-          string,
+            string,
-          string[],
+            string[],
-          Disability[],
+            Disability[],
-          WorkExperience[],
+            WorkExperience[],
-          Avrop
+            Avrop
-        ]) => ({
+          ]) => ({
-          id,
+            id,
-          ...contactInformation,
+            ...contactInformation,
-          driversLicense,
+            driversLicense,
-          highestEducation,
+            highestEducation,
-          educations,
+            educations,
-          translator,
+            translator,
-          workLanguages,
+            workLanguages,
-          disabilities,
+            disabilities,
-          workExperiences,
+            workExperiences,
-          avropInformation,
+            avropInformation,
-        })
+          })
       )
     );
   }