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

table column with iconcss (#13056)

Browse Source
This commit is contained in:
Vladimir Chernov
2020-10-31 02:23:38 +03:00
committed by GitHub
parent 2f571d868b
commit da6f800f11
11 changed files with 168 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,12 +23,12 @@ import { CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/bro
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';
import { slickGridDataItemColumnValueWithNoData, textFormatter } from 'sql/base/browser/ui/table/formatters';
import { slickGridDataItemColumnValueWithNoData, textFormatter, iconCssFormatter, CssIconCellValue } from 'sql/base/browser/ui/table/formatters';
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 { createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { IUserFriendlyIcon, createIconCssClass, getIconKey } from 'sql/workbench/browser/modelComponents/iconUtils';
import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
export enum ColumnSizingMode {
@@ -37,6 +37,13 @@ export enum ColumnSizingMode {
DataFit = 2 // columns use sizing based on cell data, horiz scroll bar present if more cells than visible in view area
}
enum ColumnType {
text = 0,
checkBox = 1,
button = 2,
icon = 3
}
@Component({
selector: 'modelview-table',
template: `
@@ -57,6 +64,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
private _onButtonClicked = new Emitter<ButtonClickEventArgs<{}>>();
public readonly onCheckBoxChanged: vsEvent<ICheckboxCellActionEventArgs> = this._onCheckBoxChanged.event;
public readonly onButtonClicked: vsEvent<ButtonClickEventArgs<{}>> = this._onButtonClicked.event;
private _iconCssMap: { [iconKey: string]: string } = {};
@ViewChild('table', { read: ElementRef }) private _inputContainer: ElementRef;
constructor(
@@ -76,24 +84,17 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
if (tableColumns) {
let mycolumns: Slick.Column<any>[] = [];
let index: number = 0;
(<any[]>columns).map(col => {
if (col.type && col.type === 1) {
if (col.type === ColumnType.checkBox) {
this.createCheckBoxPlugin(col, index);
}
else if (col.type && col.type === 2) {
} else if (col.type === ColumnType.button) {
this.createButtonPlugin(col);
} else if (col.type === ColumnType.icon) {
mycolumns.push(TableComponent.createIconColumn(col));
}
else if (col.value) {
mycolumns.push(<Slick.Column<any>>{
name: col.value,
id: col.value,
field: col.value,
width: col.width,
cssClass: col.cssClass,
headerCssClass: col.headerCssClass,
toolTip: col.toolTip,
formatter: textFormatter,
});
mycolumns.push(TableComponent.createTextColumn(col as azdata.TableColumn));
} else {
mycolumns.push(<Slick.Column<any>>{
name: <string>col,
@@ -116,16 +117,57 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
public static transformData(rows: string[][], columns: any[]): { [key: string]: string }[] {
private static createIconColumn<T extends Slick.SlickData>(col: azdata.TableColumn): Slick.Column<T> {
return <Slick.Column<T>>{
name: col.name ?? col.value,
id: col.value,
field: col.value,
width: col.width,
cssClass: col.cssClass,
headerCssClass: col.headerCssClass,
toolTip: col.toolTip,
formatter: iconCssFormatter,
filterable: false
};
}
private static createTextColumn<T extends Slick.SlickData>(col: azdata.TableColumn): Slick.Column<T> {
return {
name: col.name ?? col.value,
id: col.value,
field: col.value,
width: col.width,
cssClass: col.cssClass,
headerCssClass: col.headerCssClass,
toolTip: col.toolTip,
formatter: textFormatter
};
}
public transformData(rows: (string | azdata.IconColumnCellValue)[][], columns: any[]): { [key: string]: string | CssIconCellValue }[] {
if (rows && columns) {
return rows.map(row => {
let object: { [key: string]: string } = {};
if (row.forEach) {
row.forEach((val, index) => {
let columnName: string = (columns[index].value) ? columns[index].value : <string>columns[index];
object[columnName] = val;
});
let object: { [key: string]: string | CssIconCellValue } = {};
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 };
} else {
object[columnName] = <string>val;
}
});
return object;
});
} else {
@@ -263,7 +305,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties);
this._tableData.clear();
this._tableData.push(TableComponent.transformData(this.data, this.columns));
this._tableData.push(this.transformData(this.data, this.columns));
this._tableColumns = this.transformColumns(this.columns);
this._table.columns = this._tableColumns;
this._table.setData(this._tableData);
@@ -497,8 +539,12 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
}
}
private appendData(data: any[][]) {
this._tableData.push(TableComponent.transformData(data, this.columns));
this._tableData.push(this.transformData(data, this.columns));
this.data = this._tableData.getItems().map(dataObject => Object.values(dataObject));
this.layoutTable();
}
}
function isIconColumnCellValue(obj: any | undefined): obj is azdata.IconColumnCellValue {
return !!(<azdata.IconColumnCellValue>obj)?.icon;
}