feat(franvaro-report-form): new list structure for displaying reasons (TV-820)

Squashed commit of the following:

commit 69ddfae6920c2d88b250b2d20040ef2b9442e077
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 8 17:11:39 2021 +0100

    TV-820 renamed enum

commit 70387ddbfe54bc1cdd1186c6210049465dc2c0f8
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Fri Nov 5 09:27:34 2021 +0100

    TV-820 validation correction

commit bd6637bb7f09721ad9620fc08df8f4015bbf4c57
Merge: 024a015c b9a14ef3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Fri Nov 5 08:36:54 2021 +0100

    Merge branch 'develop' into feature/TV-820

commit 024a015c47def0d57654d731b1243be7eaca2931
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Nov 4 13:11:35 2021 +0100

    TV-820 set empty string as initial value for knownReasonComment

commit 8b3c13c94b54353dd62a6f10f26f42d0c9b0aae3
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Nov 4 13:03:07 2021 +0100

    TV-820 put back 'other reason' with comment field

commit b153854fb7291ff2d173503aed82ae49e631c306
Merge: b9136b8d 28d128c1
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Nov 4 11:04:14 2021 +0100

    Merge branch 'develop' into feature/TV-820

commit b9136b8d4293b7e7e3703601f783e41e43865c11
Merge: 6a611c0c ca0b8ec7
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Nov 3 16:18:33 2021 +0100

    Merge branch 'develop' into feature/TV-820

commit 6a611c0c84f75cf14789f72812d21196dd44609e
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Nov 2 13:28:14 2021 +0100

    TV-820 changed if to switch statement, some refactoring

commit a4190a0bbde25851cec38aafe4d88fae44b59230
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Tue Nov 2 07:49:56 2021 +0100

    TV-820 refactoring

commit 5ec6680322208d8a5b7fe6a76db4cb2a3f524d62
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 1 17:28:48 2021 +0100

    TV-820 sorting reasons, refactoring

commit d44a8548fd60b55d59630a4f5e8dde0c081315b5
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Mon Nov 1 15:57:13 2021 +0100

    TV-820 new list structure for displaying reasons

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.service.ts

@@ -2,11 +2,11 @@ import { Injectable } from '@angular/core';
 import { AvvikelseReportRequest } from '@msfa-models/api/avvikelse-request.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { AvvikelseQuestion } from '@msfa-models/avvikelse-question.model';
-import { AvvikelseReason } from '@msfa-models/avvikelse-reason.model';
+import { AvvikelseReason, sortAvvikelseReasons } from '@msfa-models/avvikelse-reason.model';
 import { AvvikelseApiService } from '@msfa-services/api/avvikelse-api.service';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { Observable } from 'rxjs';
