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

feature(digi-ng-migrering): Valideringsmeddelanden är nu flyttat från digi till vår kod (TV-861)

Browse Source 
Merge in TEA/mina-sidor-fa-web from feature/TV-861-digi-ng-form-validation-message to develop

Squashed commit of the following:

commit 0f499871aca875dfcca640e8fbf871f52adc33d3
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:54:42 2021 +0100

    fix minor bugs

commit ba3d2784903127e1b9dacbd04ad523a846cfe3f4
Merge: 20a004ba 981fb51d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:51:17 2021 +0100

    Merge branch 'develop' into feature/TV-861-digi-ng-form-validation-message

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts

commit 20a004ba2f75f92043713704305815d60c61e2ef
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 15:54:16 2021 +0100

    Removed unused messagetypes from validation messages

commit 7dd5317267560dfdc95390b32f61b3df1518eb40
Merge: 9ffdefae c6bbfb1b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 15:48:34 2021 +0100

    Fixed some issues with a11y

commit 9ffdefaea78c90f9d4f0ee3f9b4bf5a157c34667
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 16:47:47 2021 +0100

    removed reference to digiNgFormSelect

commit 6c54a0ea9b0f3101adf60c6d04c7ac92010206c9
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 16:45:29 2021 +0100

    Replaced digi-ng-form-sleect with ui-select (handledare-picker and organization-picker-form left.

commit 58341f57612bd70204bbdf3f9805bb54f8fc2078
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 15:56:42 2021 +0100

    removed reference in employee-form for digiNgFormSelect

commit 663743508264cb781c3cb60682f6e6937a8e4eeb
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 15:50:29 2021 +0100

    Replaced digi-ng-form-select with ui-select for edit-employee-form

commit fea6215809128f78229cbded5f92fc5de461317e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 14:33:58 2021 +0100

    - Replaced all references to digi-form-validation-message (digi-core) to our new ui-validation-message ( a few left to change in this feature).
    - Replaced references from digi-ng-form-select to our new ui-select  in franvaro-report and signal-form

commit 28c152efe90acf766dbd190b12fd262344e39010
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:14:50 2021 +0100

    Removed blank space

commit 42fa243d15bba562cd019d542e9815350623db63
Merge: a7a4a4c1 8f05343e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:10:44 2021 +0100

    Merge branch 'develop' into feature/TV-861-digi-ng-form-validation-message

commit a7a4a4c111bc7a7cd3704d7c2866fcbb31ef00e0
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:10:32 2021 +0100

    - Created ui-validation-message component for digi-form-validation-message to replace digi-ng´s form-validation.
    - Removed css style as it did not work earlier and looks the same without (good margin top as it is).

    FYI: the new validation-message from digi-core includes three types (success, error, warning), digi-ng´s included only two types (success, error).
This commit is contained in:
Daniel Appelgren
2021-11-19 11:57:10 +01:00
parent 981fb51d92
commit f166c530d9
42 changed files with 244 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,14 +18,10 @@
[afDisableValidStyle]="true" [afDisableValidStyle]="true"
[afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched" [afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
></digi-ng-form-input> ></digi-ng-form-input>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message [uiShowValidationMessage]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
*ngIf="editEmployeeFormGroup.errors?.email && emailFormControl.touched" [uiValidationMessage]="editEmployeeFormGroup.errors?.email"
af-variation="error" ></ui-validation-message>
>{{editEmployeeFormGroup.errors.email}}</digi-form-validation-message
>
</div>
<div class="edit-employee-form__contents"> <div class="edit-employee-form__contents">
<div class="edit-employee-form__block"> <div class="edit-employee-form__block">
<h2>Behörigheter</h2> <h2>Behörigheter</h2>
@@ -34,27 +30,18 @@
<div class="edit-employee-form__block"> <div class="edit-employee-form__block">
<h3>Tjänster</h3> <h3>Tjänster</h3>
<p>Välj de tjänster du vill ge personalen tillgång till.</p> <p>Välj de tjänster du vill ge personalen tillgång till.</p>
<!-- Vi får se till att bygga en kontrol för att kunna välja flera tjänster här istället, en digi-ng-select får vara en temporär lösning.. --> <!-- Vi får se till att bygga en kontrol för att kunna välja flera tjänster här istället, en ui-selectfår vara en temporär lösning.. -->
<digi-ng-form-select <ui-select
[formControl]="tjansterFormControl" [formControl]="tjansterFormControl"
afLabel="Välj tjänster" [uiId]="tjansterElementId"
[afPlaceholder]="'Välj tjänst'" uiLabel="Välj tjänster"
[afSelectItems]="selectableTjansterFormItems" uiPlaceholder="Välj tjänst"
[afDisableValidStyle]="true" [uiInvalid]="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
[afInvalid]="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched" [uiOptions]="selectableTjansterFormItems"
[afId]="tjansterElementId" (uiOnChange)="toggleTjanst()"
(afOnChange)="toggleTjanst()" [uiValidationMessage]="editEmployeeFormGroup.errors?.tjanster"
></digi-ng-form-select> ></ui-select>
<div aria-atomic="true" role="alert">
<digi-form-validation-message
*ngIf="editEmployeeFormGroup.errors?.tjanster && tjansterFormControl.touched"
af-variation="error"
>
{{editEmployeeFormGroup.errors.tjanster}}
</digi-form-validation-message>
</div>
</div> </div>
<div class="edit-employee-form__block"> <div class="edit-employee-form__block">
<h3>Utförande verksamheter och adresser</h3> <h3>Utförande verksamheter och adresser</h3>
<p>Välj de utförandeverksamheter och utförande adresser du vill ge personalen behörighet till.</p> <p>Välj de utförandeverksamheter och utförande adresser du vill ge personalen behörighet till.</p>

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

@@ -4,9 +4,8 @@ import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker'; import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input'; import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group'; import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover'; import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +21,8 @@ import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module'; import { EmployeeDeleteModule } from '../../components/employee-delete/employee-delete.module';
import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component'; import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
import { EmployeeFormComponent } from './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';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,12 +35,13 @@ import { EmployeeFormComponent } from './employee-form.component';
DigiNgFormInputModule, DigiNgFormInputModule,
DigiNgFormRadiobuttonGroupModule, DigiNgFormRadiobuttonGroupModule,
DigiNgFormDatepickerModule, DigiNgFormDatepickerModule,
DigiNgFormSelectModule,
DigiNgPopoverModule, DigiNgPopoverModule,
DigiNgFormCheckboxModule, DigiNgFormCheckboxModule,
DigiNgButtonModule, DigiNgButtonModule,
DigiNgLoaderSpinnerModule, DigiNgLoaderSpinnerModule,
UiSkeletonModule, UiSkeletonModule,
UiSelectModule,
UiValidationMessageModule,
LayoutModule, LayoutModule,
EmployeeDeleteModule, EmployeeDeleteModule,
DigiNgDialogModule, DigiNgDialogModule,

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

@@ -35,20 +35,18 @@
<ng-template #formRef> <ng-template #formRef>
<form class="avvikelse-report-form__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()"> <form class="avvikelse-report-form__form" [formGroup]="avvikelseFormGroup" (ngSubmit)="openConfirmDialog()">
<div class="avvikelse-report-form__form-item"> <div class="avvikelse-report-form__form-item">
<digi-ng-form-select <ui-select
*ngIf="reasonsAsNgDigiFormSelectItems$ | async as reason; else loadingRef" *ngIf="reasonsAsNgDigiFormSelectItems$ | async as reason; else loadingRef"
[formControlName]="reasonFormName" [formControlName]="reasonFormName"
afLabel="Orsak till avvikelse" uiLabel="Orsak till avvikelse"
afPlaceholder="Välj orsak till avvikelse" uiPlaceholder="Välj orsak till avvikelse"
[afSelectItems]="reason" [uiAnnounceIfOptional]="true"
[afRequired]="true" [uiRequired]="true"
[afInvalidMessage]="reasonFormControl.errors?.required" [uiInvalid]="formControlIsInvalid(reasonFormControl)"
[afAnnounceIfOptional]="true" [uiOptions]="reason"
[afDisableValidStyle]="true" [uiValidationMessage]="reasonFormControl.errors?.required"
[afInvalid]="formControlIsInvalid(reasonFormControl)" ></ui-select>
></digi-ng-form-select>
</div> </div>
<div <div
class="avvikelse-report-form__form-item avvikelse-report-form__textareas" class="avvikelse-report-form__form-item avvikelse-report-form__textareas"
[formArrayName]="questionsFormName" [formArrayName]="questionsFormName"

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

@@ -19,6 +19,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { AvvikelseReportFormComponent } from './avvikelse-report-form.component'; import { AvvikelseReportFormComponent } from './avvikelse-report-form.component';
import { AvvikelseReportFormService } from './avvikelse-report-form.service'; import { AvvikelseReportFormService } from './avvikelse-report-form.service';
import { UiSelectModule } from '@ui/select/select.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -37,6 +38,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
UiSkeletonModule, UiSkeletonModule,
DigiNgFormSelectModule, DigiNgFormSelectModule,
UiLoaderModule, UiLoaderModule,
UiSelectModule,
ReportDescriptionListModule, ReportDescriptionListModule,
DigiNgFormInputModule, DigiNgFormInputModule,
DigiNgDialogModule, DigiNgDialogModule,

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

@@ -38,25 +38,17 @@
id="franvaro-report-form" id="franvaro-report-form"
> >
<div class="franvaro-report-form__form-item"> <div class="franvaro-report-form__form-item">
<digi-ng-form-select <ui-select
*ngIf="allReasons$ | async as reasons; else loadingRef" *ngIf="allReasons$ | async as reasons; else loadingRef"
[formControl]="reasonFormControl" [formControl]="reasonFormControl"
afLabel="Orsak till frånvaro" uiLabel="Orsak till frånvaro"
afPlaceholder="Välj orsak till frånvaro" uiPlaceholder="Välj orsak till frånvaro"
[afSelectItems]="reasons" [uiAnnounceIfOptional]="true"
[afAnnounceIfOptional]="true" [uiRequired]="true"
[afRequired]="true" [uiInvalid]="formControlIsInvalid(['reason'])"
[afDisableValidStyle]="true" [uiOptions]="reasons"
[afInvalid]="formControlIsInvalid(['reason'])" [uiValidationMessage]="formErrors.reason"
></digi-ng-form-select> ></ui-select>
<div aria-atomic="true" role="alert">
<digi-ng-form-validation-message
*ngIf="formControlIsInvalid(['reason'])"
class="franvaro-report-form__validation-message"
[afPositive]="false"
[afValidationText]="formErrors.reason"
></digi-ng-form-validation-message>
</div>
</div> </div>
<ng-container *ngIf="reasonFormControl.value"> <ng-container *ngIf="reasonFormControl.value">
<div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea"> <div class="franvaro-report-form__form-item" *ngIf="showKnownReasonTextArea">
@@ -81,14 +73,10 @@
afLabel="Dag för frånvaro" afLabel="Dag för frånvaro"
[formControl]="dateFormControl" [formControl]="dateFormControl"
></digi-ng-form-datepicker> ></digi-ng-form-datepicker>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['date'])"
*ngIf="formControlIsInvalid(['date'])" [uiValidationMessage]="formErrors.date"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.date"
></digi-ng-form-validation-message>
</div>
</div> </div>
<div class="franvaro-report-form__form-item"> <div class="franvaro-report-form__form-item">
@@ -108,7 +96,7 @@
</digi-form-fieldset> </digi-form-fieldset>
</div> </div>
<ng-container *ngIf="showTimePickers"> <div *ngIf="showTimePickers">
<div class="franvaro-report-form__time-pickers"> <div class="franvaro-report-form__time-pickers">
<div class="franvaro-report-form__time-picker"> <div class="franvaro-report-form__time-picker">
<digi-ng-form-input <digi-ng-form-input
@@ -120,14 +108,10 @@
[afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])" [afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time" afType="time"
></digi-ng-form-input> ></digi-ng-form-input>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['startTime'])"
*ngIf="formControlIsInvalid(['startTime'])" [uiValidationMessage]="formErrors.startTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.startTime"
></digi-ng-form-validation-message>
</div>
</div> </div>
<div class="franvaro-report-form__time-picker"> <div class="franvaro-report-form__time-picker">
<digi-ng-form-input <digi-ng-form-input
@@ -139,25 +123,17 @@
[afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])" [afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
afType="time" afType="time"
></digi-ng-form-input> ></digi-ng-form-input>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['endTime'])"
*ngIf="formControlIsInvalid(['endTime'])" [uiValidationMessage]="formErrors.endTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.endTime"
></digi-ng-form-validation-message>
</div>
</div> </div>
</div> </div>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
*ngIf="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])" [uiValidationMessage]="formErrors.expectedEndTimeIsBeforeStartTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false" </div>
[afValidationText]="formErrors.expectedEndTimeIsBeforeStartTime"
></digi-ng-form-validation-message>
</div>
</ng-container>
<div> <div>
<h2>Tiden deltagaren skulle varit närvarande</h2> <h2>Tiden deltagaren skulle varit närvarande</h2>
@@ -172,14 +148,10 @@
[afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])" [afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time" afType="time"
></digi-ng-form-input> ></digi-ng-form-input>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceStartTime'])"
*ngIf="formControlIsInvalid(['expectedPresenceStartTime'])" [uiValidationMessage]="formErrors.expectedPresenceStartTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceStartTime"
></digi-ng-form-validation-message>
</div>
</div> </div>
<div class="franvaro-report-form__time-picker"> <div class="franvaro-report-form__time-picker">
<digi-ng-form-input <digi-ng-form-input
@@ -191,24 +163,16 @@
[afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])" [afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
afType="time" afType="time"
></digi-ng-form-input> ></digi-ng-form-input>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTime'])"
*ngIf="formControlIsInvalid(['expectedPresenceEndTime'])" [uiValidationMessage]="formErrors.expectedPresenceEndTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceEndTime"
></digi-ng-form-validation-message>
</div>
</div> </div>
</div> </div>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
*ngIf="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])" [uiValidationMessage]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
class="franvaro-report-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
></digi-ng-form-validation-message>
</div>
</div> </div>
</ng-container> </ng-container>

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

