diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/autoCompleteEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/autoCompleteEditor.spec.ts index cd25d9046..bbbfbddae 100644 --- a/src/app/modules/angular-slickgrid/editors/__tests__/autoCompleteEditor.spec.ts +++ b/src/app/modules/angular-slickgrid/editors/__tests__/autoCompleteEditor.spec.ts @@ -623,7 +623,7 @@ describe('AutoCompleteEditor', () => { expect(output).toBe(false); expect(spyCommitEdit).toHaveBeenCalled(); - expect(spySetValue).toHaveBeenCalledWith('f'); + expect(spySetValue).toHaveBeenCalledWith('Female'); }); it('should expect the "onSelect" method to be called when the callback method is triggered when user provide his own filterOptions', () => { diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts index 693c9d56c..886e2d9ff 100644 --- a/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts +++ b/src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts @@ -412,10 +412,10 @@ describe('SelectEditor', () => { expect(spy).toHaveBeenCalled(); }); - it('should not call anything when "hasAutoCommitEdit" is disabled', () => { + it('should not call "commitCurrentEdit" when "hasAutoCommitEdit" is disabled', () => { mockItemData = { id: 1, gender: 'male', isActive: true }; gridOptionMock.autoCommitEdit = false; - const spy = jest.spyOn(editorArguments, 'commitChanges'); + const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit'); editor = new SelectEditor(editorArguments, true); editor.loadValue(mockItemData); @@ -428,13 +428,15 @@ describe('SelectEditor', () => { mockItemData = { id: 1, gender: '', isActive: true }; mockColumn.internalColumnEditor.required = true; gridOptionMock.autoCommitEdit = true; - const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit'); + const commitEditSpy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit'); + const commitChangeSpy = jest.spyOn(editorArguments, 'commitChanges'); editor = new SelectEditor(editorArguments, true); editor.loadValue(mockItemData); editor.save(); - expect(spy).not.toHaveBeenCalled(); + expect(commitEditSpy).not.toHaveBeenCalled(); + expect(commitChangeSpy).not.toHaveBeenCalled(); }); }); diff --git a/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts b/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts index 07526ce1f..c2d320a28 100644 --- a/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts @@ -272,16 +272,9 @@ export class AutoCompleteEditor implements Editor { // otherwise we know that jQueryUI always require a label/value pair, we can pull them directly const hasCustomRenderItemCallback = this.columnEditor && this.columnEditor.callbacks && this.columnEditor.callbacks.hasOwnProperty('_renderItem') || (this.columnEditor && this.columnEditor.editorOptions && this.columnEditor.editorOptions.renderItem) || false; - const itemValue = typeof item === 'string' ? item : (hasCustomRenderItemCallback ? item[this.valueName] : item.value); - this.setValue(itemValue); - - if (this.hasAutoCommitEdit) { - // do not use args.commitChanges() as this sets the focus to the next row. - const validation = this.validate(); - if (validation && validation.valid) { - this.grid.getEditorLock().commitCurrentEdit(); - } - } + const itemLabel = typeof item === 'string' ? item : (hasCustomRenderItemCallback ? item[this.labelName] : item.label); + this.setValue(itemLabel); + this.save(); } return false; } @@ -410,6 +403,7 @@ export class AutoCompleteEditor implements Editor { } } + this._$editorElm.on('focus', () => this._$editorElm.select()); setTimeout(() => this.focus(), 50); } } diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts index 2d9d99c1d..34f1e2133 100644 --- a/src/app/modules/angular-slickgrid/editors/dateEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/dateEditor.ts @@ -108,7 +108,7 @@ export class DateEditor implements Editor { altInput: true, altFormat: outputFormat, dateFormat: inputFormat, - closeOnSelect: false, + closeOnSelect: true, locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en', onChange: () => this.save(), errorHandler: () => { diff --git a/src/app/modules/angular-slickgrid/editors/selectEditor.ts b/src/app/modules/angular-slickgrid/editors/selectEditor.ts index 4ff87cc3f..8813f8f9e 100644 --- a/src/app/modules/angular-slickgrid/editors/selectEditor.ts +++ b/src/app/modules/angular-slickgrid/editors/selectEditor.ts @@ -421,9 +421,11 @@ export class SelectEditor implements Editor { const validation = this.validate(); if (validation && validation.valid && this.isValueChanged()) { if (!this._destroying && this.hasAutoCommitEdit) { - // do not use args.commitChanges() as this sets the focus to the next - // row. Also the select list will stay shown when clicking off the grid + // do not use args.commitChanges() as this sets the focus to the next row. + // also the select list will stay shown when clicking off the grid this.grid.getEditorLock().commitCurrentEdit(); + } else { + this.args.commitChanges(); } } } diff --git a/src/app/modules/angular-slickgrid/filters/selectFilter.ts b/src/app/modules/angular-slickgrid/filters/selectFilter.ts index 9302aa4ce..e2a01e39b 100644 --- a/src/app/modules/angular-slickgrid/filters/selectFilter.ts +++ b/src/app/modules/angular-slickgrid/filters/selectFilter.ts @@ -107,7 +107,7 @@ export class SelectFilter implements Filter { /** * Initialize the filter template */ - init(args: FilterArguments, isFilterFirstRender: boolean): Promise { + init(args: FilterArguments): Promise { if (!args) { throw new Error('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.'); } diff --git a/src/app/modules/angular-slickgrid/models/editorArguments.interface.ts b/src/app/modules/angular-slickgrid/models/editorArguments.interface.ts index 713d2dc3a..935d483c5 100644 --- a/src/app/modules/angular-slickgrid/models/editorArguments.interface.ts +++ b/src/app/modules/angular-slickgrid/models/editorArguments.interface.ts @@ -1,17 +1,38 @@ import { Column, ElementPosition } from './index'; export interface EditorArguments { + /** Column Definition */ column: Column; + + /** Column MetaData */ columnMetaData: any; + + /** Cell Container DOM Element of where the Editor will be created */ container: HTMLDivElement; + + /** Slick DataView */ dataView: any; + + /** Event that was triggered */ event: Event; + + /** Slick Grid object */ grid: any; + + /** Grid Position */ gridPosition: ElementPosition; + + /** Item DataContext */ item: any; + + /** Editor Position */ position: ElementPosition; // methods + + /** Cancel the Editor Changes */ cancelChanges: () => void; + + /** Commit the Editor Changes */ commitChanges: () => void; } diff --git a/src/app/modules/angular-slickgrid/models/editorValidatorOutput.interface.ts b/src/app/modules/angular-slickgrid/models/editorValidatorOutput.interface.ts index 5e04bb535..4b03ba6b4 100644 --- a/src/app/modules/angular-slickgrid/models/editorValidatorOutput.interface.ts +++ b/src/app/modules/angular-slickgrid/models/editorValidatorOutput.interface.ts @@ -1,4 +1,7 @@ export interface EditorValidatorOutput { + /** Did the validation pass? */ valid: boolean; + + /** Validation Error Message when field is invalid */ msg?: string | null; } diff --git a/src/app/modules/angular-slickgrid/models/multipleSelectOption.interface.ts b/src/app/modules/angular-slickgrid/models/multipleSelectOption.interface.ts index 2d1d41138..174490354 100644 --- a/src/app/modules/angular-slickgrid/models/multipleSelectOption.interface.ts +++ b/src/app/modules/angular-slickgrid/models/multipleSelectOption.interface.ts @@ -172,6 +172,9 @@ export interface MultipleSelectOption { // Events // ------------ + /** Fires after the multiple-select DOM element is created. */ + onAfterCreate?: () => void; + /** Fires when the dropdown list is open. */ onOpen?: () => void; diff --git a/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts b/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts index cec1e45a6..1f6053053 100644 --- a/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts +++ b/src/app/modules/angular-slickgrid/models/slickGrid.interface.ts @@ -79,7 +79,7 @@ export interface SlickGrid { * cell: activeCell * } */ - getActiveCell(): number; + getActiveCell(): { row: number; cell: number; }; /** Returns the DOM element containing the currently active cell. If no cell is active, null is returned. */ getActiveCellNode(): HTMLElement; @@ -219,10 +219,10 @@ export interface SlickGrid { /** Returns an array of row indices corresponding to the currently selected rows. */ getSelectedRows(): number[]; - /** Returns the current SelectionModel. See here for more information about SelectionModels.*/ + /** Returns the current SelectionModel. See here for more information about SelectionModels. */ getSelectionModel(): any; - /** Get sorted columns **/ + /** Get sorted columns */ getSortColumns(): ColumnSort[]; /** Get Top Panel DOM element */ diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss index 0a5c1bc94..4d71262d0 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables.scss @@ -477,11 +477,12 @@ $editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) $date-editor-focus-border-color: $editor-focus-border-color !default; $date-editor-focus-box-shadow: $editor-focus-box-shadow !default; $large-editor-background-color: #ffffff !default; -$large-editor-border: 2px solid #a0a0a0 !default; +$large-editor-border: 2px solid #b1b1b1 !default; $large-editor-text-padding: 5px !default; -$large-editor-border-radius: 8px !default; +$large-editor-border-radius: 6px !default; $large-editor-textarea-height: 80px !default; $large-editor-textarea-width: 250px !default; +$large-editor-button-border-radius: 3px !default; $large-editor-button-text-align: right !default; $large-editor-footer-spacing: 2px !default; $large-editor-count-font-size: 11px !default; diff --git a/src/app/modules/angular-slickgrid/styles/slick-editors.scss b/src/app/modules/angular-slickgrid/styles/slick-editors.scss index 337594162..735f342dc 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-editors.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-editors.scss @@ -64,6 +64,7 @@ text-align: $large-editor-button-text-align; button { margin-left: $large-editor-footer-spacing; + border-radius: $large-editor-button-border-radius; } } diff --git a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss index fc4a5f4c3..c53a06691 100644 --- a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss +++ b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss @@ -108,7 +108,6 @@ $autocomplete-loading-icon-width: 22px !default; $autocomplete-loading-icon-margin-left: -26px !default; $autocomplete-loading-icon-line-height: 0px !default; $autocomplete-loading-icon-vertical-align: sub !default; -$large-editor-border-radius: 6px !default; $multiselect-icon-arrow-font-size: $icon-font-size - 4px !default; $multiselect-icon-checked-color: $highlight-color !default; $multiselect-icon-border: 1px solid #d6d4d4 !default; @@ -133,6 +132,8 @@ $row-move-plugin-icon-color: $cell-text-color !default; $row-move-plugin-cursor: grab !default; $row-move-plugin-icon-width: 18px !default; $row-move-plugin-icon: url('data:image/svg+xml,') !default; +$large-editor-border-radius: 2px !default; +$large-editor-button-border-radius: 2px !default; $editor-focus-box-shadow: 0 0 3px $primary-color !default; $slider-editor-height: 24px !default; $slider-filter-thumb-color: #3C97DD !default;