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

Replaced digi-ng-checkbox with ui-checkbox

Browse Source
This commit is contained in:
Erik Tiekstra
2021-12-15 13:14:25 +01:00
parent 92cf04e802
commit 3b30c27cfd
6 changed files with 43 additions and 41 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

@@ -48,13 +48,13 @@
<strong>Du måste välja en eller flera tjänster för att kunna välja utförande verksamheter.</strong> <strong>Du måste välja en eller flera tjänster för att kunna välja utförande verksamheter.</strong>
</p> </p>
<ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate"> <ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate">
<digi-ng-form-checkbox <ui-checkbox
[afId]="selectAllUtforandeVerksamheterElementId"
class="edit-employee-form__choose-all-utforande-verksamheter" class="edit-employee-form__choose-all-utforande-verksamheter"
[uiId]="selectAllUtforandeVerksamheterElementId"
[formControl]="selectAllUtforandeVerksamheterFormControl" [formControl]="selectAllUtforandeVerksamheterFormControl"
[afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'" uiLabel="Välj alla utförande verksamheter och alla utförande adresser"
[afInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)" [uiInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
></digi-ng-form-checkbox> ></ui-checkbox>
<msfa-tree-nodes-selector <msfa-tree-nodes-selector
*ngIf="!selectAllUtforandeVerksamheterFormControl.value" *ngIf="!selectAllUtforandeVerksamheterFormControl.value"
@@ -66,6 +66,10 @@
[validationMessages]="[editEmployeeFormGroup.errors?.utforandeVerksamheter]" [validationMessages]="[editEmployeeFormGroup.errors?.utforandeVerksamheter]"
(selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()" (selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()"
></msfa-tree-nodes-selector> ></msfa-tree-nodes-selector>
<ui-validation-message
[uiShowValidationMessage]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
uiValidationMessage="Minst en utförande verksamhet och adress måste väljas"
></ui-validation-message>
</ng-container> </ng-container>
<ng-template #loadingUtforandeVerksamheterTemplate> <ng-template #loadingUtforandeVerksamheterTemplate>
<digi-ng-loader-spinner <digi-ng-loader-spinner
@@ -87,10 +91,7 @@
<legend class="msfa__a11y-sr-only">Välj roller</legend> <legend class="msfa__a11y-sr-only">Välj roller</legend>
<ul class="edit-employee-form__roles"> <ul class="edit-employee-form__roles">
<li class="edit-employee-form__role" *ngFor="let role of availableRoles"> <li class="edit-employee-form__role" *ngFor="let role of availableRoles">
<digi-ng-form-checkbox <ui-checkbox [formControlName]="getFormControlName(role)" [uiLabel]="role.name"></ui-checkbox>
[afLabel]="role.name"
[formControlName]="getFormControlName(role)"
></digi-ng-form-checkbox>
</li> </li>
</ul> </ul>
</fieldset> </fieldset>

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

@@ -16,10 +16,12 @@ import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module'; import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module';
import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module'; import { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.module';
import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module'; import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
import { UiCheckboxModule } from '@ui/checkbox/checkbox.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 { 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 { 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';
@@ -49,6 +51,8 @@ import { EmployeeFormComponent } from './employee-form.component';
RolesDialogModule, RolesDialogModule,
UiLinkButtonModule, UiLinkButtonModule,
UiInputModule, UiInputModule,
UiCheckboxModule,
UiValidationMessageModule,
PreventDoubleSubmitModule, PreventDoubleSubmitModule,
], ],
}) })

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