@@ -24,7 +24,7 @@
} }
&__time-picker { &__time-picker {
flex-grow: 1; width: 100%;
} }
&__footer { &__footer {
@@ -37,8 +37,4 @@
display: flex; display: flex;
gap: var(--digi--layout--gutter); gap: var(--digi--layout--gutter);
} }
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
} }

8
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,8 +1,6 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog'; import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker'; import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input'; import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
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 { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -14,6 +12,8 @@ import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module'; import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiTextareaModule } from '@ui/textarea/textarea.module'; import { UiTextareaModule } from '@ui/textarea/textarea.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module'; import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { FranvaroReportFormComponent } from './franvaro-report-form.component'; import { FranvaroReportFormComponent } from './franvaro-report-form.component';
@@ -31,13 +31,13 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
UiLoaderModule, UiLoaderModule,
UiBackLinkModule, UiBackLinkModule,
ReportDescriptionListModule, ReportDescriptionListModule,
DigiNgFormSelectModule,
DigiNgFormDatepickerModule, DigiNgFormDatepickerModule,
UiSkeletonModule, UiSkeletonModule,
UiValidationMessageModule,
DigiNgFormInputModule, DigiNgFormInputModule,
DigiNgFormValidationMessageModule,
DigiNgDialogModule, DigiNgDialogModule,
UiTextareaModule, UiTextareaModule,
UiSelectModule,
UiRadiobuttonGroupModule, UiRadiobuttonGroupModule,
UiLinkButtonModule, UiLinkButtonModule,
], ],

