arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Daniel Appelgren
2022-01-04 15:39:02 +01:00
parent fb6239afbe
commit 65c29e065d
7 changed files with 64 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<ui-radiobutton-group
[formControl]="typeFormControl"
uiLabel="Typ av sysselsättning"
uiPlaceholder="Välj typ av sysselsättning"
[uiOptions]="typeSelectItems"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiRadiobuttons]="typeRadioButtons"
[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"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiRadiobuttons]="omfattningRadioButtons"
[uiInvalid]="formControlIsInvalid(omfattningFormName)"
[uiValidationMessage]="formErrors.omfattning"
></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>
<dd>{{convertOmfattningValueToLabel(omfattningFormControl.value)}}</dd>
<ng-container *ngIf="showPercentFormControl">
<dt>Antal procent vid deltid</dt>
<ng-container *ngIf="isDeltid">
<dt>Omfattning i procent</dt>
<dd>{{percentFormControl.value}}%</dd>
</ng-container>
<dt>Startdatum</dt>

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

@@ -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 {

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

@@ -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[] = [
{ name: 'Arbete', value: SignalType.Arbete },
{ name: 'Utbildning', value: SignalType.Utbildning },
];
omfattningRadioButtons: Radiobutton[] = [
{ label: 'Heltid', value: SignalOmfattning.Heltid },
{ label: 'Deltid', value: SignalOmfattning.Deltid },
typeRadioButtons: Radiobutton[] = [
{ label: 'Arbete heltid', value: SignalType.Arbete_Heltid },
{ label: 'Arbete deltid', value: SignalType.Arbete_Deltid },
{ label: 'Utbildning heltid', value: SignalType.Utbildning_Heltid },
{ label: 'Utbildning deltid', value: SignalType.Utbildning_Deltid },
];
constructor(private signalFormService: SignalFormService, private activatedRoute: ActivatedRoute) { }
convertTypeValueToLabel(type: SignalType): string {
return this.typeSelectItems?.find(selectItem => selectItem.value === type)?.name;
}
convertOmfattningValueToLabel(type: SignalOmfattning): string {
return this.omfattningRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label;
return this.typeRadioButtons?.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 {
return this.omfattningFormControl.value === SignalOmfattning.Deltid;
get isDeltid(): boolean {
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:
return SignalRequestType.Work;
case SignalType.Utbildning:
return SignalRequestType.Education;
default:
return;
}
}
private omfattningToRequest(omfattning: string): SignalRequestOmfattning {
switch (omfattning) {
case 'heltid':
return SignalRequestOmfattning.Heltid;
case 'deltid':
return SignalRequestOmfattning.Deltid;
case SignalType.Arbete_Heltid:
return SignalRequestType.Arbete;
case SignalType.Arbete_Deltid:
return SignalRequestType.Arbete;
case SignalType.Utbildning_Heltid:
return SignalRequestType.Utbildning;
case SignalType.Utbildning_Deltid:
return SignalRequestType.Utbildning;
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),
};
}

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

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

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

@@ -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';

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

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

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

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