feat(po-dynamic-view): adiciona format aos valores

Author: CarlosAlmeida01

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.spec.ts

@@ -397,6 +397,39 @@ describe('PoDynamicViewBaseComponent:', () => {
       expect(newField.value).toEqual(listName);
     });
 
+    it('transformArrayValue: should return a concatenated string of multiple properties from an array of objects', () => {
+      const inputArray = [
+        { id: 1, name: 'Company1', ssn: '261-81-7609' },
+        { id: 2, name: 'Company2', ssn: '527-84-6773' }
+      ];
+      const field = {
+        property: 'company',
+        label: 'Company',
+        fieldLabel: 'name',
+        fieldValue: 'id',
+        format: ['id', 'name', 'ssn']
+      };
+
+      const result = component['transformArrayValue'](inputArray, field);
+
+      expect(result).toBe('1 - Company1 - 261-81-7609, 2 - Company2 - 527-84-6773');
+    });
+
+    it('transformArrayValue: should return a concatenated string of properties from a single object', () => {
+      const inputArray = [{ id: 1, name: 'Company1', ssn: '261-81-7609' }];
+      const field = {
+        property: 'company',
+        label: 'Company',
+        fieldLabel: 'name',
+        fieldValue: 'id',
+        format: ['id', 'name', 'ssn']
+      };
+
+      const result = component['transformArrayValue'](inputArray, field);
+
+      expect(result).toBe('1 - Company1 - 261-81-7609');
+    });
+
     it(`createField: should call 'transformFieldLabel' and return a fieldLabel property`, () => {
       const field = { property: 'name', label: 'Nome', fieldLabel: 'title', fieldValue: 'id' };
       component.value = { name: 'Test Name', title: 'Title Test', id: 123 };

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-base.component.ts

@@ -259,21 +259,27 @@ export class PoDynamicViewBaseComponent {
 
   private transformArrayValue(valueProperty: any, field: PoDynamicViewField) {
     const valueArray = Array.isArray(valueProperty) ? valueProperty : [valueProperty];
-    const arrayWithLabel = valueArray.map(item => ({
-      value: item[field.fieldValue] || item.value,
-      label: item[field.fieldLabel] || item.label
-    }));
-
-    const labels = arrayWithLabel.map(optionValue => {
-      if (optionValue.label) {
-        const labelTranformed = this.transformValue(field.type, optionValue.label, field.format);
-        if (field.concatLabelValue && optionValue.value) {
-          return `${labelTranformed} - ${optionValue.value}`;
-        } else {
-          return labelTranformed;
+    let labels: Array<string>;
+
+    if (Array.isArray(field.format)) {
+      labels = valueArray.map(objectData => this.formatField(objectData, field.format));
+    } else {
+      const arrayWithLabel = valueArray.map(item => ({
+        value: item[field.fieldValue] || item.value,
+        label: item[field.fieldLabel] || item.label
+      }));
+
+      labels = arrayWithLabel.map(optionValue => {
+        if (optionValue.label) {
+          const labelTranformed = this.transformValue(field.type, optionValue.label, field.format);
+          if (field.concatLabelValue && optionValue.value) {
+            return `${labelTranformed} - ${optionValue.value}`;
+          } else {
+            return labelTranformed;
+          }
         }
-      }
-    });
+      });
+    }
 
     if (labels[0] !== undefined && labels.join()) {
       return labels.join(', ');
@@ -318,4 +324,20 @@ export class PoDynamicViewBaseComponent {
 
     return transformedValue;
   }
+
+  private formatField(objectSelected, properties) {
+    let formattedField;
+    if (Array.isArray(properties)) {
+      for (const property of properties) {
+        if (objectSelected && objectSelected[property]) {
+          if (!formattedField) {
+            formattedField = objectSelected[property];
+          } else {
+            formattedField += ' - ' + objectSelected[property];
+          }
+        }
+      }
+    }
+    return formattedField;
+  }
 }

projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view-field.interface.ts

@@ -96,26 +96,31 @@ export interface PoDynamicViewField extends PoDynamicField {
   isArrayOrObject?: boolean;
 
   /**
-   * Formato de exibição do valor do campo.
-   *
-   * Aplicado para casos específicos de acordo com o tipo do campo.
-   *
-   * **types**:
-   * - `currency`: Aceita valores definidos para a propriedade `currencyCode` do
-   *  [**CurrencyPipe**](https://angular.io/api/common/CurrencyPipe)
-   * + Exemplos: 'BRL', 'USD'.
-   * - `date`: Aceita valores definidos para a propriedade `format` do [**DatePipe**](https://angular.io/api/common/DatePipe)
-   * e também aceita os caracteres de dia(dd), mês(MM) e ano (yyyy ou yy),
-   * caso não seja informado um formato o mesmo será 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'.
-   * - `time`: Aceita apenas os caracteres de hora(HH), minutos(mm), segundos(ss) e
-   *  milisegundos(f-ffffff), os milisegundos são opcionais, caso não seja informado um formato o mesmo será
-   * 'HH:mm:ss'. Exemplos: 'HH:mm', 'HH:mm:ss.ffffff', 'HH:mm:ss.ff', 'mm:ss.fff'.
-   * - `number`: Aceita valores definidos para a propriedade `digitsInfo` do [**DecimalPipe**](https://angular.io/api/common/DecimalPipe)
-   *  para formatação, e caso não seja informado, o número será exibido na sua forma original.
-   *
-   *  + Exemplo: com o valor de entrada: `50` e a valor para formatação: `'1.2-5'` o resultado será: `50.00`.
+   * Define o formato de exibição para o valor de um campo.
+   *
+   * - Quando `format` é uma `string`, o formato aplicado depende da propriedade **type** segue como usar cada tipo:
+   *   - `currency`: Utiliza códigos de moeda definidos pelo [CurrencyPipe](https://angular.io/api/common/CurrencyPipe).
+   *     Exemplos: Use 'BRL' para Real Brasileiro e 'USD' para Dólar Americano.
+   *   - `date`: Adota formatos de data especificados pelo [DatePipe](https://angular.io/api/common/DatePipe).
+   *     Suporta formatos personalizados, como dia (dd), mês (MM) e ano (yyyy ou yy).
+   *     Formato padrão é 'dd/MM/yyyy'. Exemplos: 'dd/MM/yyyy', 'dd-MM-yy', 'mm/dd/yyyy'.
+   *   - `time`: Aceita formatos de tempo, incluindo hora (HH), minutos (mm), segundos (ss) e opcionalmente
+   *     milisegundos (f-ffffff). Formato padrão é 'HH:mm:ss'. Exemplos: 'HH:mm', 'HH:mm:ss.ffffff', 'HH:mm:ss.ff'.
+   *   - `number`: Usa especificações do [DecimalPipe](https://angular.io/api/common/DecimalPipe) para formatação numérica.
+   *     Na ausência de um formato específico, o número é exibido como fornecido.
+   *     Exemplo: Entrada `50`, formato `'1.2-5'`, resulta em `50.00`.
+   *
+   * - Quando `format` é um `Array<string>`:
+   *   - Cada elemento do array representa uma propriedade do objeto.
+   *   - Os valores dessas propriedades são concatenados, separados pelo padrão ' - '.
+   *   - Exemplo: Para `format: ["id", "name"]` e um objeto `{ id: 1, name: 'Carlos Diego' }`,
+   *     o resultado será `'1 - Carlos Diego'`.
+   *
+   * @example Para formatar um campo de moeda, use format: "BRL".
+   *          Para um campo de data, use format: "dd/MM/yyyy".
+   *          Para combinar propriedades de um objeto em um campo, use format: ["id", "name"].
    */
-  format?: string;
+  format?: string | Array<string>;
 
   /**
    * Informa a ordem de exibição do campo.