7
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
View File

@@ -73,9 +73,10 @@
></digi-form-checkbox> ></digi-form-checkbox>
</li> </li>
</ul> </ul>
<digi-form-validation-message *ngIf="formControlIsInvalid('activityIds')" af-variation="error" <ui-validation-message
>{{gpFormGroup.errors.activityIds}}</digi-form-validation-message [uiShowValidationMessage]="formControlIsInvalid('activityIds')"
> [uiValidationMessage]="gpFormGroup.errors?.activityIds"
></ui-validation-message>
</ng-container> </ng-container>
</digi-form-fieldset> </digi-form-fieldset>

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

@@ -11,6 +11,7 @@ import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module'; import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module'; import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module'; import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component'; import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component';
@@ -33,6 +34,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
UiSkeletonModule, UiSkeletonModule,
DigiNgFormCheckboxModule, DigiNgFormCheckboxModule,
DigiNgDialogModule, DigiNgDialogModule,
UiValidationMessageModule,
UiLinkButtonModule, UiLinkButtonModule,
], ],
providers: [GemensamPlaneringFormService], providers: [GemensamPlaneringFormService],

22
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
View File

@@ -46,19 +46,17 @@
<span class="msfa__a11y-sr-only"> om kategorierna</span> <span class="msfa__a11y-sr-only"> om kategorierna</span>
</digi-button> </digi-button>
</div> </div>
<digi-ng-form-select <ui-select
class="informativ-rapport-form__category-select"
[formControl]="categoryFormControl" [formControl]="categoryFormControl"
afLabel="" uiLabel=""
afPlaceholder="Välj kategori" uiPlaceholder="Välj kategori"
afId="informativ-rapport-form-category" uiId="informativ-rapport-form-category"
[afSelectItems]="categorySelectItems" [uiAnnounceIfOptional]="true"
[afRequired]="true" [uiRequired]="true"
[afAnnounceIfOptional]="true" [uiInvalid]="formControlIsInvalid('category')"
[afInvalidMessage]="categoryFormControl.errors?.required" [uiOptions]="categorySelectItems"
[afDisableValidStyle]="true" [uiValidationMessage]="categoryFormControl.errors?.required"
[afInvalid]="formControlIsInvalid('category')" ></ui-select>
></digi-ng-form-select>
</div> </div>
<div class="informativ-rapport-form__form-item"> <div class="informativ-rapport-form__form-item">
<ui-textarea <ui-textarea

