From 22a580a77315bb1c05ad54d9ec93ac2133d14506 Mon Sep 17 00:00:00 2001 From: nuno Date: Wed, 9 Aug 2023 16:38:29 +0200 Subject: [PATCH] Fixing issue when using visibleIf in array items. Added sample as an example. Added test of the sample. --- .../src/lib/model/arrayproperty.ts | 1 + ...a-example.component.canonical-path.spec.ts | 2 +- .../json-schema-example.component.ts | 12 +++- ...schema-example.component.visibleIf.spec.ts | 64 +++++++++++++++++++ .../visibility-binding-example-schema4.json | 41 ++++++++++++ 5 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 src/app/json-schema-example/visibility-binding-example-schema4.json diff --git a/projects/schema-form/src/lib/model/arrayproperty.ts b/projects/schema-form/src/lib/model/arrayproperty.ts index 77ba1b38..463d3570 100644 --- a/projects/schema-form/src/lib/model/arrayproperty.ts +++ b/projects/schema-form/src/lib/model/arrayproperty.ts @@ -23,6 +23,7 @@ export class ArrayProperty extends PropertyGroup { addItem(value: any = null): FormProperty { let newProperty = this.addProperty(); newProperty.reset(value, false); + newProperty._bindVisibility(); return newProperty; } diff --git a/src/app/json-schema-example/json-schema-example.component.canonical-path.spec.ts b/src/app/json-schema-example/json-schema-example.component.canonical-path.spec.ts index e1ce7a14..954b9faf 100644 --- a/src/app/json-schema-example/json-schema-example.component.canonical-path.spec.ts +++ b/src/app/json-schema-example/json-schema-example.component.canonical-path.spec.ts @@ -92,7 +92,7 @@ describe('JsonSchemaExampleComponent - canonical-path', () => { // select demo sample const select: HTMLSelectElement = fixture.debugElement.query(By.css('#samples')).nativeElement; - select.value = select.options[6].value; // <-- select a new value + select.value = select.options[7].value; // <-- select a new value select.dispatchEvent(new Event('change')); fixture.detectChanges(); }); diff --git a/src/app/json-schema-example/json-schema-example.component.ts b/src/app/json-schema-example/json-schema-example.component.ts index 34c06014..551754b0 100644 --- a/src/app/json-schema-example/json-schema-example.component.ts +++ b/src/app/json-schema-example/json-schema-example.component.ts @@ -15,6 +15,7 @@ import binding_sample_bindings from './binding_sample_bindings'; import visibility_binding_example from './visibility-binding-example-schema.json'; import visibility_binding_example2 from './visibility-binding-example-schema2.json'; import visibility_binding_example3 from './visibility-binding-example-schema3.json'; +import visibility_binding_example4 from './visibility-binding-example-schema4.json'; import sample_canonical_path from './sample-canonical-path.json'; import {AppService, AppData} from '../app.service'; @@ -43,7 +44,8 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy { {label: 'Sample 4 - Visibility binding', event: this.changeSchemaVisibilityBinding, selected: false}, {label: 'Sample 5 - Visibility binding 2', event: this.changeSchemaVisibilityBinding2, selected: false}, {label: 'Sample 6 - Visibility binding 3', event: this.changeSchemaVisibilityBinding3, selected: false}, - {label: 'Sample 7 - Canonical path', event: this.changeSchemaCanonicalPath, selected: false}, + {label: 'Sample 7 - Visibility binding 4', event: this.changeSchemaVisibilityBinding4, selected: false}, + {label: 'Sample 8 - Canonical path', event: this.changeSchemaCanonicalPath, selected: false}, ]; constructor( @@ -229,6 +231,14 @@ export class JsonSchemaExampleComponent implements OnInit, OnDestroy { this.actions = {}; } + changeSchemaVisibilityBinding4() { + this.schema = visibility_binding_example4 as unknown as ISchema; + this.model = {}; + this.fieldBindings = {}; + this.fieldValidators = {}; + this.actions = {}; + } + changeSchemaCanonicalPath(){ this.schema = sample_canonical_path as unknown as ISchema; this.model = {}; diff --git a/src/app/json-schema-example/json-schema-example.component.visibleIf.spec.ts b/src/app/json-schema-example/json-schema-example.component.visibleIf.spec.ts index 0e3180bf..d848bfae 100644 --- a/src/app/json-schema-example/json-schema-example.component.visibleIf.spec.ts +++ b/src/app/json-schema-example/json-schema-example.component.visibleIf.spec.ts @@ -817,3 +817,67 @@ describe("JsonSchemaExampleComponent - visibleIf - condition-types (chained cond }); })); }); + + +describe("JsonSchemaExampleComponent - visibleIf - array items have visibleIf fields", () => { + let component: JsonSchemaExampleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [SchemaFormModule.forRoot(), HttpClientModule, FormsModule, ReactiveFormsModule], + declarations: [JsonSchemaExampleComponent], + providers: [ + { provide: WidgetRegistry, useClass: DefaultWidgetRegistry }, + { + provide: SchemaValidatorFactory, + useClass: ZSchemaValidatorFactory + } + ] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(JsonSchemaExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + beforeEach(() => { + // select demo sample + const select: HTMLSelectElement = fixture.debugElement.query(By.css("#samples")).nativeElement; + select.value = select.options[6].value; // <-- select a new value + select.dispatchEvent(new Event("change")); + fixture.detectChanges(); + }); + + it(`# 1. Test 'VisibleIf' within an element of an array`, async(() => { + // Visible component shows up if status value is 'Warn' or 'Fail' + + fixture.whenStable().then(() => { + fixture.detectChanges(); + + // expect page containing a sf-form element + const sf_form = fixture.debugElement.query(By.css("sf-form")); + expect(sf_form).toBeTruthy(); + + // Add an element + const _add_button = fixture.debugElement.query(By.css(".array-add-button")).nativeElement; + _add_button.click(); + fixture.detectChanges(); + // initial state + const _select: HTMLSelectElement = fixture.debugElement.query(By.css("#arrayObject\\.0\\.showHiddenField")).nativeElement; + let _input = fixture.debugElement.query(By.css("#arrayObject\\.0\\.visibleTest")); + expect(_select).toBeDefined(); + expect(_input).toBeNull(); + + // change state to make field visible + _select.value = _select.options[1].value; + _select.dispatchEvent(new Event("change")); + fixture.detectChanges(); + _input = fixture.debugElement.query(By.css("#arrayObject\\.0\\.visibleTest")).nativeElement; + expect(_input).toBeDefined(); + }); + })); + +}); diff --git a/src/app/json-schema-example/visibility-binding-example-schema4.json b/src/app/json-schema-example/visibility-binding-example-schema4.json new file mode 100644 index 00000000..3573aade --- /dev/null +++ b/src/app/json-schema-example/visibility-binding-example-schema4.json @@ -0,0 +1,41 @@ +{ + "type": "object", + "title": "Example of visibleIf inside of an array item", + "description": "This example shows how to use visibility options inside of items of an array", + "properties": { + "arrayObject": { + "type": "array", + "items": { + "type": "object", + "title": "Object with visibleIf properties.", + "properties": { + "showHiddenField": { + "type": "integer", + "widget": "select", + "title": "Choose 1 to show the hidden field or 0 to hide it. By default the field is hidden.", + "oneOf": [ + { + "enum": [0], + "description": "Hide field." + }, + { + "enum": [1], + "description": "Show hidden field." + } + ] + }, + "visibleTest": { + "type": "string", + "title": "This is shown if previous field is 1.", + "visibleIf": { + "showHiddenField": [1] + } + } + } + } + } + }, + "required": [ + "arrayObject" + ] +}