Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editors): disable editor when collectionAsync, re-enable after #132

Merged
merged 3 commits into from
Sep 29, 2020
Merged

feat(editors): disable editor when collectionAsync, re-enable after #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f9c6363
feat(editors): disable editor when collectionAsync, re-enable after
Sep 29, 2020
1cb7864
fix(core): update few npm packages to fix unit test failing
Sep 29, 2020
45e5f2d
tests: tweak test to avoid flacky test
Sep 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/webpack-demo-vanilla-bundle/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@slickgrid-universal/excel-export": "^0.1.0",
"@slickgrid-universal/file-export": "^0.1.0",
"@slickgrid-universal/vanilla-bundle": "^0.1.0",
"bulma": "^0.9.0",
"bulma": "^0.9.1",
"moment-mini": "^2.24.0"
},
"devDependencies": {
Expand Down
10 changes: 5 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@
"devDependencies": {
"@types/jest": "^26.0.14",
"@types/node": "^14.11.2",
"@typescript-eslint/eslint-plugin": "^4.2.0",
"@typescript-eslint/parser": "^4.2.0",
"cypress": "^5.2.0",
"@typescript-eslint/eslint-plugin": "^4.3.0",
"@typescript-eslint/parser": "^4.3.0",
"cypress": "^5.3.0",
"eslint": "^7.10.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prefer-arrow": "^1.2.2",
"http-server": "^0.12.3",
"jest": "^26.4.2",
Expand All @@ -62,7 +62,7 @@
"mocha": "^8.1.3",
"mochawesome": "^6.1.1",
"npm-run-all": "^4.1.5",
"ts-jest": "^26.4.0",
"ts-jest": "^26.4.1",
"typescript": "^4.0.3"
},
"engines": {
Expand Down
4 changes: 2 additions & 2 deletions packages/common/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"jquery-ui-dist": "^1.12.1",
"lodash.isequal": "^4.5.0",
"moment-mini": "^2.24.0",
"multiple-select-modified": "^1.3.3",
"multiple-select-modified": "^1.3.4",
"slickgrid": "^2.4.29"
},
"devDependencies": {
Expand All @@ -84,7 +84,7 @@
"node-sass": "4.14.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"postcss": "^8.1.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"rimraf": "^3.0.2"
},
Expand Down
16 changes: 16 additions & 0 deletions packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,22 @@ describe('AutoCompleteEditor', () => {
expect(editorCount).toBe(1);
});

it('should initialize the editor with element being disabled in the DOM when passing a collectionAsync and an empty collection property', () => {
const mockCollection = ['male', 'female'];
const promise = new Promise(resolve => resolve(mockCollection));
mockColumn.internalColumnEditor.collection = null;
mockColumn.internalColumnEditor.collectionAsync = promise;

editor = new AutoCompleteEditor(editorArguments);
const disableSpy = jest.spyOn(editor, 'disable');
editor.destroy();
editor.init();
const editorCount = divContainer.querySelectorAll('input.editor-text.editor-gender').length;

expect(editorCount).toBe(1);
expect(disableSpy).toHaveBeenCalledWith(true);
});

it('should initialize the editor even when user define his own editor options', () => {
mockColumn.internalColumnEditor.editorOptions = { minLength: 3 } as AutocompleteOption;
editor = new AutoCompleteEditor(editorArguments);
Expand Down
17 changes: 17 additions & 0 deletions packages/common/src/editors/__tests__/selectEditor.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,23 @@ describe('SelectEditor', () => {
expect(editorCount).toBe(1);
});

it('should initialize the editor with element being disabled in the DOM when passing a collectionAsync and an empty collection property', () => {
const mockCollection = ['male', 'female'];
const promise = new Promise(resolve => resolve(mockCollection));
mockColumn.internalColumnEditor.collection = null;
mockColumn.internalColumnEditor.collectionAsync = promise;
gridOptionMock.i18n = translateService;

editor = new SelectEditor(editorArguments, true);
const disableSpy = jest.spyOn(editor, 'disable');
editor.destroy();
editor.init();
const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;

expect(editorCount).toBe(1);
expect(disableSpy).toHaveBeenCalledWith(true);
});

it('should initialize the editor even when user define his own editor options', () => {
mockColumn.internalColumnEditor.editorOptions = { minLength: 3 } as AutocompleteOption;
editor = new SelectEditor(editorArguments, true);
Expand Down
20 changes: 14 additions & 6 deletions packages/common/src/editors/autoCompleteEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,14 @@ export class AutoCompleteEditor implements Editor {
private _currentValue: any;
private _defaultTextValue: string;
private _elementCollection: any[];
private _isDisabled = false;
private _lastInputKeyEvent: JQueryEventObject;

/** The JQuery DOM element */
private _$editorElm: any;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -143,15 +145,21 @@ export class AutoCompleteEditor implements Editor {
// always render the DOM element, even if user passed a "collectionAsync",
const newCollection = this.columnEditor.collection || [];
this.renderDomElement(newCollection);

// when having a collectionAsync and a collection that is empty, we'll toggle the Editor to disabled,
// it will be re-enabled when we get the collection filled (in slick-vanilla-bundle on method "updateEditorCollection()")
if (this.disabled || (this.columnEditor?.collectionAsync && Array.isArray(newCollection) && newCollection.length === 0)) {
this.disable(true);
}
}

destroy() {
this._$editorElm.off('keydown.nav').remove();
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this._$editorElm) {
if (isDisabled) {
Expand Down Expand Up @@ -291,7 +299,7 @@ export class AutoCompleteEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -330,7 +338,7 @@ export class AutoCompleteEditor implements Editor {
this.applyValue(this.args.item, this.serializeValue());
}
this.applyValue(compositeEditorOptions.formValues, this.serializeValue());
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
delete compositeEditorOptions.formValues[columnId]; // when the input is disabled we won't include it in the form result object
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, { ...new Slick.EventData(), ...event });
Expand Down Expand Up @@ -391,7 +399,7 @@ export class AutoCompleteEditor implements Editor {
.appendTo(ul);
}

protected renderDomElement(collection: any[]) {
renderDomElement(collection: any[]) {
if (!Array.isArray(collection)) {
throw new Error('The "collection" passed to the Autocomplete Editor is not a valid array.');
}
Expand Down
12 changes: 7 additions & 5 deletions packages/common/src/editors/checkboxEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ declare const Slick: SlickNamespace;
export class CheckboxEditor implements Editor {
private _input: HTMLInputElement;
private _checkboxContainerElm: HTMLDivElement;
private _isDisabled = false;
private _originalValue?: boolean | string;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -98,8 +100,8 @@ export class CheckboxEditor implements Editor {
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this._input) {
if (isDisabled) {
Expand Down Expand Up @@ -203,7 +205,7 @@ export class CheckboxEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -248,7 +250,7 @@ export class CheckboxEditor implements Editor {
this.applyValue(this.args.item, this.serializeValue());
}
this.applyValue(compositeEditorOptions.formValues, this.serializeValue());
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
delete compositeEditorOptions.formValues[columnId]; // when the input is disabled we won't include it in the form result object
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, { ...new Slick.EventData(), ...event });
Expand Down
12 changes: 7 additions & 5 deletions packages/common/src/editors/dateEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,15 @@ export class DateEditor implements Editor {
private _$inputWithData: any;
private _$input: any;
private _$editorInputElm: any;
private _isDisabled = false;
private _originalDate: string;
private _pickerMergedOptions: FlatpickrOption;

flatInstance: any;
defaultDate: string;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -173,8 +175,8 @@ export class DateEditor implements Editor {
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this.flatInstance?._input) {
if (isDisabled) {
Expand Down Expand Up @@ -308,7 +310,7 @@ export class DateEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -357,7 +359,7 @@ export class DateEditor implements Editor {
this.applyValue(this.args.item, this.serializeValue());
}
this.applyValue(compositeEditorOptions.formValues, this.serializeValue());
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
delete compositeEditorOptions.formValues[columnId]; // when the input is disabled we won't include it in the form result object
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, new Slick.EventData());
Expand Down
14 changes: 8 additions & 6 deletions packages/common/src/editors/dualInputEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ declare const Slick: SlickNamespace;
*/
export class DualInputEditor implements Editor {
private _eventHandler: SlickEventHandler;
private _isDisabled = false;
private _isValueSaveCalled = false;
private _lastEventType: string | undefined;
private _lastInputKeyEvent: KeyboardEvent;
Expand All @@ -37,6 +36,9 @@ export class DualInputEditor implements Editor {
private _originalLeftValue: string | number;
private _originalRightValue: string | number;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -193,8 +195,8 @@ export class DualInputEditor implements Editor {
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this._leftInput && this._rightInput) {
if (isDisabled) {
Expand Down Expand Up @@ -397,7 +399,7 @@ export class DualInputEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -489,10 +491,10 @@ export class DualInputEditor implements Editor {

// when the input is disabled we won't include it in the form result object
// we'll check with both left/right inputs
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(leftInputId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(leftInputId)) {
delete compositeEditorOptions.formValues[leftInputId];
}
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(rightInputId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(rightInputId)) {
delete compositeEditorOptions.formValues[rightInputId];
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, { ...new Slick.EventData(), ...event });
Expand Down
12 changes: 7 additions & 5 deletions packages/common/src/editors/floatEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ declare const Slick: SlickNamespace;
*/
export class FloatEditor implements Editor {
private _input: HTMLInputElement;
private _isDisabled = false;
private _lastInputKeyEvent: KeyboardEvent;
private _originalValue: number | string;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -111,8 +113,8 @@ export class FloatEditor implements Editor {
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this._input) {
if (isDisabled) {
Expand Down Expand Up @@ -255,7 +257,7 @@ export class FloatEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -295,7 +297,7 @@ export class FloatEditor implements Editor {
this.applyValue(this.args.item, this.serializeValue());
}
this.applyValue(compositeEditorOptions.formValues, this.serializeValue());
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
delete compositeEditorOptions.formValues[columnId]; // when the input is disabled we won't include it in the form result object
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, { ...new Slick.EventData(), ...event });
Expand Down
12 changes: 7 additions & 5 deletions packages/common/src/editors/integerEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ declare const Slick: SlickNamespace;
export class IntegerEditor implements Editor {
private _lastInputKeyEvent: KeyboardEvent;
private _input: HTMLInputElement;
private _isDisabled = false;
private _originalValue: number | string;

/** is the Editor disabled? */
disabled = false;

/** SlickGrid Grid object */
grid: SlickGrid;

Expand Down Expand Up @@ -109,8 +111,8 @@ export class IntegerEditor implements Editor {
}

disable(isDisabled = true) {
const prevIsDisabled = this._isDisabled;
this._isDisabled = isDisabled;
const prevIsDisabled = this.disabled;
this.disabled = isDisabled;

if (this._input) {
if (isDisabled) {
Expand Down Expand Up @@ -218,7 +220,7 @@ export class IntegerEditor implements Editor {
}

// when field is disabled, we can assume it's valid
if (this._isDisabled) {
if (this.disabled) {
return { valid: true, msg: '' };
}

Expand Down Expand Up @@ -257,7 +259,7 @@ export class IntegerEditor implements Editor {
this.applyValue(this.args.item, this.serializeValue());
}
this.applyValue(compositeEditorOptions.formValues, this.serializeValue());
if (this._isDisabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
if (this.disabled && compositeEditorOptions.formValues.hasOwnProperty(columnId)) {
delete compositeEditorOptions.formValues[columnId]; // when the input is disabled we won't include it in the form result object
}
grid.onCompositeEditorChange.notify({ ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues }, { ...new Slick.EventData(), ...event });
Expand Down
Loading