10
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.scss
View File

@@ -36,12 +36,6 @@
width: 1.25em; width: 1.25em;
} }
&__category-select {
::ng-deep .digi-ng-form-select__label {
display: none;
}
}
&__footer { &__footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -53,10 +47,6 @@
gap: var(--digi--layout--gutter); gap: var(--digi--layout--gutter);
} }
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
&__percent-range { &__percent-range {
max-width: 20rem; max-width: 20rem;
display: block; display: block;

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

@@ -1,5 +1,4 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog'; import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -14,6 +13,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { InformativRapportFormComponent } from './informativ-rapport-form.component'; import { InformativRapportFormComponent } from './informativ-rapport-form.component';
import { InformativRapportFormService } from './informativ-rapport-form.service'; import { InformativRapportFormService } from './informativ-rapport-form.service';
import { UiSelectModule } from '@ui/select/select.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -28,8 +28,8 @@ import { InformativRapportFormService } from './informativ-rapport-form.service'
ReportDescriptionListModule, ReportDescriptionListModule,
UiBackLinkModule, UiBackLinkModule,
UiSkeletonModule, UiSkeletonModule,
UiSelectModule,
DigiNgDialogModule, DigiNgDialogModule,
DigiNgFormSelectModule,
UiTextareaModule, UiTextareaModule,
UiLinkButtonModule, UiLinkButtonModule,
], ],

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

