Cleanup and fixes for resource viewer and filter plugin (#12154)

* Cleanup and fixes for resource viewer and filter plugin

* fix strict nulls
This commit is contained in:
Charles Gagnon
2020-09-04 19:10:26 -07:00
committed by GitHub
parent fa5bfee0cf
commit b8d0e2a9e3
10 changed files with 191 additions and 134 deletions

View File

@@ -3,65 +3,92 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/resourceViewerTable';
import { Table } from 'sql/base/browser/ui/table/table';
import { attachTableStyler } from 'sql/platform/theme/common/styler';
import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common/styler';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { Dimension } from 'vs/base/browser/dom';
import { textFormatter, slickGridDataItemColumnValueExtractor } from 'sql/base/browser/ui/table/formatters';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
import { slickGridDataItemColumnValueExtractor } from 'sql/base/browser/ui/table/formatters';
import { HeaderFilter, CommandEventArgs, IExtendedColumn } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
import { Disposable } from 'vs/base/common/lifecycle';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
export class ResourceViewerTable extends Disposable {
private _resourceViewerTable!: Table<Slick.SlickData>;
private _data: TableDataView<Slick.SlickData> | undefined;
private _dataView: TableDataView<Slick.SlickData>;
constructor(parent: HTMLElement, @IWorkbenchThemeService private _themeService: IWorkbenchThemeService) {
super();
let filterFn = (data: Array<Slick.SlickData>): Array<Slick.SlickData> => {
return data.filter(item => this.filter(item));
};
this._dataView = new TableDataView<Slick.SlickData>(undefined, undefined, undefined, filterFn);
this._resourceViewerTable = this._register(new Table(parent, {
sorter: (args) => {
this._data?.sort(args);
this._dataView.sort(args);
}
}, {
dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
}));
this._resourceViewerTable.setSelectionModel(new RowSelectionModel());
attachTableStyler(this._resourceViewerTable, this._themeService);
let filterPlugin = new HeaderFilter<Slick.SlickData>();
this._register(attachButtonStyler(filterPlugin, this._themeService));
this._register(attachTableStyler(this._resourceViewerTable, this._themeService));
filterPlugin.onFilterApplied.subscribe(() => {
this._dataView.filter();
this._resourceViewerTable.grid.render();
this._resourceViewerTable.grid.resetActiveCell();
this._resourceViewerTable.grid.resizeCanvas();
});
filterPlugin.onCommand.subscribe((e, args: CommandEventArgs<Slick.SlickData>) => {
// Convert filter command to SlickGrid sort args
this._dataView.sort({
grid: args.grid,
multiColumnSort: false,
sortCol: args.column,
sortAsc: args.command === 'sort-asc'
});
this._resourceViewerTable.grid.invalidate();
this._resourceViewerTable.grid.render();
});
this._resourceViewerTable.registerPlugin(filterPlugin);
}
public set data(data: TableDataView<Slick.SlickData>) {
this._data = data;
this._resourceViewerTable.setData(data);
public set data(data: Slick.SlickData[]) {
this._dataView.clear();
this._dataView.push(data);
this._resourceViewerTable.grid.setData(this._dataView, true);
this._resourceViewerTable.grid.render();
}
public set columns(columns: Slick.Column<Slick.SlickData>[]) {
this._resourceViewerTable.columns = columns.map(column => {
column.formatter = textFormatter;
return column;
});
this._resourceViewerTable.autosizeColumns();
}
public updateRowCount(): void {
this._resourceViewerTable.updateRowCount();
}
public invalidateAllRows(): void {
this._resourceViewerTable.grid.invalidateAllRows();
}
public autosizeColumns(): void {
this._resourceViewerTable.autosizeColumns();
this._resourceViewerTable.columns = columns;
}
public focus(): void {
this._resourceViewerTable.focus();
}
public layout(dimension: Dimension): void {
this._resourceViewerTable.layout(dimension);
this._resourceViewerTable.autosizeColumns();
private filter(item: Slick.SlickData) {
const columns = this._resourceViewerTable.grid.getColumns();
let value = true;
for (let i = 0; i < columns.length; i++) {
const col: IExtendedColumn<Slick.SlickData> = columns[i];
if (!col.field) {
continue;
}
let filterValues = col.filterValues;
if (filterValues && filterValues.length > 0) {
if (item._parent) {
value = value && !!filterValues.find(x => x === item._parent[col.field!]);
} else {
value = value && !!filterValues.find(x => x === item[col.field!]);
}
}
}
return value;
}
}