feat(editors): add form/input reset to Composite Editor modal & fix touched value

examples/webpack-demo-vanilla-bundle/assets/i18n/en.json

@@ -46,6 +46,8 @@
   "REFRESH_DATASET": "Refresh Dataset",
   "REMOVE_FILTER": "Remove Filter",
   "REMOVE_SORT": "Remove Sort",
+  "RESET_INPUT_VALUE": "Reset Input Value",
+  "RESET_FORM": "Reset Form",
   "SAVE": "Save",
   "SELECT_ALL": "Select All",
   "SORT_ASCENDING": "Sort Ascending",

examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json

@@ -46,6 +46,8 @@
   "REFRESH_DATASET": "Rafraîchir les données",
   "REMOVE_FILTER": "Supprimer le filtre",
   "REMOVE_SORT": "Supprimer le tri",
+  "RESET_INPUT_VALUE": "Réinitialiser la valeur",
+  "RESET_FORM": "Réinitialiser le formulaire",
   "SAVE": "Sauvegarder",
   "SELECT_ALL": "Sélectionner tout",
   "SORT_ASCENDING": "Trier par ordre croissant",

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

@@ -90,6 +90,13 @@ export class Example12 {
   isMassSelectionDisabled = true;
   sgb: SlickVanillaGridBundle;
   gridContainerElm: HTMLDivElement;
+  complexityLevelList = [
+    { value: 0, label: 'Very Simple' },
+    { value: 1, label: 'Simple' },
+    { value: 2, label: 'Straightforward' },
+    { value: 3, label: 'Complex' },
+    { value: 4, label: 'Very Complex' },
+  ];
 
   get slickerGridInstance(): SlickerGridInstance {
     return this.sgb?.instances;
@@ -174,31 +181,21 @@ export class Example12 {
           massUpdate: true, minValue: 0, maxValue: 100,
         },
       },
-      // {
-      //   id: 'percentComplete2', name: '% Complete', field: 'analysis.percentComplete', minWidth: 100,
-      //   type: FieldType.number,
-      //   sortable: true, filterable: true, columnGroup: 'Analysis',
-      //   filter: { model: Filters.compoundSlider, operator: '>=' },
-      //   formatter: Formatters.complex,
-      //   exportCustomFormatter: Formatters.complex, // without the Editing cell Formatter
-      //   editor: {
-      //     model: Editors.singleSelect,
-      //     serializeComplexValueFormat: 'flat', // if we keep "object" as the default it will apply { value: 2, label: 2 } which is not what we want in this case
-      //     collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })),
-      //     collectionOptions: {
-      //       addCustomFirstEntry: { value: '', label: '--none--' }
-      //     },
-      //     collectionOverride: (_collectionInput, args) => {
-      //       const originalCollection = args.originalCollections || [];
-      //       const duration = args?.dataContext?.duration ?? args?.compositeEditorOptions?.formValues?.duration;
-      //       if (duration === 10) {
-      //         return originalCollection.filter(itemCollection => +itemCollection.value !== 1);
-      //       }
-      //       return originalCollection;
-      //     },
-      //     massUpdate: true, minValue: 0, maxValue: 100,
-      //   },
-      // },
+      {
+        id: 'complexity', name: 'Complexity', field: 'complexity', minWidth: 100,
+        type: FieldType.number,
+        sortable: true, filterable: true, columnGroup: 'Analysis',
+        formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
+        filter: {
+          model: Filters.multipleSelect,
+          collection: this.complexityLevelList
+        },
+        editor: {
+          model: Editors.singleSelect,
+          collection: this.complexityLevelList,
+          massUpdate: true
+        },
+      },
       {
         id: 'start', name: 'Start', field: 'start', sortable: true, minWidth: 100,
         formatter: Formatters.dateUs, columnGroup: 'Period',
@@ -451,6 +448,7 @@ export class Example12 {
         analysis: {
           percentComplete: percentCompletion,
         },
+        complexity: i % 3 ? 0 : 2,
         start: new Date(randomYear, randomMonth, randomDay, randomDay, randomTime, randomTime, randomTime),
         finish: (isCompleted || (i % 3 === 0 && (randomFinish > new Date() && i > 3)) ? (isCompleted ? new Date() : randomFinish) : ''), // make sure the random date is earlier than today and it's index is bigger than 3
         cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
@@ -897,6 +895,8 @@ export class Example12 {
         // showCloseButtonOutside: true,
         // backdrop: null,
         // viewColumnLayout: 2, // responsive layout, choose from 'auto', 1, 2, or 3 (defaults to 'auto')
+        showFormResetButton: true,
+        // showResetButtonOnEachEditor: true,
         onClose: () => Promise.resolve(confirm('You have unsaved changes, are you sure you want to close this window?')),
         onError: (error) => alert(error.message),
         onSave: (formValues, _selection, dataContext) => {

examples/webpack-demo-vanilla-bundle/webpack.config.js

@@ -42,9 +42,6 @@ module.exports = ({ production } = {}) => ({
     extensions: ['.ts', '.js'],
     modules: [srcDir, 'node_modules'],
     mainFields: ['browser', 'module', 'main'],
-    alias: {
-      moment: 'moment/moment.js'
-    },
     fallback: {
       http: false,
       https: false,

packages/common/src/aggregators/maxAggregator.ts

@@ -1,7 +1,7 @@
 import { Aggregator } from './../interfaces/aggregator.interface';
 
 export class MaxAggregator implements Aggregator {
-  private _max: number | null;
+  private _max: number | null = null;
   private _field: number | string;
   private _type = 'max';
 

packages/common/src/aggregators/minAggregator.ts

@@ -1,7 +1,7 @@
 import { Aggregator } from './../interfaces/aggregator.interface';
 
 export class MinAggregator implements Aggregator {
-  private _min: number | null;
+  private _min: number | null = null;
   private _field: number | string;
   private _type = 'min';
 

packages/common/src/constants.ts

@@ -50,6 +50,8 @@ export class Constants {
     TEXT_REFRESH_DATASET: 'Refresh Dataset',
     TEXT_REMOVE_FILTER: 'Remove Filter',
     TEXT_REMOVE_SORT: 'Remove Sort',
+    TEXT_RESET_INPUT_VALUE: 'Reset Input Value',
+    TEXT_RESET_FORM: 'Reset Form',
     TEXT_SAVE: 'Save',
     TEXT_SELECT_ALL: 'Select All',
     TEXT_SYNCHRONOUS_RESIZE: 'Synchronous resize',

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

@@ -641,6 +641,7 @@ describe('AutoCompleteEditor', () => {
         expect(output).toBe(false);
         expect(commitEditSpy).not.toHaveBeenCalled();
         expect(spySetValue).toHaveBeenCalledWith('female');
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should expect "setValue" and "autoCommitEdit" to have been called with a string when item provided is a string', () => {
@@ -663,6 +664,7 @@ describe('AutoCompleteEditor', () => {
         expect(output).toBe(false);
         expect(commitEditSpy).toHaveBeenCalled();
         expect(spySetValue).toHaveBeenCalledWith('female');
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should expect "setValue" and "autoCommitEdit" to have been called with the string label when item provided is an object', () => {
@@ -678,6 +680,7 @@ describe('AutoCompleteEditor', () => {
         expect(output).toBe(false);
         expect(commitEditSpy).toHaveBeenCalled();
         expect(spySetValue).toHaveBeenCalledWith('Female');
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should expect the "onSelect" method to be called when the callback method is triggered when user provide his own filterOptions', () => {
@@ -690,6 +693,7 @@ describe('AutoCompleteEditor', () => {
         editor.autoCompleteOptions.select!(event, { item: 'fem' });
 
         expect(spy).toHaveBeenCalledWith(event, { item: 'fem' });
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should expect the "onSelect" method to be called when the callback method is triggered', () => {
@@ -703,6 +707,7 @@ describe('AutoCompleteEditor', () => {
         editor.autoCompleteOptions.select!(event, { item: 'fem' });
 
         expect(spy).toHaveBeenCalledWith(event, { item: 'fem' });
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should initialize the editor with editorOptions and expect the "onSelect" method to be called when the callback method is triggered', () => {
@@ -720,6 +725,7 @@ describe('AutoCompleteEditor', () => {
 
         expect(onSelectSpy).toHaveBeenCalledWith(event, { item: 'fem' });
         expect(focusSpy).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
       });
     });
 

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

@@ -172,6 +172,7 @@ describe('CheckboxEditor', () => {
         editor.editorDomElement.dispatchEvent(new (window.window as any).Event('click'));
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
         expect(saveSpy).toHaveBeenCalledTimes(1);
       });
 
@@ -505,6 +506,7 @@ describe('CheckboxEditor', () => {
       editor.destroy();
 
       expect(getCellSpy).toHaveBeenCalled();
+      expect(editor.isValueTouched()).toBe(true);
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onCompositeEditorSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,

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

@@ -218,6 +218,7 @@ describe('DateEditor', () => {
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return True when date is reset by the clear date button', () => {
@@ -235,6 +236,7 @@ describe('DateEditor', () => {
 
         expect(editorInputElm.value).toBe('');
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should also return True when date is reset by the clear date button even if the previous date was empty', () => {
@@ -251,6 +253,7 @@ describe('DateEditor', () => {
 
         expect(editorInputElm.value).toBe('');
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return False when date in the picker is the same as the current date', () => {
@@ -264,6 +267,7 @@ describe('DateEditor', () => {
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
 
         expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return False when input date is invalid', () => {
@@ -278,6 +282,7 @@ describe('DateEditor', () => {
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
 
         expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(true);
       });
     });
 

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

@@ -224,7 +224,7 @@ describe('DualInputEditor', () => {
       expect(spyEvent).toHaveBeenCalled();
     });
 
-    describe('isValueChanged method', () => {
+    describe('isValueChanged method (and isValueTouched method will always true for all since we trigger events in all)', () => {
       it('should return True when previously dispatched keyboard event is a new char 0', () => {
         const event = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_0, bubbles: true, cancelable: true });
 
@@ -236,6 +236,7 @@ describe('DualInputEditor', () => {
         editorElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return False when previously dispatched keyboard event is same number as current value', () => {
@@ -249,6 +250,7 @@ describe('DualInputEditor', () => {
         editorElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return False when previously dispatched keyboard event is same string number as current value', () => {
@@ -262,6 +264,7 @@ describe('DualInputEditor', () => {
         editorElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return True when left input last dispatched keyboard event is ENTER and "alwaysSaveOnEnterKey" is enabled', () => {
@@ -275,6 +278,7 @@ describe('DualInputEditor', () => {
         editorLeftElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return True when right input last dispatched keyboard event is ENTER and "alwaysSaveOnEnterKey" is enabled', () => {
@@ -288,6 +292,7 @@ describe('DualInputEditor', () => {
         editorRightElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
     });
 

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

@@ -447,6 +447,7 @@ describe('FloatEditor', () => {
         expect(spyGetEditor).toHaveBeenCalled();
         expect(spyCommit).toHaveBeenCalled();
         expect(spySave).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
       });
     });
 
@@ -767,6 +768,7 @@ describe('FloatEditor', () => {
       jest.runTimersToTime(50);
 
       expect(getCellSpy).toHaveBeenCalled();
+      expect(editor.isValueTouched()).toBe(true);
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onCompositeEditorSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
@@ -791,6 +793,7 @@ describe('FloatEditor', () => {
       jest.runTimersToTime(50);
 
       expect(getCellSpy).toHaveBeenCalled();
+      expect(editor.isValueTouched()).toBe(true);
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onCompositeEditorSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,

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

@@ -410,6 +410,7 @@ describe('IntegerEditor', () => {
 
         jest.runAllTimers(); // fast-forward timer
 
+        expect(editor.isValueTouched()).toBe(true);
         expect(spyCommit).toHaveBeenCalled();
         expect(spySave).toHaveBeenCalled();
       });
@@ -673,6 +674,7 @@ describe('IntegerEditor', () => {
       jest.runTimersToTime(50);
 
       expect(getCellSpy).toHaveBeenCalled();
+      expect(editor.isValueTouched()).toBe(true);
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onCompositeEditorSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
@@ -697,6 +699,7 @@ describe('IntegerEditor', () => {
       jest.runTimersToTime(50);
 
       expect(getCellSpy).toHaveBeenCalled();
+      expect(editor.isValueTouched()).toBe(true);
       expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
       expect(onCompositeEditorSpy).toHaveBeenCalledWith({
         ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,

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

@@ -249,6 +249,7 @@ describe('LongTextEditor', () => {
         expect(currentTextLengthElm.textContent).toBe('1');
         expect(maxTextLengthElm.textContent).toBe('255');
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return False when previously dispatched keyboard event is same string number as current value', () => {
@@ -262,6 +263,7 @@ describe('LongTextEditor', () => {
         editorElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(false);
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should return True when previously dispatched keyboard event ENTER', () => {
@@ -275,6 +277,7 @@ describe('LongTextEditor', () => {
         editorElm.dispatchEvent(event);
 
         expect(editor.isValueChanged()).toBe(true);
+        expect(editor.isValueTouched()).toBe(true);
       });
     });
 
@@ -450,6 +453,7 @@ describe('LongTextEditor', () => {
 
         expect(spyCommit).toHaveBeenCalled();
         expect(spySave).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should call the "cancel" method when the Escape keydown event is triggered', () => {
@@ -479,6 +483,7 @@ describe('LongTextEditor', () => {
         }));
 
         expect(spyNavigate).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
       });
 
       it('should call the grid "navigateNext" method when the TAB (without shift) event is triggered', () => {
@@ -494,6 +499,7 @@ describe('LongTextEditor', () => {
         }));
 
         expect(spyNavigate).toHaveBeenCalled();
+        expect(editor.isValueTouched()).toBe(true);
       });
     });