mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-15 17:22:25 -05:00
Feature/schemacompare include exclude checkboxes (#5548)
* Adding include exclude boxes * Adding as table component generic column and rememebering state. * converged custome action and select checkboxes, moved sc checkbox to middle, can have multiple checkboxes and can remember state now * adding action on column as a common column property * Taking PR comments * Changing Arg name as per CR comment * Taking a PR comment
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import { mixin } from 'vs/base/common/objects';
|
||||
import * as nls from 'vs/nls';
|
||||
import { ICheckboxStyles } from 'vs/base/browser/ui/checkbox/checkbox';
|
||||
import { Emitter, Event as vsEvent } from 'vs/base/common/event';
|
||||
import * as strings from 'vs/base/common/strings';
|
||||
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
|
||||
import { KeyCode } from 'vs/base/common/keyCodes';
|
||||
@@ -14,6 +15,20 @@ export interface ICheckboxSelectColumnOptions extends Slick.PluginOptions, IChec
|
||||
toolTip?: string;
|
||||
width?: number;
|
||||
title?: string;
|
||||
columnIndex?: number;
|
||||
actionOnCheck?: ActionOnCheck;
|
||||
}
|
||||
|
||||
// Actions expected on checkbox click
|
||||
export enum ActionOnCheck {
|
||||
selectRow = 0,
|
||||
customAction = 1
|
||||
}
|
||||
|
||||
export interface ICheckboxCellActionEventArgs {
|
||||
checked: boolean;
|
||||
row: number;
|
||||
column: number;
|
||||
}
|
||||
|
||||
const defaultOptions: ICheckboxSelectColumnOptions = {
|
||||
@@ -32,9 +47,16 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
private _grid: Slick.Grid<T>;
|
||||
private _handler = new Slick.EventHandler();
|
||||
private _selectedRowsLookup = {};
|
||||
private _selectedCheckBoxLookup = {};
|
||||
private _useState = false;
|
||||
|
||||
constructor(options?: ICheckboxSelectColumnOptions) {
|
||||
private _onChange = new Emitter<ICheckboxCellActionEventArgs>();
|
||||
public readonly onChange: vsEvent<ICheckboxCellActionEventArgs> = this._onChange.event;
|
||||
public index: number;
|
||||
|
||||
constructor(options?: ICheckboxSelectColumnOptions, columnIndex?: number) {
|
||||
this._options = mixin(options, defaultOptions, false);
|
||||
this.index = columnIndex ? columnIndex : 0;
|
||||
}
|
||||
|
||||
public init(grid: Slick.Grid<T>): void {
|
||||
@@ -51,6 +73,12 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
}
|
||||
|
||||
private handleSelectedRowsChanged(e: Event, args: Slick.OnSelectedRowsChangedEventArgs<T>): void {
|
||||
if (this.isCustomActionRequested()) {
|
||||
// do not assume anything for column based on row selection
|
||||
// we can emit event here later if required.
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedRows = this._grid.getSelectedRows();
|
||||
let lookup = {}, row, i;
|
||||
for (i = 0; i < selectedRows.length; i++) {
|
||||
@@ -85,7 +113,12 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
if (this._grid.getColumns()[args.cell].id === this._options.columnId) {
|
||||
// if editing, try to commit
|
||||
if (!this._grid.getEditorLock().isActive() || this._grid.getEditorLock().commitCurrentEdit()) {
|
||||
this.toggleRowSelection(args.row);
|
||||
if (this.isCustomActionRequested()) {
|
||||
this.toggleCheckBox(args.row, args.cell, true);
|
||||
}
|
||||
else {
|
||||
this.toggleRowSelection(args.row);
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
@@ -95,7 +128,12 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
if (event.equals(KeyCode.Enter)) {
|
||||
// clicking on a row select checkbox
|
||||
if (this._grid.getColumns()[args.cell].id === this._options.columnId) {
|
||||
this.toggleRowSelection(args.row);
|
||||
if (this.isCustomActionRequested()) {
|
||||
this.toggleCheckBox(args.row, args.cell, true);
|
||||
}
|
||||
else {
|
||||
this.toggleRowSelection(args.row);
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
@@ -113,7 +151,12 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
return;
|
||||
}
|
||||
|
||||
this.toggleRowSelection(args.row);
|
||||
if (this.isCustomActionRequested()) {
|
||||
this.toggleCheckBox(args.row, args.cell, false);
|
||||
}
|
||||
else {
|
||||
this.toggleRowSelection(args.row);
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
@@ -127,7 +170,30 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
}
|
||||
}
|
||||
|
||||
private toggleCheckBox(row: number, col: number, reRender: boolean): void {
|
||||
this._useState = true;
|
||||
|
||||
if (this._selectedCheckBoxLookup[row]) {
|
||||
delete this._selectedCheckBoxLookup[row];
|
||||
this._onChange.fire({ checked: false, row: row, column: col });
|
||||
} else {
|
||||
this._selectedCheckBoxLookup[row] = true;
|
||||
this._onChange.fire({ checked: true, row: row, column: col });
|
||||
}
|
||||
|
||||
if (reRender) {
|
||||
// ensure that grid reflects the change
|
||||
this._grid.invalidateRow(row);
|
||||
this._grid.render();
|
||||
}
|
||||
}
|
||||
|
||||
private handleHeaderClick(e: Event, args: Slick.OnHeaderClickEventArgs<T>): void {
|
||||
if (this.isCustomActionRequested()) {
|
||||
// do not assume action for column based on header click.
|
||||
// we can emit event here later if required.
|
||||
return;
|
||||
}
|
||||
if (!this._options.title && args.column.id === this._options.columnId && jQuery(e.target!).is('input[type="checkbox"]')) {
|
||||
// if editing, try to commit
|
||||
if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
|
||||
@@ -167,8 +233,37 @@ export class CheckboxSelectColumn<T> implements Slick.Plugin<T> {
|
||||
}
|
||||
|
||||
private checkboxSelectionFormatter(row, cell, value, columnDef: Slick.Column<T>, dataContext): string {
|
||||
if (this.isCustomActionRequested()) {
|
||||
return this.checkboxTemplateCustom(row);
|
||||
}
|
||||
|
||||
return this._selectedRowsLookup[row]
|
||||
? strings.format(checkboxTemplate, 'checked')
|
||||
: strings.format(checkboxTemplate, '');
|
||||
}
|
||||
|
||||
checkboxTemplateCustom(row: number): string {
|
||||
// use state after toggles
|
||||
if (this._useState) {
|
||||
return this._selectedCheckBoxLookup[row]
|
||||
? strings.format(checkboxTemplate, 'checked')
|
||||
: strings.format(checkboxTemplate, '');
|
||||
}
|
||||
|
||||
// use data for first time rendering
|
||||
// note: make sure Init is called before using this._grid
|
||||
let rowVal = (this._grid) ? this._grid.getDataItem(row) : null;
|
||||
if (rowVal && this._options.title && rowVal[this._options.title] === true) {
|
||||
this._selectedCheckBoxLookup[row] = true;
|
||||
return strings.format(checkboxTemplate, 'checked');
|
||||
}
|
||||
else {
|
||||
delete this._selectedCheckBoxLookup[row];
|
||||
return strings.format(checkboxTemplate, '');
|
||||
}
|
||||
}
|
||||
|
||||
private isCustomActionRequested(): boolean {
|
||||
return (this._options.actionOnCheck === ActionOnCheck.customAction);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user