diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-base.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-base.component.ts index b38168c5a8..7e73d69df3 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-base.component.ts +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-form/po-dynamic-form-base.component.ts @@ -50,7 +50,7 @@ export class PoDynamicFormBaseComponent { * o `po-textarea`, caso o valor da propriedade `rows` seja menor que 3 o componente criado será o `po-input`. * - Caso seja informada a propriedade `secret` o componente criado será o `po-password`. * - Caso o *type* informado seja *string* o componente criado será o `po-input`. - * > Ao alterar o valor das `properties` e/ou agrupamentos via container, os `fields` que utilizam serviço podem refazer as chamadas para as API's. + * > Ao alterar o valor das `properties`, visibilidade e/ou agrupamentos via container, os `fields` que utilizam serviço podem refazer as chamadas para as API's. * @default `[]` */ @Input('p-fields') fields: Array; 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 67fd24d100..32207fc85f 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' }]; 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 65d96e8f3b..1a638ee295 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,6 +221,14 @@ 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);