Barre d'outils PAB: interface

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>

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 {

src/app/components/pab-table/pab-table.component.ts

-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";
+    }
 }