feat(dynamic-view): adiciona propriedade p-text-wrap

O componente po-dynamic-view não preserva as quebras de linha dos dados recebidos da API. Adiciona a propriedade p-text-wrap para garantir que as quebras de linha (\n) sejam respeitadas na visualização dos dados. Fixes DTHFUI-9446
po-ui · Sep 2, 2024 · b19fac0 · b19fac0
1 parent fd1b142
commit b19fac0
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 4 deletions.
diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.ts
@@ -111,6 +111,29 @@ export class PoDynamicViewBaseComponent extends PoDynamicSharedBase {
     return this._showAllValue;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Permite a quebra de linha no texto do `p-value`, aplicando-a onde há `\n`.
+   *
+   * ```
+   * <po-dynamic-view
+   *   [p-value]="{ description: 'Primeira linha\nSegunda linha' }"
+   *   [p-text-wrap]="true"
+   * ></po-dynamic-view>
+   * ```
+   *
+   * Saída:
+   * ```
+   * Primeira linha
+   * Segunda linha
+   * ```
+   * @default `false`
+   */
+  @Input('p-text-wrap') textWrap: boolean = false;
+
   /**
    * @description
    *

diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.html b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.html
@@ -25,8 +25,14 @@
 </ng-template>
 
 <ng-template #poInfo let-field>
-  <po-info [ngClass]="field.cssClass" [p-label]="field.label" [p-value]="setFieldValue(field)"> </po-info>
-</ng-template>
+  <po-info
+    [ngClass]="field.cssClass"
+    [class.po-info-value-pre]="textWrap && containsLineBreak(setFieldValue(field))"
+    [p-label]="field.label"
+    [p-value]="setFieldValue(field)"
+  >
+  </po-info
+></ng-template>
 
 <ng-template #poTag let-field>
   <po-tag

diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts
@@ -319,6 +319,11 @@ describe('PoDynamicViewComponent:', () => {
         expect(component.setFieldValue(field)).toEqual(false);
       });
     });
+
+    it('containsLineBreak: should return true if the string contains a newline character', () => {
+      const value = 'Hello\nWorld';
+      expect(component['containsLineBreak'](value)).toBeTrue();
+    });
   });
 
   describe('Templates:', () => {

diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts
@@ -94,6 +94,10 @@ export class PoDynamicViewComponent extends PoDynamicViewBaseComponent implement
     }
   }
 
+  protected containsLineBreak(value: string): boolean {
+    return value && value.includes('\n');
+  }
+
   private async getValuesAndFieldsFromLoad(): Promise<{ value?: any; fields?: Array<PoDynamicViewField> }> {
     let valueAndFieldsFromLoad;
 

diff --git a/...ew/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.html b/...ew/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.html
@@ -1,3 +1,3 @@
 <po-page-default p-title="Employee">
-  <po-dynamic-view [p-fields]="fields" [p-value]="employee"> </po-dynamic-view>
+  <po-dynamic-view [p-fields]="fields" [p-value]="employee" [p-text-wrap]="true"> </po-dynamic-view>
 </po-page-default>
diff --git a/...view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts b/...view/samples/sample-po-dynamic-view-employee/sample-po-dynamic-view-employee.component.ts
@@ -38,6 +38,12 @@ export class SamplePoDynamicViewEmployeeComponent {
         { label: 'yes ', value: '1' },
         { label: 'no', value: '2' }
       ]
+    },
+    {
+      property: 'hobbies',
+      label: 'Hobbies',
+      gridColumns: 12,
+      divider: 'Additional Information'
     }
   ];
 
@@ -61,6 +67,11 @@ export class SamplePoDynamicViewEmployeeComponent {
     admissionDate: '2014-10-14T13:45:00-00:00',
     hoursPerDay: '08:30:00',
     marriedStatus: '1',
-    children: '1'
+    children: '1',
+    hobbies:
+      'Leitura de livros técnicos e ficção científica.\n' +
+      'Prática de corrida ao ar livre.\n' +
+      'Jogos de tabuleiro e videogames.\n' +
+      'Culinária, especialmente cozinha italiana.'
   };
 }