-import { shareReplay } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
 
 @Injectable()
 export class AvvikelseReportFormService {
@@ -14,7 +14,10 @@ export class AvvikelseReportFormService {
     .fetchAvvikelseQuestions$()
     .pipe(shareReplay(1));
 
-  fetchAvvikelseReasons$: Observable<AvvikelseReason[]> = this.avvikelseApiService.fetchAvvikelseReasons$();
+  fetchAvvikelseReasons$: Observable<AvvikelseReason[]> = this.avvikelseApiService.fetchAvvikelseReasons$()
+    .pipe(
+      map(reasons => sortAvvikelseReasons(reasons))
+    );
 
   constructor(private avvikelseApiService: AvvikelseApiService, private deltagareApiService: DeltagareApiService) {}
 

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html

@@ -39,7 +39,7 @@
           >
             <div class="franvaro-report-form__form-item">
               <digi-ng-form-select
-                *ngIf="reasons$ | async as reasons; else loadingRef"
+                *ngIf="allReasons$ | async as reasons; else loadingRef"
                 [formControl]="reasonFormControl"
                 afLabel="Orsak till frånvaro"
                 afPlaceholder="Välj orsak till frånvaro"
@@ -48,7 +48,6 @@
                 [afRequired]="true"
                 [afDisableValidStyle]="true"
                 [afInvalid]="formControlIsInvalid(['reason'])"
-                (afOnChange)="reasonChanged()"
               ></digi-ng-form-select>
               <div aria-atomic="true" role="alert">
                 <digi-ng-form-validation-message
@@ -59,46 +58,18 @@
                 ></digi-ng-form-validation-message>
               </div>
             </div>
-
             <ng-container *ngIf="reasonFormControl.value">
-              <ng-container *ngIf="showOtherKnownReasonsSelect">
+              <div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea">
-                <div
+                <ui-textarea
-                  class="franvaro-report-form__form-item"
+                  [formControl]="knownReasonCommentFormControl"
-                  *ngIf="otherKnownReasons$ | async as otherKnownReasons; else loadingRef"
+                  uiLabel="Beskriv frånvaro"
-                >
+                  [uiInvalid]="formControlIsInvalid(['knownReasonComment'])"
-                  <digi-ng-form-select
+                  [uiValidationMessage]="formErrors?.knownReasonComment"
-                    [formControl]="otherKnownReasonFormControl"
+                  [uiMaxLength]="2000"
-                    afLabel="Känd orsak"
+                  [uiRequired]="true"
-                    afPlaceholder="Välj känd orsak"
+                  [uiAnnounceIfOptional]="true"
-                    [afSelectItems]="otherKnownReasons"
+                ></ui-textarea>
-                    [afDisableValidStyle]="true"
+              </div>
-                    [afAnnounceIfOptional]="true"
-                    [afRequired]="true"
-                    [afInvalid]="formControlIsInvalid(['otherKnownReason'])"
-                  ></digi-ng-form-select>
-                  <div aria-atomic="true" role="alert">
-                    <digi-ng-form-validation-message
-                      *ngIf="formControlIsInvalid(['otherKnownReason'])"
-                      class="franvaro-report-form__validation-message"
-                      [afPositive]="false"
-                      [afValidationText]="formErrors.otherKnownReason"
-                    ></digi-ng-form-validation-message>
-                  </div>
-                </div>
-
-                <div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea">
-                  <ui-textarea
-                    [formControl]="knownReasonCommentFormControl"
-                    uiLabel="Beskriv frånvaro"
-                    [uiInvalid]="formControlIsInvalid(['knownReasonComment'])"
-                    [uiValidationMessage]="formErrors?.knownReasonComment"
-                    [uiMaxLength]="2000"
-                    [uiRequired]="true"
-                    [uiAnnounceIfOptional]="true"
-                  ></ui-textarea>
-                </div>
-              </ng-container>
-
               <div class="franvaro-report-form__form-item">
                 <digi-ng-form-datepicker
                   [afDisableValidStyle]="true"
@@ -265,18 +236,12 @@
           >
             <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
-              <ng-container *ngIf="reasons$ | async as reasons">
+              <ng-container *ngIf="allReasons$ | async as reasons">
                 <dt>Orsak till frånvaro</dt>
                 <dd>{{getReasonNameFromValue(reasons, reasonFormControl.value)}}</dd>
-                <ng-container *ngIf="showOtherKnownReasonsSelect">
+                <ng-container *ngIf="showKnownReasonTextArea">
-                  <ng-container *ngIf="otherKnownReasons$ | async as otherKnownReasons">
+                  <dt>Beskrivning för frånvaro</dt>
-                    <dt>Annan känd orsak</dt>
+                  <dd>{{knownReasonCommentFormControl.value}}</dd>
-                    <dd>{{getReasonNameFromValue(otherKnownReasons, otherKnownReasonFormControl.value)}}</dd>
-                  </ng-container>
-                  <ng-container *ngIf="showKnownReasonTextArea">
-                    <dt>Beskrivning för frånvaro</dt>
-                    <dd>{{knownReasonCommentFormControl.value}}</dd>
-                  </ng-container>
                 </ng-container>
                 <dt>Dag för frånvaro</dt>
                 <dd>

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

@@ -1,16 +1,17 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { ANNAN_KAND_ORSAK_ID, ANNAN_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
+import { ANNAN_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
+import { OrsaksKoderKanda } from '@msfa-enums/orsaks-koder-kanda.enum';
 import { FranvaroReportRequest } from '@msfa-models/api/franvaro-request.model';
 import { Avrop } from '@msfa-models/avrop.model';
 import { CustomError } from '@msfa-models/error/custom-error';
-import { FranvaroReason } from '@msfa-models/franvaro-reason.model';
+import { FranvaroReason, setKnownReason, sortFranvaroReasons } from '@msfa-models/franvaro-reason.model';
 import { Franvaro } from '@msfa-models/franvaro.model';
 import { formatDate } from '@msfa-utils/format-to-date.util';
 import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { addDays } from 'date-fns';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
 import { FranvaroReportFormService } from './franvaro-report-form.service';
 import { FranvaroReportFormValidator } from './franvaro-report-form.validator';
@@ -27,7 +28,6 @@ export class FranvaroReportFormComponent {
   franvaroFormGroup = new FormGroup(
     {
       reason: new FormControl(null),
-      otherKnownReason: new FormControl(null),
       knownReasonComment: new FormControl(''),
       date: new FormControl(new Date()),
       wholeDay: new FormControl(true),
@@ -50,6 +50,10 @@ export class FranvaroReportFormComponent {
     shareReplay(1)
   );
   reasons$: Observable<FranvaroReason[]> = this.franvaroReportFormService.reasons$;
+  allReasons$: Observable<FranvaroReason[]> = combineLatest([this.reasons$, this.franvaroReportFormService.otherKnownReasons$])
+    .pipe(
+      map(([reasons, otherKnownReasons]) => sortFranvaroReasons(reasons.concat(otherKnownReasons)))
+    )
   otherKnownReasons$: Observable<FranvaroReason[]> = this.franvaroReportFormService.otherKnownReasons$;
 
   wholeDayOrPartOfDayRadiobuttons: Radiobutton[] = [
@@ -59,12 +63,8 @@ export class FranvaroReportFormComponent {
 
   constructor(private franvaroReportFormService: FranvaroReportFormService, private activatedRoute: ActivatedRoute) {}
 
-  get showOtherKnownReasonsSelect(): boolean {
-    return this.reasonFormControl.value === ANNAN_KAND_ORSAK_ID;
-  }
-
   get showKnownReasonTextArea(): boolean {
-    return this.otherKnownReasonFormControl.value === ANNAN_ORSAK_ID;
+    return this.reasonFormControl.value === ANNAN_ORSAK_ID;
   }
 
   get showTimePickers(): boolean {
@@ -103,10 +103,6 @@ export class FranvaroReportFormComponent {
     return this.franvaroFormGroup.get('expectedPresenceEndTime') as FormControl;
   }
 
-  get otherKnownReasonFormControl(): FormControl {
-    return this.franvaroFormGroup.get('otherKnownReason') as FormControl;
-  }
-
   get knownReasonCommentFormControl(): FormControl {
     return this.franvaroFormGroup.get('knownReasonComment') as FormControl;
   }
@@ -169,8 +165,12 @@ export class FranvaroReportFormComponent {
     this.submitError$.next(null);
   }
 
-  reasonChanged(): void {
+  get isOtherKnownReason(): boolean {
-    this.otherKnownReasonFormControl.reset();
+    for (const orsakskod in OrsaksKoderKanda) {
+      if (orsakskod === this.reasonFormControl.value) {
+        return true;
+      }
+    }
   }
 
   submitAndCloseConfirmDialog(genomforandeReferens: number): void {
@@ -182,7 +182,6 @@ export class FranvaroReportFormComponent {
       wholeDay,
       startTime,
       endTime,
-      otherKnownReason,
       knownReasonComment,
       expectedPresenceStartTime,
       expectedPresenceEndTime,
@@ -191,16 +190,16 @@ export class FranvaroReportFormComponent {
     const postRequest: FranvaroReportRequest = {
       genomforandeReferens: +genomforandeReferens,
       franvaro: {
-        avvikelseOrsaksKod: reason,
+        avvikelseOrsaksKod: setKnownReason(reason),
         datum: formatDate(date),
         heldag: wholeDay,
         startTid: this.showTimePickers ? startTime : '0:00', // BÄR doesn't accept empty string or null
         slutTid: this.showTimePickers ? endTime : '23:59', // BÄR doesn't accept empty string or null
-        alternativForKandaOrsaker: this.showOtherKnownReasonsSelect
+        alternativForKandaOrsaker: this.isOtherKnownReason
           ? {
-              typ: otherKnownReason,
+            typ: reason,
-              motivering: this.showKnownReasonTextArea ? knownReasonComment : '',
+            motivering: this.showKnownReasonTextArea ? knownReasonComment : '',
-            }
+          }
           : null,
         forvantadNarvaro: {
           startTid: expectedPresenceStartTime,

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.validator.ts

@@ -1,5 +1,5 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
-import { ANNAN_KAND_ORSAK_ID, ANNAN_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
+import { ANNAN_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
 import { CHARACTER_REGEX } from '@msfa-constants/regex';
 import { Franvaro } from '@msfa-models/franvaro.model';
 
@@ -19,7 +19,6 @@ export class FranvaroReportFormValidator {
         wholeDay,
         startTime,
         endTime,
-        otherKnownReason,
         knownReasonComment,
         expectedPresenceStartTime,
         expectedPresenceEndTime,
@@ -31,24 +30,17 @@ export class FranvaroReportFormValidator {
           reason: 'Orsak till frånvaro måste väljas',
         };
       }
-      if (reason === ANNAN_KAND_ORSAK_ID) {
+      if (reason === ANNAN_ORSAK_ID) {
-        if (!otherKnownReason) {
+        if (!knownReasonComment) {
           errors = {
             ...errors,
-            otherKnownReason: 'Känd orsak måste väljas',
+            knownReasonComment: 'Beskrivning av frånvaro är obligatorisk',
+          };
+        } else if (!CHARACTER_REGEX.test(knownReasonComment)) {
+          errors = {
+            ...errors,
+            knownReasonComment: 'Beskrivning av frånvaro har en ogiltig värde',
           };
-        } else if (otherKnownReason === ANNAN_ORSAK_ID) {
-          if (!knownReasonComment) {
-            errors = {
-              ...errors,
-              knownReasonComment: 'Beskrivning av frånvaro är obligatorisk',
-            };
-          } else if (!CHARACTER_REGEX.test(knownReasonComment)) {
-            errors = {
-              ...errors,
-              knownReasonComment: 'Beskrivning av frånvaro har en ogiltig värde',
-            };
-          }
         }
       }
       if (!date) {

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

@@ -8,11 +8,7 @@
       <dl>
         <ng-container *ngIf="report.franvaro as franvaro">
           <dt>Orsak till frånvaro</dt>
-          <dd>{{franvaro.reason}}</dd>
+          <dd>{{franvaro.reason === "Annan känd orsak" ? franvaro.otherKnownReason : franvaro.reason }}</dd>
-          <ng-container *ngIf="franvaro.otherKnownReason">
-            <dt>Annan känd orsak</dt>
-            <dd>{{franvaro.otherKnownReason}}</dd>
-          </ng-container>
           <ng-container *ngIf="franvaro.knownReasonComment">
             <dt>Beskrivning för frånvaro</dt>
             <dd>{{franvaro.knownReasonComment}}</dd>

apps/mina-sidor-fa/src/app/shared/enums/orsaks-koder-avvikelse.enum.ts

@@ -0,0 +1,7 @@
+export enum OrsaksKoderAvvikelse {
+  TACKAT_NEJ_TILL_INSATS_ELLER_AKTIVITET = 19,
+  TACKAT_NEJ_TILL_ERBJUDET_ARBETE = 20,
+  KAN_INTE_TILLGODOGÖRA_SIG_PROGRAMMET = 21,
+  MISSKÖTT_SIG_ELLER_STÖRT_VERKSAMHETEN = 22,
+  SER_TILL_ATT_ERBJUDET_ARBETE_INTE_KOMMER_TILL_STÅND = 28
+}

apps/mina-sidor-fa/src/app/shared/enums/orsaks-koder-franvaro.enum.ts

@@ -0,0 +1,8 @@
+export enum OrsaksKoderFranvaro {
+  SJUK = 15,
+  ARBETE = 16,
+  OKÄND_ORSAK = 17,
+  ANNAN_KÄND_ORSAK = 18,
+  VAB = 26,
+  UTBILDNING = 27
+}

apps/mina-sidor-fa/src/app/shared/enums/orsaks-koder-kanda.enum.ts

@@ -1,4 +1,4 @@
-export enum KandaOrsakerEnum {
+export enum OrsaksKoderKanda {
   LakarbesokTandlakarbesok = 1,
   Familjeangelagenhet = 2,
   MoteMedMyndighet = 3,

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

@@ -1,8 +1,10 @@
+import { OrsaksKoderAvvikelse } from '@msfa-enums/orsaks-koder-avvikelse.enum';
 import { AvvikelseReasonResponse } from './api/avvikelse-reason.response.model';
 
 export interface AvvikelseReason {
   name: string;
   id: number;
+  position?: number;
 }
 
 export function mapResponseToAvvikelseReason(data: AvvikelseReasonResponse): AvvikelseReason {
@@ -13,3 +15,30 @@ export function mapResponseToAvvikelseReason(data: AvvikelseReasonResponse): Avv
     id,
   };
 }
+
+export function sortAvvikelseReasons(reasons: AvvikelseReason[]): AvvikelseReason[] {
+
+  for (const reason of reasons) {
+    switch (reason.id) {
+      case OrsaksKoderAvvikelse.TACKAT_NEJ_TILL_INSATS_ELLER_AKTIVITET:
+        reason.position = 3
+        break;
+      case OrsaksKoderAvvikelse.TACKAT_NEJ_TILL_ERBJUDET_ARBETE:
+        reason.position = 2;
+        break;
+      case OrsaksKoderAvvikelse.KAN_INTE_TILLGODOGÖRA_SIG_PROGRAMMET:
+        reason.position = 1;
+        break;
+      case OrsaksKoderAvvikelse.MISSKÖTT_SIG_ELLER_STÖRT_VERKSAMHETEN:
+        reason.position = 5;
+        break;
+      case OrsaksKoderAvvikelse.SER_TILL_ATT_ERBJUDET_ARBETE_INTE_KOMMER_TILL_STÅND:
+        reason.position = 4;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return reasons.sort((reasonA, reasonB) => reasonA.position - reasonB.position);
+}

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

@@ -1,8 +1,12 @@
+import { ANNAN_KAND_ORSAK_ID } from '@msfa-constants/franvaro-reasons';
+import { OrsaksKoderFranvaro } from '@msfa-enums/orsaks-koder-franvaro.enum';
+import { OrsaksKoderKanda } from '@msfa-enums/orsaks-koder-kanda.enum';
 import { FranvaroReasonResponse } from './api/franvaro-reason.response.model';
 
 export interface FranvaroReason {
   name: string;
   value: number;
+  position?: number;
 }
 
 export function mapResponseToFranvaroReason(data: FranvaroReasonResponse): FranvaroReason {
@@ -13,3 +17,61 @@ export function mapResponseToFranvaroReason(data: FranvaroReasonResponse): Franv
     value: id,
   };
 }
+
+export function sortFranvaroReasons(reasons: FranvaroReason[]): FranvaroReason[] {
+  const filteredReasons = reasons.filter(reason =>
+    reason.value !== OrsaksKoderFranvaro.ANNAN_KÄND_ORSAK);
+
+  for (const reason of filteredReasons) {
+    switch (reason.value) {
+      case OrsaksKoderFranvaro.SJUK:
+        reason.position = 1;
+        break;
+      case OrsaksKoderFranvaro.ARBETE:
+        reason.position = 3;
+        break;
+      case OrsaksKoderFranvaro.OKÄND_ORSAK:
+        reason.position = 10;
+        break;
+      case OrsaksKoderFranvaro.VAB:
+        reason.position = 2;
+        break;
+      case OrsaksKoderFranvaro.UTBILDNING:
+        reason.position = 4;
+        break;
+      case OrsaksKoderKanda.LakarbesokTandlakarbesok:
+        reason.position = 6;
+        break;
+      case OrsaksKoderKanda.Familjeangelagenhet:
+        reason.position = 8;
+        break;
+      case OrsaksKoderKanda.MoteMedMyndighet:
+        reason.position = 7;
+        break;
+      case OrsaksKoderKanda.Anstallningsintervju:
+        reason.position = 5;
+        break;
+      case OrsaksKoderKanda.AnnanOrsak:
+        reason.position = 9;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return filteredReasons.sort((reasonA, reasonB) => reasonA.position - reasonB.position);
+}
+
+export function setKnownReason(knownReason: string): string {
+  let reason: string;
+
+  for (const orsakskod in OrsaksKoderFranvaro) {
+    if (orsakskod === knownReason) {
+      return reason = knownReason;
+    } else {
+      reason = ANNAN_KAND_ORSAK_ID;
+    }
+  }
+
+  return reason;
+}