diff --git a/src/reactviews/pages/QueryResult/table/interfaces.ts b/src/reactviews/pages/QueryResult/table/interfaces.ts index 7f7da3a34e..11ab38c7ee 100644 --- a/src/reactviews/pages/QueryResult/table/interfaces.ts +++ b/src/reactviews/pages/QueryResult/table/interfaces.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { IDisposableDataProvider } from "./dataProvider"; +import { SortDirection } from "./plugins/headerFilter.plugin"; export interface ITableMouseEvent { anchor: HTMLElement | { x: number; y: number }; @@ -80,6 +81,11 @@ export interface FilterableColumn sorted?: SortProperties; } +export interface ColumnSortState { + column: Slick.Column; + sortDirection: SortDirection; +} + export interface ITableKeyboardEvent { cell?: { row: number; cell: number }; event: KeyboardEvent; diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts index ebea4cc947..cf69301654 100644 --- a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts +++ b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts @@ -33,12 +33,12 @@ import { QueryResultWebviewState, } from "../../../../../sharedInterfaces/queryResult"; -export type HeaderFilterCommands = "sort-asc" | "sort-desc" | "reset"; +export type SortDirection = "sort-asc" | "sort-desc" | "reset"; export interface CommandEventArgs { grid: Slick.Grid; column: Slick.Column; - command: HeaderFilterCommands; + command: SortDirection; } const ShowFilterText = locConstants.queryResult.showFilter; @@ -734,7 +734,7 @@ export class HeaderFilter { } private async handleMenuItemClick( - command: HeaderFilterCommands, + command: SortDirection, columnDef: Slick.Column, ) { const dataView = this.grid.getData(); diff --git a/src/reactviews/pages/QueryResult/table/tableDataView.ts b/src/reactviews/pages/QueryResult/table/tableDataView.ts index 0c08e71675..1c4b8fca4d 100644 --- a/src/reactviews/pages/QueryResult/table/tableDataView.ts +++ b/src/reactviews/pages/QueryResult/table/tableDataView.ts @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { FilterableColumn } from "./interfaces"; +import { ColumnSortState, FilterableColumn } from "./interfaces"; import { IDisposableDataProvider } from "./dataProvider"; export interface IFindPosition { @@ -89,11 +89,13 @@ export class TableDataView //Used when filtering is enabled, _allData holds the complete set of data. private _allData!: Array; //Used to reset the data when a sort is cleared. - private _resetData: Array; + private _resetSortData: Array; + // private _resetDataUnfiltered: Array; private _findArray?: Array; private _findIndex?: number; private _filterEnabled: boolean; private _currentColumnFilters: FilterableColumn[] = []; + private _currentColumnSort: ColumnSortState | undefined; // private _onFilterStateChange = new vscode.EventEmitter(); // get onFilterStateChange(): vscode.Event { return this._onFilterStateChange.event; } @@ -108,7 +110,8 @@ export class TableDataView private _filterFn?: TableFilterFunc, private _cellValueGetter: CellValueGetter = defaultCellValueGetter, ) { - this._resetData = []; + this._resetSortData = []; + // this._resetDataUnfiltered = []; if (data) { this._data = data; } else { @@ -164,35 +167,83 @@ export class TableDataView } this._currentColumnFilters = columns!; this._data = this._filterFn!(this._allData, columns!); + if (this._resetSortData.length > 0) { + // this._resetDataUnfiltered = new Array(...this._resetSortData); + this._resetSortData = this._filterFn!( + this._resetSortData, + columns!, + ); + } if (this._data.length === this._allData.length) { - this.clearFilter(); + await this.clearFilter(); } else { console.log("filterstatechange"); // this._onFilterStateChange.fire(); } } - public clearFilter() { + public async clearFilter() { if (this._filterEnabled) { this._data = this._allData; + if (this._resetSortData.length > 0) { + this._resetSortData = new Array(...this._allData); + } this._allData = []; this._filterEnabled = false; + if (this._currentColumnSort) { + // this._resetDataUnfiltered = new Array(...this._data); + this._data = this._sortFn( + { + sortCol: this._currentColumnSort.column, + sortAsc: + this._currentColumnSort.sortDirection === + "sort-asc", + grid: null, + multiColumnSort: false, + }, + this._data, + ); + } // this._onFilterStateChange.fire(); } } async sort(args: Slick.OnSortEventArgs): Promise { - if (this._resetData.length === 0) { - this._resetData.push(...this._data); + if (this._resetSortData.length === 0) { + this._resetSortData.push(...this._data); } + this._data = this._sortFn!(args, this._data); + this._currentColumnSort = { + column: args.sortCol!, + sortDirection: args.sortAsc ? "sort-asc" : "sort-desc", + }; console.log(args); // this._onSortComplete.fire(args); } + // TODO: need to consider multiple scenarios: + // 1. filter is enabled then sort & unsort, + // 2. filter is not enabled, sort, then enable filter & unsort + // 3. filter is enabled then sort, and then disabled <--TODO: doesn't work right nwo async resetSort(): Promise { - this._data = this._resetData; - this._resetData = []; + // an old sort might have been cleared + if (this._data.length > this._resetSortData.length) { + // this._data = this._resetDataUnfiltered; + this._data = this._allData; + } else { + this._data = this._resetSortData; + } + // TODO: if there are filters applied, we need to reapply them to the reset data + if (this._currentColumnFilters.length > 0) { + this._data = this._filterFn!( + this._data, + this._currentColumnFilters, + ); + } + this._currentColumnSort = undefined; + this._resetSortData = []; + // this._resetDataUnfiltered = []; } getLength(): number {