fix(dynamic-form): ajusta renderização do multiselect

Ajusta renderização de campo com multiplas opções. Fixes #2308
po-ui · Nov 22, 2024 · 2347ebd · 2347ebd
1 parent 4c81889
commit 2347ebd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
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
@@ -249,6 +249,36 @@ describe('PoDynamicViewComponent:', () => {
     });
 
     describe('setFieldValue:', () => {
+      it(`should return the labels of the selected options if options exist and a match is found`, () => {
+        const field = {
+          value: ['value1'],
+          optionsMulti: true,
+          options: [
+            { value: 'value1', label: 'label1' },
+            { value: 'value2', label: 'label2' },
+            { value: 'value3', label: 'label3' }
+          ]
+        };
+
+        field.value = ['value1', 'value2'];
+        expect(component.setFieldValue(field)).toEqual(['label1', 'label2']);
+      });
+
+      it(`should return the field values if options exist but no match is found'`, () => {
+        const field = {
+          value: ['value1'],
+          optionsMulti: true,
+          options: [
+            { value: 'value1', label: 'label1' },
+            { value: 'value2', label: 'label2' },
+            { value: 'value3', label: 'label3' }
+          ]
+        };
+
+        field.value = ['value4'];
+        expect(component.setFieldValue(field)).toEqual(['value4']);
+      });
+
       it(`should return the label of the selected option if options exist and a match is found`, () => {
         const field = {
           value: 'value1',

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
@@ -85,8 +85,13 @@ export class PoDynamicViewComponent extends PoDynamicViewBaseComponent implement
 
   setFieldValue(field) {
     if (field.options) {
-      const selectedOption = field.options.find(option => option.value === field.value);
-      return selectedOption ? selectedOption.label : field.value;
+      if (field.optionsMulti) {
+        const selectedOptions = field.options.filter(option => field.value.some(value => value === option.value));
+        return selectedOptions.length ? selectedOptions.map(option => option.label) : field.value;
+      } else {
+        const selectedOption = field.options.find(option => option.value === field.value);
+        return selectedOption ? selectedOption.label : field.value;
+      }
     } else if (field.type === 'boolean' && 'booleanTrue' in field && 'booleanFalse' in field) {
       return field.value ? field.booleanTrue : field.booleanFalse;
     } else {