feature(Signal om arbete eller studier): Uppdaterad UX för val av sysselsättning (fyra radioknappar, ingen drop-down (TV-440)

Merge in TEA/mina-sidor-fa-web from feature/TV-440 to develop

Squashed commit of the following:

commit 654b809ae6900a98cc568a7e3fde9b820fe5d515
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Dec 30 15:47:46 2021 +0100

    TV-440  some renameing

commit 5eb2fb70dc8791badf3ba3e15b4454065db36c4a
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Thu Dec 30 11:06:15 2021 +0100

    TV-440 renamed enums for work and education

commit b1c80d583277d434dfb837d46d7d469aa8ed1fb6
Author: fueno <nicolas.fuentes-maturana@arbetsformedlingen.se>
Date:   Wed Dec 29 15:32:33 2021 +0100

    TV-440 UX updated, changed select to radiobuttons

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

@@ -21,35 +21,27 @@
       </div>
 
       <ng-template #formRef>
+        <h2>Har den sökande fått arbete eller påbörjat studier?</h2>
+        <p>Ange sysselsättning (obligatoriskt)</p>
         <form class="signal-form__form" [formGroup]="signalFormGroup" id="signal-form" (ngSubmit)="openConfirmDialog()">
-          <ui-select
+          <digi-form-fieldset af-name="type" af-form="signal-form">
-            [formControl]="typeFormControl"
-            uiLabel="Typ av sysselsättning"
-            uiPlaceholder="Välj typ av sysselsättning"
-            [uiOptions]="typeSelectItems"
-            [uiRequired]="true"
-            [uiAnnounceIfOptional]="true"
-            [uiInvalid]="formControlIsInvalid(typeFormName)"
-            [uiValidationMessage]="formErrors.type"
-          ></ui-select>
-          <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
             <ui-radiobutton-group
-              [formControl]="omfattningFormControl"
+              [formControl]="typeFormControl"
               [uiRequired]="true"
               [uiAnnounceIfOptional]="true"
-              [uiRadiobuttons]="omfattningRadioButtons"
+              [uiRadiobuttons]="typeRadioButtons"
-              [uiInvalid]="formControlIsInvalid(omfattningFormName)"
+              [uiInvalid]="formControlIsInvalid(typeFormName)"
-              [uiValidationMessage]="formErrors.omfattning"
+              [uiValidationMessage]="formErrors.type"
             ></ui-radiobutton-group>
           </digi-form-fieldset>
           <ui-input
-            *ngIf="showPercentFormControl"
+            *ngIf="isDeltid"
             class="signal-form__number-input"
             [formControl]="percentFormControl"
             uiType="number"
             [uiMin]="1"
             [uiMax]="99"
-            uiLabel="Antal procent vid deltid"
+            uiLabel="Ange omfattning i procent"
             [uiRequired]="true"
             [uiAnnounceIfOptional]="true"
             [uiInvalid]="formControlIsInvalid(percentFormName)"
@@ -59,7 +51,7 @@
           <div class="signal-form__form-item">
             <digi-ng-form-datepicker
               [formControl]="startDateFormControl"
-              [afLabel]="'Startdatum för ' + (typeFormControl.value || 'arbete/utbildning')"
+              [afLabel]="datePickerLabel"
               [afDisableValidStyle]="true"
               [afRequired]="true"
               [afInvalid]="formControlIsInvalid(startDateFormName)"
@@ -97,12 +89,10 @@
           >
             <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
-              <dt>Typ av sysselsättning</dt>
+              <dt>Sysselsättning</dt>
               <dd>{{convertTypeValueToLabel(typeFormControl.value)}}</dd>
-              <dt>Omfattning</dt>
+              <ng-container *ngIf="isDeltid">
-              <dd>{{convertOmfattningValueToLabel(omfattningFormControl.value)}}</dd>
+                <dt>Omfattning i procent</dt>
-              <ng-container *ngIf="showPercentFormControl">
-                <dt>Antal procent vid deltid</dt>
                 <dd>{{percentFormControl.value}}%</dd>
               </ng-container>
               <dt>Startdatum</dt>

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

@@ -4,6 +4,10 @@
 .signal-form {
   max-width: var(--digi--typography--text--max-width);
 
+  h2 {
+    margin-bottom: var(--digi--layout--gutter--s);
+  }
+
   &__confirmation,
   &__warning,
   &__form {

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

@@ -1,4 +1,3 @@
-import { SelectOption } from '@ui/select/select-option.model';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
@@ -10,7 +9,7 @@ import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
 import { add } from 'date-fns';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map, shareReplay, switchMap, take } from 'rxjs/operators';
-import { SignalFormData, SignalFormKeys, SignalOmfattning, SignalType } from './signal-form.model';
+import { SignalFormData, SignalFormKeys, SignalType } from './signal-form.model';
 import { SignalFormService } from './signal-form.service';
 import { SignalFormValidator } from './signal-form.validator';
 
@@ -22,7 +21,6 @@ import { SignalFormValidator } from './signal-form.validator';
 })
 export class SignalFormComponent {
   readonly typeFormName: SignalFormKeys = 'type';
-  readonly omfattningFormName: SignalFormKeys = 'omfattning';
   readonly percentFormName: SignalFormKeys = 'percent';
   readonly startDateFormName: SignalFormKeys = 'startDate';
 
@@ -31,7 +29,6 @@ export class SignalFormComponent {
   signalFormGroup = new FormGroup(
     {
       type: new FormControl(null),
-      omfattning: new FormControl(SignalOmfattning.Heltid),
       percent: new FormControl(50),
       startDate: new FormControl(new Date()),
     },
@@ -49,23 +46,17 @@ export class SignalFormComponent {
     shareReplay(1)
   );
 
-  typeSelectItems: SelectOption[] = [
+  typeRadioButtons: Radiobutton[] = [
-    { name: 'Arbete', value: SignalType.Arbete },
+    { label: 'Arbete heltid', value: SignalType.Arbete_Heltid },
-    { name: 'Utbildning', value: SignalType.Utbildning },
+    { label: 'Arbete deltid', value: SignalType.Arbete_Deltid },
+    { label: 'Utbildning heltid', value: SignalType.Utbildning_Heltid },
+    { label: 'Utbildning deltid', value: SignalType.Utbildning_Deltid },
   ];
 
-  omfattningRadioButtons: Radiobutton[] = [
+  constructor(private signalFormService: SignalFormService, private activatedRoute: ActivatedRoute) { }
-    { label: 'Heltid', value: SignalOmfattning.Heltid },
-    { label: 'Deltid', value: SignalOmfattning.Deltid },
-  ];
-
-  constructor(private signalFormService: SignalFormService, private activatedRoute: ActivatedRoute) {}
 
   convertTypeValueToLabel(type: SignalType): string {
-    return this.typeSelectItems?.find(selectItem => selectItem.value === type)?.name;
+    return this.typeRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label;
-  }
-  convertOmfattningValueToLabel(type: SignalOmfattning): string {
-    return this.omfattningRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label;
   }
 
   get formErrors(): { [key: string]: string } {
@@ -75,9 +66,7 @@ export class SignalFormComponent {
   get typeFormControl(): FormControl {
     return this.signalFormGroup.get(this.typeFormName) as FormControl;
   }
-  get omfattningFormControl(): FormControl {
+
-    return this.signalFormGroup.get(this.omfattningFormName) as FormControl;
-  }
   get percentFormControl(): FormControl {
     return this.signalFormGroup.get(this.percentFormName) as FormControl;
   }
@@ -85,14 +74,27 @@ export class SignalFormComponent {
     return this.signalFormGroup.get(this.startDateFormName) as FormControl;
   }
 
-  get showPercentFormControl(): boolean {
+  get isDeltid(): boolean {
-    return this.omfattningFormControl.value === SignalOmfattning.Deltid;
+    return this.typeFormControl.value === SignalType.Arbete_Deltid || this.typeFormControl.value === SignalType.Utbildning_Deltid;
   }
 
   get startDateFormValueAsDate(): Date {
     return new Date(this.startDateFormControl.value);
   }
 
+  get datePickerLabel(): string {
+    switch (this.typeFormControl.value) {
+      case SignalType.Arbete_Heltid:
+      case SignalType.Arbete_Deltid:
+        return 'Startdatum för arbete';
+      case SignalType.Utbildning_Heltid:
+      case SignalType.Utbildning_Deltid:
+        return 'Startdatum för utbildning';
+      default:
+        return 'Startdatum för arbete/utbildning';
+    }
+  }
+
   formControlIsInvalid(formControlName: string): boolean {
     return this.formErrors[formControlName] && this.shouldValidate$.getValue();
   }
@@ -117,36 +119,32 @@ export class SignalFormComponent {
 
   private typeToRequest(type: string): SignalRequestType {
     switch (type) {
-      case SignalType.Arbete:
+      case SignalType.Arbete_Heltid:
-        return SignalRequestType.Work;
+        return SignalRequestType.Arbete;
-      case SignalType.Utbildning:
+      case SignalType.Arbete_Deltid:
-        return SignalRequestType.Education;
+        return SignalRequestType.Arbete;
-      default:
+      case SignalType.Utbildning_Heltid:
-        return;
+        return SignalRequestType.Utbildning;
-    }
+      case SignalType.Utbildning_Deltid:
-  }
+        return SignalRequestType.Utbildning;
-  private omfattningToRequest(omfattning: string): SignalRequestOmfattning {
-    switch (omfattning) {
-      case 'heltid':
-        return SignalRequestOmfattning.Heltid;
-      case 'deltid':
-        return SignalRequestOmfattning.Deltid;
       default:
         return;
     }
   }
 
   private _formDataToRequest(genomforandereferens: number, formData: SignalFormData): SignalRequest {
-    const { type, omfattning, startDate, percent } = formData;
+    const { type, startDate, percent } = formData;
 
     const requestType: SignalRequestType = this.typeToRequest(type);
-    const requestOmfattning: SignalRequestOmfattning = this.omfattningToRequest(omfattning);
+    const requestOmfattning: SignalRequestOmfattning = (this.typeFormControl.value as string).includes(SignalRequestOmfattning.Heltid)
+      ? SignalRequestOmfattning.Heltid
+      : SignalRequestOmfattning.Deltid;
 
     return {
       genomforandereferens,
       type: requestType,
       omfattning: requestOmfattning,
-      omfattningPercent: requestOmfattning === SignalRequestOmfattning.Deltid ? percent : null,
+      omfattningPercent: requestOmfattning === SignalRequestOmfattning.Deltid ? percent : 100,
       startDate: formatDate(startDate),
     };
   }

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

@@ -3,8 +3,10 @@ export enum SignalOmfattning {
   Deltid = 'deltid',
 }
 export enum SignalType {
-  Arbete = 'arbete',
+  Arbete_Heltid = 'arbete_heltid',
-  Utbildning = 'utbildning',
+  Arbete_Deltid = 'arbete_deltid',
+  Utbildning_Heltid = 'utbildning_heltid',
+  Utbildning_Deltid = 'utbildning_deltid',
 }
 
 export interface SignalFormData {

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

@@ -31,9 +31,9 @@ export class SignalViewComponent {
   );
   typeToText(type: SignalResponseType): string {
     switch (type) {
-      case SignalResponseType.Work:
+      case SignalResponseType.Arbete:
         return 'Arbete';
-      case SignalResponseType.Education:
+      case SignalResponseType.Utbildning:
         return 'Utbildning';
       default:
         return 'Okänd';

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

@@ -1,6 +1,6 @@
 export enum SignalRequestType {
-  Work = 'work',
+  Arbete = 'arbete',
-  Education = 'education',
+  Utbildning = 'utbildning',
 }
 
 export enum SignalRequestOmfattning {

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

@@ -1,6 +1,6 @@
 export enum SignalResponseType {
-  Work = 'work',
+  Arbete = 'arbete',
-  Education = 'education',
+  Utbildning = 'utbildning',
 }
 
 export enum SignalResponseOmfattning {