diff --git a/src/app/components/pab-table/pab-table.component.html b/src/app/components/pab-table/pab-table.component.html index b68a85d56669609ca12e28023b6c4bd62701baa0..3f2722eb2aebee2de1deabf48822da91d1a216b8 100644 --- a/src/app/components/pab-table/pab-table.component.html +++ b/src/app/components/pab-table/pab-table.component.html @@ -65,12 +65,13 @@ {{ h.title }} </th> </tr> - <tr> - <th *ngFor="let col of columns" (click)="toggleSelection(col, $event)" - (mousedown)="preventCtrlClickBorder($event)" [class.selectable-cell]="isSelectable(col)" - [class.selected-cell]="isSelected(col)"> + <tr *ngFor="let col of columns"> + <th *ngFor="let cell of col.cells" (click)="toggleSelection(col, $event)" + (mousedown)="preventCtrlClickBorder($event)" [class.selectable-cell]="isSelectable(cell)" + [class.selected-cell]="isSelected(cell)" [attr.rowspan]="rowSpan(cell)" + [attr.colspan]="colSpan(cell)" [title]="cellTitle(cell)"> - {{ col.title }} + {{ cell.title }} </th> </tr> </ng-template> diff --git a/src/app/components/pab-table/pab-table.component.ts b/src/app/components/pab-table/pab-table.component.ts index 8f1e259ff76570604d766e8c4183ae82d011f190..db19cdb9de20b1232077d27a1b849ba3ea5f5d19 100644 --- a/src/app/components/pab-table/pab-table.component.ts +++ b/src/app/components/pab-table/pab-table.component.ts @@ -477,7 +477,7 @@ export class PabTableComponent implements AfterViewInit, AfterViewChecked, OnIni for (let i = 0; i < maxNbDevices; i++) { this.headers.push({ title: sprintf(this.i18nService.localizeText("INFO_PAB_CLOISON_OUVRAGE_N"), (i + 1)), - colspan: 3, + colspan: 2, selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]), selectableColumn: i }); @@ -485,43 +485,55 @@ export class PabTableComponent implements AfterViewInit, AfterViewChecked, OnIni // A. build columns set this.cols = []; + const headerRow1 = { cells: [] }; + const headerRow2 = { cells: [] }; + this.cols.push(headerRow1); + this.cols.push(headerRow2); + // 5 cols for basin - this.cols.push({ + headerRow1.cells.push({ title: this.i18nService.localizeText("INFO_PAB_NUM_BASSIN"), - selectable: bs + selectable: bs, + rowspan: 2 }); - this.cols.push({ + headerRow1.cells.push({ title: this.formService.expandVariableNameAndUnit(CalculatorType.Pab, "LB"), - selectable: bs + selectable: bs, + rowspan: 2 }); - this.cols.push({ + headerRow1.cells.push({ title: this.formService.expandVariableNameAndUnit(CalculatorType.Pab, "BB"), - selectable: bs + selectable: bs, + rowspan: 2 }); - this.cols.push({ + headerRow1.cells.push({ title: this.formService.expandVariableNameAndUnit(CalculatorType.Pab, "ZRMB"), - selectable: bs + selectable: bs, + rowspan: 2 }); - this.cols.push({ + headerRow1.cells.push({ title: this.formService.expandVariableNameAndUnit(CalculatorType.Pab, "ZRAM"), - selectable: bs + selectable: bs, + rowspan: 2 }); // no col for wall type (defined by rowspan-2 header above) // 3 cols for each device of the wall having the most devices (including downwall) for (let i = 0; i < maxNbDevices; i++) { - this.cols.push({ + const sel = this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]); + headerRow1.cells.push({ title: this.i18nService.localizeText("INFO_PAB_HEADER_TYPE"), - selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]), - selectableColumn: i + selectable: sel, + selectableColumn: i, + colspan: 2 }); - this.cols.push({ + headerRow2.cells.push({ title: this.i18nService.localizeText("INFO_PAB_HEADER_PARAMETERS"), - selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]), + selectable: sel, selectableColumn: i }); - this.cols.push({ + headerRow2.cells.push({ title: this.i18nService.localizeText("INFO_PAB_HEADER_VALUES"), - selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]), + selectable: sel, selectableColumn: i }); }