From c9ad1c137017b60fa5f84c9773b4b0a17ea12005 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anderson=20Greg=C3=B3rio?= Date: Tue, 19 Nov 2024 09:41:39 -0300 Subject: [PATCH] fix(dynamic-form): corrige erro de visibilidade campos no container Corrige erro ao setar visibilidade nos campos quando dentro de um container fixes DTHFUI-10270 --- .../po-dynamic-form-fields.component.spec.ts | 54 ++++++++++++++++++- .../po-dynamic-form-fields.component.ts | 43 +++++++++++++-- 2 files changed, 91 insertions(+), 6 deletions(-) diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts index 67fd24d10..53d8a92ee 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts @@ -669,6 +669,57 @@ describe('PoDynamicFormFieldsComponent: ', () => { expect(component.setContainerFields).toHaveBeenCalled(); }); + it('hasChangeContainer: should call `setContainerFields` if there is a change in hidden fields', () => { + const fieldPrevious: Array = [ + { property: 'campo 1', visible: false }, + { property: 'campo 2' } + ]; + const fieldCurrent: Array = [{ property: 'campo 1', visible: true }, { property: 'campo 2' }]; + + component.visibleFields = fieldCurrent; + + spyOn(component, 'setContainerFields'); + + component['hasChangeContainer'](fieldPrevious, fieldCurrent); + + expect(component['setContainerFields']).toHaveBeenCalled(); + }); + + it('hasChangeContainer: if there is a change in the visible fields', () => { + const fieldPrevious: Array = [{ property: 'campo 1' }, { property: 'campo 2' }]; + const fieldCurrent: Array = [ + { property: 'campo 1' }, + { property: 'campo 2' }, + { property: 'campo 3', visible: false } + ]; + + component.visibleFields = fieldCurrent.filter(x => x.visible === false); + + spyOn(component, 'setContainerFields'); + + component['hasChangeContainer'](fieldPrevious, fieldCurrent); + + expect(component['setContainerFields']).toHaveBeenCalled(); + }); + + it('hasChangeContainer: should call "handleChange Container" if there is a change of fields to visible', () => { + const fieldPrevious: Array = [ + { property: 'campo 1', visible: true }, + { property: 'campo 2', visible: false } + ]; + const fieldCurrent: Array = [ + { property: 'campo 1', visible: false }, + { property: 'campo 2', visible: true } + ]; + + spyOn(component, 'getVisibleFields').and.returnValue(fieldCurrent.filter(x => x.visible === true)); + spyOn(component, 'handleChangesContainer'); + + component['hasChangeContainer'](fieldPrevious, fieldCurrent); + + expect(component['handleChangesContainer']).toHaveBeenCalled(); + }); + it('handleChangesContainer: should not call `setContainerFields` if order had its value changed', () => { const previous: Array = [{ property: 'property1', order: 1 }, { property: 'property2' }]; @@ -723,8 +774,7 @@ describe('PoDynamicFormFieldsComponent: ', () => { const updatedFields = component['updateFieldContainer'](changes, containerFields); expect(updatedFields[0][0].container).toBe('updatedContainer1'); - expect(updatedFields[1][0].container).toBe('container2'); - expect(updatedFields[2][0].container).toBe('updatedContainer3'); + expect(updatedFields[1][0].container).toBe('updatedContainer3'); }); it('diffObjectsArray: should return the complete object if it is new in the array', () => { diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts index 65d96e8f3..a4fcf95da 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts @@ -165,14 +165,16 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone container: item.container || null, property: item.property, index, - order: item.order + order: item.order, + visible: item.visible ?? true })); const currArray = current.map((item, index) => ({ container: item.container || null, property: item.property, index, - order: item.order + order: item.order, + visible: item.visible ?? true })); const prevContainers = prevArray.filter(item => item.container); @@ -181,6 +183,12 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone const prevOrder = prevArray.filter(item => item.order); const currOrder = currArray.filter(item => item.order); + const prevVisibleTrue = prevArray.filter(item => item.visible === true); + const currVisibleTrue = currArray.filter(item => item.visible === true); + + const prevVisibleFalse = prevArray.filter(item => !item.visible); + const currVisibleFalse = currArray.filter(item => !item.visible); + // Verifica mudança na quantidade de containers if (prevContainers.length !== currContainers.length) { this.setContainerFields(); @@ -193,6 +201,18 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone return; } + // Verifica mudança na quantidade de visible + if (prevVisibleTrue.length !== currVisibleTrue.length) { + this.setContainerFields(); + return; + } + + // Verifica mudança na quantidade de visible + if (prevVisibleFalse.length !== currVisibleFalse.length) { + this.setContainerFields(); + return; + } + if (currContainers.length) { this.handleChangesContainer(prevContainers, currContainers, 'container'); } @@ -201,12 +221,20 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone this.handleChangesContainer(prevOrder, currOrder, 'order'); } + if (currVisibleTrue.length) { + this.handleChangesContainer(prevVisibleTrue, currVisibleTrue, 'visible'); + } + + if (currVisibleFalse.length) { + this.handleChangesContainer(prevVisibleFalse, currVisibleFalse, 'visible'); + } + //atualiza container sem mudança na estrutura da interface const result = this.diffObjectsArray(previous, this.getVisibleFields()); this.containerFields = this.updateFieldContainer(result, this.containerFields); } - private updateFieldContainer(changes, containerFields) { + private updateFieldContainer(changes: Array, containerFields: Array>) { const mapchanges = new Map(changes.map(obj => [obj.property, obj])); containerFields.forEach(subArray => { @@ -218,7 +246,14 @@ export class PoDynamicFormFieldsComponent extends PoDynamicFormFieldsBaseCompone }); }); - return containerFields; + // Garante que apenas os items de `changes` estejam em `containerFields` + return containerFields + .map(itemFields => + itemFields.filter(formFieldContainer => + changes.some(formFieldChanges => formFieldContainer.property === formFieldChanges.property) + ) + ) + .filter(subArray => subArray.length > 0); } private diffObjectsArray(oldArray, newArray) {