fix sort/filter scenarios

microsoft · Mar 7, 2025 · 23ff248 · 23ff248
1 parent 1e4a42b
commit 23ff248
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 12 deletions.
diff --git 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<T extends Slick.SlickData>
     sorted?: SortProperties;
 }
 
+export interface ColumnSortState<T extends Slick.SlickData> {
+    column: Slick.Column<T>;
+    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
@@ -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<T extends Slick.SlickData> {
     grid: Slick.Grid<T>;
     column: Slick.Column<T>;
-    command: HeaderFilterCommands;
+    command: SortDirection;
 }
 
 const ShowFilterText = locConstants.queryResult.showFilter;
@@ -734,7 +734,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
     }
 
     private async handleMenuItemClick(
-        command: HeaderFilterCommands,
+        command: SortDirection,
         columnDef: Slick.Column<T>,
     ) {
         const dataView = this.grid.getData();

diff --git 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<T extends Slick.SlickData>
     //Used when filtering is enabled, _allData holds the complete set of data.
     private _allData!: Array<T>;
     //Used to reset the data when a sort is cleared.
-    private _resetData: Array<T>;
+    private _resetSortData: Array<T>;
+    // private _resetDataUnfiltered: Array<T>;
     private _findArray?: Array<IFindPosition>;
     private _findIndex?: number;
     private _filterEnabled: boolean;
     private _currentColumnFilters: FilterableColumn<T>[] = [];
+    private _currentColumnSort: ColumnSortState<T> | undefined;
 
     // private _onFilterStateChange = new vscode.EventEmitter<void>();
     // get onFilterStateChange(): vscode.Event<void> { return this._onFilterStateChange.event; }
@@ -108,7 +110,8 @@ export class TableDataView<T extends Slick.SlickData>
         private _filterFn?: TableFilterFunc<T>,
         private _cellValueGetter: CellValueGetter = defaultCellValueGetter,
     ) {
-        this._resetData = [];
+        this._resetSortData = [];
+        // this._resetDataUnfiltered = [];
         if (data) {
             this._data = data;
         } else {
@@ -164,35 +167,83 @@ export class TableDataView<T extends Slick.SlickData>
         }
         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<T>): Promise<void> {
-        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<void> {
-        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 {