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

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

Browse Source 
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
This commit is contained in:
Daniel Appelgren
2021-11-17 16:08:06 +01:00
parent 83cc112600
commit d1f7a66f15
7 changed files with 83 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<digi-ng-form-select
[formControl]="typeFormControl"
afLabel="Typ av sysselsättning"
afPlaceholder="Välj typ av sysselsättning"
[afSelectItems]="typeSelectItems"
[afRequired]="true"
[afAnnounceIfOptional]="true"
[afDisableValidStyle]="true"
[afInvalid]="formControlIsInvalid('type')"
></digi-ng-form-select>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid('type')"
class="signal-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.type"
></digi-ng-form-validation-message>
</div>
</div>
<div class="signal-form__form-item">
<digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
<ui-radiobutton-group
formControlName="omfattning"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiRadiobuttons]="omfattningRadioButtons"
></ui-radiobutton-group>
</digi-form-fieldset>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid('omfattning')"
class="signal-form__validation-message"
[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>
<ui-select
[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"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiRadiobuttons]="omfattningRadioButtons"
[uiInvalid]="formControlIsInvalid(omfattningFormName)"
[uiValidationMessage]="formErrors.omfattning"
></ui-radiobutton-group>
</digi-form-fieldset>
<ui-input
*ngIf="showPercentFormControl"
class="signal-form__number-input"
[formControl]="percentFormControl"
uiType="number"
[uiMin]="1"
[uiMax]="99"
uiLabel="Antal procent vid deltid"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiInvalid]="formControlIsInvalid(percentFormName)"
[uiValidationMessage]="formErrors.percent"
></ui-input>
<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)"

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

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

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

@@ -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: 'Deltid', value: 'deltid' },
{ label: 'Heltid', value: SignalOmfattning.Heltid },
{ 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,

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

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

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

@@ -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],

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

@@ -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',
};
}
if (percent > 100) {
} else if (percent > 99) {
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',
};
}
}

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

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