feat(slutredovisning): Added denial motivation to Slutredovisning. (TV-941)

Merge in TEA/mina-sidor-fa-web from feature/TV-941-report-denial-motivation to develop

Squashed commit of the following:

commit 6a6c60efc0f9b6fc3514f30237eefe1fa9bb8278
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Fri Dec 3 07:10:49 2021 +0100

    Updated after PR

commit bbf5d8d4e32b7055311d96421291fff36f62e30f
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Dec 2 08:49:23 2021 +0100

    Updated after PR

commit 5c1968029e86312a54dc082ff3fd28593178e29d
Merge: 1e4d6a70 395452e6
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Dec 2 08:47:10 2021 +0100

    Merge branch 'develop' into feature/TV-941-report-denial-motivation

commit 1e4d6a7093271353a99b75d3519ff1463b8f36dd
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Nov 30 14:29:36 2021 +0100

    Removed lorem text

commit efdea175a377956cc7f3b3c80230fa10d8ef5ec3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Nov 30 14:15:47 2021 +0100

    Added motivation text to reports list and slutredovisning view

commit c47e1c97e65f5ef43ee55b9656c8a206050855c3
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Tue Nov 30 12:29:17 2021 +0100

    Added motivation to händelser list

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

@@ -20,6 +20,17 @@
             {{ report.date | date:'shortTime' }}
           </td>
           <td>{{ report.status }}</td>
+          <td>
+            <digi-button
+              *ngIf="report.motivation"
+              af-variation="tertiary"
+              af-size="s"
+              (click)="openMotivationDialog(report)"
+            >
+              <ui-icon slot="icon" uiType="info"></ui-icon>
+              Motivering till beslut
+            </digi-button>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -36,3 +47,17 @@
     af-result-name="rapporter"
   ></digi-navigation-pagination>
 </div>
