ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 09:35:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

add ability to dynamically update tabs (#9911)

Browse Source 
* add dashboard and tabbedPanel samples

* add updateTabs to tabbedPanel component

* add updateTabs to tabbedPanel component
This commit is contained in:
Alan Ren
2020-04-09 12:02:00 -07:00
committed by GitHub
parent 82f21faf79
commit 23f1a08aa0
6 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -495,29 +495,33 @@ class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarCont
class TabbedPanelComponentBuilder extends ContainerBuilderImpl<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> implements azdata.TabbedPanelComponentBuilder {
withTabs(items: (azdata.Tab | azdata.TabGroup)[]): azdata.ContainerBuilder<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> {
const itemConfigs = [];
items.forEach(item => {
if (item && 'tabs' in item) {
item.tabs.forEach(tab => {
itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, item.title, tab.icon));
});
} else {
const tab = <azdata.Tab>item;
itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, undefined, tab.icon));
}
});
this._component.itemConfigs = itemConfigs;
this._component.itemConfigs = createFromTabs(items);
return this;
}
}
toItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig {
return new InternalItemConfig(content as ComponentWrapper, {
title: title,
group: group,
id: id,
icon: icon
});
}
function createFromTabs(items: (azdata.Tab | azdata.TabGroup)[]): InternalItemConfig[] {
const itemConfigs = [];
items.forEach(item => {
if (item && 'tabs' in item) {
item.tabs.forEach(tab => {
itemConfigs.push(toTabItemConfig(tab.content, tab.title, tab.id, item.title, tab.icon));
});
} else {
const tab = <azdata.Tab>item;
itemConfigs.push(toTabItemConfig(tab.content, tab.title, tab.id, undefined, tab.icon));
}
});
return itemConfigs;
}
function toTabItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig {
return new InternalItemConfig(content as ComponentWrapper, {
title: title,
group: group,
id: id,
icon: icon
});
}
class LoadingComponentBuilder extends ComponentBuilderImpl<azdata.LoadingComponent> implements azdata.LoadingComponentBuilder {
@@ -1728,6 +1732,13 @@ class TabbedPanelComponentWrapper extends ComponentWrapper implements azdata.Tab
this.properties = {};
this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<string>());
}
updateTabs(tabs: (azdata.Tab | azdata.TabGroup)[]): void {
this.clearItems();
const itemConfigs = createFromTabs(tabs);
itemConfigs.forEach(itemConfig => {
this.addItem(itemConfig.component, itemConfig.config);
});
}
public get onTabChanged(): vscode.Event<string> {
let emitter = this._emitterMap.get(ComponentEventType.onDidChange);

49
src/sql/workbench/api/common/extHostModelViewDialog.ts
View File

@@ -458,34 +458,34 @@ class WizardImpl implements azdata.window.Wizard {
}
class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
private _tabbedPanel: azdata.TabbedPanelComponent;
private _view: azdata.ModelView;
constructor(
private _editor: ModelViewEditorImpl,
private _options?: azdata.ModelViewDashboardOptions
) {
}
updateTabs(tabs: (azdata.DashboardTab | azdata.DashboardTabGroup)[]): void {
if (this._tabbedPanel === undefined || this._view === undefined) {
throw new Error(nls.localize('dashboardNotInitialized', "Tabs are not initialized"));
}
this._tabbedPanel.updateTabs(this.createTabs(tabs, this._view));
}
registerTabs(handler: (view: azdata.ModelView) => Thenable<(azdata.DashboardTab | azdata.DashboardTabGroup)[]>): void {
this._editor.registerContent(async (view) => {
this._view = view;
const dashboardTabs = await handler(view);
const tabs: (azdata.TabGroup | azdata.Tab)[] = [];
dashboardTabs.forEach((item: azdata.DashboardTab | azdata.DashboardTabGroup) => {
if ('tabs' in item) {
tabs.push(<azdata.TabGroup>{
title: item.title,
tabs: item.tabs.map(tab => {
return this.createTab(tab, view);
})
});
} else {
tabs.push(this.createTab(item, view));
}
});
const tabbedPanel = view.modelBuilder.tabbedPanel().withTabs(tabs).withLayout({
const tabs = this.createTabs(dashboardTabs, view);
this._tabbedPanel = view.modelBuilder.tabbedPanel().withTabs(tabs).withLayout({
orientation: 'vertical',
showIcon: this._options?.showIcon ?? true,
alwaysShowTabs: this._options?.alwaysShowTabs ?? false
}).component();
return view.initializeModel(tabbedPanel);
return view.initializeModel(this._tabbedPanel);
});
}
@@ -508,6 +508,23 @@ class ModelViewDashboardImpl implements azdata.window.ModelViewDashboard {
return tab;
}
}
createTabs(dashboardTabs: (azdata.DashboardTab | azdata.DashboardTabGroup)[], view: azdata.ModelView): (azdata.TabGroup | azdata.Tab)[] {
const tabs: (azdata.TabGroup | azdata.Tab)[] = [];
dashboardTabs.forEach((item: azdata.DashboardTab | azdata.DashboardTabGroup) => {
if ('tabs' in item) {
tabs.push(<azdata.TabGroup>{
title: item.title,
tabs: item.tabs.map(tab => {
return this.createTab(tab, view);
})
});
} else {
tabs.push(this.createTab(item, view));
}
});
return tabs;
}
}
export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {