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 <amomidi@microsoft.com>

extensions/import/src/wizard/api/models.ts

@@ -30,3 +30,5 @@ export interface ColumnMetadata {
 	primaryKey: boolean;
 	nullable: boolean;
 }
+
+export type ColumnMetadataArray = (string | number | boolean)[];

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
 		});
-
-
 	}
-
 }

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 {

src/sql/workbench/browser/modelComponents/declarativeTable.component.html

@@ -0,0 +1,26 @@
+<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" [style.width]="getWidth()" [attr.aria-label]="ariaLabel">
+	<thead>
+		<ng-container *ngFor="let column of columns; let c = index;">
+		<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles" role="columnheader">
+			{{column.displayName}}
+			<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)" (onChange)="onHeaderCheckBoxChanged($event,c)" label="" ></checkbox>
+		</th>
+		</ng-container>
+	</thead>
+		<ng-container *ngIf="data">
+			<ng-container *ngFor="let row of data;let r = index;">
+				<tr class="declarative-table-row">
+					<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
+						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)" [attr.aria-label]="getAriaLabel(r, c)" [ngStyle]="columns[c].rowCssStyles">
+							<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)" [enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"></checkbox>
+							<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></select-box>
+							<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></editable-select-box>
+							<input-box *ngIf="isInputBox(c)" [value]="cellData" (onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
+							<ng-container *ngIf="isLabel(c)" >{{cellData}}</ng-container>
+							<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData)" [descriptor]="getItemDescriptor(cellData)" [modelStore]="modelStore"></model-component-wrapper>
+						</td>
+					</ng-container>
+				</tr>
+			</ng-container>
+		</ng-container>
+	</table>

src/sql/workbench/browser/modelComponents/declarativeTable.component.ts

@@ -28,31 +28,7 @@ export enum DeclarativeDataType {
 
 @Component({
 	selector: 'modelview-declarativeTable',
-	template: `
+	templateUrl: decodeURI(require.toUrl('./declarativeTable.component.html'))
-	<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" [style.width]="getWidth()" [attr.aria-label]="ariaLabel">
-	<thead>
-		<ng-container *ngFor="let column of columns;">
-		<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles">{{column.displayName}}</th>
-		</ng-container>
-	</thead>
-		<ng-container *ngIf="data">
-			<ng-container *ngFor="let row of data;let r = index">
-				<tr class="declarative-table-row">
-					<ng-container *ngFor="let cellData of row;let c = index">
-						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)" [attr.aria-label]="getAriaLabel(r, c)" [ngStyle]="columns[c].rowCssStyles">
-							<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)" [enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"></checkbox>
-							<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></select-box>
-							<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></editable-select-box>
-							<input-box *ngIf="isInputBox(c)" [value]="cellData" (onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
-							<ng-container *ngIf="isLabel(c)" >{{cellData}}</ng-container>
-							<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData)" [descriptor]="getItemDescriptor(cellData)" [modelStore]="modelStore"></model-component-wrapper>
-						</td>
-					</ng-container>
-				</tr>
-			</ng-container>
-		</ng-container>
-	</table>
-	`
 })
 export default class DeclarativeTableComponent extends ContainerBase<any> implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
@@ -79,6 +55,11 @@ export default class DeclarativeTableComponent extends ContainerBase<any> 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<any> 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<any> 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,

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;
+}