From a9848a7a96dad8e8929c38e68cc85e38b1f15643 Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Fri, 26 Jun 2020 19:02:59 -0700 Subject: [PATCH] Added check all nulls to modify column Page (#10683) (#10751) * -Added check all null checkbox * Modified declarative table to add check all columns in the column header * -changed to using existing methods for firing events. * -changed table height to auto -center aligned data in table cell -Check all generates event for only changed values * -changes column header from text to column header (#10787) * This fixes the weird angular stuff - we need to do this in every other component * -added changes made by amir for dom object tracking -added automatic checkall detection. -made text-align center in table cells * -fixed styling issues and issue with checkboxes * -Removed unsued function Co-authored-by: Amir Omidi --- extensions/import/src/wizard/api/models.ts | 2 + .../src/wizard/pages/modifyColumnsPage.ts | 14 ++--- src/sql/azdata.proposed.d.ts | 2 + .../declarativeTable.component.html | 26 +++++++++ .../declarativeTable.component.ts | 57 ++++++++++--------- .../media/declarativeTable.css | 7 +++ 6 files changed, 74 insertions(+), 34 deletions(-) create mode 100644 src/sql/workbench/browser/modelComponents/declarativeTable.component.html diff --git a/extensions/import/src/wizard/api/models.ts b/extensions/import/src/wizard/api/models.ts index e30f30fb7a..0d98fba37d 100644 --- a/extensions/import/src/wizard/api/models.ts +++ b/extensions/import/src/wizard/api/models.ts @@ -30,3 +30,5 @@ export interface ColumnMetadata { primaryKey: boolean; nullable: boolean; } + +export type ColumnMetadataArray = (string | number | boolean)[]; diff --git a/extensions/import/src/wizard/pages/modifyColumnsPage.ts b/extensions/import/src/wizard/pages/modifyColumnsPage.ts index 9d96d5c5e0..00f0f3eb48 100644 --- a/extensions/import/src/wizard/pages/modifyColumnsPage.ts +++ b/extensions/import/src/wizard/pages/modifyColumnsPage.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as azdata from 'azdata'; -import { ColumnMetadata } from '../api/models'; +import { ColumnMetadata, ColumnMetadataArray } from '../api/models'; import { ImportPage } from '../api/importPage'; import * as constants from '../../common/constants'; @@ -121,14 +121,13 @@ export class ModifyColumnsPage extends ImportPage { } private async populateTable() { - let data: any[][] = []; + let data: ColumnMetadataArray[] = []; this.model.proseColumns.forEach((column) => { data.push(ModifyColumnsPage.convertMetadata(column)); }); this.table.updateProperties({ - height: 400, columns: [{ displayName: constants.columnNameText, valueType: azdata.DeclarativeDataType.string, @@ -144,17 +143,16 @@ export class ModifyColumnsPage extends ImportPage { displayName: constants.primaryKeyText, valueType: azdata.DeclarativeDataType.boolean, width: '100px', - isReadOnly: false + isReadOnly: false, + showCheckAll: true }, { displayName: constants.allowNullsText, valueType: azdata.DeclarativeDataType.boolean, isReadOnly: false, - width: '100px' + width: '100px', + showCheckAll: true }], data: data }); - - } - } diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index 48760b3adf..08a74a31bb 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -100,6 +100,8 @@ declare module 'azdata' { headerCssStyles?: { [key: string]: string }; rowCssStyles?: { [key: string]: string }; ariaLabel?: string; + showCheckAll?: boolean; + isChecked?: boolean; } export enum DeclarativeDataType { diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html new file mode 100644 index 0000000000..e0fa7f2e3a --- /dev/null +++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + +
+ {{column.displayName}} + +
+ + + + + {{cellData}} + +
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts index 4f8905fc68..12a5184bbe 100644 --- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts +++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts @@ -28,31 +28,7 @@ export enum DeclarativeDataType { @Component({ selector: 'modelview-declarativeTable', - template: ` - - - - - - - - - - - - - - - -
{{column.displayName}}
- - - - - {{cellData}} - -
- ` + templateUrl: decodeURI(require.toUrl('./declarativeTable.component.html')) }) export default class DeclarativeTableComponent extends ContainerBase implements IComponent, OnDestroy, AfterViewInit { @Input() descriptor: IComponentDescriptor; @@ -79,6 +55,11 @@ export default class DeclarativeTableComponent extends ContainerBase implem this.baseDestroy(); } + public isHeaderChecked(colIdx: number): boolean { + let column: azdata.DeclarativeTableColumn = this.columns[colIdx]; + return column.isChecked; + } + public isCheckBox(colIdx: number): boolean { let column: azdata.DeclarativeTableColumn = this.columns[colIdx]; return column.valueType === DeclarativeDataType.boolean; @@ -105,6 +86,31 @@ export default class DeclarativeTableComponent extends ContainerBase implem public onCheckBoxChanged(e: boolean, rowIdx: number, colIdx: number): void { this.onCellDataChanged(e, rowIdx, colIdx); + if (this.columns[colIdx].showCheckAll) { + if (e) { + for (let rowIdx = 0; rowIdx < this.data.length; rowIdx++) { + if (!this.data[rowIdx][colIdx]) { + return; + } + } + } + this.columns[colIdx].isChecked = e; + this._changeRef.detectChanges(); + } + } + + public onHeaderCheckBoxChanged(e: boolean, colIdx: number): void { + this.columns[colIdx].isChecked = e; + this.data.forEach((row, rowIdx) => { + if (row[colIdx] !== e) { + this.onCellDataChanged(e, rowIdx, colIdx); + } + }); + this._changeRef.detectChanges(); + } + + public trackByFnCols(index: number, item: any): any { + return index; } public onSelectBoxChanged(e: ISelectData | string, rowIdx: number, colIdx: number): void { @@ -126,7 +132,6 @@ export default class DeclarativeTableComponent extends ContainerBase implem private onCellDataChanged(newValue: any, rowIdx: number, colIdx: number): void { this.data[rowIdx][colIdx] = newValue; - this.data = this.data; let newCellData: azdata.TableCell = { row: rowIdx, column: colIdx, diff --git a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css index 1869063f43..9eba631d91 100644 --- a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css +++ b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css @@ -19,3 +19,10 @@ padding: 5px; border: 1px solid; } + +.declarative-table-cell>checkbox { + float: left; + margin: 0 auto; + width: 100%; + text-align: center; +}