+
+<digi-ng-dialog
+  *ngIf="activeReportMotivation"
+  [afActive]="activeReportMotivation"
+  (afOnPrimaryClick)="closeMotivationDialog()"
+  (afOnInactive)="closeMotivationDialog()"
+  [afHeading]="'Motivering till beslut: ' + activeReportMotivation.type + ' ' + activeReportMotivation.status.toLowerCase()"
+  afHeadingLevel="h2"
+  afPrimaryButtonText="Stäng"
+>
+  <h3 class="reports-list__sub-heading">{{deltagareName}}</h3>
+  <p>Genomförandereferens: <strong>{{activeReportMotivation.genomforandeReferens}}</strong></p>
+  <p>{{activeReportMotivation.motivation}}</p>
+</digi-ng-dialog>

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,11 @@
 @import 'variables/gutters';
 
 .reports-list {
+  &__sub-heading {
+    margin-top: 0;
+    font-size: var(--digi--typography--font-size--h2--desktop) !important;
+    font-weight: var(--digi--typography--font-weight) !important;
+  }
   &__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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { ReportType } from '@msfa-enums/report-type.enum';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { Report } from '@msfa-models/report.model';
+import { BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'msfa-reports-list',
@@ -12,7 +13,9 @@ import { Report } from '@msfa-models/report.model';
 export class ReportsListComponent {
   @Input() reports: Report[];
   @Input() paginationMeta: PaginationMeta;
+  @Input() deltagareName?: string;
   @Output() paginated = new EventEmitter<number>();
+  private _activeReportMotivation$ = new BehaviorSubject<Report | null>(null);
 
   columnHeaders: { label: string; key: keyof Report }[] = [
     {
@@ -27,8 +30,16 @@ export class ReportsListComponent {
       label: 'Status',
       key: 'status',
     },
+    {
+      label: 'Motivering',
+      key: 'motivation',
+    },
   ];
 
+  get activeReportMotivation(): Report {
+    return this._activeReportMotivation$.getValue();
+  }
+
   get currentPage(): number {
     return this.paginationMeta?.page;
   }
@@ -75,4 +86,12 @@ export class ReportsListComponent {
   emitNewPage(page: number): void {
     this.paginated.emit(page);
   }
+
+  openMotivationDialog(report: Report): void {
+    this._activeReportMotivation$.next(report);
+  }
+
+  closeMotivationDialog(): void {
+    this._activeReportMotivation$.next(null);
+  }
 }

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

@@ -1,13 +1,15 @@
+import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 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 { UiIconModule } from '@ui/icon/icon.module';
 import { ReportsListComponent } from './reports-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [ReportsListComponent],
-  imports: [CommonModule, RouterModule, LocalDatePipeModule],
+  imports: [CommonModule, RouterModule, LocalDatePipeModule, DigiNgDialogModule, UiIconModule],
   exports: [ReportsListComponent],
 })
 export class ReportsListModule {}

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

@@ -44,6 +44,7 @@
     <h3>Inskickade rapporter</h3>
     <msfa-reports-list
       *ngIf="reportsData.data.length; else noReports"
+      [deltagareName]="deltagareName"
       [reports]="reportsData.data"
       [paginationMeta]="reportsData.meta"
       (paginated)="setNewPage($event)"

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

@@ -1,13 +1,13 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Feature } from '@msfa-enums/feature.enum';
 import { environment } from '@msfa-environment';
 import { PaginationParams } from '@msfa-models/api/params.model';
 import { ReportsData } from '@msfa-models/report.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { UiLinkButtonType } from '@ui/link-button/link-button-type.enum';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap } from 'rxjs/operators';
-import { UiLinkButtonType } from '@ui/link-button/link-button-type.enum';
 
 @Component({
   selector: 'msfa-deltagare-tab-reports',
@@ -16,6 +16,7 @@ import { UiLinkButtonType } from '@ui/link-button/link-button-type.enum';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeltagareTabReportsComponent {
+  @Input() deltagareName: string;
   UiLinkButtonType = UiLinkButtonType;
 
   genomforandereferens$: Observable<number> = this.activatedRoute.params.pipe(

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

@@ -29,7 +29,10 @@
             af-id="deltagare-card-reports"
             *ngIf="reportingTabVisible"
           >
-            <msfa-deltagare-tab-reports *ngIf="activeTab === '1'"></msfa-deltagare-tab-reports>
+            <msfa-deltagare-tab-reports
+              *ngIf="activeTab === '1'"
+              [deltagareName]="contactInformation.fullName"
+            ></msfa-deltagare-tab-reports>
           </digi-navigation-tab>
 
           <digi-navigation-tab

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.ts

@@ -4,10 +4,10 @@ import { DeltagareAvrop } from '@msfa-models/avrop.model';
 import { CustomError } from '@msfa-models/error/custom-error';
 import { MainOccupation, Slutredovisning } from '@msfa-models/slutredovisning.model';
 import { BehaviorSubject, Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { SlutredovisningFormData } from '../models/slutredovisning-form-data.model';
 import { SlutredovisningFormService } from '../slutredovisning-form.service';
 import { slutredovisningFormDataToSlutredovisningRequest } from '../utils/forms-to-slutredovisning-form-data';
-import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'msfa-slutredovisning-form-step3',
@@ -24,7 +24,7 @@ export class SlutredovisningFormStep3Component implements OnInit {
   submitError$ = new BehaviorSubject<CustomError>(null);
   submittedDate$ = new BehaviorSubject<Date | null>(null);
 
-  slutredovisning$: Observable<Slutredovisning>;
+  slutredovisning$: Observable<SlutredovisningFormData>;
 
   goBack(): void {
     this.backClick.emit();

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html

@@ -37,7 +37,7 @@
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton [uiCount]="3" uiText="Laddar Gemensam planering"></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar Periodisk redovisning"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/slutredovisning-view/slutredovisning-view.component.html

@@ -1,13 +1,21 @@
 <msfa-layout>
   <msfa-report-layout *ngIf="avrop$ | async as avrop; else skeletonRef" reportTitle="Slutredovisning" [avrop]="avrop">
-    <msfa-slutredovisning-view-description-list
-      [slutredovisning]="slutredovisning$ | async"
-    ></msfa-slutredovisning-view-description-list>
+    <div class="slutredovisning-view" *ngIf="slutredovisning$ | async as slutredovisning; else loadingRef">
+      <digi-notification-alert *ngIf="slutredovisning.motivation" af-variation="danger">
+        <p>{{slutredovisning.motivation}}</p>
+      </digi-notification-alert>
+      <msfa-slutredovisning-view-description-list
+        [slutredovisning]="slutredovisning"
+      ></msfa-slutredovisning-view-description-list>
+      <footer class="slutredovisning-view__footer">
+        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
+      </footer>
+    </div>
   </msfa-report-layout>
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton [uiCount]="3" uiText="Laddar Gemensam planering"></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar Slutredovisning"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/slutredovisning-view/slutredovisning-view.component.scss

@@ -1,28 +1,12 @@
 @import 'mixins/list';
 @import 'variables/gutters';
 
-.gemensam-planering-view {
+.slutredovisning-view {
   max-width: var(--digi--typography--text--max-width);
   display: flex;
   flex-direction: column;
   gap: $digi--layout--gutter--l;
 
-  &__activity-list {
-    @include msfa__reset-list;
-    margin-bottom: var(--digi--layout--gutter--s);
-  }
-
-  &__activity-item {
-    display: flex;
-    align-items: center;
-    gap: var(--digi--layout--gutter--s);
-    margin-top: var(--digi--layout--gutter--s);
-  }
-
-  &__activity-check {
-    color: var(--digi--ui--color--border--success);
-  }
-
   &__footer {
     display: flex;
     flex-direction: column;

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

@@ -1,61 +1,89 @@
-<div class="deltagare-list-handelser">
-  <p>Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong></p>
+<digi-ng-dialog
+  *ngIf="deltagare"
+  [afActive]="deltagare"
+  (afOnPrimaryClick)="emitCloseDialog()"
+  (afOnSecondaryClick)="closeMotivation()"
+  (afOnInactive)="emitCloseDialog()"
+  [afHeading]="heading"
+  afHeadingLevel="h2"
+  afPrimaryButtonText="Stäng"
+  [afSecondaryButtonText]="activeHandelseMotivation ? 'Tillbaka till alla händelser' : null"
+>
+  <div class="deltagare-list-handelser">
+    <h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
+    <p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
+    <ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
+      <ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
+        <p>{{activeHandelseMotivation.motivation}}</p>
+      </ng-container>
 
-  <digi-table af-size="s" *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
-    <ng-container *ngIf="deltagareHandelserData.data.length > 0; else noEvents">
-      <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">Effekt</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let handelse of deltagareHandelserData.data;">
-            <td class="deltagare-list-handelser__table-cell">
-              <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
-            </td>
-            <td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
-              {{handelse.description}}
-            </td>
-            <td class="deltagare-list-handelser__table-cell">
-              <ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
-                {{handelse.effectDescription}}:
-                <digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
-              </ng-container>
-            </td>
-            <ng-template #isAvbrottCell>
-              <td class="deltagare-list-handelser__avbrott-cell">
-                <ui-icon [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
-                {{handelse.description}}
-              </td>
-            </ng-template>
-          </tr>
-        </tbody>
-      </table>
+      <ng-template #handelseTableRef>
+        <digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
+          <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">Effekt</th>
+                <th scope="col" class="deltagare-list-handelser__heading-row">Motivering</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let handelse of deltagareHandelserData.data;">
+                <td class="deltagare-list-handelser__table-cell">
+                  <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
+                </td>
+                <td
+                  class="deltagare-list-handelser__table-cell"
+                  [ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
+                >
+                  <ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
+                  {{handelse.description}}
+                </td>
+                <td class="deltagare-list-handelser__table-cell">
+                  <ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
+                    {{handelse.effectDescription}}:
+                    <digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
+                  </ng-container>
+                </td>
+                <td class="deltagare-list-handelser__table-cell">
+                  <digi-button
+                    *ngIf="handelse.motivation"
+                    af-variation="tertiary"
+                    af-size="s"
+                    (click)="openMotivation(handelse)"
+                  >
+                    <ui-icon slot="icon" uiType="info"></ui-icon>
+                    Motivering till beslut
+                  </digi-button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </digi-table>
+        <ng-container *ngIf="deltagareHandelserData.meta 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>
+      </ng-template>
     </ng-container>
-    <ng-container *ngIf="deltagareHandelserData.meta 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>
-  </digi-table>
-</div>
+  </div>
+</digi-ng-dialog>
 
-<ng-template #noEvents>
+<ng-template #noEventsRef>
   <p>Inga händelser har inkommit.</p>
 </ng-template>
 <ng-template #loadingRef>

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

@@ -1,15 +1,21 @@
 @import 'variables/gutters';
 .deltagare-list-handelser {
+  &__sub-heading {
+    margin-top: 0;
+    font-size: var(--digi--typography--font-size--h2--desktop) !important;
+    font-weight: var(--digi--typography--font-weight) !important;
+  }
+
   &__heading-row {
     white-space: nowrap;
   }
 
   &__table-cell {
     white-space: nowrap;
-  }
 
-  &__avbrott-cell {
-    color: var(--digi--ui--color--danger);
+    &--avbrott {
+      color: var(--digi--ui--color--danger);
+    }
   }
 
   &__pagination {

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

@@ -1,11 +1,24 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { UiIconType } from '@ui/icon/icon-type.enum';
-import { DeltagareHandelse, DeltagareHandelseData } from '@msfa-models/deltagare-handelse.model';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  DeltagareHandelse,
+  DeltagareHandelseData,
+  DeltagareHandelseMotivation,
+} from '@msfa-models/deltagare-handelse.model';
 import { DeltagareCompact } from '@msfa-models/deltagare.model';
 import { PaginationMeta } from '@msfa-models/pagination-meta.model';
 import { DeltagareHandelserService } from '@msfa-services/deltagare-handelser.service';
-import { Observable } from 'rxjs';
 import { UiIconSize } from '@ui/icon/icon-size.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Component({
   selector: 'msfa-deltagare-list-handelser-dialog',
@@ -13,11 +26,13 @@ import { UiIconSize } from '@ui/icon/icon-size.enum';
   styleUrls: ['./deltagare-list-handelser-dialog.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy {
+export class DeltagareListHandelserDialogComponent implements OnChanges, OnDestroy {
   @Input() deltagare: DeltagareCompact;
+  @Output() closeDialog = new EventEmitter<void>();
   IconType = UiIconType;
   IconSize = UiIconSize;
   deltagareHandelserData$: Observable<DeltagareHandelseData>;
+  private _activeHandelseMotivation$ = new BehaviorSubject<DeltagareHandelseMotivation>(null);
 
   constructor(private deltagareHandelserService: DeltagareHandelserService) {}
 
@@ -25,13 +40,23 @@ export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy
     this.deltagareHandelserService.resetParams();
   }
 
-  ngOnInit(): void {
-    if (this.deltagare) {
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.deltagare && changes.deltagare.currentValue) {
       this.deltagareHandelserService.setGenomforandeReferens$(this.deltagare.genomforandeReferens);
       this.deltagareHandelserData$ = this.deltagareHandelserService.deltagareHandelserData$;
     }
   }
 
+  get activeHandelseMotivation(): DeltagareHandelseMotivation {
+    return this._activeHandelseMotivation$.getValue();
+  }
+
+  get heading(): string {
+    return this.activeHandelseMotivation
+      ? `Motivering till beslut: ${this.activeHandelseMotivation.title}`
+      : `Händelser för ${this.deltagare.fullName}`;
+  }
+
   getHandelseDate(handelse: DeltagareHandelse, handelseDate?: string): Date {
     return handelseDate === 'receivedDate' ? new Date(handelse.receivedDate) : new Date(handelse.effectDate);
   }
@@ -48,4 +73,22 @@ export class DeltagareListHandelserDialogComponent implements OnInit, OnDestroy
   setNewPage(page: number): void {
     this.deltagareHandelserService.setPage(page);
   }
+
+  openMotivation(handelse: DeltagareHandelse): void {
+    this._activeHandelseMotivation$.next({
+      title: handelse.description,
+      motivation:
+        handelse.motivation ||
+        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed nemo magni in nihil dolores eum harum obcaecati, nam enim illo iusto aut expedita, animi, itaque voluptatibus. Nisi reprehenderit animi facilis!',
+    });
+  }
+
+  closeMotivation(): void {
+    this._activeHandelseMotivation$.next(null);
+  }
+
+  emitCloseDialog(): void {
+    this._activeHandelseMotivation$.next(null);
+    this.closeDialog.emit();
+  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html

@@ -60,7 +60,7 @@
               af-variation="tertiary"
               af-size="s"
               (click)="openHandelser(singleDeltagare)"
-              aria-controls="deltagareHandelser"
+              aria-controls="deltagare-handelser"
             >
               <digi-icon-info-circle-reg class="deltagare-list__info-icon" slot="icon"></digi-icon-info-circle-reg>
               Visa händelser
@@ -85,7 +85,12 @@
   </digi-navigation-pagination>
 </div>
 
-<digi-ng-dialog
+<msfa-deltagare-list-handelser-dialog
+  id="deltagare-handelser"
+  [deltagare]="handelserDialogDeltagare$ | async"
+  (closeDialog)="closeHandelser()"
+></msfa-deltagare-list-handelser-dialog>
+<!-- <digi-ng-dialog
   *ngIf="handelserDialogDeltagare$ | async as deltagare"
   [afActive]="handelserDialogIsOpen$ | async"
   (afOnPrimaryClick)="closeHandelser()"
@@ -96,4 +101,4 @@
   id="deltagareHandelser"
 >
   <msfa-deltagare-list-handelser-dialog [deltagare]="deltagare"></msfa-deltagare-list-handelser-dialog>
-</digi-ng-dialog>
+</digi-ng-dialog> -->

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ErrorSeverity } from '@msfa-enums/error-severity.enum';
-import { UiIconType } from '@ui/icon/icon-type.enum';
 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 { UiIconSize } from '@ui/icon/icon-size.enum';
+import { UiIconType } from '@ui/icon/icon-type.enum';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { UiIconSize } from '@ui/icon/icon-size.enum';
 
 @Component({
   selector: 'msfa-deltagare-list-table',
@@ -24,7 +24,7 @@ export class DeltagareListTableComponent {
   @Output() paginated = new EventEmitter<number>();
   handelserDialogDeltagare$ = new BehaviorSubject<DeltagareCompact | null>(null);
 
-  handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(genomforandereferens => !!genomforandereferens));
+  handelserDialogIsOpen$ = this.handelserDialogDeltagare$.pipe(map(deltagare => !!deltagare));
 
   IconType = UiIconType;
   IconSize = UiIconSize;

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

@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
 import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
+import { UiIconModule } from '@ui/icon/icon.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { DeltagareListTableModule } from './components/deltagare-list-table/deltagare-list-table.module';
@@ -24,6 +25,7 @@ import { DeltagareListComponent } from './deltagare-list.component';
     UiSkeletonModule,
     UnauthorizedAlertModule,
     UiLoaderModule,
+    UiIconModule,
   ],
 })
 export class DeltagareListModule {}

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

@@ -8,6 +8,7 @@ export interface ReportResponse {
   inskickadDatum: string;
   statusRapport: string;
   ciamUserId: string;
+  motivation: string;
 }
 export interface ReportsDataResponse {
   data: ReportResponse[];

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

@@ -71,4 +71,6 @@ export interface SlutredovisningResponse {
   progressDescription: string;
   nextStepDescription: string;
   otherInformation: string;
+  status?: string;
+  motivation?: string;
 }

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

@@ -21,6 +21,7 @@ export interface DeltagareHandelse {
   isAvbrott: boolean;
   effectDate: Date;
   effectDescription: string;
+  motivation: string;
 }
 
 export interface DeltagareHandelseData {
@@ -28,12 +29,18 @@ export interface DeltagareHandelseData {
   meta: PaginationMeta;
 }
 
+export interface DeltagareHandelseMotivation {
+  title: string;
+  motivation: string;
+}
+
 interface DeltagareHandelseApiResponse {
   description: string;
   receivedDate: Date;
   isAvbrott: boolean;
   tidpunkt: Date;
   tidpunktDescription: string;
+  motivation: string;
 }
 
 export interface DeltagareHandelserApiResponse {
@@ -44,11 +51,11 @@ export interface DeltagareHandelserApiResponse {
 export function mapDeltagareHandelseApiResponse(
   deltagareHandelseApiResponse: DeltagareHandelseApiResponse
 ): DeltagareHandelse {
-  const { description, receivedDate, isAvbrott } = deltagareHandelseApiResponse;
+  const { description, receivedDate, isAvbrott, motivation } = deltagareHandelseApiResponse;
   const effectDate = deltagareHandelseApiResponse.tidpunkt;
   const effectDescription =
     (GENOMFORANDEHANDELSE_EFFECT_MAP[deltagareHandelseApiResponse.tidpunktDescription] as string) ??
     deltagareHandelseApiResponse.tidpunktDescription ??
     '';
-  return { description, receivedDate, isAvbrott, effectDate, effectDescription };
+  return { description, receivedDate, isAvbrott, effectDate, effectDescription, motivation };
 }

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

@@ -1,6 +1,5 @@
 import { ReportType } from '@msfa-enums/report-type.enum';
 import { ReportResponse } from './api/report.response.model';
-import { Franvaro } from './franvaro.model';
 import { PaginationMeta } from './pagination-meta.model';
 
 export interface Report {
@@ -10,11 +9,7 @@ export interface Report {
   date: Date;
   status: string;
   ciamUserId: string;
-}
-
-export interface ReportDetail {
-  genomforandeReferens: string;
-  franvaro?: Franvaro;
+  motivation: string;
 }
 
 export interface ReportsData {
@@ -23,7 +18,7 @@ export interface ReportsData {
 }
 
 export function mapResponseToReport(data: ReportResponse): Report {
-  const { id, genomforandeReferens, typAvRapport, inskickadDatum, statusRapport, ciamUserId } = data;
+  const { id, genomforandeReferens, typAvRapport, inskickadDatum, statusRapport, ciamUserId, motivation } = data;
   return {
     id,
     genomforandeReferens,
@@ -31,5 +26,6 @@ export function mapResponseToReport(data: ReportResponse): Report {
     date: new Date(inskickadDatum),
     status: statusRapport,
     ciamUserId,
+    motivation,
   };
 }