feat(editors): add way to change or disable Composite Editor form input

examples/webpack-demo-vanilla-bundle/package.json

@@ -33,9 +33,9 @@
     "moment-mini": "^2.24.0"
   },
   "devDependencies": {
-    "@types/jquery": "^3.5.1",
+    "@types/jquery": "^3.5.2",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.11.2",
+    "@types/node": "^14.11.5",
     "@types/webpack": "^4.41.22",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.2.0",
@@ -45,7 +45,7 @@
     "html-loader": "^1.3.1",
     "html-webpack-plugin": "^4.5.0",
     "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^0.11.3",
+    "mini-css-extract-plugin": "^0.12.0",
     "node-sass": "4.14.1",
     "sass-loader": "^10.0.2",
     "style-loader": "^1.3.0",

examples/webpack-demo-vanilla-bundle/src/examples/example12.ts

@@ -59,7 +59,7 @@ function checkItemIsEditable(dataContext, columnDef, grid) {
       // case 'duration':
       // case 'title':
       // case 'product':
-      // case 'countryOfOrigin':
+      // case 'origin':
       // isEditable = dataContext.percentComplete < 50;
       // break;
     }
@@ -105,6 +105,7 @@ export class Example12 {
     this.gridContainerElm.addEventListener('onclick', this.handleOnCellClicked.bind(this));
     this.gridContainerElm.addEventListener('ongridstatechanged', this.handleOnSelectedRowsChanged.bind(this));
     this.gridContainerElm.addEventListener('ondblclick', () => this.openCompositeModal('edit', 50));
+    this.gridContainerElm.addEventListener('oncompositeeditorchange', this.handleOnCompositeEditorChange.bind(this));
   }
 
   dispose() {
@@ -141,12 +142,24 @@ export class Example12 {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
         sortable: true, filterable: true, columnGroup: 'Analysis',
         filter: { model: Filters.compoundSlider, operator: '>=' },
-        editor: { model: Editors.slider, massUpdate: true, minValue: 0, maxValue: 100, },
+        // formatter: Formatters.collectionEditor,
+        editor: {
+          model: Editors.slider,
+          // model: Editors.singleSelect,
+          // enableRenderHtml: true,
+          // collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: ' <i class="mdi mdi-check-circle color-primary"></i>' })),
+          // customStructure: {
+          //   value: 'value',
+          //   label: 'label',
+          //   labelSuffix: 'symbol'
+          // },
+          massUpdate: true, minValue: 0, maxValue: 100,
+        },
       },
       {
         id: 'start', name: 'Start', field: 'start', sortable: true,
-        formatter: Formatters.dateIso, columnGroup: 'Period',
-        type: FieldType.dateIso, outputType: FieldType.dateIso,
+        formatter: Formatters.dateUs, columnGroup: 'Period',
+        type: FieldType.dateIso, outputType: FieldType.dateUs,
         filterable: true, filter: { model: Filters.compoundDate },
         editor: { model: Editors.date, massUpdate: true, params: { hideClearButton: false } },
       },
@@ -165,8 +178,8 @@ export class Example12 {
       },
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true,
-        formatter: Formatters.dateIso, columnGroup: 'Period',
-        type: FieldType.dateIso, outputType: FieldType.dateIso,
+        formatter: Formatters.dateUs, columnGroup: 'Period',
+        type: FieldType.dateIso, outputType: FieldType.dateUs,
         filterable: true, filter: { model: Filters.compoundDate },
         editor: {
           model: Editors.date,
@@ -221,7 +234,7 @@ export class Example12 {
         }
       },
       {
-        id: 'countryOfOrigin', name: 'Country of Origin', field: 'countryOfOrigin',
+        id: 'origin', name: 'Country of Origin', field: 'origin',
         formatter: Formatters.complexObject, columnGroup: 'Item',
         exportWithFormatter: true,
         dataKey: 'code',
@@ -248,7 +261,7 @@ export class Example12 {
         filter: {
           model: Filters.inputText,
           type: 'string',
-          queryField: 'countryOfOrigin.name',
+          queryField: 'origin.name',
         }
       },
       {
@@ -392,7 +405,7 @@ export class Example12 {
         cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
         completed: (i % 3 === 0 && (randomFinish > new Date() && i > 3)),
         product: { id: this.mockProducts()[randomItemId]?.id, itemName: this.mockProducts()[randomItemId]?.itemName, },
-        countryOfOrigin: (i % 2) ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' },
+        origin: (i % 2) ? { code: 'CA', name: 'Canada' } : { code: 'US', name: 'United States' },
       };
 
       if (!(i % 8)) {
@@ -464,6 +477,19 @@ export class Example12 {
     // }
   }
 
+  handleOnCompositeEditorChange(event) {
+    const args = event && event.detail && event.detail.args;
+    const columnDef = args?.column;
+    const formValues = args?.formValues;
+
+    // you can change any other form input values when certain conditions are met
+    if (columnDef.id === 'percentComplete' && formValues.percentComplete === 100) {
+      this.sgb.slickCompositeEditor.changeFormInputValue('completed', true);
+      this.sgb.slickCompositeEditor.changeFormInputValue('finish', new Date());
+      // this.sgb.slickCompositeEditor.changeFormInputValue('product', { id: 0, itemName: 'Sleek Metal Computer' });
+    }
+  }
+
   handleOnSelectedRowsChanged(event) {
     const gridState = event && event.detail && event.detail.gridState;
     if (Array.isArray(gridState?.rowSelection.dataContextIds)) {

package.json

@@ -14,7 +14,7 @@
     "rebuild": "run-s clean build",
     "clean": "rimraf --maxBusyTries=10 packages/*/dist dist",
     "cypress": "cypress open --config-file test/cypress.json",
-    "cypress:ci": "cypress run --config-file test/cypress.json --reporter mochawesome",
+    "cypress:ci": "cypress run --config-file test/cypress.json --reporter mochawesome --record",
     "dev:watch": "lerna run dev:watch --parallel",
     "diff": "lerna diff",
     "updated": "lerna updated",
@@ -43,17 +43,17 @@
   },
   "devDependencies": {
     "@types/jest": "^26.0.14",
-    "@types/node": "^14.11.2",
-    "@typescript-eslint/eslint-plugin": "^4.3.0",
-    "@typescript-eslint/parser": "^4.3.0",
+    "@types/node": "^14.11.5",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "cypress": "^5.3.0",
     "eslint": "^7.10.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "http-server": "^0.12.3",
-    "jest": "^26.5.0",
-    "jest-cli": "^26.5.0",
-    "jest-environment-jsdom": "^26.5.0",
+    "jest": "^26.5.2",
+    "jest-cli": "^26.5.2",
+    "jest-environment-jsdom": "^26.5.2",
     "jest-extended": "^0.11.5",
     "jest-junit": "^12.0.0",
     "jsdom": "^16.4.0",

packages/common/package.json

@@ -71,16 +71,16 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.24.0",
     "multiple-select-modified": "^1.3.4",
-    "slickgrid": "^2.4.29"
+    "slickgrid": "github:6pac/SlickGrid"
   },
   "devDependencies": {
     "@types/dompurify": "^2.0.4",
-    "@types/jquery": "^3.5.1",
+    "@types/jquery": "^3.5.2",
     "@types/moment": "^2.13.0",
     "autoprefixer": "^10.0.1",
     "copyfiles": "^2.4.0",
     "cross-env": "^7.0.2",
-    "mini-css-extract-plugin": "^0.11.3",
+    "mini-css-extract-plugin": "^0.12.0",
     "node-sass": "4.14.1",
     "nodemon": "^2.0.4",
     "npm-run-all": "^4.1.5",

packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts

@@ -1,7 +1,7 @@
 import { Editors } from '../index';
 import { AutoCompleteEditor } from '../autoCompleteEditor';
 import { KeyCode, FieldType } from '../../enums/index';
-import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, SlickDataView, SlickGrid, SlickNamespace } from '../../interfaces/index';
+import { AutocompleteOption, Column, EditorArguments, GridOption, SlickDataView, SlickGrid, SlickNamespace } from '../../interfaces/index';
 
 declare const Slick: SlickNamespace;
 const KEY_CHAR_A = 97;
@@ -164,6 +164,15 @@ describe('AutoCompleteEditor', () => {
       expect(editor.getValue()).toBe('male');
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      mockColumn.type = FieldType.object;
+      editor = new AutoCompleteEditor(editorArguments);
+      editor.setValue({ value: 'male', label: 'male' }, true);
+
+      expect(editor.getValue()).toBe('male');
+      expect(editorArguments.item.gender).toEqual({ value: 'male', label: 'male' });
+    });
+
     it('should define an item datacontext containing a string as cell value and expect this value to be loaded in the editor when calling "loadValue"', () => {
       editor = new AutoCompleteEditor(editorArguments);
       editor.loadValue(mockItemData);
@@ -302,7 +311,7 @@ describe('AutoCompleteEditor', () => {
       });
 
       it('should return item data with an empty string in its value when calling "applyValue" which fails the custom validation', () => {
-        mockColumn.internalColumnEditor.validator = (value: any, args: EditorArgs) => {
+        mockColumn.internalColumnEditor.validator = (value: any) => {
           if (value.label.length < 10) {
             return { valid: false, msg: 'Must be at least 10 chars long.' };
           }
@@ -714,7 +723,7 @@ describe('AutoCompleteEditor', () => {
 
       it('should provide "renderItem" in the "filterOptions" and expect the jQueryUI "_renderItem" to be overriden', () => {
         const mockTemplateString = `<div>Hello World</div>`;
-        const mockTemplateCallback = (item) => mockTemplateString;
+        const mockTemplateCallback = () => mockTemplateString;
         mockColumn.internalColumnEditor = {
           editorOptions: {
             source: [],
@@ -750,14 +759,28 @@ describe('AutoCompleteEditor', () => {
     beforeEach(() => {
       editorArguments = {
         ...editorArguments,
-        compositeEditorOptions: { headerTitle: 'Test', formValues: {}, modalType: 'edit' }
+        compositeEditorOptions: { headerTitle: 'Test', modalType: 'edit', formValues: {}, editors: {} },
       } as EditorArguments;
     });
 
     afterEach(() => {
       jest.clearAllMocks();
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      const activeCellMock = { row: 0, cell: 0 };
+      jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
+      const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      editor = new AutoCompleteEditor(editorArguments);
+      editor.setValue({ value: 'male', label: 'Male' }, true);
+
+      expect(editor.getValue()).toBe('Male');
+      expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
+        ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
+        formValues: { gender: 'male' }, editors: {},
+      }, expect.anything());
+    });
+
     it('should call "show" and expect the DOM element to not be disabled when "onBeforeEditCell" is NOT returning false', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
@@ -787,7 +810,7 @@ describe('AutoCompleteEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: {},
+        formValues: {}, editors: {},
       }, expect.anything());
       expect(disableSpy).toHaveBeenCalledWith(true);
       expect(editor.editorDomElement.attr('disabled')).toEqual('disabled');
@@ -813,7 +836,7 @@ describe('AutoCompleteEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: { gender: 'female' },
+        formValues: { gender: 'female' }, editors: {},
       }, expect.anything());
     });
   });

packages/common/src/editors/__tests__/checkboxEditor.spec.ts

@@ -135,6 +135,14 @@ describe('CheckboxEditor', () => {
       expect(editor.getValue()).toBe(true);
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      editor = new CheckboxEditor(editorArguments);
+      editor.setValue(true, true);
+
+      expect(editor.getValue()).toBe(true);
+      expect(editorArguments.item.isActive).toBe(true);
+    });
+
     it('should call "setValue" with false and expect the DOM element value to return false (representing unchecked)', () => {
       editor = new CheckboxEditor(editorArguments);
       editor.setValue(false);
@@ -379,14 +387,28 @@ describe('CheckboxEditor', () => {
     beforeEach(() => {
       editorArguments = {
         ...editorArguments,
-        compositeEditorOptions: { headerTitle: 'Test', formValues: {}, modalType: 'edit' }
+        compositeEditorOptions: { headerTitle: 'Test', modalType: 'edit', formValues: {}, editors: {} },
       } as EditorArguments;
     });
 
     afterEach(() => {
       jest.clearAllMocks();
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      const activeCellMock = { row: 0, cell: 0 };
+      jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
+      const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      editor = new CheckboxEditor(editorArguments);
+      editor.setValue(true, true);
+
+      expect(editor.getValue()).toBe(true);
+      expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
+        ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
+        formValues: { isActive: true }, editors: {},
+      }, expect.anything());
+    });
+
     it('should call "show" and expect the DOM element to not be disabled when "onBeforeEditCell" is NOT returning false', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
@@ -416,7 +438,7 @@ describe('CheckboxEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: {},
+        formValues: {}, editors: {},
       }, expect.anything());
       expect(disableSpy).toHaveBeenCalledWith(true);
       expect(editor.editorDomElement.disabled).toEqual(true);
@@ -440,7 +462,7 @@ describe('CheckboxEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: { isActive: true },
+        formValues: { isActive: true }, editors: {},
       }, expect.anything());
     });
   });

packages/common/src/editors/__tests__/dateEditor.spec.ts

@@ -154,6 +154,15 @@ describe('DateEditor', () => {
       expect(editor.getValue()).toBe('2001-01-02T11:02:02.000Z');
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      mockColumn.type = FieldType.dateIso;
+      editor = new DateEditor(editorArguments);
+      editor.setValue('2001-01-02', true);
+
+      expect(editor.getValue()).toBe('2001-01-02');
+      expect(editorArguments.item.startDate).toBe('2001-01-02');
+    });
+
     it('should define an item datacontext containing a string as cell value and expect this value to be loaded in the editor when calling "loadValue"', () => {
       mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
       editor = new DateEditor(editorArguments);
@@ -437,14 +446,29 @@ describe('DateEditor', () => {
     beforeEach(() => {
       editorArguments = {
         ...editorArguments,
-        compositeEditorOptions: { headerTitle: 'Test', formValues: {}, modalType: 'edit' }
+        compositeEditorOptions: { headerTitle: 'Test', modalType: 'edit', formValues: {}, editors: {} },
       } as EditorArguments;
     });
 
     afterEach(() => {
       jest.clearAllMocks();
     });
 
+    it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
+      const activeCellMock = { row: 0, cell: 0 };
+      jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
+      const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      mockColumn.type = FieldType.dateIso;
+      editor = new DateEditor(editorArguments);
+      editor.setValue('2001-01-02', true);
+
+      expect(editor.getValue()).toContain('2001-01-02');
+      expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
+        ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
+        formValues: { startDate: '2001-01-02' }, editors: {},
+      }, expect.anything());
+    });
+
     it('should call "show" and expect the DOM element to not be disabled when "onBeforeEditCell" is NOT returning false', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
@@ -474,7 +498,7 @@ describe('DateEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: {},
+        formValues: {}, editors: {},
       }, expect.anything());
       expect(disableSpy).toHaveBeenCalledWith(true);
       expect(editor.flatInstance._input.disabled).toEqual(true);
@@ -502,7 +526,7 @@ describe('DateEditor', () => {
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
-        formValues: { startDate: '2001-01-02' },
+        formValues: { startDate: '2001-01-02' }, editors: {},
       }, expect.anything());
     });
   });