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

Pull request #277: - Ersatt alla digi-ng-form-input med ui-input

Browse Source 
Merge in TEA/mina-sidor-fa-web from feature/TV-846-digi-ng-form-input to develop

Squashed commit of the following:

commit 80b2e4c19eefa9088767200d191785ce4bd84612
Merge: 4a8dc925 d307bd13
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 11:17:16 2021 +0100

    Merge branch 'develop' into feature/TV-846-digi-ng-form-input

commit 4a8dc9255789a3991b6eab2795c28f58a1276ed6
Merge: 5feff43a eeb02c0e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 14:56:07 2021 +0100

    Merge branch 'develop' into feature/TV-846-digi-ng-form-input

commit 5feff43a48eb6553ba7d963b530969ae584db938
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 14:55:56 2021 +0100

    - Ersatt alla digi-ng-form-input med ui-input
    - Använt ui-inputs egna validation-message där validation-message används tillsammans
    - La till onBlur som emittar uiOnBlur för att trigga touched på ui-input som annars enbart blev touched på submit där markAllAsTouched körs.
This commit is contained in:
Nikola Holst Nikolic
2021-11-24 11:17:46 +01:00
parent d307bd1368
commit 60d4ac4b2c
10 changed files with 59 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html
View File

@@ -10,18 +10,15 @@
[headingText]="'Åtgärda följande fel för att spara dina ändringar:'"
[validationErrorLinks]="getValidationErrorLinks()"
></msfa-error-list>
<digi-ng-form-input
[afId]="emailElementId"
afLabel="E-post adress"
afType="email"
[formControlName]="emailFormControlName"
[afDisableValidStyle]="true"
[afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
></digi-ng-form-input>
<ui-validation-message
[uiShowValidationMessage]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
<ui-input
[uiId]="emailElementId"
uiLabel="E-post adress"
uiType="email"
[formControl]="emailFormControl"
(uiOnBlur)="markFormControlAsTouched(emailFormControl)"
[uiInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl?.touched"
[uiValidationMessage]="editEmployeeFormGroup.errors?.email"
></ui-validation-message>
></ui-input>
<div class="edit-employee-form__contents">
<div class="edit-employee-form__block">
<h2>Behörigheter</h2>

4
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
View File

@@ -185,6 +185,10 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
return this.employeeFormService.getFormControlName(role);
}
markFormControlAsTouched(formControl: AbstractControl): void {
formControl.markAsTouched();
}
abortFormSubmit(): void {
this.displayEditWithoutRolesDialog = false;
}

6
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
View File

@@ -2,7 +2,6 @@ import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
@@ -22,7 +21,7 @@ import { EmployeeDeleteModule } from '../../components/employee-delete/employee-
import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
import { EmployeeFormComponent } from './employee-form.component';
import { UiSelectModule } from '@ui/select/select.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { UiInputModule } from '@ui/input/input.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -32,7 +31,6 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
RouterModule.forChild([{ path: '', component: EmployeeFormComponent }]),
ReactiveFormsModule,
LocalDatePipeModule,
DigiNgFormInputModule,
DigiNgFormRadiobuttonGroupModule,
DigiNgFormDatepickerModule,
DigiNgPopoverModule,
@@ -41,7 +39,6 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
DigiNgLoaderSpinnerModule,
UiSkeletonModule,
UiSelectModule,
UiValidationMessageModule,
LayoutModule,
EmployeeDeleteModule,
DigiNgDialogModule,
@@ -50,6 +47,7 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
ErrorListModule,
RolesDialogModule,
UiLinkButtonModule,
UiInputModule,
],
})
export class EmployeeFormModule {}

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

