Add Loading Spinner plugin for SlickGrid table (#13152)

* Add Loading Spinner plugin for SlickGrid table

* better comment

* add aria

* remove
This commit is contained in:
Charles Gagnon
2020-10-30 11:42:22 -07:00
committed by GitHub
parent dfb40e0159
commit 76625012dd
5 changed files with 94 additions and 5 deletions

View File

@@ -25,10 +25,13 @@ export class ResourceViewerInput extends EditorInput {
public static ID: string = 'workbench.editorInput.resourceViewerInput';
private _data: azdata.DataGridItem[] = [];
private _columns: ColumnDefinition[] = [];
private _loading: boolean = true;
private _onLoadingChanged = new Emitter<boolean>();
public onLoadingChanged: Event<boolean> = this._onLoadingChanged.event;
private _onColumnsChanged = new Emitter<Slick.Column<azdata.DataGridItem>[]>();
public actionsColumn: ButtonColumn<azdata.DataGridItem>;
public onColumnsChanged: Event<Slick.Column<azdata.DataGridItem>[]> = this._onColumnsChanged.event;
private _onDataChanged = new Emitter<void>();
public onDataChanged: Event<void> = this._onDataChanged.event;
@@ -74,16 +77,24 @@ export class ResourceViewerInput extends EditorInput {
}
public async refresh(): Promise<void> {
this._loading = true;
this._onLoadingChanged.fire(this._loading);
await Promise.all([
this.fetchColumns(),
this.fetchItems()
]);
this._loading = false;
this._onLoadingChanged.fire(this._loading);
}
public get plugins(): Slick.Plugin<azdata.DataGridItem>[] {
return [this.actionsColumn];
}
public get loading(): boolean {
return this._loading;
}
private async fetchColumns(): Promise<void> {
const columns = await this._dataGridProviderService.getDataGridColumns(this._providerId);
const columnDefinitions: ColumnDefinition[] = columns.map(col => {

View File

@@ -96,8 +96,6 @@ export class ResourceViewerEditor extends EditorPane {
this._inputDisposables.clear();
this._resourceViewerTable.data = input.data;
input.plugins.forEach(plugin => {
this._resourceViewerTable.registerPlugin(plugin);
this._inputDisposables.add({
@@ -107,17 +105,25 @@ export class ResourceViewerEditor extends EditorPane {
});
});
this._resourceViewerTable.columns = input.columns;
this._inputDisposables.add(input.onColumnsChanged(columns => {
this._resourceViewerTable.columns = columns;
}));
this._resourceViewerTable.columns = input.columns;
this._inputDisposables.add(input.onDataChanged(() => {
this._resourceViewerTable.data = input.data;
}));
this._resourceViewerTable.data = input.data;
this._inputDisposables.add(input.actionsColumn.onClick(e => {
this.showContextMenu(e.position, e.item);
}));
this._inputDisposables.add(input.onLoadingChanged(loading => {
this._resourceViewerTable.loading = loading;
}));
this._resourceViewerTable.loading = input.loading;
this._actionBar.context = input;
this._resourceViewerTable.focus();

View File

@@ -23,12 +23,13 @@ import { INotificationService } from 'vs/platform/notification/common/notificati
import { ColumnDefinition } from 'sql/workbench/browser/editor/resourceViewer/resourceViewerInput';
import { Emitter } from 'vs/base/common/event';
import { ContextMenuAnchor } from 'sql/workbench/contrib/resourceViewer/browser/resourceViewerEditor';
import { LoadingSpinnerPlugin } from 'sql/base/browser/ui/table/plugins/loadingSpinner.plugin';
export class ResourceViewerTable extends Disposable {
private _resourceViewerTable!: Table<azdata.DataGridItem>;
private _dataView: TableDataView<azdata.DataGridItem>;
private _loadingSpinnerPlugin = new LoadingSpinnerPlugin<azdata.DataGridItem>();
private _onContextMenu = new Emitter<{ anchor: ContextMenuAnchor, item: azdata.DataGridItem }>();
public onContextMenu = this._onContextMenu.event;
@@ -81,6 +82,7 @@ export class ResourceViewerTable extends Disposable {
this._resourceViewerTable.grid.render();
});
this._resourceViewerTable.registerPlugin(filterPlugin);
this._resourceViewerTable.registerPlugin(this._loadingSpinnerPlugin);
}
public set data(data: azdata.DataGridItem[]) {
@@ -94,6 +96,10 @@ export class ResourceViewerTable extends Disposable {
this._resourceViewerTable.columns = columns;
}
public set loading(isLoading: boolean) {
this._loadingSpinnerPlugin.loading = isLoading;
}
public registerPlugin(plugin: Slick.Plugin<azdata.DataGridItem>): void {
this._resourceViewerTable.registerPlugin(plugin);
}