@@ -34,17 +34,15 @@
(ngSubmit)="openConfirmDialog()" (ngSubmit)="openConfirmDialog()"
id="periodisk-redovisning-form" id="periodisk-redovisning-form"
> >
<digi-ng-form-select <ui-select
afLabel="Period" uiLabel="Period"
[afSelectItems]="periodsToFormselectItems(periods)" [uiOptions]="periodsToFormselectItems(periods)"
[afDisableValidStyle]="true" [uiRequired]="true"
[afRequired]="true" [uiAnnounceIfOptional]="true"
[afAnnounceIfOptional]="true"
[formControl]="periodFormControl" [formControl]="periodFormControl"
[afInvalid]="formControlIsInvalid(periodFormControl)" [uiInvalid]="formControlIsInvalid(periodFormControl)"
(afOnChange)="openChangePeriodDialogIfValuesExist()" (uiOnChange)="openChangePeriodDialogIfValuesExist()"
></digi-ng-form-select> ></ui-select>
<div> <div>
<digi-form-fieldset <digi-form-fieldset
af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?" af-legend="Har ni under perioden tillhandahållit språkstöd till deltagaren?"
@@ -102,16 +100,12 @@
<digi-ng-form-checkbox <digi-ng-form-checkbox
formControlName="noActivitiesHasBeenConducted" formControlName="noActivitiesHasBeenConducted"
afLabel="Deltagaren har inte deltagit i några aktiviteter denna period" afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[afInvalid]="this.shouldValidate$.value && !!formErrors?.activitiesMismatch" [afInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
></digi-ng-form-checkbox> ></digi-ng-form-checkbox>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message [uiShowValidationMessage]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
af-variation="error" [uiValidationMessage]="formErrors?.activitiesMismatch"
*ngIf="this.shouldValidate$.value && !!formErrors?.activitiesMismatch" ></ui-validation-message>
>
{{formErrors?.activitiesMismatch}}
</digi-form-validation-message>
</div>
</div> </div>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef"> <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
@@ -151,14 +145,10 @@
[afInvalid]="activityLocationIsInvalid(activityFormGroup)" [afInvalid]="activityLocationIsInvalid(activityFormGroup)"
afLabel="Utfört på plats" afLabel="Utfört på plats"
></digi-ng-form-checkbox> ></digi-ng-form-checkbox>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message [uiShowValidationMessage]="activityLocationIsInvalid(activityFormGroup)"
*ngIf="activityLocationIsInvalid(activityFormGroup)" [uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes"
af-variation="error" ></ui-validation-message>
>
{{activityFormGroup.errors.locationCheckboxes}}
</digi-form-validation-message>
</div>
</div> </div>
</div> </div>
</ng-container> </ng-container>

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

@@ -1,6 +1,5 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog'; import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox'; import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -11,7 +10,9 @@ import { UiInputModule } from '@ui/input/input.module';
import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module'; import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module'; import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSelectModule } from '@ui/select/select.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module'; import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component'; import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
@@ -29,13 +30,14 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
ReportDescriptionListModule, ReportDescriptionListModule,
UiBackLinkModule, UiBackLinkModule,
UiLoaderModule, UiLoaderModule,
UiSelectModule,
UiSkeletonModule, UiSkeletonModule,
DigiNgDialogModule, DigiNgDialogModule,
DigiNgFormSelectModule,
DigiNgFormCheckboxModule, DigiNgFormCheckboxModule,
UiRadiobuttonGroupModule, UiRadiobuttonGroupModule,
UiLinkButtonModule, UiLinkButtonModule,
UiInputModule, UiInputModule,
UiValidationMessageModule,
], ],
providers: [PeriodiskRedovisningFormService], providers: [PeriodiskRedovisningFormService],
exports: [PeriodiskRedovisningFormComponent], exports: [PeriodiskRedovisningFormComponent],

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

@@ -67,14 +67,10 @@
[afMinDate]="avrop.startDate" [afMinDate]="avrop.startDate"
[afMaxDate]="getMaxDate(avrop.startDate)" [afMaxDate]="getMaxDate(avrop.startDate)"
></digi-ng-form-datepicker> ></digi-ng-form-datepicker>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-ng-form-validation-message [uiShowValidationMessage]="formControlIsInvalid('startDate')"
*ngIf="formControlIsInvalid('startDate')" [uiValidationMessage]="formErrors.startDate"
class="signal-form__validation-message" ></ui-validation-message>
[afPositive]="false"
[afValidationText]="formErrors.startDate"
></digi-ng-form-validation-message>
</div>
</div> </div>
<footer class="signal-form__footer"> <footer class="signal-form__footer">

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

