ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change tables to make them work for our scenario (#12193)

Browse Source 
* Change tables to make them work for our scenario

* Comments & deprecate API

* Disable selections by default
This commit is contained in:
Amir Omidi
2020-09-11 13:44:19 -07:00
committed by GitHub
parent 58d3b969a2
commit 61ceb72cea
12 changed files with 253 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/sql/workbench/browser/modelComponents/declarativeTable.component.html
View File

@@ -1,26 +1,45 @@
<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" [style.width]="getWidth()" [attr.aria-label]="ariaLabel">
<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>
<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 *ngIf="data.length > 0">
<ng-container *ngFor="let row of data;let r = index;">
<tr class="declarative-table-row" [class.selected]="isRowSelected(r)">
<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]="mergeCss(columns[c].rowCssStyles, cellData.style)">
<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
</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.value"
(onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
<span *ngIf="isLabel(c)" (click)="onCellClick(r)">
{{cellData.value}}
</span>
<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData)"
[descriptor]="getItemDescriptor(cellData)" [modelStore]="modelStore">
</model-component-wrapper>
</td>
</ng-container>
</tr>
</ng-container>
</table>
</ng-container>
</table>