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 · c9ad1c1 · c9ad1c1
1 parent 1930d7f
commit c9ad1c1
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 6 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
@@ -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<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' }];
 
@@ -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/...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,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<PoDynamicFormField>, containerFields: Array<Array<PoDynamicFormField>>) {
     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) {