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-ui · Nov 22, 2024 · a645d48 · a645d48
1 parent f86d1bd
commit a645d48
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/...o-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts b/...o-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.spec.ts
@@ -674,6 +674,57 @@ describe('PoDynamicFormFieldsComponent: ', () => {
       expect(component.setContainerFields).toHaveBeenCalled();
     });
 
+    it('hasChangeContainer: should call `setContainerFields` if there is a change in hidden fields', () => {
+      const fieldPrevious: Array<PoDynamicFormField> = [
+        { property: 'campo 1', visible: false },
+        { property: 'campo 2' }
+      ];
+      const fieldCurrent: Array<PoDynamicFormField> = [{ property: 'campo 1', visible: true }, { property: 'campo 2' }];
+
+      component.visibleFields = fieldCurrent;
+
+      spyOn(component, <any>'setContainerFields');
+
+      component['hasChangeContainer'](fieldPrevious, fieldCurrent);
+
+      expect(component['setContainerFields']).toHaveBeenCalled();
+    });
+
+    it('hasChangeContainer: if there is a change in the visible fields', () => {
+      const fieldPrevious: Array<PoDynamicFormField> = [{ property: 'campo 1' }, { property: 'campo 2' }];
+      const fieldCurrent: Array<PoDynamicFormField> = [
+        { property: 'campo 1' },
+        { property: 'campo 2' },
+        { property: 'campo 3', visible: false }
+      ];
+
+      component.visibleFields = fieldCurrent.filter(x => x.visible === false);
+
+      spyOn(component, <any>'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<PoDynamicFormField> = [
+        { property: 'campo 1', visible: true },
+        { property: 'campo 2', visible: false }
+      ];
+      const fieldCurrent: Array<PoDynamicFormField> = [
+        { property: 'campo 1', visible: false },
+        { property: 'campo 2', visible: true }
+      ];
+
+      spyOn(component, <any>'getVisibleFields').and.returnValue(fieldCurrent.filter(x => x.visible === true));
+      spyOn(component, <any>'handleChangesContainer');
+
+      component['hasChangeContainer'](fieldPrevious, fieldCurrent);
+
+      expect(component['handleChangesContainer']).toHaveBeenCalled();
+    });
+
     it('handleChangesContainer: should not call `setContainerFields` if order had its value changed', () => {
       const previous: Array<PoDynamicFormField> = [{ property: 'property1', order: 1 }, { property: 'property2' }];
 

diff --git a/...nts/po-dynamic/po-dynamic-form/po-dynamic-form-fields/po-dynamic-form-fields.component.ts b/...nts/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);