Merge pull request #644 from ghiscoding/bugfix/select-editor-with-complex-object

fix(editors): Select Editor option to return flat data w/complex object

Author: ghiscoding

src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts

@@ -5,7 +5,7 @@ import { TestBed } from '@angular/core/testing';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { Editors } from '../index';
 import { SelectEditor } from '../selectEditor';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, FieldType, OperatorType } from '../../models';
+import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, FieldType, OperatorType, ColumnEditor } from '../../models';
 
 const containerId = 'demo-container';
 
@@ -416,6 +416,19 @@ describe('SelectEditor', () => {
         expect(currentValue).toEqual({});
       });
 
+      it('should return flat value when using a dot (.) notation for complex object with a collection of option/label pair and using "serializeComplexValueFormat" as "flat"', () => {
+        mockColumn.field = 'employee.gender';
+        mockItemData = { id: 1, employee: { id: 24, gender: ['male', 'other'] }, isActive: true };
+        (mockColumn.internalColumnEditor as ColumnEditor).serializeComplexValueFormat = 'flat';
+        editor = new SelectEditor(editorArguments, true);
+        editor.loadValue(mockItemData);
+        const output = editor.serializeValue();
+        const currentValue = editor.currentValue;
+
+        expect(output).toEqual(['male', 'other']);
+        expect(currentValue).toEqual('');
+      });
+
       it('should return object value when using a dot (.) notation and we override the object path using "complexObjectPath" to find correct values', () => {
         mockColumn.field = 'employee.bio';
         mockItemData = { id: 1, employee: { id: 24, bio: { gender: ['male', 'other'] } }, isActive: true };

src/app/modules/angular-slickgrid/editors/selectEditor.ts

@@ -207,7 +207,9 @@ export class SelectEditor implements Editor {
 
         // is the field a complex object, "address.streetNumber"
         const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
-        if (isComplexObject && typeof c === 'object') {
+        const serializeComplexValueFormat = this.columnEditor && this.columnEditor.serializeComplexValueFormat || 'object';
+
+        if (isComplexObject && typeof c === 'object' && serializeComplexValueFormat === 'object') {
           return c;
         }
 
@@ -242,8 +244,9 @@ export class SelectEditor implements Editor {
     // is the field a complex object, "address.streetNumber"
     const fieldName = this.columnDef && this.columnDef.field;
     const isComplexObject = fieldName && fieldName.indexOf('.') > 0;
+    const serializeComplexValueFormat = this.columnEditor && this.columnEditor.serializeComplexValueFormat || 'object';
 
-    if (isComplexObject && typeof itemFound === 'object') {
+    if (isComplexObject && typeof itemFound === 'object' && serializeComplexValueFormat === 'object') {
       return itemFound;
     } else if (itemFound && itemFound.hasOwnProperty(this.valueName)) {
       const labelText = itemFound[this.valueName];

src/app/modules/angular-slickgrid/models/columnEditor.interface.ts

@@ -117,6 +117,15 @@ export interface ColumnEditor {
    */
   required?: boolean;
 
+  /**
+   * defaults to 'object', how do we want to serialize the editor value to the resulting dataContext object when using a complex object?
+   * Currently only applies to Single/Multiple Select Editor.
+   *
+   * For example, if keep default "object" format and the selected value is { value: 2, label: 'Two' } then the end value will remain as an object, so { value: 2, label: 'Two' }.
+   * On the other end, if we set "flat" format and the selected value is { value: 2, label: 'Two' } then the end value will be 2.
+   */
+  serializeComplexValueFormat?: 'flat' | 'object';
+
   /**
    * Title attribute that can be used in some Editors as tooltip (usually the "input" editors).
    *