feat(Deltagarlista): Lade till startdatum, slutdatum, avbrott samt Visa händelser, som öppnar en modal med en deltagares händelser (TV-606)

Squashed commit of the following: commit 932d0ce27b416652e241803e04dd9e98c6ca5757 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Sep 22 08:17:56 2021 +0200 fix lint and fails commit b988fb7dc443d336e1e572d1a1f2993f7ed8f43b Merge: 7eb75ec 5846c2c Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Sep 22 07:54:00 2021 +0200 Merge branch 'develop' into feature/TV-606-deltagarlista-add-columns commit 7eb75ec659a3a25386f76dd9aed1806fd603c35b Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Sep 22 07:53:54 2021 +0200 refactor commit 3bfe1fe1d7d17f8ba3dcdc6d587d957ff584ef6c Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 11:53:20 2021 +0200 Update deltagare-list-handelser-dialog.component.scss commit 4c7275e24ca9fdf70fb26db8e67a747c2a26b825 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 11:51:08 2021 +0200 set dialog width to auto commit 1feb3b6f5779a810881a7592325dd9f1bf33d490 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 11:43:51 2021 +0200 added captions to tables commit 4b4137cd9ae8e4084ea6172119449d247c591c40 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 11:06:16 2021 +0200 Update server.js commit 203609c380f2d47ce248b94ed06e0dfde293ef24 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 11:05:05 2021 +0200 full name in dialog heading commit 265c38aefe8d1380c7cc0ae1b87a12d276671ced Merge: e734ab5 2dd9d3d Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 10:58:29 2021 +0200 Merge branch 'develop' into feature/TV-606-deltagarlista-add-columns commit e734ab5c6fe00923642da70dfe92cdbafc0f0c79 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 10:58:26 2021 +0200 formatting commit 1a13a9fc6d9329e6b5d6fce7c77352ac75123a5a Merge: aa1552d 91eeb1d Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 10:49:07 2021 +0200 Merge branch 'develop' into feature/TV-606-deltagarlista-add-columns commit aa1552d0ad85b3213a0e062ee3f786849013566a Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Tue Sep 21 09:33:10 2021 +0200 add colums to handelser commit 584ecd2cb2b5265cc885dcab713582083dbe19bb Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 15:46:38 2021 +0200 fix test and lint commit 890e741c69a6408a72ca7899cc5cd76eccbdb498 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 15:39:18 2021 +0200 add dialog and fix mock apis commit fc8ee963619a8cd24e482c56180536219c83ec28 Merge: 422563b 8da6899 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 14:14:49 2021 +0200 Merge branch 'develop' into feature/TV-606-deltagarlista-add-columns commit 422563b5ecc8cc923b2e6791b5c533913ae6e4bd Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 13:01:45 2021 +0200 wip commit 2d83fa6e8a4d7459e8661bf7036388021bec460e Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 11:26:38 2021 +0200 added columns to deltagare list commit a9df57d4492ec3f08de8f20a3032c8a1a84fd8a4 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Mon Sep 20 10:21:27 2021 +0200 wip
2021-09-22 08:19:25 +02:00
parent 5846c2c5a4
commit 68c5c8d4a8
24 changed files with 382 additions and 70 deletions
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonType, ButtonVariation } from '@af/digi-ng/_button/button';
+import { ButtonSize, ButtonType } from '@af/digi-ng/_button/button';
 import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import {
  ChangeDetectionStrategy,
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.html
@@ -0,0 +1,33 @@
+<div class="deltagare-list-handelser">
+  <p>
+    Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong>
+  </p>
+
+  <digi-table af-size="s">
+    <table>
+      <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">Datum för händelse</th>
+        <th scope="col" class="deltagare-list-handelser__heading-row">Datum förklaring</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let handelse of deltagareHandelser$ | async">
+        <td class="deltagare-list-handelser__table-cell">{{handelse.receivedDate | date}}</td>
+        <td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
+          {{handelse.description}}</td>
+        <td class="deltagare-list-handelser__table-cell">{{handelse.tidpunkt | date }}</td>
+        <td class="deltagare-list-handelser__table-cell">{{handelse.tidpunktDescription}}</td>
+        <ng-template #isAvbrottCell>
+          <td class="deltagare-list-handelser__avbrott-cell">
+            <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
+            {{handelse.description}}</td>
+        </ng-template>
+      </tr>
+      </tbody>
+    </table>
+  </digi-table>
+</div>
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.scss
@@ -0,0 +1,26 @@
+.deltagare-list-handelser {
+
+  &__heading-row {
+    white-space: nowrap;
+  }
+
+
+  &__table-cell {
+    white-space: nowrap;
+  }
+
+  &__avbrott-cell {
+    color: var(--digi--ui--color--danger);
+  }
+}
+
+// DA: Digins maxbredd är hårt satt till 540px (!?) Bör vara auto tycker jag.
+// Vi kanske bör ersätta med egen dialog längre fram?
+::ng-deep .digi-ng-dialog-base__content {
+  width: auto;
+  max-width: 90vw !important;
+}
+::ng-deep .digi-ng-dialog__inner {
+  width: auto !important;
+  max-width: 90vw !important;
+}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.spec.ts
@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeltagareListHandelserDialogComponent } from './deltagare-list-handelser-dialog.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('DeltagareListHandelserDialogComponent', () => {
+  let component: DeltagareListHandelserDialogComponent;
+  let fixture: ComponentFixture<DeltagareListHandelserDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [HttpClientTestingModule],
+      declarations: [DeltagareListHandelserDialogComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeltagareListHandelserDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component.ts
@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { DeltagareHandelserApiService } from '@msfa-services/api/deltagare-handelser-api.service';
+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';
+
+@Component({
+  selector: 'msfa-deltagare-list-handelser-dialog',
+  templateUrl: './deltagare-list-handelser-dialog.component.html',
+  styleUrls: ['./deltagare-list-handelser-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeltagareListHandelserDialogComponent implements OnInit {
+  @Input() deltagare: DeltagareCompact;
+  iconType = IconType;
+  deltagareHandelser$: Observable<DeltagareHandelse[]>;
+
+  constructor(private deltagareHandelserApiService: DeltagareHandelserApiService) {}
+
+  ngOnInit(): void {
+    if (this.deltagare) {
+      this.deltagareHandelser$ = this.deltagareHandelserApiService.fetchDeltagareHandelser(
+        this.deltagare.genomforandeReferens
+      );
+    }
+  }
+}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.html
@@ -1,41 +1,76 @@
 <div class="deltagare-list">
  <digi-table af-variation="secondary">
-    <table>
+    <table class="deltagare-list__table">
+      <caption class="msfa__a11y-sr-only">Tabell med de deltagare som tillhör organistaionen.</caption>
      <thead>
-        <tr>
-          <th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
-            <button
-              class="deltagare-list__sort-button"
-              [attr.id]="'sort-button-' + column.key"
-              (click)="handleSort(column.key)"
-            >
-              {{column.label}}
-              <ng-container *ngIf="sort.key === column.key">
-                <digi-icon-caret-up
-                  class="deltagare-list__sort-icon"
-                  *ngIf="sort.order === orderType.ASC"
-                ></digi-icon-caret-up>
-                <digi-icon-caret-down
-                  class="deltagare-list__sort-icon"
-                  *ngIf="sort.order === orderType.DESC"
-                ></digi-icon-caret-down>
-              </ng-container>
-            </button>
-          </th>
-        </tr>
+      <tr>
+        <th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
+          <button
+            class="deltagare-list__sort-button"
+            [attr.id]="'sort-button-' + column.key"
+            (click)="handleSort(column.key)"
+          >
+            {{column.label}}
+            <ng-container *ngIf="sort.key === column.key">
+              <digi-icon-caret-up
+                class="deltagare-list__sort-icon"
+                *ngIf="sort.order === orderType.ASC"
+              ></digi-icon-caret-up>
+              <digi-icon-caret-down
+                class="deltagare-list__sort-icon"
+                *ngIf="sort.order === orderType.DESC"
+              ></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
+      </tr>
      </thead>
      <tbody>
-        <tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
-          <th scope="row">
-            <a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
-          </th>
-          <td>{{ singleDeltagare.tjanst }}</td>
-          <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
-        </tr>
+      <tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
+        <th scope="row">
+          <a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
+        </th>
+        <td>{{ singleDeltagare.tjanst }}</td>
+        <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
+        <td>{{ singleDeltagare.startdatumAvrop | date }}</td>
+        <td>
+          {{ singleDeltagare.slutdatumAvrop | date }}
+          <div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott">
+            <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
+            Avbrott
+          </div>
+        </td>
+        <td>
+          <digi-button
+            af-variation="tertiary"
+            af-size="s"
+            (click)="openHandelser(singleDeltagare)"
+            aria-controls="deltagareHandelser"
+          >
+            <digi-icon-info-circle-reg class="deltagare-list__info-icon" slot="icon"></digi-icon-info-circle-reg>
+            Visa händelser
+          </digi-button>
+        </td>
+      </tr>
      </tbody>
    </table>
  </digi-table>

+  <digi-ng-dialog
+    [afActive]="handelserDialogIsOpen$ | async"
+    (afOnPrimaryClick)="closeHandelser()"
+    (afOnInactive)="closeHandelser()"
+    *ngIf="handelserDialogDeltagare$ | async; let deltagare"
+    [afHeading]="'Händelser för ' + deltagare.fullName"
+    afHeadingLevel="h2"
+    [afPrimaryButtonText]="'Stäng'"
+    id="deltagareHandelser"
+  >
+    <msfa-deltagare-list-handelser-dialog
+      [deltagare]="deltagare"
+    ></msfa-deltagare-list-handelser-dialog>
+  </digi-ng-dialog>
+
  <digi-navigation-pagination
    *ngIf="totalPage > 1"
    class="deltagare-list__pagination"
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.scss
@@ -1,6 +1,11 @@
@import 'variables/gutters';

 .deltagare-list {
+
+  &__table {
+    font-size: var(--digi--typography--font-size--s);
+  }
+
  &__column-head {
    padding: 0;
  }
@@ -11,8 +16,7 @@
    border-width: 0;
    width: 100%;
    text-align: left;
-    padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s)
-      var(--digi--layout--gutter);
+    padding: var(--digi--layout--gutter--s) $digi--layout--gutter--l var(--digi--layout--gutter--s) var(--digi--layout--gutter);
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
@@ -32,4 +36,15 @@
    display: block;
    margin-top: var(--digi--layout--gutter);
  }
+
+  &__avbrott-alert {
+    display: inline-block;
+    color: var(--digi--ui--color--danger);
+  }
+
+  &__info-icon {
+    --digi-icon--height: 1rem;
+    --digi-icon--width: 1rem;
+  }
+
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.component.ts
@@ -3,6 +3,10 @@ import { SortOrder } from '@msfa-enums/sort-order.enum';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { Sort } from '@msfa-models/sort.model';
+import { IconType } from '@msfa-enums/icon-type.enum';
+import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';

@Component({
  selector: 'msfa-deltagare-list',
@@ -16,6 +20,12 @@ export class DeltagareListComponent {
  @Input() sort: Sort<keyof DeltagareCompact>;
  @Output() sorted = new EventEmitter<keyof DeltagareCompact>();
  @Output() paginated = new EventEmitter<number>();
+  handelserDialogDeltagare$ = new BehaviorSubject<DeltagareCompact | null>(null);
+
+  handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(genomforandereferens => !!genomforandereferens));
+
+  iconType = IconType;
+  errorSeverity = ErrorSeverity;

  columnHeaders: { label: string; key: keyof DeltagareCompact }[] = [
    { label: 'Namn', key: 'fullName' },
@@ -27,6 +37,18 @@ export class DeltagareListComponent {
      label: 'Utförande verksamhet',
      key: 'utforandeVerksamhet',
    },
+    {
+      label: 'Startdatum',
+      key: 'startdatumAvrop',
+    },
+    {
+      label: 'Slutdatum',
+      key: 'slutdatumAvrop',
+    },
+    {
+      label: 'Status',
+      key: 'genomforandeReferens',
+    },
  ];

  orderType = SortOrder;
@@ -59,4 +81,12 @@ export class DeltagareListComponent {
  setNewPage(page: number): void {
    this.paginated.emit(page);
  }
+
+  openHandelser(deltagareCompact: DeltagareCompact): void {
+    this.handelserDialogDeltagare$.next(deltagareCompact);
+  }
+
+  closeHandelser(): void {
+    this.handelserDialogDeltagare$.next(null);
+  }
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/components/deltagare-list/deltagare-list.module.ts
@@ -2,11 +2,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { DeltagareListComponent } from './deltagare-list.component';
+import { IconModule } from '@msfa-shared/components/icon/icon.module';
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
+import { DeltagareListHandelserDialogComponent } from './deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [DeltagareListComponent],
-  imports: [CommonModule, RouterModule],
+  declarations: [DeltagareListComponent, DeltagareListHandelserDialogComponent],
+  imports: [CommonModule, RouterModule, IconModule, DigiNgDialogModule],
  exports: [DeltagareListComponent],
 })
 export class DeltagareListModule {}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare.module.ts
@@ -4,10 +4,11 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { DeltagareListModule } from './components/deltagare-list/deltagare-list.module';
 import { DeltagareRoutingModule } from './deltagare-routing.module';
 import { DeltagareComponent } from './deltagare.component';
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [DeltagareComponent],
-  imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule],
+  imports: [CommonModule, DeltagareRoutingModule, LayoutModule, DeltagareListModule, DigiNgSkeletonBaseModule],
 })
 export class DeltagareModule {}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.component.ts
