diff --git a/src/app/components/pab-table/pab-table.component.html b/src/app/components/pab-table/pab-table.component.html index 11d96c74d750fcede12d32f9ae9be565b3f86117..a045ed601b3873dd0cb31916e3e2cf2604a97daa 100644 --- a/src/app/components/pab-table/pab-table.component.html +++ b/src/app/components/pab-table/pab-table.component.html @@ -6,7 +6,43 @@ <mat-card-content> - <button (click)="zpouet()">CLIKZYVOIR</button> + <!-- <button (click)="zpouet()">CLIKZYVOIR</button> --> + + <div id="pab-table-toolbar"> + <button type="button" id="edit-pab-table" mat-raised-button color="accent" + [disabled]="! enableEditPabButton" (click)="showEditPab()"> + {{ uitextEditPabTable }} + </button> + + <div class="hyd-window-btns"> + <span class="related-entity-title"> + {{ relatedEntityTitle }} + </span> + <mat-select id="add-many-children" [(value)]="childrenToAdd"> + <mat-option *ngFor="let i of addManyOptionsList" [value]="i"> + {{ i }} + </mat-option> + </mat-select> + <button type="button" mat-icon-button color="primary" [disabled]="! enableAddButton" (click)="onAddClick()"> + <mat-icon>add_box</mat-icon> + </button> + <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()"> + <mat-icon>content_copy</mat-icon> + </button> + | + <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()"> + <mat-icon>delete</mat-icon> + </button> + <button type="button" mat-icon-button color="primary" [disabled]="! enableUpButton" (click)="onMoveUpClick()"> + <mat-icon *ngIf="! selectionIsOneDevice">arrow_upward</mat-icon> + <mat-icon *ngIf="selectionIsOneDevice">arrow_back</mat-icon> + </button> + <button type="button" mat-icon-button color="primary" [disabled]="! enableDownButton" (click)="onMoveDownClick()"> + <mat-icon *ngIf="! selectionIsOneDevice">arrow_downward</mat-icon> + <mat-icon *ngIf="selectionIsOneDevice">arrow_forward</mat-icon> + </button> + </div> + </div> <p-table [columns]="cols" [value]="rows" class="pab-data-table"> @@ -59,12 +95,4 @@ </ng-template> </p-table> - <!-- <pre>{{ rows | json }}</pre> --> - - <!-- <field-set *ngFor="let fs of fieldsets" class="fieldset-inner" [fieldSet]=fs - (radio)=onRadioClick($event) (validChange)=onFieldsetValid() (inputChange)=onInputChange($event) - (addFieldset)=onAddFieldset($event) (removeFieldset)=onRemoveFieldset($event) - (moveFieldsetDown)=onMoveFieldsetDown($event) (moveFieldsetUp)=onMoveFieldsetUp($event) - (tabPressed)="onTabPressed($event)"> - </field-set> --> </mat-card-content> diff --git a/src/app/components/pab-table/pab-table.component.scss b/src/app/components/pab-table/pab-table.component.scss index ec0cd72771f33e2d88dca162818281a123e1cc39..45e4326afde01bd83f7cab40e1d29c6f04ab27e2 100644 --- a/src/app/components/pab-table/pab-table.component.scss +++ b/src/app/components/pab-table/pab-table.component.scss @@ -43,6 +43,28 @@ mat-card-content { @extend .bg-accent-verylight; } +#pab-table-toolbar { + #edit-pab-table { + float: left; + } + .related-entity-title { + vertical-align: middle; + font-weight: bold; + } + .hyd-window-btns { + text-align: right; + + #add-many-children { + width: 3em; + vertical-align: middle; + } + + button.mat-icon-button { + width: 32px; + } + } +} + .pab-data-table { ::ng-deep .ui-table.ui-widget { table { diff --git a/src/app/components/pab-table/pab-table.component.ts b/src/app/components/pab-table/pab-table.component.ts index dbb77fca4d7cb6b820b338a5ba670efd1564c2ac..31f7671585932725d487dd4beed4b3d8ff3937c4 100644 --- a/src/app/components/pab-table/pab-table.component.ts +++ b/src/app/components/pab-table/pab-table.component.ts @@ -1,6 +1,17 @@ -import { Component, Input, Output, EventEmitter, DoCheck, AfterViewInit, OnInit } from "@angular/core"; - -import { Pab, Session, PabCloisons, Props, CalculatorType, ParallelStructure, LoiDebit, StructureProperties, Cloisons, Nub } from "jalhyd"; +import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core"; + +import { + Pab, + Session, + PabCloisons, + Props, + CalculatorType, + ParallelStructure, + LoiDebit, + Cloisons, + Nub, + Structure + } from "jalhyd"; import { I18nService } from "../../services/internationalisation/internationalisation.service"; import { PabTable } from "../../formulaire/pab-table"; @@ -43,6 +54,9 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit { /** data binded to the table */ public rows: any[]; + /** number of children to add when clicking "add" or "clone" button */ + public childrenToAdd = 1; + /** items currently selected */ private selectedItems: any[]; @@ -220,7 +234,11 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit { } } this.latestClickedCell = cell; - // @TODO + + // clean list + this.selectedItems = this.selectedItems.filter(e => e !== undefined); + + // @TODO useful ? $event.preventDefault(); $event.stopPropagation(); return false; @@ -234,6 +252,10 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit { } } + public get addManyOptionsList() { + return Array(20).fill(0).map((value, index) => index + 1); + } + // DEBUG private dumpParams(n: Nub) { console.log(`---- PARAMETERS FOR NUB "${n.uid}" (${n.constructor.name}) ----`); @@ -637,6 +659,120 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit { return maxNbParams; } + /** returns true if exactly one device is selected, and nothing else */ + public get selectionIsOneDevice() { + return ( + this.selectedItems.length === 1 + && this.selectedItems[0] instanceof Structure + ); + } + + /** + * Returns true if there is at least one selected item, + * and all selected items are devices + */ + private onlyDevicesAreSelected() { + let ok = false; + if (this.selectedItems.length > 0) { + ok = true; + for (const s of this.selectedItems) { + ok = ok && (s instanceof Structure); + } + } + return ok; + } + + /** + * Returns true if there is at least one selected item, + * and all selected items are walls + */ + private onlyWallsAreSelected() { + let ok = false; + if (this.selectedItems.length > 0) { + ok = true; + for (const s of this.selectedItems) { + ok = ok && (s instanceof ParallelStructure); + } + } + return ok; + } + + public get relatedEntityTitle() { + let title = ""; + if (this.onlyDevicesAreSelected()) { + title = "Ouvrages"; + } else if (this.onlyWallsAreSelected()) { + title = "Cloisons"; + } + if (title !== "") { + title += " :"; + } + return title; + } + + public get enableAddButton() { + return this.selectedItems.length === 1; + } + + public get enableCopyButton() { + return this.selectedItems.length === 1; + } + + public get enableUpButton() { + return this.selectedItems.length === 1; + } + + public get enableDownButton() { + return this.selectedItems.length === 1; + } + + public get enableRemoveButton() { + return this.selectedItems.length === 1; + // return this.selectedItems.length > 0; // too dangerous ? or @TODO ask confirmation ? + } + + /** + * returns true if "many" objects are selected: either more than one object, + * or a wall that contains more than one device + */ + public get enableEditPabButton() { + return ( + this.selectedItems.length > 0 + + // too restrictive ? + /* this.selectedItems.length > 1 + || ( + this.selectedItems.length > 0 + && this.selectedItems[0] instanceof ParallelStructure + && this.selectedItems[0].getChildren().length > 1 + ) */ + ); + } + + public onAddClick() { + console.log("Add !!!"); + } + + public onCopyClick() { + console.log("Copy !!!"); + } + + public onMoveUpClick() { + console.log("Move up !!!"); + } + + public onMoveDownClick() { + console.log("Move down !!!"); + } + + public onRemoveClick() { + console.log("Remove !!!"); + } + + public showEditPab() { + console.log(">> Edit PAB !!"); + } + /* public ngAfterViewInit() { this.onFieldsetListChange(); this._fieldsetComponents.changes.subscribe(_ => this.onFieldsetListChange()); @@ -687,4 +823,8 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit { public onTabPressed(event) { console.log("tab pressed dans le tablo !"); } + + public get uitextEditPabTable() { + return "Modifier les valeurs"; + } }