Inform the user about the config for filtering (#15510)

* Inform the user about the config for filtering

* comments
This commit is contained in:
Alan Ren
2021-05-19 13:03:15 -07:00
committed by GitHub
parent 6b189be781
commit d36918081a
4 changed files with 33 additions and 27 deletions

View File

@@ -29,15 +29,27 @@ export interface CommandEventArgs<T extends Slick.SlickData> {
command: HeaderFilterCommands
}
export interface ITableFilterOptions {
/**
* The message to be displayed when the filter is disabled and the user tries to open the filter menu.
*/
disabledFilterMessage?: string;
}
export interface ITableFilterStyles extends IButtonStyles, IInputBoxStyles, IListStyles, ICountBadgetyles {
}
interface NotificationProvider {
info(message: string): void;
}
const ShowFilterText: string = localize('headerFilter.showFilter', "Show Filter");
export class HeaderFilter<T extends Slick.SlickData> {
public onFilterApplied = new Slick.Event<{ grid: Slick.Grid<T>, column: FilterableColumn<T> }>();
public onCommand = new Slick.Event<CommandEventArgs<T>>();
public enabled: boolean = true;
private grid!: Slick.Grid<T>;
private handler = new Slick.EventHandler();
@@ -59,11 +71,10 @@ export class HeaderFilter<T extends Slick.SlickData> {
private columnDef!: FilterableColumn<T>;
private filterStyles?: ITableFilterStyles;
private disposableStore = new DisposableStore();
private _enabled: boolean = true;
private columnButtonMapping: Map<string, HTMLElement> = new Map<string, HTMLElement>();
private previouslyFocusedElement: HTMLElement;
constructor(private readonly contextViewProvider: IContextViewProvider) {
constructor(private readonly contextViewProvider: IContextViewProvider, private readonly notificationProvider?: NotificationProvider, private readonly options?: ITableFilterOptions) {
}
public init(grid: Slick.Grid<T>): void {
@@ -104,7 +115,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
const cell = this.grid.getActiveCell();
if (cell) {
const column = this.grid.getColumns()[cell.cell] as FilterableColumn<T>;
if (column.filterable !== false && this.enabled && this.columnButtonMapping[column.id]) {
if (column.filterable !== false && this.columnButtonMapping[column.id]) {
await this.showFilter(this.columnButtonMapping[column.id]);
EventHelper.stop(e, true);
}
@@ -123,9 +134,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
}
private handleHeaderCellRendered(e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) {
if (!this.enabled) {
return;
}
const column = args.column as FilterableColumn<T>;
if ((<FilterableColumn<T>>column).filterable === false) {
return;
@@ -305,6 +313,12 @@ export class HeaderFilter<T extends Slick.SlickData> {
}
private async showFilter(filterButton: HTMLElement): Promise<void> {
if (!this.enabled) {
if (this.notificationProvider && this.options?.disabledFilterMessage) {
this.notificationProvider.info(this.options.disabledFilterMessage);
}
return;
}
this.previouslyFocusedElement = document.activeElement as HTMLElement;
await this.createFilterMenu(filterButton);
// Get the absolute coordinates of the filter button
@@ -482,20 +496,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
command: command
});
}
public get enabled(): boolean {
return this._enabled;
}
public set enabled(value: boolean) {
if (this._enabled !== value) {
this._enabled = value;
// force the table header to redraw.
this.grid.getColumns().forEach((column) => {
this.grid.updateColumnHeader(column.id);
});
}
}
}
class TableFilterListElement {