@@ -1,18 +1,12 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'msfa-periodisk-redovisning',
  templateUrl: './periodisk-redovisning.component.html',
  styleUrls: ['./periodisk-redovisning.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PeriodiskRedovisningComponent implements OnInit {
+export class PeriodiskRedovisningComponent {
  currentStep = 1;
  sendRequest = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
 }
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-report/pages/periodisk-redovisning/periodisk-redovisning.module.ts
@@ -3,10 +3,9 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { ReportLayoutModule } from '../../../../shared/report-layout/report-layout-module';
+import { ReportLayoutModule } from '../../../../shared/report-layout/report-layout.module';
 import { PeriodiskRedovisningComponent } from './periodisk-redovisning.component';

-
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [PeriodiskRedovisningComponent],
@@ -15,8 +14,8 @@ import { PeriodiskRedovisningComponent } from './periodisk-redovisning.component
    RouterModule.forChild([{ path: '', component: PeriodiskRedovisningComponent }]),
    LayoutModule,
    ReactiveFormsModule,
-    ReportLayoutModule
+    ReportLayoutModule,
  ],
-  exports: [PeriodiskRedovisningComponent]
+  exports: [PeriodiskRedovisningComponent],
 })
-export class PeriodiskRedovisningModule { }
+export class PeriodiskRedovisningModule {}
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ReportLayoutComponent } from './report-layout.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReportLayoutModule } from './report-layout.module';
+import { RouterTestingModule } from '@angular/router/testing';

 describe('ReportLayoutComponent', () => {
  let component: ReportLayoutComponent;
@@ -8,9 +10,8 @@ describe('ReportLayoutComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ ReportLayoutComponent ]
-    })
-    .compileComponents();
+      imports: [ReportLayoutModule, RouterTestingModule, HttpClientTestingModule],
+    }).compileComponents();
  });

  beforeEach(() => {
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.module.ts
@@ -4,11 +4,12 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { ReportLayoutComponent } from './report-layout.component';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
+import { RouterModule } from '@angular/router';

@NgModule({
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    declarations: [ReportLayoutComponent],
-    imports: [CommonModule, LayoutModule, DigiNgProgressProgressbarModule, HideTextModule],
-    exports: [ReportLayoutComponent]
-  })
-  export class ReportLayoutModule {}
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ReportLayoutComponent],
+  imports: [CommonModule, RouterModule, LayoutModule, DigiNgProgressProgressbarModule, HideTextModule],
+  exports: [ReportLayoutComponent],
+})
+export class ReportLayoutModule {}
--- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.ts
@@ -9,7 +9,6 @@ import {
  Output,
  Renderer2,
  ViewChild,
-  ChangeDetectorRef,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DropdownTriggerForDirective } from '@msfa-shared/components/dropdown/dropdown-trigger-for.directive';
@@ -55,7 +54,7 @@ export class MultiselectComponent implements AfterViewInit, ControlValueAccessor
  private propagateChange: PropagateChangeFn;
  private propagateTouched: PropagateTouchedFn;

