feat(editors): add Column Editor collectionOverride option

- only applies to Editor with collection (autocomplete & single/multiple select)

Author: ghiscoding

package.json

@@ -23,7 +23,7 @@
     "postbuild:gh-demo:with-e2e": "npm run cypress:ci",
     "delete:dist": "cross-env rimraf dist",
     "cypress": "cd test/cypress && node node_modules/cypress/bin/cypress open",
-    "cypress:ci": "cd test/cypress && npm run cypress:ci",
+    "cypress:ci": "cd test/cypress && npm run cypress:ci --record",
     "test": "npm run test:jest",
     "test:jest": "node_modules/.bin/jest --config test/jest.config.js",
     "jest:clear": "node_modules/.bin/jest --clearCache",

src/app/examples/grid-editor.component.ts

@@ -254,6 +254,11 @@ export class GridEditorComponent implements OnInit {
             value: 0,
             operator: OperatorType.notEqual
           },
+          // you could also provide a collection override to filter/sort based on the item dataContext or whatever else
+          // collectionOverride: (updatedCollection, args) => {
+          //   console.log(args);
+          //   return updatedCollection.filter((col) => args.dataContext.id % 2 ? col.value < 50 : col.value >= 50);
+          // },
           editorOptions: {
             maxHeight: 400
           }

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

@@ -245,6 +245,23 @@ describe('AutoCompleteEditor', () => {
       expect(spy).toHaveBeenCalled();
     });
 
