Pull request #270: Feature/TV-565 formulär signal

Merge in TEA/mina-sidor-fa-web from feature/TV-565-formulär-signal to develop

Squashed commit of the following:

commit 4c17164caafd4c530e9a1dad7bd960c7a39b79ac
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 17 12:09:05 2021 +0100

    Update signal-form.validator.ts

commit bd9437f70e312e5b6685faf8339cb12e5970fa32
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 17 12:08:18 2021 +0100

    omfattnign i procent matchar nu slutredovsining

commit 913e22e02d9c2afa67caec6f747ee2cc4c61d487
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 17 11:54:11 2021 +0100

    Update signal-form.module.ts

commit 3ca50a7f46124e6386e45c78c56b31a2af3a3a76
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 17 11:52:49 2021 +0100

    change type of form to conform with other reports

commit 7313e8e4e9a86c08a5d885a9474f5e57d250269a
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Wed Nov 17 11:38:22 2021 +0100

    Replaced digi ng and replace slider with input

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

@@ -22,63 +22,39 @@
 
       <ng-template #formRef>
         <form class="signal-form__form" [formGroup]="signalFormGroup" id="signal-form" (ngSubmit)="openConfirmDialog()">
-          <div class="signal-form__form-item">
+          <ui-select
-            <digi-ng-form-select
+            [formControl]="typeFormControl"
-              [formControl]="typeFormControl"
+            uiLabel="Typ av sysselsättning"
-              afLabel="Typ av sysselsättning"
+            uiPlaceholder="Välj typ av sysselsättning"
-              afPlaceholder="Välj typ av sysselsättning"
+            [uiOptions]="typeSelectItems"
-              [afSelectItems]="typeSelectItems"
+            [uiRequired]="true"
-              [afRequired]="true"
+            [uiAnnounceIfOptional]="true"
-              [afAnnounceIfOptional]="true"
+            [uiInvalid]="formControlIsInvalid(typeFormName)"
-              [afDisableValidStyle]="true"
+            [uiValidationMessage]="formErrors.type"
-              [afInvalid]="formControlIsInvalid('type')"
+          ></ui-select>
-            ></digi-ng-form-select>
+          <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
-            <div aria-atomic="true" role="alert">
+            <ui-radiobutton-group
-              <digi-ng-form-validation-message
+              [formControl]="omfattningFormControl"
-                *ngIf="formControlIsInvalid('type')"
+              [uiRequired]="true"
-                class="signal-form__validation-message"
+              [uiAnnounceIfOptional]="true"
-                [afPositive]="false"
+              [uiRadiobuttons]="omfattningRadioButtons"
-                [afValidationText]="formErrors.type"
+              [uiInvalid]="formControlIsInvalid(omfattningFormName)"
-              ></digi-ng-form-validation-message>
+              [uiValidationMessage]="formErrors.omfattning"
-            </div>
+            ></ui-radiobutton-group>
-          </div>
+          </digi-form-fieldset>
-          <div class="signal-form__form-item">
+          <ui-input
-            <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
+            *ngIf="showPercentFormControl"
-              <ui-radiobutton-group
+            class="signal-form__number-input"
-                formControlName="omfattning"
+            [formControl]="percentFormControl"
-                [uiRequired]="true"
+            uiType="number"
-                [uiAnnounceIfOptional]="true"
+            [uiMin]="1"
-                [uiRadiobuttons]="omfattningRadioButtons"
+            [uiMax]="99"
-              ></ui-radiobutton-group>
+            uiLabel="Antal procent vid deltid"
-            </digi-form-fieldset>
+            [uiRequired]="true"
-            <div aria-atomic="true" role="alert">
+            [uiAnnounceIfOptional]="true"
-              <digi-ng-form-validation-message
+            [uiInvalid]="formControlIsInvalid(percentFormName)"
-                *ngIf="formControlIsInvalid('omfattning')"
+            [uiValidationMessage]="formErrors.percent"
-                class="signal-form__validation-message"
+          ></ui-input>
-                [afPositive]="false"
-                [afValidationText]="formErrors.omfattning"
-              ></digi-ng-form-validation-message>
-            </div>
-          </div>
-          <div class="signal-form__form-item" *ngIf="showPercentFormControl">
-            <digi-ng-form-range
-              class="signal-form__percent-range"
-              [afMin]="5"
-              [afMax]="100"
-              [afStep]="5"
-              afValueSuffix="%"
-              [formControl]="percentFormControl"
-              afLabel="Antal procent vid deltid"
-            ></digi-ng-form-range>
-            <div aria-atomic="true" role="alert">
-              <digi-ng-form-validation-message
-                *ngIf="formControlIsInvalid('percent')"
-                class="signal-form__validation-message"
-                [afPositive]="false"
-                [afValidationText]="formErrors.percent"
-              ></digi-ng-form-validation-message>
-            </div>
-          </div>
 
           <div class="signal-form__form-item">
             <digi-ng-form-datepicker