-  constructor(private renderer: Renderer2, private changeDetectionRef: ChangeDetectorRef) {}
+  constructor(private renderer: Renderer2) {}

  // Allows Angular to update the model.
  // Update the model and changes needed for the view here.
--- a/apps/mina-sidor-fa/src/app/shared/models/api/deltagare.response.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/api/deltagare.response.model.ts
@@ -16,6 +16,10 @@ export interface DeltagareCompactResponse {
  tjanst: string;
  utforandeVerksamhet: string;
  utforandeAdress: string;
+  hasAvbrott: boolean;
+  genomforandeReferens: string;
+  startdatumAvrop: Date;
+  slutdatumAvrop: Date;
 }

 export interface DeltagareResponse {
--- 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
@@ -0,0 +1,11 @@
+export interface DeltagareHandelse {
+  description: string;
+  receivedDate: Date;
+  isAvbrott: boolean;
+  tidpunkt: Date;
+  tidpunktDescription: string;
+}
+
+export interface DeltagareHandelseApiResponse {
+  data: DeltagareHandelse[];
+}
--- a/apps/mina-sidor-fa/src/app/shared/models/deltagare.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/deltagare.model.ts
@@ -18,6 +18,10 @@ export interface DeltagareCompact {
  tjanst: string;
  utforandeVerksamhet: string;
  utforandeAdress: string;
+  hasAvbrott: boolean;
+  genomforandeReferens: string;
+  startdatumAvrop: Date;
+  slutdatumAvrop: Date;
 }

 export interface Deltagare {
@@ -45,7 +49,18 @@ export interface DeltagareCompactData {
 }

 export function mapResponseToDeltagareCompact(data: DeltagareCompactResponse): DeltagareCompact {
-  const { sokandeId, fornamn, efternamn, tjanst, utforandeVerksamhet, utforandeAdress } = data;
+  const {
+    sokandeId,
+    fornamn,
+    efternamn,
+    tjanst,
+    utforandeVerksamhet,
+    utforandeAdress,
+    hasAvbrott,
+    genomforandeReferens,
+    startdatumAvrop,
+    slutdatumAvrop,
+  } = data;
  return {
    id: sokandeId.toString(),
    firstName: fornamn,
@@ -54,6 +69,10 @@ export function mapResponseToDeltagareCompact(data: DeltagareCompactResponse): D
    tjanst,
    utforandeVerksamhet,
    utforandeAdress,
+    hasAvbrott,
+    genomforandeReferens,
+    startdatumAvrop,
+    slutdatumAvrop,
  };
 }

--- 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
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { DeltagareHandelse, DeltagareHandelseApiResponse } from '@msfa-models/deltagare-handelse.model';
+import { environment } from '@msfa-environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DeltagareHandelserApiService {
+  private _apiBaseUrl = `${environment.api.url}/deltagareHandelser`;
+  constructor(private httpClient: HttpClient) {}
+
+  fetchDeltagareHandelser(genomforandereferens: string): Observable<DeltagareHandelse[]> {
+    return this.httpClient
+      .get<DeltagareHandelseApiResponse>(`${this._apiBaseUrl}?genomforandereferens=${genomforandereferens}`)
+      .pipe(
+        map(({ data }) => {
+          if (data) {
+            return data;
+          }
+        })
+      );
+  }
+}
--- a/mock-api/mina-sidor-fa/scripts/avrop.js
+++ b/mock-api/mina-sidor-fa/scripts/avrop.js
@@ -58,6 +58,7 @@ function generateAvrop(amount = 10, deltagare, handledare) {
      sparNamn: track.name,
      handledareCiamUserId: null,
      recievedTimestamp: faker.date.recent(),
+      hasAvbrott: currentDeltagare.hasAvbrott,
    });
  }

