ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 17:23:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

table component improvement (#13801)

Browse Source 
* hyperlink column

* fixed width for image only button - old behavior
This commit is contained in:
Alan Ren
2020-12-14 20:28:43 -08:00
committed by GitHub
parent 1f630b9767
commit ae6494f3e4
25 changed files with 605 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -813,7 +813,8 @@ export enum ColumnType {
text = 0,
checkBox = 1,
button = 2,
icon = 3
icon = 3,
hyperlink = 4
}
export enum ActionOnCellCheckboxCheck {

3
src/sql/workbench/browser/editor/resourceViewer/resourceViewerInput.ts
View File

@@ -44,8 +44,7 @@ export class ResourceViewerInput extends EditorInput {
this.actionsColumn = new ButtonColumn<azdata.DataGridItem>({
id: 'actions',
iconCssClass: 'toggle-more',
title: nls.localize('resourceViewer.showActions', "Show Actions"),
sortable: false
title: nls.localize('resourceViewer.showActions', "Show Actions")
});
this.refresh().catch(err => onUnexpectedError(err));
}

4
src/sql/workbench/browser/modelComponents/media/table.css
View File

@@ -21,7 +21,3 @@
.display-none {
display: none;
}
.modelview-table-button-icon {
background-color: transparent;
}

142
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -19,7 +19,7 @@ import { attachTableStyler, attachButtonStyler } from 'sql/platform/theme/common
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
import { ActionOnCheck, CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
import { Emitter, Event as vsEvent } from 'vs/base/common/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
@@ -27,11 +27,13 @@ import { slickGridDataItemColumnValueWithNoData, textFormatter, iconCssFormatter
import { isUndefinedOrNull } from 'vs/base/common/types';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
import { convertSizeToNumber } from 'sql/base/browser/dom';
import { ButtonColumn, ButtonClickEventArgs } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import { ButtonCellValue, ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import { IUserFriendlyIcon, createIconCssClass, getIconKey } from 'sql/workbench/browser/modelComponents/iconUtils';
import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
import { onUnexpectedError } from 'vs/base/common/errors';
import { ILogService } from 'vs/platform/log/common/log';
import { TableCellClickEventArgs } from 'sql/base/browser/ui/table/plugins/tableColumn';
import { HyperlinkCellValue, HyperlinkColumn } from 'sql/base/browser/ui/table/plugins/hyperlinkColumn.plugin';
export enum ColumnSizingMode {
ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -43,9 +45,13 @@ enum ColumnType {
text = 0,
checkBox = 1,
button = 2,
icon = 3
icon = 3,
hyperlink = 4
}
type TableCellInputDataType = string | azdata.IconColumnCellValue | azdata.ButtonColumnCellValue | azdata.HyperlinkColumnCellValue | undefined;
type TableCellDataType = string | CssIconCellValue | ButtonCellValue | HyperlinkCellValue | undefined;
@Component({
selector: 'modelview-table',
template: `
@@ -59,13 +65,14 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
private _tableData: TableDataView<Slick.SlickData>;
private _tableColumns;
private _checkboxColumns: CheckboxSelectColumn<{}>[] = [];
private _buttonsColumns: ButtonColumn<{}>[] = [];
private _buttonColumns: ButtonColumn<{}>[] = [];
private _hyperlinkColumns: HyperlinkColumn<{}>[] = [];
private _pluginsRegisterStatus: boolean[] = [];
private _filterPlugin: HeaderFilter<Slick.SlickData>;
private _onCheckBoxChanged = new Emitter<ICheckboxCellActionEventArgs>();
private _onButtonClicked = new Emitter<ButtonClickEventArgs<{}>>();
private _onButtonClicked = new Emitter<TableCellClickEventArgs<{}>>();
public readonly onCheckBoxChanged: vsEvent<ICheckboxCellActionEventArgs> = this._onCheckBoxChanged.event;
public readonly onButtonClicked: vsEvent<ButtonClickEventArgs<{}>> = this._onButtonClicked.event;
public readonly onButtonClicked: vsEvent<TableCellClickEventArgs<{}>> = this._onButtonClicked.event;
private _iconCssMap: { [iconKey: string]: string } = {};
@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
@@ -80,7 +87,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
transformColumns(columns: string[] | azdata.TableColumn[]): Slick.Column<any>[] {
let tableColumns: any[] = <any[]>columns;
if (tableColumns) {
let mycolumns: Slick.Column<any>[] = [];
const mycolumns: Slick.Column<any>[] = [];
let index: number = 0;
(<any[]>columns).map(col => {
@@ -90,6 +97,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
this.createButtonPlugin(col);
} else if (col.type === ColumnType.icon) {
mycolumns.push(TableComponent.createIconColumn(col));
} else if (col.type === ColumnType.hyperlink) {
this.createHyperlinkPlugin(col);
}
else if (col.value) {
mycolumns.push(TableComponent.createTextColumn(col as azdata.TableColumn));
@@ -142,28 +151,52 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
};
}
public transformData(rows: (string | azdata.IconColumnCellValue)[][], columns: any[]): { [key: string]: string | CssIconCellValue }[] {
public transformData(rows: (TableCellInputDataType)[][], columns: string[] | azdata.TableColumn[]): { [key: string]: TableCellDataType }[] {
if (rows && columns) {
return rows.map(row => {
let object: { [key: string]: string | CssIconCellValue } = {};
const object: { [key: string]: TableCellDataType } = {};
if (!Array.isArray(row)) {
return object;
}
row.forEach((val, index) => {
let columnName: string = (columns[index].value) ? columns[index].value : <string>columns[index];
if (isIconColumnCellValue(val)) {
const icon: IUserFriendlyIcon = val.icon;
const iconKey: string = getIconKey(icon);
const iconCssClass = this._iconCssMap[iconKey] ?? createIconCssClass(icon);
if (!this._iconCssMap[iconKey]) {
this._iconCssMap[iconKey] = iconCssClass;
}
object[columnName] = { iconCssClass: iconCssClass, ariaLabel: val.ariaLabel };
const column = columns[index];
if (typeof column === 'string') {
object[column] = <string>val;
} else {
object[columnName] = <string>val;
const columnType = <ColumnType>column.type;
let cellValue = undefined;
switch (columnType) {
case ColumnType.icon:
const iconValue = <azdata.IconColumnCellValue>val;
cellValue = <CssIconCellValue>{
iconCssClass: this.createIconCssClassInternal(iconValue.icon),
title: iconValue.title
};
break;
case ColumnType.button:
if (val) {
const buttonValue = <azdata.ButtonColumnCellValue>val;
cellValue = <ButtonCellValue>{
iconCssClass: buttonValue.icon ? this.createIconCssClassInternal(buttonValue.icon) : undefined,
title: buttonValue.title
};
}
break;
case ColumnType.hyperlink:
if (val) {
const hyperlinkValue = <azdata.HyperlinkColumnCellValue>val;
cellValue = <HyperlinkCellValue>{
iconCssClass: hyperlinkValue.icon ? this.createIconCssClassInternal(hyperlinkValue.icon) : undefined,
title: hyperlinkValue.title,
url: hyperlinkValue.url
};
break;
}
break;
default:
cellValue = val;
}
object[column.value] = cellValue;
}
});
return object;
@@ -173,6 +206,15 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
private createIconCssClassInternal(icon: IUserFriendlyIcon): string {
const iconKey: string = getIconKey(icon);
const iconCssClass = this._iconCssMap[iconKey] ?? createIconCssClass(icon);
if (!this._iconCssMap[iconKey]) {
this._iconCssMap[iconKey] = iconCssClass;
}
return iconCssClass;
}
ngAfterViewInit(): void {
if (this._inputContainer) {
this._tableData = new TableDataView<Slick.SlickData>(
@@ -307,7 +349,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
Object.keys(this._checkboxColumns).forEach(col => this.registerPlugins(col, this._checkboxColumns[col]));
Object.keys(this._buttonsColumns).forEach(col => this.registerPlugins(col, this._buttonsColumns[col]));
Object.keys(this._buttonColumns).forEach(col => this.registerPlugins(col, this._buttonColumns[col]));
Object.keys(this._hyperlinkColumns).forEach(col => this.registerPlugins(col, this._hyperlinkColumns[col]));
if (this.headerFilter === true) {
this.registerFilterPlugin();
@@ -356,16 +399,17 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
});
}
private createCheckBoxPlugin(col: any, index: number) {
private createCheckBoxPlugin(col: azdata.CheckboxColumn, index: number) {
let name = col.value;
if (!this._checkboxColumns[col.value]) {
const checkboxAction = <ActionOnCheck>(col.options ? (<any>col.options).actionOnCheckbox : col.action);
this._checkboxColumns[col.value] = new CheckboxSelectColumn({
title: col.value,
toolTip: col.toolTip,
width: col.width,
cssClass: col.cssClass,
headerCssClass: col.headerCssClass,
actionOnCheck: col.options ? col.options.actionOnCheckbox : null
actionOnCheck: checkboxAction,
}, index);
this._register(this._checkboxColumns[col.value].onChange((state) => {
@@ -382,15 +426,19 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
private createButtonPlugin(col: any) {
private createButtonPlugin(col: azdata.ButtonColumn) {
let name = col.value;
if (!this._buttonsColumns[col.value]) {
this._buttonsColumns[col.value] = new ButtonColumn({
title: col.title,
iconCssClass: 'modelview-table-button-icon ' + (col.options ? createIconCssClass(col.options.icon) : '')
if (!this._buttonColumns[col.value]) {
const icon = <IUserFriendlyIcon>(col.options ? (<any>col.options).icon : col.icon);
this._buttonColumns[col.value] = new ButtonColumn({
title: col.value,
iconCssClass: icon ? this.createIconCssClassInternal(icon) : undefined,
field: col.value,
showText: col.showText,
name: col.name
});
this._register(this._buttonsColumns[col.value].onClick((state) => {
this._register(this._buttonColumns[col.value].onClick((state) => {
this.fireEvent({
eventType: ComponentEventType.onCellAction,
args: {
@@ -403,7 +451,33 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
private registerPlugins(col: string, plugin: CheckboxSelectColumn<{}> | ButtonColumn<{}>): void {
private createHyperlinkPlugin(col: azdata.HyperlinkColumn) {
const name = col.value;
if (!this._hyperlinkColumns[col.value]) {
const hyperlinkColumn = new HyperlinkColumn({
title: col.value,
width: col.width,
iconCssClass: col.icon ? this.createIconCssClassInternal(col.icon) : undefined,
field: col.value,
name: col.name
});
this._hyperlinkColumns[col.value] = hyperlinkColumn;
this._register(hyperlinkColumn.onClick((state) => {
this.fireEvent({
eventType: ComponentEventType.onCellAction,
args: {
row: state.row,
column: state.column,
name: name
}
});
}));
}
}
private registerPlugins(col: string, plugin: CheckboxSelectColumn<{}> | ButtonColumn<{}> | HyperlinkColumn<{}>): void {
const index = 'index' in plugin ? plugin.index : this.columns?.findIndex(x => x === col || ('value' in x && x['value'] === col));
if (index >= 0) {
@@ -548,7 +622,3 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
}
function isIconColumnCellValue(obj: any | undefined): obj is azdata.IconColumnCellValue {
return !!(<azdata.IconColumnCellValue>obj)?.icon;
}

11
src/sql/workbench/contrib/dashboard/browser/widgets/explorer/explorerTable.ts
View File

@@ -6,6 +6,7 @@
import { Router } from '@angular/router';
import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin';
import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
import { IconCellValue } from 'sql/base/browser/ui/table/plugins/tableColumn';
import { TextWithIconColumn } from 'sql/base/browser/ui/table/plugins/textWithIconColumn';
import { Table } from 'sql/base/browser/ui/table/table';
import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
@@ -33,7 +34,7 @@ import { IEditorProgressService } from 'vs/platform/progress/common/progress';
import { IThemeService } from 'vs/platform/theme/common/themeService';
const ShowActionsText: string = nls.localize('dashboard.explorer.actions', "Show Actions");
const IconClassProperty: string = 'iconClass';
const NameWithIconProperty: string = 'NameWithIcon';
export const ConnectionProfilePropertyName: string = 'connection_profile';
/**
@@ -171,7 +172,10 @@ export class ExplorerTable extends Disposable {
this._view.clear();
this._view.clearFilter();
items.forEach(item => {
item[IconClassProperty] = this._explorerView.getIconClass(item);
item[NameWithIconProperty] = <IconCellValue>{
iconCssClass: this._explorerView.getIconClass(item),
title: item[NameProperty]
};
});
this._view.push(items);
}
@@ -190,9 +194,8 @@ export class ExplorerTable extends Disposable {
if (property.value === NameProperty) {
const nameColumn = new TextWithIconColumn({
id: property.value,
iconCssClassField: IconClassProperty,
width: columnWidth,
field: property.value,
field: NameWithIconProperty,
name: property.displayName
});
return nameColumn.definition;

9
src/sql/workbench/test/electron-browser/modalComponents/table.component.test.ts
View File

@@ -5,7 +5,6 @@
import * as assert from 'assert';
import TableComponent from 'sql/workbench/browser/modelComponents/table.component';
import { CssIconCellValue } from 'sql/base/browser/ui/table/formatters';
import { NullLogService } from 'vs/platform/log/common/log';
suite('TableComponent Tests', () => {
@@ -22,7 +21,7 @@ suite('TableComponent Tests', () => {
let columns = ['c1', 'c2', 'c3'];
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService());
let actual: { [key: string]: string | CssIconCellValue }[] = tableComponent.transformData(data, columns);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [
{
'c1': '1',
@@ -42,7 +41,7 @@ suite('TableComponent Tests', () => {
let data = undefined;
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService());
let columns = ['c1', 'c2', 'c3'];
let actual: { [key: string]: string | CssIconCellValue }[] = tableComponent.transformData(data, columns);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [];
assert.deepEqual(actual, expected);
});
@@ -54,7 +53,7 @@ suite('TableComponent Tests', () => {
];
let columns;
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService());
let actual: { [key: string]: string | CssIconCellValue }[] = tableComponent.transformData(data, columns);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [];
assert.deepEqual(actual, expected);
});
@@ -66,7 +65,7 @@ suite('TableComponent Tests', () => {
];
const tableComponent = new TableComponent(undefined, undefined, undefined, new NullLogService());
let columns = ['c1', 'c2', 'c3'];
let actual: { [key: string]: string | CssIconCellValue }[] = tableComponent.transformData(data, columns);
let actual = tableComponent.transformData(data, columns);
let expected: { [key: string]: string }[] = [
{
'c1': '1',