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

72
lib/core/src/lib/form/components/form-field/form-field.component.spec.ts
View File

@@ -42,7 +42,7 @@ describe('FormFieldComponent', () => {
fixture.destroy();
});
it('should create default component instance', (done) => {
it('should create default component instance', () => {
const field = new FormFieldModel(form, {
type: FormFieldTypes.TEXT,
id: 'FAKE-TXT-WIDGET'
@@ -51,14 +51,29 @@ describe('FormFieldComponent', () => {
component.field = field;
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.componentRef).toBeDefined();
expect(component.componentRef.instance instanceof TextWidgetComponent).toBeTruthy();
done();
});
expect(component.componentRef).toBeDefined();
expect(component.componentRef.instance instanceof TextWidgetComponent).toBeTruthy();
});
it('should create custom component instance', (done) => {
it('should call update form control state for reactive type widget on formRulesEvent change', () => {
const field = new FormFieldModel(form, {
type: FormFieldTypes.DATE,
id: 'FAKE-DATE-WIDGET'
});
component.field = field;
fixture.detectChanges();
const widgetInstance = component.componentRef.instance;
const updateFormControlState = spyOn(widgetInstance, 'updateReactiveFormControl');
widgetInstance.formService.formRulesEvent.next();
fixture.detectChanges();
expect(updateFormControlState).toHaveBeenCalled();
});
it('should create custom component instance', () => {
formRenderingService.setComponentTypeResolver(FormFieldTypes.AMOUNT, () => CheckboxWidgetComponent, true);
const field = new FormFieldModel(form, {
@@ -67,16 +82,14 @@ describe('FormFieldComponent', () => {
});
component.field = field;
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.componentRef).toBeDefined();
expect(component.componentRef.instance instanceof CheckboxWidgetComponent).toBeTruthy();
done();
});
expect(component.componentRef).toBeDefined();
expect(component.componentRef.instance instanceof CheckboxWidgetComponent).toBeTruthy();
});
it('should require component type to be resolved', (done) => {
it('should require component type to be resolved', () => {
const field = new FormFieldModel(form, {
type: FormFieldTypes.TEXT,
id: 'FAKE-TXT-WIDGET'
@@ -84,16 +97,14 @@ describe('FormFieldComponent', () => {
spyOn(formRenderingService, 'resolveComponentType').and.returnValue(null);
component.field = field;
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(formRenderingService.resolveComponentType).toHaveBeenCalled();
expect(component.componentRef).toBeUndefined();
done();
});
expect(formRenderingService.resolveComponentType).toHaveBeenCalled();
expect(component.componentRef).toBeUndefined();
});
it('should hide the field when it is not visible', (done) => {
it('should hide the field when it is not visible', () => {
const field = new FormFieldModel(form, {
type: FormFieldTypes.TEXT,
id: 'FAKE-TXT-WIDGET'
@@ -101,29 +112,26 @@ describe('FormFieldComponent', () => {
component.field = field;
component.field.isVisible = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
const debugElement = fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style;
expect(debugElement.visibility).toEqual('hidden');
expect(debugElement.display).toEqual('none');
done();
});
const debugElement = fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style;
expect(debugElement.visibility).toEqual('hidden');
expect(debugElement.display).toEqual('none');
});
it('should show the field when it is visible', (done) => {
it('should show the field when it is visible', () => {
const field = new FormFieldModel(form, {
type: FormFieldTypes.TEXT,
id: 'FAKE-TXT-WIDGET'
});
component.field = field;
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style.visibility).toEqual('visible');
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style.display).toEqual('block');
done();
});
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style.visibility).toEqual('visible');
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style.display).toEqual('block');
});
it('should hide a visible element', () => {
@@ -142,7 +150,7 @@ describe('FormFieldComponent', () => {
expect(fixture.nativeElement.querySelector('#field-FAKE-TXT-WIDGET-container').style.display).toEqual('none');
});
it('[C213878] - Should fields be correctly rendered when filled with process variables', async () => {
it('[C213878] - Should fields be correctly rendered when filled with process variables', () => {
const field = new FormFieldModel(form, {
fieldType: 'HyperlinkRepresentation',
id: 'label2',

21
lib/core/src/lib/form/components/form-field/form-field.component.ts
View File

@@ -20,6 +20,7 @@ import {
Component,
ComponentFactory,
ComponentRef,
DestroyRef,
inject,
Input,
NgModule,
@@ -33,6 +34,8 @@ import { FormRenderingService } from '../../services/form-rendering.service';
import { WidgetVisibilityService } from '../../services/widget-visibility.service';
import { FormFieldModel } from '../widgets/core/form-field.model';
import { FieldStylePipe } from '../../pipes/field-style.pipe';
import { FormFieldTypes } from '../widgets/core/form-field-types';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
declare const adf: any;
@@ -62,6 +65,7 @@ export class FormFieldComponent implements OnInit, OnDestroy {
private readonly formRenderingService = inject(FormRenderingService);
private readonly visibilityService = inject(WidgetVisibilityService);
private readonly destroyRef = inject(DestroyRef);
private readonly compiler = inject(Compiler);
ngOnInit() {
@@ -88,14 +92,29 @@ export class FormFieldComponent implements OnInit, OnDestroy {
instance.fieldChanged.subscribe((field) => {
if (field && this.field.form) {
this.visibilityService.refreshVisibility(field.form);
field.form.onFormFieldChanged(field);
this.triggerFormFieldChanged(field);
}
});
if (FormFieldTypes.isReactiveType(instance?.field?.type)) {
this.updateReactiveFormControlOnFormRulesEvent(instance);
}
}
}
}
}
private updateReactiveFormControlOnFormRulesEvent(instance: any): void {
instance?.formService.formRulesEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
instance?.updateReactiveFormControl();
this.triggerFormFieldChanged(instance.field);
});
}
private triggerFormFieldChanged(field: FormFieldModel): void {
field.form.onFormFieldChanged(field);
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();

21
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
View File

@@ -57,15 +57,14 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {
maxDate: Date;
datetimeInputControl: FormControl<Date> = new FormControl<Date>(null);
public readonly formService = inject(FormService);
private readonly destroyRef = inject(DestroyRef);
private readonly dateAdapter = inject(DateAdapter);
private readonly dateTimeAdapter = inject(DatetimeAdapter);
ngOnInit(): void {
this.patchFormControl();
this.setFormControlValue();
this.updateFormControlState();
this.initDateAdapter();
this.initDateRange();
this.subscribeToDateChanges();
@@ -77,12 +76,20 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit {
this.onFieldChanged(this.field);
}
private patchFormControl(): void {
updateReactiveFormControl(): void {
this.updateFormControlState();
this.validateField();
}
private setFormControlValue(): void {
this.datetimeInputControl.setValue(this.field.value, { emitEvent: false });
}
private updateFormControlState(): void {
this.datetimeInputControl.setValidators(this.isRequired() ? [Validators.required] : []);
if (this.field?.readOnly || this.readOnly) {
this.datetimeInputControl.disable({ emitEvent: false });
}
this.field?.readOnly || this.readOnly
? this.datetimeInputControl.disable({ emitEvent: false })
: this.datetimeInputControl.enable({ emitEvent: false });
this.datetimeInputControl.updateValueAndValidity({ emitEvent: false });
}

23
lib/core/src/lib/form/components/widgets/date/date.widget.ts
View File

@@ -32,6 +32,7 @@ import { WidgetComponent } from '../widget.component';
import { ErrorMessageModel } from '../core/error-message.model';
import { parseISO } from 'date-fns';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormWidget } from '../reactive-widget.interface';
@Component({
selector: 'date-widget',
@@ -55,7 +56,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
imports: [MatFormFieldModule, TranslateModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, ErrorWidgetComponent, NgIf],
encapsulation: ViewEncapsulation.None
})
export class DateWidgetComponent extends WidgetComponent implements OnInit {
export class DateWidgetComponent extends WidgetComponent implements OnInit, ReactiveFormWidget {
minDate: Date;
maxDate: Date;
startAt: Date;
@@ -68,7 +69,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit {
private readonly destroyRef = inject(DestroyRef);
ngOnInit(): void {
this.patchFormControl();
this.setFormControlValue();
this.updateFormControlState();
this.initDateAdapter();
this.initDateRange();
this.initStartAt();
@@ -80,12 +82,21 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit {
this.validateField();
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 });
}

1
lib/core/src/lib/form/components/widgets/index.ts
View File

@@ -34,6 +34,7 @@ import { DecimalWidgetComponent } from './decimal/decimal.component';
// core
export * from './widget.component';
export * from './reactive-widget.interface';
export * from './core';
// primitives

23
lib/core/src/lib/form/components/widgets/reactive-widget.interface.ts Normal file
View File

@@ -0,0 +1,23 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { FormService } from '../../services/form.service';
export interface ReactiveFormWidget {
updateReactiveFormControl(): void;
formService: FormService;
}