Merge branch 'develop' into feature/TV-565-signal-view

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

@@ -127,25 +127,18 @@
                           [afLabel]="activitiesFormArrayMetadata[i].name"
                         ></digi-ng-form-checkbox>
                         <div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
-                          <div class="periodisk-redovisning-form__activity-group">
+                          <ui-input
-                            <digi-form-input
+                            class="periodisk-redovisning-form__activity-hours"
-                              class="periodisk-redovisning-form__activity-hours"
+                            formControlName="hours"
-                              af-label="Antal timmar under perioden"
+                            uiType="number"
-                              af-type="number"
+                            [uiMin]="0"
-                              af-max="200"
+                            [uiMax]="200"
-                              af-min="0"
+                            uiLabel="Antal timmar under perioden"
-                              [afValidation]="activityHoursIsInvalid(activityFormGroup) ? 'error' : 'neutral'"
+                            [uiRequired]="true"
-                              formControlName="hours"
+                            [uiAnnounceIfOptional]="true"
-                            ></digi-form-input>
+                            [uiInvalid]="activityHoursIsInvalid(activityFormGroup)"
-                            <div aria-atomic="true" role="alert">
+                            [uiValidationMessage]="activityFormGroup.errors?.hours"
-                              <digi-form-validation-message
+                          ></ui-input>
-                                *ngIf="activityHoursIsInvalid(activityFormGroup)"
-                                af-variation="error"
-                              >
-                                {{activityFormGroup.errors.hours}}
-                              </digi-form-validation-message>
-                            </div>
-                          </div>
 
                           <div class="periodisk-redovisning-form__activity-group">
                             <digi-ng-form-checkbox

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

@@ -2,7 +2,7 @@ export interface PeriodiskRedovisningFormActivity {
   isSelected: boolean;
   performedRemotely: boolean;
   performedPhysically: boolean;
-  hours: string;
+  hours: number;
 }
 
 export interface PeriodiskRedovisningFormData {

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

@@ -7,6 +7,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiInputModule } from '@ui/input/input.module';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
 import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
@@ -32,6 +33,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     DigiNgFormSelectModule,
     DigiNgFormCheckboxModule,
     UiRadiobuttonGroupModule,
+    UiInputModule,
   ],
   providers: [PeriodiskRedovisningFormService],
   exports: [PeriodiskRedovisningFormComponent],

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

@@ -47,7 +47,7 @@ export class PeriodiskRedovisningValidator {
         };
       }
 
-      const isValidHours = hours?.length > 0 && Number.isInteger(+hours) && +hours >= 0 && +hours <= 200;
+      const isValidHours = Number.isInteger(hours) && hours >= 0 && hours <= 200;
 
       if (isSelected && !isValidHours) {
         errors = {

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, SignalRequestOmfattning, SignalRequestType } 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 {
@@ -135,22 +140,14 @@ export class SignalFormComponent {
       type: requestType,
       omfattning: requestOmfattning,
       omfattningPercent: requestOmfattning === SignalRequestOmfattning.Deltid ? percent : null,
-      startdatum: formatDate(startDate),
+      startDate: formatDate(startDate),
     };
   }
 
   submitAndCloseConfirmDialog(genomforandereferens: number): void {
     this.submitLoading$.next(true);
 
-    const { type, omfattning, startDate, percent } = this.signalFormGroup.value as Signal;
+    const postRequest = this._formDataToRequest(genomforandereferens, this.signalFormGroup.value as SignalFormData);
-
-    const postRequest: SignalRequest = {
-      genomforandereferens,
-      type,
-      omfattning,
-      omfattning_procent: omfattning === 'deltid' ? percent : null,
-      startdatum: formatDate(startDate),
-    };
 
     this.signalFormService
       .postSignal$(postRequest)

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;

libs/ui/src/input/input.component.ts

@@ -75,7 +75,7 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
   }
 
   checkForChange(rawValue: string): void {
-    const value = this.uiType === UiInputType.NUMBER ? +rawValue : rawValue;
+    const value = this.uiType === UiInputType.NUMBER ? (rawValue !== '' ? +rawValue : null) : rawValue;
     if (this._value !== value) {
       if (this.onChange) {
         this.onChange(value);