fix(material/forms): render table header as text

gnucoop · Oct 21, 2020 · 3240bfc · 3240bfc
1 parent b3eb5e7
commit 3240bfc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/material/forms/table-field.e2e.spec.ts b/src/material/forms/table-field.e2e.spec.ts
@@ -13,6 +13,14 @@ describe('ajf-table-field', () => {
     expect(await cells[8].getText()).toBe('Row 2');
   });
 
+  it('should show table header', async () => {
+    const cells = await element.all(by.tagName('td')).getWebElements();
+    cells.forEach(async cell => console.log(await cell.getText()));
+    expect(await cells[1].getText()).toBe('Label 1');
+    expect(await cells[2].getText()).toBe('Label 2');
+    expect(await cells[3].getText()).toBe('Label 3');
+  });
+
   it('should show an input on data cell click', async () => {
     const cells = await element.all(by.tagName('td')).getWebElements();
     await cells[0].click();

diff --git a/src/material/forms/table-field.html b/src/material/forms/table-field.html
@@ -9,21 +9,25 @@
         </td>
         <ng-container *ngIf="columns.length > 1">
           <td *ngFor="let c of columns[1]; let column = index">
-            <ng-container *ngIf="c|ajfGetTableCellControl as contr">
-              <ng-container *ngIf="contr != null">
-                <input *ngIf="row > 0 && contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
-                  (focusout)="contr!.show = false" type="number" [formControl]="contr.control"
-                  (keydown.tab)="goToNextCell($event, row, column)" autoFocus>
-                <ng-template #plainTextCell>
-                  <span *ngIf="row > 0; else labelCell" class="ajf-table-cell"
-                    (click)="goToCell(row, column)">{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}</span>
-                  <ng-template #labelCell>{{ contr | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}</ng-template>
-                </ng-template>
-              </ng-container>
+            <ng-container *ngIf="row == 0; else controlCell">
+              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}
             </ng-container>
+            <ng-template #controlCell>
+              <ng-container *ngIf="c|ajfGetTableCellControl as contr">
+                <ng-container *ngIf="contr != null">
+                  <input *ngIf="contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
+                    (focusout)="contr!.show = false" type="number" [formControl]="contr.control"
+                    (keydown.tab)="goToNextCell($event, row, column)" autoFocus>
+                  <ng-template #plainTextCell>
+                    <span class="ajf-table-cell"
+                      (click)="goToCell(row, column)">{{ contr.control!.value | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}</span>
+                  </ng-template>
+                </ng-container>
+              </ng-container>
+            </ng-template>
           </td>
         </ng-container>
       </tr>
     </ng-container>
   </ng-container>
-</table>
+</table>