declarative table improvement (#15024)

This commit is contained in:
Alan Ren
2021-04-07 15:27:47 -07:00
committed by GitHub
parent a7a6918b1a
commit 6a55c402a4
5 changed files with 39 additions and 21 deletions

View File

@@ -6,7 +6,7 @@
[ngStyle]="column.headerCssStyles"
[attr.aria-label]="getHeaderAriaLabel(c)">
{{column.displayName}}
<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)"
<checkbox *ngIf="headerCheckboxVisible(c)" [checked]="isHeaderChecked(c)"
[aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
label=""></checkbox>
</th>
@@ -23,7 +23,7 @@
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"
role="gridcell">
<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
[enabled]="isControlEnabled(r, c)" [checked]="isChecked(r,c)"
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
</checkbox>
<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)"

View File

@@ -70,9 +70,18 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
this.baseDestroy();
}
public headerCheckboxVisible(colIdx: number): boolean {
return this.columns[colIdx].showCheckAll && this.isCheckBox(colIdx);
}
public isHeaderChecked(colIdx: number): boolean {
let column: azdata.DeclarativeTableColumn = this.columns[colIdx];
return column.isChecked;
for (const row of this.data) {
const cellData = row[colIdx];
if (cellData.value === false && cellData.enabled !== false) {
return false;
}
}
return true;
}
public isCheckBox(colIdx: number): boolean {
@@ -80,9 +89,10 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
return column.valueType === DeclarativeDataType.boolean;
}
public isControlEnabled(colIdx: number): boolean {
let column: azdata.DeclarativeTableColumn = this.columns[colIdx];
return !column.isReadOnly;
public isControlEnabled(rowIdx: number, colIdx: number): boolean {
const cellData = this.data[rowIdx][colIdx];
const column: azdata.DeclarativeTableColumn = this.columns[colIdx];
return !column.isReadOnly && cellData.enabled !== false;
}
private isLabel(colIdx: number): boolean {
@@ -108,22 +118,14 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
this.onCellDataChanged(e, rowIdx, colIdx);
// If all of the rows in that column are now checked, let's update the header.
if (this.columns[colIdx].showCheckAll) {
if (e) {
for (let rowIdx = 0; rowIdx < this.data.length; rowIdx++) {
if (this.data[rowIdx][colIdx].value === false) {
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].value !== e) {
const cellData = row[colIdx];
if (cellData.value !== e && cellData.enabled !== false) {
this.onCellDataChanged(e, rowIdx, colIdx);
}
});