@@ -99,37 +99,30 @@
<div *ngIf="showTimePickers">
<div class="franvaro-report-form__time-pickers">
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
afLabel="Starttid"
<ui-input
uiLabel="Starttid"
[formControl]="startTimeFormControl"
[afDisableValidStyle]="true"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['startTime'])"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
uiType="time"
[uiInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.startTime"
></ui-validation-message>
></ui-input>
</div>
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
afLabel="Sluttid"
<ui-input
uiLabel="Sluttid"
[formControl]="endTimeFormControl"
[afDisableValidStyle]="true"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['endTime'])"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
uiType="time"
[uiInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.endTime"
></ui-validation-message>
></ui-input>
</div>
</div>
<ui-validation-message
class="franvaro-report-form__validation-message"
[uiShowValidationMessage]="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedEndTimeIsBeforeStartTime"
></ui-validation-message>
@@ -139,37 +132,30 @@
<h2>Tiden deltagaren skulle varit närvarande</h2>
<div class="franvaro-report-form__time-pickers">
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
afLabel="Starttid"
<ui-input
uiLabel="Starttid"
[formControl]="expectedPresenceStartTimeFormControl"
[afDisableValidStyle]="true"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceStartTime'])"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
uiType="time"
[uiInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedPresenceStartTime"
></ui-validation-message>
></ui-input>
</div>
<div class="franvaro-report-form__time-picker">
<digi-ng-form-input
afLabel="Sluttid"
<ui-input
uiLabel="Sluttid"
[formControl]="expectedPresenceEndTimeFormControl"
[afDisableValidStyle]="true"
[afAnnounceIfOptional]="true"
[afRequired]="true"
[afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time"
></digi-ng-form-input>
<ui-validation-message
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTime'])"
[uiAnnounceIfOptional]="true"
[uiRequired]="true"
uiType="time"
[uiInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedPresenceEndTime"
></ui-validation-message>
></ui-input>
</div>
</div>
<ui-validation-message
class="franvaro-report-form__validation-message"
[uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
[uiValidationMessage]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
></ui-validation-message>

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

@@ -37,4 +37,10 @@
display: flex;
gap: var(--digi--layout--gutter);
}
&__validation-message {
::ng-deep .ui-validation-message {
margin-top: var(--digi--layout--gutter--s);
}
}
}

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

@@ -1,6 +1,5 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@@ -18,6 +17,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { FranvaroReportFormComponent } from './franvaro-report-form.component';
import { FranvaroReportFormService } from './franvaro-report-form.service';
import { UiInputModule } from '@ui/input/input.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,12 +34,12 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
DigiNgFormDatepickerModule,
UiSkeletonModule,
UiValidationMessageModule,
DigiNgFormInputModule,
DigiNgDialogModule,
UiTextareaModule,
UiSelectModule,
UiRadiobuttonGroupModule,
UiLinkButtonModule,
UiInputModule,
],
providers: [FranvaroReportFormService],
exports: [FranvaroReportFormComponent],

4
apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss
View File

@@ -42,10 +42,6 @@
margin-bottom: var(--digi--layout--gutter--l);
}
&__search-input ::ng-deep .digi-ng-form-input__label {
@include msfa__a11y-sr-only;
}
&__input-reset-button {
position: absolute;
right: 0;

1
libs/ui/src/input/input.component.html
View File

@@ -14,6 +14,7 @@
[afValue]="currentValue"
[afValidation]="uiInvalid ? 'error' : 'neutral'"
(afOnInput)="checkForChange($event.detail.target.value)"
(afOnBlur)="onBlur()"
></digi-form-input>
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"

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

@@ -47,6 +47,7 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
@Input() uiInvalid: boolean;
@Input() uiValidationMessage: string;
@Output() uiOnChange: EventEmitter<any> = new EventEmitter();
@Output() uiOnBlur: EventEmitter<any> = new EventEmitter();
name: string | number;
@@ -85,6 +86,10 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
}
}
onBlur(): void {
this.uiOnBlur.emit(true);
}
writeValue(value: any): void {
this._value = value;
this.changeDetectorRef.detectChanges();

2
libs/ui/src/validation-message/validation-message.component.html
View File

@@ -1,4 +1,4 @@
<div aria-atomic="true" role="alert">
<div class="ui-validation-message" aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiShowValidationMessage" [afVariation]="uiValidationMessageType">
{{ uiValidationMessage }}
</digi-form-validation-message>