@@ -23,10 +23,6 @@
gap: var(--digi--layout--gutter); gap: var(--digi--layout--gutter);
} }
&__validation-message {
margin-top: var(--digi--layout--gutter--s);
}
&__percent-range { &__percent-range {
max-width: 20rem; max-width: 20rem;
display: block; display: block;

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

@@ -10,9 +10,9 @@ import { Radiobutton } from '@ui/radiobutton-group/radiobutton.model';
import { add } from 'date-fns'; import { add } from 'date-fns';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { map, shareReplay, switchMap, take } from 'rxjs/operators'; import { map, shareReplay, switchMap, take } from 'rxjs/operators';
import { SignalFormData, SignalFormKeys, SignalOmfattning, SignalType } from './signal-form.model';
import { SignalFormService } from './signal-form.service'; import { SignalFormService } from './signal-form.service';
import { SignalFormValidator } from './signal-form.validator'; import { SignalFormValidator } from './signal-form.validator';
import { SignalFormData, SignalFormKeys, SignalOmfattning, SignalType } from './signal-form.model';
@Component({ @Component({
selector: 'msfa-signal-form', selector: 'msfa-signal-form',
@@ -64,7 +64,7 @@ export class SignalFormComponent {
convertTypeValueToLabel(type: SignalType): string { convertTypeValueToLabel(type: SignalType): string {
return this.typeSelectItems?.find(selectItem => selectItem.value === type)?.name; return this.typeSelectItems?.find(selectItem => selectItem.value === type)?.name;
} }
convertOmfattningValueToLabel(type: SignalType): string { convertOmfattningValueToLabel(type: SignalOmfattning): string {
return this.omfattningRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label; return this.omfattningRadioButtons?.find(radiobuttons => radiobuttons.value === type)?.label;
} }

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

@@ -1,6 +1,5 @@
import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog'; import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker'; import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
@@ -10,14 +9,15 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { UiBackLinkModule } from '@ui/back-link/back-link.module'; import { UiBackLinkModule } from '@ui/back-link/back-link.module';
import { UiInputModule } from '@ui/input/input.module'; import { UiInputModule } from '@ui/input/input.module';
import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; import { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module'; import { UiRadiobuttonGroupModule } from '@ui/radiobutton-group/radiobutton-group.module';
import { UiSelectModule } from '@ui/select/select.module'; import { UiSelectModule } from '@ui/select/select.module';
import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module'; import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module'; import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
import { SignalFormComponent } from './signal-form.component'; import { SignalFormComponent } from './signal-form.component';
import { SignalFormService } from './signal-form.service'; import { SignalFormService } from './signal-form.service';
import { UiLoaderModule } from '@ui/loader/loader.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -36,9 +36,9 @@ import { SignalFormService } from './signal-form.service';
UiSelectModule, UiSelectModule,
UiLoaderModule, UiLoaderModule,
DigiNgDialogModule, DigiNgDialogModule,
DigiNgFormValidationMessageModule,
ReportDescriptionListModule, ReportDescriptionListModule,
UiInputModule, UiInputModule,
UiValidationMessageModule,
UiLinkButtonModule, UiLinkButtonModule,
], ],
providers: [SignalFormService], providers: [SignalFormService],

11
apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component.html
View File

@@ -14,13 +14,10 @@
[uiInvalid]="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected" [uiInvalid]="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected"
></ui-checkbox> ></ui-checkbox>
</digi-form-fieldset> </digi-form-fieldset>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message [uiShowValidationMessage]="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected"
*ngIf="(stillUnemployedReasonFormControl?.touched || this.shouldValidate) && formGroup?.errors?.atLeastOneSelected" [uiValidationMessage]="formGroup?.errors?.atLeastOneSelected"
af-variation="error" ></ui-validation-message>
>{{formGroup?.errors?.atLeastOneSelected}}</digi-form-validation-message
>
</div>
</div> </div>
<ui-textarea <ui-textarea

9
apps/mina-sidor-fa/src/app/pages/exports/pages/deltagare-export/deltagare-export.component.html
View File

@@ -32,11 +32,10 @@
[formControl]="endDateFormControl" [formControl]="endDateFormControl"
></digi-ng-form-datepicker> ></digi-ng-form-datepicker>
</div> </div>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message *ngIf="showPeriodError" af-variation="error" [uiShowValidationMessage]="showPeriodError"
>{{formErrors.datesMismatch}}</digi-form-validation-message [uiValidationMessage]="formErrors.datesMismatch"
> ></ui-validation-message>
</div>
</div> </div>
<ui-checkbox <ui-checkbox
[formControl]="includeExportedDeltagareFormControl" [formControl]="includeExportedDeltagareFormControl"

25
apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
View File

@@ -15,21 +15,16 @@
<digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit"> <digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit">
{{submitText}} {{submitText}}
</digi-button> </digi-button>
<div class="handledare-picker-form__validation-wrapper" aria-atomic="true" role="alert"> <div class="handledare-picker-form__validation-wrapper">
<digi-form-validation-message <ui-validation-message
class="handledare-picker__validation-message" [uiShowValidationMessage]="(handledareFormControl.invalid && handledareFormControl.touched) || invalid"
*ngIf="(handledareFormControl.invalid && handledareFormControl.touched) || invalid" uiValidationMessage="Handledare måste väljas för att kunna spara"
af-variation="error" ></ui-validation-message>
> <ui-validation-message
Handledare måste väljas för att kunna spara [uiShowValidationMessage]="(lastSavedHandledare$ | async) && submitted"
</digi-form-validation-message> uiValidationMessageType="success"
<digi-form-validation-message uiValidationMessage="Vald handledare har uppdaterats"
*ngIf="(lastSavedHandledare$ | async) && submitted" ></ui-validation-message>
class="handledare-picker__validation-message"
af-variation="success"
>
Vald handledare har uppdaterats
</digi-form-validation-message>
</div> </div>
<ui-loader *ngIf="submitHandledareLoading$ | async" uiSize="s" uiType="absolute"></ui-loader> <ui-loader *ngIf="submitHandledareLoading$ | async" uiSize="s" uiType="absolute"></ui-loader>
</form> </form>

3
apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
View File

@@ -4,11 +4,12 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { UiLoaderModule } from '@ui/loader/loader.module'; import { UiLoaderModule } from '@ui/loader/loader.module';
import { HandledarePickerFormComponent } from './handledare-picker-form.component'; import { HandledarePickerFormComponent } from './handledare-picker-form.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [HandledarePickerFormComponent], declarations: [HandledarePickerFormComponent],
imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule], imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule, UiValidationMessageModule],
exports: [HandledarePickerFormComponent], exports: [HandledarePickerFormComponent],
}) })
export class HandledarePickerFormModule {} export class HandledarePickerFormModule {}

