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

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

Browse Source
This commit is contained in:
Daniel Appelgren
2021-11-19 10:30:17 +01:00
parent d42001f36a fbd04112fb
commit d5f9fc8255
12 changed files with 101 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<digi-form-input
class="periodisk-redovisning-form__activity-hours"
af-label="Antal timmar under perioden"
af-type="number"
af-max="200"
af-min="0"
[afValidation]="activityHoursIsInvalid(activityFormGroup) ? 'error' : 'neutral'"
formControlName="hours"
></digi-form-input>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="activityHoursIsInvalid(activityFormGroup)"
af-variation="error"
>
{{activityFormGroup.errors.hours}}
</digi-form-validation-message>
</div>
</div>
<ui-input
class="periodisk-redovisning-form__activity-hours"
formControlName="hours"
uiType="number"
[uiMin]="0"
[uiMax]="200"
uiLabel="Antal timmar under perioden"
[uiRequired]="true"
[uiAnnounceIfOptional]="true"
[uiInvalid]="activityHoursIsInvalid(activityFormGroup)"
[uiValidationMessage]="activityFormGroup.errors?.hours"
></ui-input>
<div class="periodisk-redovisning-form__activity-group">
<digi-ng-form-checkbox

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

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

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

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

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

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

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

31
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, 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: '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 {
@@ -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: SignalRequest = {
genomforandereferens,
type,
omfattning,
omfattning_procent: omfattning === 'deltid' ? percent : null,
startdatum: formatDate(startDate),
};
const postRequest = this._formDataToRequest(genomforandereferens, this.signalFormGroup.value as SignalFormData);
this.signalFormService
.postSignal$(postRequest)

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;

2
libs/ui/src/input/input.component.ts
View File

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