@@ -86,7 +62,7 @@
               [afLabel]="'Startdatum för ' + (typeFormControl.value || 'arbete/utbildning')"
               [afDisableValidStyle]="true"
               [afRequired]="true"
-              [afInvalid]="formControlIsInvalid('startDate')"
+              [afInvalid]="formControlIsInvalid(startDateFormName)"
               [afAnnounceIfOptional]="true"
               [afMinDate]="avrop.startDate"
               [afMaxDate]="getMaxDate(avrop.startDate)"

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

@@ -31,4 +31,10 @@
     max-width: 20rem;
     display: block;
   }
+
+  &__number-input {
+    ::ng-deep input {
+      width: auto !important;
+    }
+  }
 }

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

@@ -5,7 +5,6 @@ import { ActivatedRoute } from '@angular/router';
 import { SignalRequest } from '@msfa-models/api/signal.request.model';
 import { DeltagareAvrop } from '@msfa-models/avrop.model';
 import { CustomError } from '@msfa-models/error/custom-error';
-import { Signal } from '@msfa-models/signal.model';
 import { formatDate } from '@msfa-utils/format-to-date.util';
 import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { add } from 'date-fns';
@@ -13,6 +12,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
 import { SignalFormService } from './signal-form.service';
 import { SignalFormValidator } from './signal-form.validator';