--- a/mock-api/mina-sidor-fa/scripts/deltagare-handelser.js
+++ b/mock-api/mina-sidor-fa/scripts/deltagare-handelser.js
@@ -0,0 +1,36 @@
+import faker from 'faker';
+faker.locale = 'sv';
+
+const HANDELSER = [
+  'Gemensam planering inkommen',
+  'Gemensam planering godkänd',
+  'Slutredovisning inkommen',
+  'Slutredovisning godkänd',
+  'Slutredovisning ej godkänd',
+  'Avbrott handläggs',
+  'Avbrott bifall',
+  'Avbrott avslag',
+  'Byte av leverantör bifall',
+];
+
+const TIDPUNKT_DESCRIPTION = ['Handläggning startad', 'Inrapporteringsdatum slutredovisning'];
+
+function generateHandelser(amount = 10) {
+  const handelser = [];
+
+  for (let id = 1; id <= amount; ++id) {
+    const handelse = HANDELSER[Math.floor(Math.random() * HANDELSER.length)];
+    handelser.push({
+      description: handelse,
+      receivedDate: faker.date.recent(),
+      isAvbrott: handelse.indexOf('Avbrott') >= 0,
+      tidpunkt: faker.date.recent(),
+      tidpunktDescription: TIDPUNKT_DESCRIPTION[Math.floor(Math.random() * TIDPUNKT_DESCRIPTION.length)],
+    });
+  }
+  return handelser;
+}
+
+export default {
+  generate: generateHandelser,
+};
--- a/mock-api/mina-sidor-fa/scripts/deltagare.js
+++ b/mock-api/mina-sidor-fa/scripts/deltagare.js
@@ -111,6 +111,7 @@ function generateDeltagare(amount = 10) {
      workExperiences: {
        arbetslivserfarenheter: chooseRandom(WORK_EXPERIENCES, faker.datatype.number(WORK_EXPERIENCES.length)),
      },
+      hasAvbrott: Math.random() < 0.2,
    };
    if (Math.random() > 0.8) {
      deltagare.contact.adresser.push({
--- a/mock-api/mina-sidor-fa/scripts/generate-api.js
+++ b/mock-api/mina-sidor-fa/scripts/generate-api.js
@@ -4,6 +4,7 @@ import avrop from './avrop.js';
 import currentUser from './current-user.js';
 import userinfo from './userinfo.js';
 import deltagare from './deltagare.js';
+import deltagareHandelser from './deltagare-handelser.js';
 import employees from './employees.js';
 import handledare from './handledare.js';
 import languages from './languages.js';
@@ -21,6 +22,7 @@ const AUTHORIZATIONS = ['Hantera användare', 'Hantera origisation', 'Hantera ek

 const generatedEmployees = employees.generate(50);
 const generatedDeltagare = deltagare.generate(50);
+const generatedDeltagareHandelser = deltagareHandelser.generate(10);
 const generatedHandledare = handledare.generate(generatedEmployees.slice(0, 6));
 const generatedAvrop = avrop.generate(10, generatedDeltagare.slice(0, 25), generatedHandledare);
 const generatedTjanster = tjanster.generate();
@@ -111,6 +113,7 @@ const apiData = {
  utforandeVerksamheter,
  kommuner: avropKommuner,
  deltagare: generatedDeltagare,
+  deltagareHandelser: generatedDeltagareHandelser,
  handledare: generatedHandledare,
  participants: participants.generate(50).map(participant => ({
    ...participant,
--- a/mock-api/mina-sidor-fa/server.js
+++ b/mock-api/mina-sidor-fa/server.js
@@ -123,14 +123,32 @@ router.render = (req, res) => {
  }

  if (pathname === '/deltagare') {
-    data = data.map(({ sokandeId, fornamn, efternamn, tjansteNamn, utforandeverksamhet, adress }) => ({
-      sokandeId: sokandeId.toString(),
-      fornamn,
-      efternamn,
-      tjanst: tjansteNamn,
-      utforandeVerksamhet: utforandeverksamhet,
-      utforandeAdress: adress,
-    }));
+    // NOTE: this is reading from avrop.js
+    data = data.map(
+      ({
+        sokandeId,
+        fornamn,
+        efternamn,
+        tjansteNamn,
+        utforandeverksamhet,
+        adress,
+        startdatumAvrop,
+        slutdatumAvrop,
+        hasAvbrott,
+        genomforandeReferens,
+      }) => ({
+        sokandeId: sokandeId.toString(),
+        fornamn,
+        efternamn,
+        tjanst: tjansteNamn,
+        utforandeVerksamhet: utforandeverksamhet,
+        utforandeAdress: adress,
+        startdatumAvrop,
+        slutdatumAvrop,
+        hasAvbrott,
+        genomforandeReferens,
+      })
+    );
  }

  res.jsonp({