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 25, 2024 · 6293831 · 6293831
1 parent 1930d7f
commit 6293831
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
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
@@ -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<PoDynamicFormField>;

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' }];
 

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);