@@ -97,15 +97,12 @@
> >
<div class="periodisk-redovisning-form__activities"> <div class="periodisk-redovisning-form__activities">
<div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox"> <div class="periodisk-redovisning-form__no-activities-has-been-conducted-checkbox">
<digi-ng-form-checkbox <ui-checkbox
formControlName="noActivitiesHasBeenConducted" formControlName="noActivitiesHasBeenConducted"
afLabel="Deltagaren har inte deltagit i några aktiviteter denna period" uiLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[afInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch" [uiInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
></digi-ng-form-checkbox>
<ui-validation-message
[uiShowValidationMessage]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
[uiValidationMessage]="formErrors?.activitiesMismatch" [uiValidationMessage]="formErrors?.activitiesMismatch"
></ui-validation-message> ></ui-checkbox>
</div> </div>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef"> <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
@@ -115,11 +112,11 @@
*ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index" *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
> >
<ng-container [formGroupName]="i"> <ng-container [formGroupName]="i">
<digi-ng-form-checkbox <ui-checkbox
#isSelected #isSelected
formControlName="isSelected" formControlName="isSelected"
[afLabel]="activitiesFormArrayMetadata[i].name" [uiLabel]="activitiesFormArrayMetadata[i].name"
></digi-ng-form-checkbox> ></ui-checkbox>
<div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue"> <div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
<ui-input <ui-input
class="periodisk-redovisning-form__activity-hours" class="periodisk-redovisning-form__activity-hours"
@@ -135,20 +132,17 @@
></ui-input> ></ui-input>
<div class="periodisk-redovisning-form__activity-group"> <div class="periodisk-redovisning-form__activity-group">
<digi-ng-form-checkbox <ui-checkbox
formControlName="performedRemotely" formControlName="performedRemotely"
[afInvalid]="activityLocationIsInvalid(activityFormGroup)" uiLabel="Utfört på distans"
afLabel="Utfört på distans" [uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
></digi-ng-form-checkbox> ></ui-checkbox>
<digi-ng-form-checkbox <ui-checkbox
formControlName="performedPhysically" formControlName="performedPhysically"
[afInvalid]="activityLocationIsInvalid(activityFormGroup)" uiLabel="Utfört på plats"
afLabel="Utfört på plats" [uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
></digi-ng-form-checkbox>
<ui-validation-message
[uiShowValidationMessage]="activityLocationIsInvalid(activityFormGroup)"
[uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes" [uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes"
></ui-validation-message> ></ui-checkbox>
</div> </div>
</div> </div>
</ng-container> </ng-container>

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 { RouterModule } from '@angular/router';
import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module'; import { PreventDoubleSubmitModule } from '@msfa-directives/prevent-double-submit.module';
import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; 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 { UiCheckboxModule } from '@ui/checkbox/checkbox.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 { UiLoaderModule } from '@ui/loader/loader.module';
@@ -38,6 +39,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
UiRadiobuttonGroupModule, UiRadiobuttonGroupModule,
UiLinkButtonModule, UiLinkButtonModule,
UiInputModule, UiInputModule,
UiCheckboxModule,
UiValidationMessageModule, UiValidationMessageModule,
PreventDoubleSubmitModule, PreventDoubleSubmitModule,
], ],

18
libs/ui/src/multiselect/multiselect-panel/multiselect-panel.component.html
View File

@@ -14,12 +14,12 @@
class="multiselect-panel__checkboxes-item" class="multiselect-panel__checkboxes-item"
*ngFor="let multiselectOption of availableOptions; let i = index" *ngFor="let multiselectOption of availableOptions; let i = index"
> >
<digi-ng-form-checkbox <ui-checkbox
[afLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
(change)="setOptionState(multiselectOption, $event.target.checked)"
[ngModel]="isSelected(multiselectOption)" [ngModel]="isSelected(multiselectOption)"
[uiLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
[name]="multiselectOption.id" [name]="multiselectOption.id"
></digi-ng-form-checkbox> (uiOnChange)="setOptionState(multiselectOption, $event)"
></ui-checkbox>
</li> </li>
<ng-container *ngIf="selectedUnavailableOptions.length"> <ng-container *ngIf="selectedUnavailableOptions.length">
<li <li
@@ -27,13 +27,13 @@
[ngClass]="{'multiselect-panel__checkboxes-item--unavailable': i === 0}" [ngClass]="{'multiselect-panel__checkboxes-item--unavailable': i === 0}"
*ngFor="let multiselectOption of selectedUnavailableOptions; let i = index" *ngFor="let multiselectOption of selectedUnavailableOptions; let i = index"
> >
<digi-ng-form-checkbox <ui-checkbox
[afLabel]="multiselectOption.label + ' (0)'"
(change)="setOptionState(multiselectOption, $event.target.checked)"
[ngModel]="isSelected(multiselectOption)" [ngModel]="isSelected(multiselectOption)"
[uiLabel]="multiselectOption.label + ' (0)'"
[uiSecondary]="true"
[name]="multiselectOption.id" [name]="multiselectOption.id"
[afSecondary]="true" (uiOnChange)="setOptionState(multiselectOption, $event)"
></digi-ng-form-checkbox> ></ui-checkbox>
</li> </li>
</ng-container> </ng-container>
</ul> </ul>

5
libs/ui/src/multiselect/multiselect.module.ts
View File

@@ -3,13 +3,14 @@ import { A11yModule } from '@angular/cdk/a11y';
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 { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
import { MultiselectComponent } from '@ui/multiselect/multiselect.component'; import { MultiselectComponent } from '@ui/multiselect/multiselect.component';
import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
import { UiOverlayModule } from '@ui/overlay/overlay.module'; import { UiOverlayModule } from '@ui/overlay/overlay.module';
import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
@NgModule({ @NgModule({
declarations: [MultiselectComponent, MultiselectPanelComponent], declarations: [MultiselectComponent, MultiselectPanelComponent],
imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule], imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule, UiCheckboxModule],
exports: [MultiselectComponent], exports: [MultiselectComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA], schemas: [CUSTOM_ELEMENTS_SCHEMA],
}) })