10
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html
View File

@@ -18,11 +18,9 @@
<digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button> <digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
<digi-form-validation-message <ui-validation-message
class="organization-picker-form__error" class="organization-picker-form__error"
af-variation="error" [uiShowValidationMessage]="organizationFormControl.invalid && organizationFormControl.touched"
*ngIf="organizationFormControl.invalid && organizationFormControl.touched" uiValidationMessage="Du måste välja en organisation för att kunna logga in"
> ></ui-validation-message>
Du måste välja en organisation för att kunna logga in
</digi-form-validation-message>
</form> </form>

3
apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts
View File

@@ -2,12 +2,13 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { OrganizationPickerFormComponent } from './organization-picker-form.component'; import { OrganizationPickerFormComponent } from './organization-picker-form.component';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [OrganizationPickerFormComponent], declarations: [OrganizationPickerFormComponent],
imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule], imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule, UiValidationMessageModule],
exports: [OrganizationPickerFormComponent], exports: [OrganizationPickerFormComponent],
}) })
export class OrganizationPickerFormModule {} export class OrganizationPickerFormModule {}

5
apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html
View File

@@ -38,7 +38,10 @@
<div aria-atomic="true" role="alert"> <div aria-atomic="true" role="alert">
<ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages"> <ul class="tree-nodes-selector__validation-messages" *ngIf="showValidation && validationMessages">
<li *ngFor="let validationMessage of validationMessages"> <li *ngFor="let validationMessage of validationMessages">
<digi-form-validation-message af-variation="error"> {{validationMessage}} </digi-form-validation-message> <ui-validation-message
[uiShowValidationMessage]="true"
[uiValidationMessage]="validationMessage"
></ui-validation-message>
</li> </li>
</ul> </ul>
</div> </div>

9
libs/ui/src/checkbox/checkbox.component.html
View File

@@ -10,9 +10,8 @@
[afChecked]="currentValue" [afChecked]="currentValue"
(afOnChange)="checkForChange($event.detail.target.checked)" (afOnChange)="checkForChange($event.detail.target.checked)"
></digi-form-checkbox> ></digi-form-checkbox>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error" [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
>{{uiValidationMessage}}</digi-form-validation-message [uiValidationMessage]="uiValidationMessage"
> ></ui-validation-message>
</div>
</div> </div>

3
libs/ui/src/checkbox/checkbox.module.ts
View File

@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { CheckboxComponent } from './checkbox.component'; import { CheckboxComponent } from './checkbox.component';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule], imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [CheckboxComponent], declarations: [CheckboxComponent],
exports: [CheckboxComponent], exports: [CheckboxComponent],
}) })

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

@@ -15,9 +15,8 @@
[afValidation]="uiInvalid ? 'error' : 'neutral'" [afValidation]="uiInvalid ? 'error' : 'neutral'"
(afOnInput)="checkForChange($event.detail.target.value)" (afOnInput)="checkForChange($event.detail.target.value)"
></digi-form-input> ></digi-form-input>
<div class="ui-input__validation" aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error" [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
>{{uiValidationMessage}}</digi-form-validation-message [uiValidationMessage]="uiValidationMessage"
> ></ui-validation-message>
</div>
</div> </div>

3
libs/ui/src/input/input.module.ts
View File

@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { InputComponent } from './input.component'; import { InputComponent } from './input.component';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule], imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [InputComponent], declarations: [InputComponent],
exports: [InputComponent], exports: [InputComponent],
}) })

