inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-27343 Listen to form rules changes from reactive widgets (#10392)

Browse Source 
* AAE-27343 Listen to form rules changes from reactive widgets

* remove leftover

* apply interface for reactive widgets and unit test

* update readonly control status

* [ci:force][link-adf:fix/AAE-27343-listen-to-form-rules-changes-in-reactive-widgets]
This commit is contained in:
Tomasz Gnyp
2024-11-29 10:27:24 +01:00
committed by GitHub
parent 7eb51ef58f
commit 23fe4d4486
9 changed files with 192 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
View File

@@ -17,7 +17,7 @@
/* eslint-disable @angular-eslint/component-selector */
import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnInit, ViewEncapsulation, DestroyRef, inject } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
import {
ADF_DATE_FORMATS,
@@ -27,7 +27,8 @@ import {
ErrorMessageModel,
ErrorWidgetComponent,
FormService,
WidgetComponent
WidgetComponent,
ReactiveFormWidget
} from '@alfresco/adf-core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { addDays, parseISO } from 'date-fns';
@@ -61,7 +62,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
},
encapsulation: ViewEncapsulation.None
})
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit {
export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, ReactiveFormWidget {
typeId = 'DateCloudWidgetComponent';
minDate: Date = null;
@@ -71,12 +72,13 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit
dateInputControl: FormControl<Date> = new FormControl<Date>(null);
public readonly formService = inject(FormService);
private readonly destroyRef = inject(DestroyRef);
private readonly dateAdapter = inject(DateAdapter);
ngOnInit(): void {
this.patchFormControl();
this.setFormControlValue();
this.updateFormControlState();
this.initDateAdapter();
this.initRangeSelection();
this.initStartAt();
@@ -89,12 +91,20 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit
this.onFieldChanged(this.field);
}
private patchFormControl(): void {
updateReactiveFormControl(): void {
this.updateFormControlState();
this.validateField();
}
private setFormControlValue(): void {
this.dateInputControl.setValue(this.field.value, { emitEvent: false });
}
private updateFormControlState(): void {
this.dateInputControl.setValidators(this.isRequired() ? [Validators.required] : []);
if (this.field?.readOnly || this.readOnly) {
this.dateInputControl.disable({ emitEvent: false });
}
this.field?.readOnly || this.readOnly
? this.dateInputControl.disable({ emitEvent: false })
: this.dateInputControl.enable({ emitEvent: false });
this.dateInputControl.updateValueAndValidity({ emitEvent: false });
}

39
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@@ -24,6 +24,7 @@ import {
FormFieldOption,
FormFieldTypes,
FormService,
ReactiveFormWidget,
RuleEntry,
SelectFilterInputComponent,
WidgetComponent
@@ -66,10 +67,11 @@ export const HIDE_FILTER_LIMIT = 5;
SelectFilterInputComponent
]
})
export class DropdownCloudWidgetComponent extends WidgetComponent implements OnInit {
export class DropdownCloudWidgetComponent extends WidgetComponent implements OnInit, ReactiveFormWidget {
public formService = inject(FormService);
private formCloudService = inject(FormCloudService);
private appConfig = inject(AppConfigService);
private destroyRef = inject(DestroyRef);
typeId = 'DropdownCloudWidgetComponent';
showInputFilter = false;
@@ -85,7 +87,6 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
private readonly defaultVariableOptionId = 'id';
private readonly defaultVariableOptionLabel = 'name';
private readonly defaultVariableOptionPath = 'data';
private readonly destroyRef = inject(DestroyRef);
get showRequiredMessage(): boolean {
return this.dropdownControl.touched && this.dropdownControl.errors?.required && !this.isRestApiFailed && !this.variableOptionsFailed;
@@ -133,6 +134,11 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
});
}
updateReactiveFormControl(): void {
this.updateFormControlState();
this.handleErrors();
}
compareDropdownValues(opt1: FormFieldOption | string, opt2: FormFieldOption | string): boolean {
if (!opt1 || !opt2) {
return false;
@@ -165,19 +171,14 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
this.checkFieldOptionsSource();
this.updateOptions();
this.initFormControl();
this.setFormControlValue();
this.updateFormControlState();
this.subscribeToInputChanges();
this.initFilter();
this.handleErrors();
}
private initFormControl(): void {
if (this.field?.required) {
this.dropdownControl.addValidators([Validators.required]);
}
if (this.field?.readOnly || this.readOnly) {
this.dropdownControl.disable({ emitEvent: false });
}
private subscribeToInputChanges(): void {
this.dropdownControl.valueChanges
.pipe(
filter(() => !!this.field),
@@ -188,19 +189,31 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
this.handleErrors();
this.selectionChangedForField(this.field);
});
}
private setFormControlValue(): void {
this.dropdownControl.setValue(this.field?.value, { emitEvent: false });
this.handleErrors();
}
private updateFormControlState(): void {
this.dropdownControl.setValidators(this.isRequired() ? [Validators.required] : []);
this.field?.readOnly || this.readOnly
? this.dropdownControl.disable({ emitEvent: false })
: this.dropdownControl.enable({ emitEvent: false });
this.dropdownControl.updateValueAndValidity({ emitEvent: false });
}
private handleErrors(): void {
if (this.dropdownControl.valid) {
this.field.validationSummary = new ErrorMessageModel('');
this.field.markAsValid();
return;
}
if (this.dropdownControl.invalid && this.dropdownControl.errors.required) {
this.field.validationSummary = new ErrorMessageModel({ message: 'FORM.FIELD.REQUIRED' });
this.field.markAsInvalid();
}
}