+import { SignalFormData, SignalFormKeys, SignalOmfattning } from './signal-form.model';
 
 @Component({
   selector: 'msfa-signal-form',
@@ -21,6 +21,11 @@ import { SignalFormValidator } from './signal-form.validator';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SignalFormComponent {
+  readonly typeFormName: SignalFormKeys = 'type';
+  readonly omfattningFormName: SignalFormKeys = 'omfattning';
+  readonly percentFormName: SignalFormKeys = 'percent';
+  readonly startDateFormName: SignalFormKeys = 'startDate';
+
   shouldValidate$ = new BehaviorSubject<boolean>(false);
   confirmDialogOpen$ = new BehaviorSubject<boolean>(false);
   signalFormGroup = new FormGroup(
@@ -50,8 +55,8 @@ export class SignalFormComponent {
   ];
 
   omfattningRadioButtons: Radiobutton[] = [
-    { label: 'Heltid', value: 'heltid' },
+    { label: 'Heltid', value: SignalOmfattning.Heltid },
-    { label: 'Deltid', value: 'deltid' },
+    { label: 'Deltid', value: SignalOmfattning.Deltid },
   ];
 
   constructor(private signalFormService: SignalFormService, private activatedRoute: ActivatedRoute) {}
@@ -61,16 +66,16 @@ export class SignalFormComponent {
   }
 
   get typeFormControl(): FormControl {
-    return this.signalFormGroup.get('type') as FormControl;
+    return this.signalFormGroup.get(this.typeFormName) as FormControl;
   }
   get omfattningFormControl(): FormControl {
-    return this.signalFormGroup.get('omfattning') as FormControl;
+    return this.signalFormGroup.get(this.omfattningFormName) as FormControl;
   }
   get percentFormControl(): FormControl {
-    return this.signalFormGroup.get('percent') as FormControl;
+    return this.signalFormGroup.get(this.percentFormName) as FormControl;
   }
   get startDateFormControl(): FormControl {
-    return this.signalFormGroup.get('startDate') as FormControl;
+    return this.signalFormGroup.get(this.startDateFormName) as FormControl;
   }
 
   get showPercentFormControl(): boolean {
@@ -106,7 +111,7 @@ export class SignalFormComponent {
   submitAndCloseConfirmDialog(genomforandeReferens: number): void {
     this.submitLoading$.next(true);
 
-    const { type, omfattning, startDate, percent } = this.signalFormGroup.value as Signal;
+    const { type, omfattning, startDate, percent } = this.signalFormGroup.value as SignalFormData;
 
     const postRequest: SignalRequest = {
       genomforandeReferens: +genomforandeReferens,

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

@@ -0,0 +1,17 @@
+export enum SignalOmfattning {
+  Heltid = 'heltid',
+  Deltid = 'deltid',
+}
+export enum SignalType {
+  Arbete = 'arbete',
+  Utbildning = 'utbildning',
+}
+
+export interface SignalFormData {
+  type: SignalType;
+  omfattning: SignalOmfattning;
+  percent: number;
+  startDate: Date;
+}
+
+export type SignalFormKeys = keyof SignalFormData;

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

@@ -1,7 +1,5 @@
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
-import { DigiNgFormRangeModule } from '@af/digi-ng/_form/form-range';
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -16,6 +14,9 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { SignalFormComponent } from './signal-form.component';
 import { SignalFormService } from './signal-form.service';
+import { UiInputModule } from '@ui/input/input.module';
+import { UiSelectModule } from '@ui/select/select.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -31,11 +32,12 @@ import { SignalFormService } from './signal-form.service';
     UiRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
     UiSkeletonModule,
+    UiSelectModule,
+    UiLoaderModule,
     DigiNgDialogModule,
-    DigiNgFormRangeModule,
     DigiNgFormValidationMessageModule,
-    DigiNgFormSelectModule,
     ReportDescriptionListModule,
+    UiInputModule,
   ],
   providers: [SignalFormService],
   exports: [SignalFormComponent],

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

@@ -1,11 +1,11 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
-import { Signal } from '@msfa-models/signal.model';
+import { SignalFormData } from './signal-form.model';
 
 export class SignalFormValidator {
   static isSignalValid(): ValidatorFn {
     return (c: AbstractControl): { [key: string]: string } => {
       let errors: { [key: string]: string } = null;
-      const { type, omfattning, percent, startDate } = c.value as Signal;
+      const { type, omfattning, percent, startDate } = c.value as SignalFormData;
 
       if (!type) {
         errors = {
@@ -14,16 +14,15 @@ export class SignalFormValidator {
         };
       }
       if (type && omfattning === 'deltid') {
-        if (percent < 5) {
+        if (percent < 1) {
           errors = {
             ...errors,
-            percent: 'Antal procent måste vara högre än 5%',
+            percent: 'Omfattning i procent får inte vara mindre än 1% om deltid har valts',
           };
-        }
+        } else if (percent > 99) {
-        if (percent > 100) {
           errors = {
             ...errors,
-            percent: 'Antal procent måste vara lägre än 100%',
+            percent: 'Omfattning i procent får inte vara mer än 99% om deltid har valts',
           };
         }
       }

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

@@ -1,11 +1,5 @@
 import { SignalResponse } from './api/signal.response.model';
-
+import { Signal } from '../../pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.model';
-export interface Signal {
-  type: 'arbete' | 'utbildning';
-  omfattning: 'heltid' | 'deltid';
-  percent: number;
-  startDate: Date;
-}
 
 export function mapResponseToSignal(data: SignalResponse): Signal {
   const { typ, startdatum, omfattning, omfattning_procent } = data;