9
libs/ui/src/radiobutton-group/radiobutton-group.component.html
View File

@@ -14,9 +14,8 @@
(afOnChange)="checkForChange($event.detail.target.value)" (afOnChange)="checkForChange($event.detail.target.value)"
></digi-form-radiobutton> ></digi-form-radiobutton>
</div> </div>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error" [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
>{{uiValidationMessage}}</digi-form-validation-message [uiValidationMessage]="uiValidationMessage"
> ></ui-validation-message>
</div>
</div> </div>

2
libs/ui/src/radiobutton-group/radiobutton-group.component.ts
View File

@@ -9,7 +9,7 @@ import {
OnChanges, OnChanges,
Output, Output,
} from '@angular/core'; } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { uuid } from '@utils/uuid.util'; import { uuid } from '@utils/uuid.util';
import { RadiobuttonGroupDirection } from './radiobutton-group-direction.enum'; import { RadiobuttonGroupDirection } from './radiobutton-group-direction.enum';
import { Radiobutton } from './radiobutton.model'; import { Radiobutton } from './radiobutton.model';

3
libs/ui/src/radiobutton-group/radiobutton-group.module.ts
View File

@@ -1,11 +1,12 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
import { RadiobuttonGroupComponent } from './radiobutton-group.component'; import { RadiobuttonGroupComponent } from './radiobutton-group.component';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule], imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [RadiobuttonGroupComponent], declarations: [RadiobuttonGroupComponent],
exports: [RadiobuttonGroupComponent], exports: [RadiobuttonGroupComponent],
}) })

9
libs/ui/src/select/select.component.html
View File

@@ -37,9 +37,8 @@
<digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down> <digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down>
</div> </div>
</div> </div>
<div aria-atomic="true" role="alert"> <ui-validation-message
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error" [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
>{{uiValidationMessage}}</digi-form-validation-message [uiValidationMessage]="uiValidationMessage"
> ></ui-validation-message>
</div>
</div> </div>

3
libs/ui/src/select/select.module.ts
View File

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { SelectComponent } from './select.component'; import { SelectComponent } from './select.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule], imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [SelectComponent], declarations: [SelectComponent],
exports: [SelectComponent], exports: [SelectComponent],
}) })

9
libs/ui/src/textarea/textarea.component.html
View File

@@ -18,9 +18,10 @@
(afOnInput)="checkForChange($event.detail.target.value)" (afOnInput)="checkForChange($event.detail.target.value)"
></digi-form-textarea> ></digi-form-textarea>
<span class="ui-textarea__counter" *ngIf="uiMaxLength">{{charactersLeft}} tecken kvar</span> <span class="ui-textarea__counter" *ngIf="uiMaxLength">{{charactersLeft}} tecken kvar</span>
<div class="ui-textarea__validation" aria-atomic="true" role="alert"> <div class="ui-textarea__validation">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error" <ui-validation-message
>{{uiValidationMessage}}</digi-form-validation-message [uiShowValidationMessage]="uiInvalid && uiValidationMessage"
> [uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div> </div>
</div> </div>

3
libs/ui/src/textarea/textarea.module.ts
View File

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { TextareaComponent } from './textarea.component'; import { TextareaComponent } from './textarea.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({ @NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule], imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule ],
declarations: [TextareaComponent], declarations: [TextareaComponent],
exports: [TextareaComponent], exports: [TextareaComponent],
}) })

5
libs/ui/src/validation-message/validation-message-type.enum.ts Normal file
View File

@@ -0,0 +1,5 @@
export enum UiValidationMessageType {
SUCCESS = 'success',
ERROR = 'error',
WARNING = 'warning'
}

5
libs/ui/src/validation-message/validation-message.component.html Normal file
View File

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

0
libs/ui/src/validation-message/validation-message.component.scss Normal file
View File

25
libs/ui/src/validation-message/validation-message.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ValidationMessageComponent } from './validation-message.component';
describe('ValidationMessageComponent', () => {
let component: ValidationMessageComponent;
let fixture: ComponentFixture<ValidationMessageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ValidationMessageComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ValidationMessageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

14
libs/ui/src/validation-message/validation-message.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { UiValidationMessageType } from './validation-message-type.enum';
@Component({
selector: 'ui-validation-message',
templateUrl: './validation-message.component.html',
styleUrls: ['./validation-message.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ValidationMessageComponent {
@Input() uiValidationMessage: string;
@Input() uiValidationMessageType: UiValidationMessageType = UiValidationMessageType.ERROR;
@Input() uiShowValidationMessage: boolean;
}

11
libs/ui/src/validation-message/validation-message.module.ts Normal file
View File

@@ -0,0 +1,11 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ValidationMessageComponent } from './validation-message.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule],
declarations: [ValidationMessageComponent],
exports: [ValidationMessageComponent],
})
export class UiValidationMessageModule {}