Fixing schema compare checkbox column functions (#21025)

* Fixing select checkbox event and data state changes

* Only subscribing to event when check all is present

* converting object to map

* logic cleanup
This commit is contained in:
Aasim Khan
2022-10-28 18:15:48 -07:00
committed by GitHub
parent 0bfb220538
commit 998b528680
2 changed files with 29 additions and 9 deletions

View File

@@ -94,8 +94,10 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
this._handler
.subscribe(this._grid.onClick, (e: Event, args: Slick.OnClickEventArgs<T>) => this.handleClick(e, args))
.subscribe(this._grid.onKeyDown, (e: DOMEvent, args: Slick.OnKeyDownEventArgs<T>) => this.handleKeyDown(e as KeyboardEvent, args))
.subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs<T>) => this.handleHeaderClick(e, args))
.subscribe(this._grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) => this.handleHeaderCellRendered(e, args));
if (this.isCheckAllHeaderCheckboxShown()) {
this._handler.subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs<T>) => this.handleHeaderClick(e, args));
}
}
private handleClick(e: DOMEvent, args: Slick.OnClickEventArgs<T>): void {
@@ -131,7 +133,7 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
if (this._options.actionOnCheck === ActionOnCheck.selectRow) {
this.updateSelectedRows();
} else {
this._onChange.fire({ checked: false, row: row, column: this.index });
this._onChange.fire({ checked: !currentValue.checked, row: row, column: this.index });
}
}
@@ -152,6 +154,10 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
e.stopPropagation();
}
private isCheckAllHeaderCheckboxShown(): boolean {
return !this._options.title;
}
private handleHeaderKeyDown(e: KeyboardEvent): void {
const event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
@@ -200,6 +206,18 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
this._handler.unsubscribeAll();
}
// This call is to handle reactive changes in check box UI
// This DOES NOT fire UI change Events
public reactiveCheckboxCheck(row: number, value: boolean) {
this.setCheckboxPropertyValue(row, value);
// update row to call formatter
this._grid.invalidateRow(row);
this._grid.render();
// ensure that grid reflects the change
this._grid.scrollRowIntoView(row);
}
private getCheckboxPropertyValue(row: number): ICheckboxColumnValue {
const dataItem = this._grid?.getDataItem(row);
const propertyValue = dataItem[this._options.title];

View File

@@ -70,7 +70,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
private _table: Table<Slick.SlickData>;
private _tableData: TableDataView<Slick.SlickData>;
private _tableColumns;
private _checkboxColumns: CheckboxSelectColumn<{}>[] = [];
private _checkboxColumns: Map<string, CheckboxSelectColumn<Slick.SlickData>> = new Map();
private _buttonColumns: ButtonColumn<{}>[] = [];
private _hyperlinkColumns: HyperlinkColumn<{}>[] = [];
private _contextMenuColumns: ContextMenuColumn<{}>[] = [];
@@ -373,7 +373,9 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
this._table.setSelectedRows(this.selectedRows);
}
Object.keys(this._checkboxColumns).forEach(col => this.registerPlugins(col, this._checkboxColumns[col]));
this._checkboxColumns.forEach((column, columnName) => {
this.registerPlugins(columnName, column);
})
Object.keys(this._buttonColumns).forEach(col => this.registerPlugins(col, this._buttonColumns[col]));
Object.keys(this._hyperlinkColumns).forEach(col => this.registerPlugins(col, this._hyperlinkColumns[col]));
Object.keys(this._contextMenuColumns).forEach(col => this.registerPlugins(col, this._contextMenuColumns[col]));
@@ -420,25 +422,25 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
const checkInfo: azdata.CheckBoxCell = cellInfo as azdata.CheckBoxCell;
if (checkInfo) {
this._checkboxColumns[checkInfo.columnName].reactiveCheckboxCheck(checkInfo.row, checkInfo.checked);
this._checkboxColumns.get(checkInfo.columnName).reactiveCheckboxCheck(checkInfo.row, checkInfo.checked);
}
});
}
private createCheckBoxPlugin(col: azdata.CheckboxColumn, index: number) {
let name = col.value;
if (!this._checkboxColumns[col.value]) {
if (!this._checkboxColumns.has(col.value)) {
const checkboxAction = <ActionOnCheck>(col.options ? (<any>col.options).actionOnCheckbox : col.action);
this._checkboxColumns[col.value] = new CheckboxSelectColumn({
this._checkboxColumns.set(col.value, new CheckboxSelectColumn({
title: col.value,
toolTip: col.toolTip,
width: col.width,
cssClass: col.cssClass,
headerCssClass: col.headerCssClass,
actionOnCheck: checkboxAction
}, index);
}, index));
this._register(this._checkboxColumns[col.value].onChange((state) => {
this._register(this._checkboxColumns.get(col.value).onChange((state) => {
this.fireEvent({
eventType: ComponentEventType.onCellAction,
args: {