+    describe('collectionOverride callback option', () => {
+      it('should create the editor and expect a different collection outputed when using the override', () => {
+        mockColumn.internalColumnEditor = {
+          collection: [{ value: 'other', label: 'Other' }, { value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }],
+          collectionOverride: (inputCollection) => inputCollection.filter(item => item.value !== 'other')
+        };
+
+        editor = new AutoCompleteEditor(editorArguments);
+        editor.destroy();
+        editor.init();
+        const editorCount = divContainer.querySelectorAll('input.editor-text.editor-gender').length;
+
+        expect(editorCount).toBe(1);
+        expect(editor.elementCollection).toEqual([{ value: 'male', label: 'Male', labelPrefix: '', labelSuffix: '' }, { value: 'female', label: 'Female', labelPrefix: '', labelSuffix: '' }]);
+      });
+    });
+
     describe('applyValue method', () => {
       it('should apply the value to the gender property when it passes validation', () => {
         mockColumn.internalColumnEditor.validator = null;

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

@@ -634,6 +634,24 @@ describe('SelectEditor', () => {
       });
     });
 
+    describe('collectionOverride callback option', () => {
+      it('should create the multi-select editor and expect a different collection outputed when using the override', () => {
+        mockColumn.internalColumnEditor = {
+          collection: ['other', 'male', 'female'],
+          collectionOverride: (inputCollection) => inputCollection.filter(item => item !== 'other')
+        };
+
+        editor = new SelectEditor(editorArguments, true);
+        const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
+        const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li input[type=checkbox]`);
+        editorBtnElm.click();
+
+        expect(editorListElm.length).toBe(2);
+        expect(editorListElm[0].value).toBe('male');
+        expect(editorListElm[1].value).toBe('female');
+      });
+    });
+
     describe('collectionInsideObjectProperty setting', () => {
       it('should create the multi-select editor with a value/label pair collection that is inside an object when "collectionInsideObjectProperty" is defined with a dot notation', () => {
         mockColumn.internalColumnEditor = {

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

@@ -78,8 +78,8 @@ export class AutoCompleteEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */
@@ -345,6 +345,11 @@ export class AutoCompleteEditor implements Editor {
     // assign the collection to a temp variable before filtering/sorting the collection
     let finalCollection = collection;
 
+    // user could also override the collection
+    if (this.columnEditor && this.columnEditor.collectionOverride) {
+      finalCollection = this.columnEditor.collectionOverride(finalCollection, { column: this.columnDef, dataContext: this.args.item, grid: this.grid });
+    }
+
     // user might provide his own custom structure
     // jQuery UI autocomplete requires a label/value pair, so we must remap them when user provide different ones
     if (Array.isArray(finalCollection)) {

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

@@ -25,8 +25,8 @@ export class CheckboxEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -65,8 +65,8 @@ export class DateEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -54,8 +54,8 @@ export class DualInputEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -28,8 +28,8 @@ export class FloatEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -26,8 +26,8 @@ export class IntegerEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -57,8 +57,8 @@ export class LongTextEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -157,8 +157,8 @@ export class SelectEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */
@@ -551,6 +551,11 @@ export class SelectEditor implements Editor {
     newCollection = this.filterCollection(newCollection);
     newCollection = this.sortCollection(newCollection);
 
+    // user could also override the collection
+    if (this.columnEditor && this.columnEditor.collectionOverride) {
+      newCollection = this.columnEditor.collectionOverride(newCollection, { column: this.columnDef, dataContext: this.args.item, grid: this.grid });
+    }
+
     // step 1, create HTML string template
     const editorTemplate = this.buildTemplateHtmlString(newCollection);
 

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

@@ -30,8 +30,8 @@ export class SliderEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -26,8 +26,8 @@ export class TextEditor implements Editor {
   }
 
   /** Get Column Definition object */
-  get columnDef(): Column | undefined {
-    return this.args && this.args.column;
+  get columnDef(): Column {
+    return this.args.column;
   }
 
   /** Get Column Editor object */

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

@@ -0,0 +1,12 @@
+import { Column, SlickGrid } from './index';
+
+export interface CollectionOverrideArgs {
+  /** Column Definition */
+  column: Column;
+
+  /** item data context object */
+  dataContext: any;
+
+  /** Slick Grid object */
+  grid: SlickGrid;
+}

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

@@ -44,7 +44,7 @@ export interface Column<T = any> {
   defaultSortAsc?: boolean;
 
   /** Any inline editor function that implements Editor for the cell value or ColumnEditor */
-  editor?: any | ColumnEditor;
+  editor?: ColumnEditor;
 
   /** Default to false, which leads to exclude the column title from the Column Picker. */
   excludeFromColumnPicker?: boolean;

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

@@ -2,6 +2,7 @@ import {
   CollectionCustomStructure,
   CollectionFilterBy,
   CollectionOption,
+  CollectionOverrideArgs,
   CollectionSortBy,
   EditorValidator,
   FieldType,
@@ -33,11 +34,17 @@ export interface ColumnEditor {
   /** A collection of items/options that will be loaded asynchronously (commonly used with a Select/Multi-Select Editor) */
   collectionAsync?: Promise<any>;
 
+  /** We could filter 1 or more items from the collection */
+  collectionFilterBy?: CollectionFilterBy | CollectionFilterBy[];
+
   /** Options to change the behavior of the "collection" */
   collectionOptions?: CollectionOption;
 
-  /** We could filter 1 or more items from the collection */
-  collectionFilterBy?: CollectionFilterBy | CollectionFilterBy[];
+  /**
+   * A collection override allows you to manipulate the collection provided to the Column Editor.
+   * NOTE: if you provide a "customStructure" it will still be applied on the collection, in other words make sure that the collection returned by the override does have the properties defined in the "customStructure".
+   */
+  collectionOverride?: (collectionInput: any[], args: CollectionOverrideArgs) => any[];
 
   /** We could sort the collection by 1 or more properties, or by translated value(s) when enableTranslateLabel is True */
   collectionSortBy?: CollectionSortBy | CollectionSortBy[];

src/app/modules/angular-slickgrid/models/index.ts

@@ -14,6 +14,7 @@ export * from './checkboxSelector.interface';
 export * from './collectionCustomStructure.interface';
 export * from './collectionFilterBy.interface';
 export * from './collectionOption.interface';
+export * from './collectionOverrideArgs.interface';
 export * from './collectionSortBy.interface';
 export * from './column.interface';
 export * from './columnEditor.interface';

test/cypress/cypress.json

@@ -7,6 +7,7 @@
   "fixturesFolder": "fixtures",
   "integrationFolder": "integration",
   "pluginsFile": "plugins/index.js",
+  "projectId": "hqnfoi",
   "reporter": "mochawesome",
   "screenshotsFolder": "screenshots",
   "supportFile": "support/index.js",

test/cypress/package.json

@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^6.1.0",
+    "cypress": "^6.2.1",
     "mocha": "^8.2.0",
     "mochawesome": "^6.1.1"
   }