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>
</p>
<ng-container *ngIf="!isLoadingUtforandeVerksamheter else loadingUtforandeVerksamheterTemplate">
<digi-ng-form-checkbox
[afId]="selectAllUtforandeVerksamheterElementId"
<ui-checkbox
class="edit-employee-form__choose-all-utforande-verksamheter"
[uiId]="selectAllUtforandeVerksamheterElementId"
[formControl]="selectAllUtforandeVerksamheterFormControl"
[afLabel]="'Välj alla utförande verksamheter och alla utförande adresser'"
[afInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
></digi-ng-form-checkbox>
uiLabel="Välj alla utförande verksamheter och alla utförande adresser"
[uiInvalid]="editEmployeeFormGroup.errors?.utforandeVerksamheter && (selectAllUtforandeVerksamheterFormControl.touched || utforandeVerksamheterFormControl.touched)"
></ui-checkbox>
<msfa-tree-nodes-selector
*ngIf="!selectAllUtforandeVerksamheterFormControl.value"
@@ -66,6 +66,10 @@
[validationMessages]="[editEmployeeFormGroup.errors?.utforandeVerksamheter]"
(selectedTreeNodesChanged)="updateToggleAllUtforandeVerksamheter()"
></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-template #loadingUtforandeVerksamheterTemplate>
<digi-ng-loader-spinner
@@ -87,10 +91,7 @@
<legend class="msfa__a11y-sr-only">Välj roller</legend>
<ul class="edit-employee-form__roles">
<li class="edit-employee-form__role" *ngFor="let role of availableRoles">
<digi-ng-form-checkbox
[afLabel]="role.name"
[formControlName]="getFormControlName(role)"
></digi-ng-form-checkbox>
<ui-checkbox [formControlName]="getFormControlName(role)" [uiLabel]="role.name"></ui-checkbox>
</li>
</ul>
</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 { TreeNodesSelectorModule } from '@msfa-shared/components/tree-nodes-selector/tree-nodes-selector.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 { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiSelectModule } from '@ui/select/select.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 { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
import { EmployeeFormComponent } from './employee-form.component';
@@ -49,6 +51,8 @@ import { EmployeeFormComponent } from './employee-form.component';
RolesDialogModule,
UiLinkButtonModule,
UiInputModule,
UiCheckboxModule,
UiValidationMessageModule,
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__no-activities-has-been-conducted-checkbox">
<digi-ng-form-checkbox
<ui-checkbox
formControlName="noActivitiesHasBeenConducted"
afLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[afInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
></digi-ng-form-checkbox>
<ui-validation-message
[uiShowValidationMessage]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
uiLabel="Deltagaren har inte deltagit i några aktiviteter denna period"
[uiInvalid]="(shouldValidate$ | async) && !!formErrors?.activitiesMismatch"
[uiValidationMessage]="formErrors?.activitiesMismatch"
></ui-validation-message>
></ui-checkbox>
</div>
<ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef">
@@ -115,11 +112,11 @@
*ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
>
<ng-container [formGroupName]="i">
<digi-ng-form-checkbox
<ui-checkbox
#isSelected
formControlName="isSelected"
[afLabel]="activitiesFormArrayMetadata[i].name"
></digi-ng-form-checkbox>
[uiLabel]="activitiesFormArrayMetadata[i].name"
></ui-checkbox>
<div class="periodisk-redovisning-form__activity-details" *ngIf="isSelected.currentValue">
<ui-input
class="periodisk-redovisning-form__activity-hours"
@@ -135,20 +132,17 @@
></ui-input>
<div class="periodisk-redovisning-form__activity-group">
<digi-ng-form-checkbox
<ui-checkbox
formControlName="performedRemotely"
[afInvalid]="activityLocationIsInvalid(activityFormGroup)"
afLabel="Utfört på distans"
></digi-ng-form-checkbox>
<digi-ng-form-checkbox
uiLabel="Utfört på distans"
[uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
></ui-checkbox>
<ui-checkbox
formControlName="performedPhysically"
[afInvalid]="activityLocationIsInvalid(activityFormGroup)"
afLabel="Utfört på plats"
></digi-ng-form-checkbox>
<ui-validation-message
[uiShowValidationMessage]="activityLocationIsInvalid(activityFormGroup)"
uiLabel="Utfört på plats"
[uiInvalid]="activityLocationIsInvalid(activityFormGroup)"
[uiValidationMessage]="activityFormGroup.errors?.locationCheckboxes"
></ui-validation-message>
></ui-checkbox>
</div>
</div>
</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 { LayoutModule } from '@msfa-shared/components/layout/layout.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 { UiLinkButtonModule } from '@ui/link-button/link-button.module';
import { UiLoaderModule } from '@ui/loader/loader.module';
@@ -38,6 +39,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
UiRadiobuttonGroupModule,
UiLinkButtonModule,
UiInputModule,
UiCheckboxModule,
UiValidationMessageModule,
PreventDoubleSubmitModule,
],

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

@@ -14,12 +14,12 @@
class="multiselect-panel__checkboxes-item"
*ngFor="let multiselectOption of availableOptions; let i = index"
>
<digi-ng-form-checkbox
[afLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
(change)="setOptionState(multiselectOption, $event.target.checked)"
<ui-checkbox
[ngModel]="isSelected(multiselectOption)"
[uiLabel]="multiselectOption.label + ' (' + (multiselectOption.count || 0) + ')'"
[name]="multiselectOption.id"
></digi-ng-form-checkbox>
(uiOnChange)="setOptionState(multiselectOption, $event)"
></ui-checkbox>
</li>
<ng-container *ngIf="selectedUnavailableOptions.length">
<li
@@ -27,13 +27,13 @@
[ngClass]="{'multiselect-panel__checkboxes-item--unavailable': i === 0}"
*ngFor="let multiselectOption of selectedUnavailableOptions; let i = index"
>
<digi-ng-form-checkbox
[afLabel]="multiselectOption.label + ' (0)'"
(change)="setOptionState(multiselectOption, $event.target.checked)"
<ui-checkbox
[ngModel]="isSelected(multiselectOption)"
[uiLabel]="multiselectOption.label + ' (0)'"
[uiSecondary]="true"
[name]="multiselectOption.id"
[afSecondary]="true"
></digi-ng-form-checkbox>
(uiOnChange)="setOptionState(multiselectOption, $event)"
></ui-checkbox>
</li>
</ng-container>
</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 { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UiCheckboxModule } from '@ui/checkbox/checkbox.module';
import { MultiselectComponent } from '@ui/multiselect/multiselect.component';
import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
import { UiOverlayModule } from '@ui/overlay/overlay.module';
import { MultiselectPanelComponent } from './multiselect-panel/multiselect-panel.component';
@NgModule({
declarations: [MultiselectComponent, MultiselectPanelComponent],
imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule],
imports: [CommonModule, A11yModule, DigiNgFormCheckboxModule, FormsModule, UiOverlayModule, UiCheckboxModule],
exports: [MultiselectComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})