Modale pour l'édition des valeurs du tableau PAB

src/app/app.module.ts

@@ -18,6 +18,7 @@ import {
   MatListModule,
   MatCardModule,
   MatProgressBarModule,
+  MatRadioModule,
   MatTableModule,
   MatSnackBarModule,
   MatBadgeModule,
@@ -82,6 +83,7 @@ import { PabTableComponent } from "./components/pab-table/pab-table.component";
 
 import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-empty-session/dialog-confirm-empty-session.component";
 import { DialogConfirmCloseCalcComponent } from "./components/dialog-confirm-close-calc/dialog-confirm-close-calc.component";
+import { DialogEditPabComponent } from "./components/dialog-edit-pab/dialog-edit-pab.component";
 import { DialogEditParamComputedComponent } from "./components/dialog-edit-param-computed/dialog-edit-param-computed.component";
 import { DialogEditParamValuesComponent } from "./components/dialog-edit-param-values/dialog-edit-param-values.component";
 import { DialogGeneratePABComponent } from "./components/dialog-generate-pab/dialog-generate-pab.component";
@@ -127,6 +129,7 @@ const appRoutes: Routes = [
     MatListModule,
     MatMenuModule,
     MatProgressBarModule,
+    MatRadioModule,
     MatSelectModule,
     MatSidenavModule,
     MatSnackBarModule,
@@ -155,6 +158,7 @@ const appRoutes: Routes = [
     CalculatorResultsComponent,
     DialogConfirmCloseCalcComponent,
     DialogConfirmEmptySessionComponent,
+    DialogEditPabComponent,
     DialogEditParamComputedComponent,
     DialogEditParamValuesComponent,
     DialogGeneratePABComponent,
@@ -196,6 +200,7 @@ const appRoutes: Routes = [
   entryComponents: [
     DialogConfirmCloseCalcComponent,
     DialogConfirmEmptySessionComponent,
+    DialogEditPabComponent,
     DialogEditParamComputedComponent,
     DialogEditParamValuesComponent,
     DialogGeneratePABComponent,

src/app/calculators/pab/pab.en.json

@@ -3,6 +3,12 @@
     "Q": "Flow",
     "Z1": "Upstream elevation",
     "Z2": "Downstream elevation",
+    "LB": "Longueur du bassin",
+    "BB": "Largeur du bassin",
+    "PB": "Profondeur moyenne du bassin",
+    "W": "Gate opening",
+    "ZRAM": "Bottom elevation",
+    "ZRMB": "Mid-basin elevation",
     "fs_bassin": "Basin",
     "fs_cloison_aval": "Downstream wall",
     "bassin_container": "Basins",
@@ -15,5 +21,6 @@
 	"UNIT_YMOY": "m",
     "UNIT_Z": "m",
 	"UNIT_ZRAM": "m",
-	"UNIT_ZRB": "m"
+	"UNIT_ZRB": "m",
+	"UNIT_ZRMB": "m"
 }
\ No newline at end of file

src/app/calculators/pab/pab.fr.json

@@ -3,6 +3,12 @@
     "Q": "Débit",
     "Z1": "Cote amont",
     "Z2": "Cote aval",
+    "LB": "Longueur du bassin",
+    "BB": "Largeur du bassin",
+    "PB": "Profondeur moyenne du bassin",
+    "W": "Ouverture de vanne",
+    "ZRAM": "Cote de radier amont",
+    "ZRMB": "Cote de radier mi-bassin",
     "fs_bassin": "Bassin",
     "fs_cloison_aval": "Cloison aval",
     "bassin_container": "Bassins",
@@ -15,5 +21,6 @@
 	"UNIT_YMOY": "m",
     "UNIT_Z": "m",
 	"UNIT_ZRAM": "m",
-	"UNIT_ZRB": "m"
+	"UNIT_ZRB": "m",
+	"UNIT_ZRMB": "m"
 }
\ No newline at end of file

src/app/components/dialog-edit-pab/dialog-edit-pab.component.html

+<h1 mat-dialog-title [innerHTML]="uitextEditPabTitle"></h1>
+
+<form>
+
+  <div mat-dialog-content>
+
+    <!-- récap selection -->
+
+    <!-- champ à modifier -->
+    <mat-form-field class="select-form-field">
+      <mat-select [placeholder]="uitextVariable" [(value)]="variable">
+          <mat-option *ngFor="let v of availableVariables" [value]="v.value">
+              {{ v.label }}
+          </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <!-- ngDefaultControl : see https://github.com/angular/components/issues/8267 -->
+    <mat-radio-group ngDefaultControl [(ngModel)]="varAction" name="varAction">
+
+      <div class="radio-button-and-input-wrapper rbaiw-set-value">
+        <mat-radio-button value="set-value">
+          {{ uitextSetValue }}
+        </mat-radio-button>
+        <mat-form-field class="input-form-field">
+          <input matInput [(ngModel)]="valueToSet" name="valueToSet" #valueToSetRef="ngModel"
+            (keydown.enter)="onEnterPressed($event)" required pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$">
+        </mat-form-field>
+        <mat-error *ngIf="varAction === 'set-value' && valueToSetRef.invalid">
+            {{ uitextMustBeANumber }}
+        </mat-error>
+      </div>
+
+      <div class="radio-button-and-input-wrapper rbaiw-delta">
+        <mat-radio-button value="delta">
+          {{ uitextDelta }}
+        </mat-radio-button>
+        <mat-form-field class="input-form-field">
+          <input matInput [(ngModel)]="delta" name="delta" #deltaRef="ngModel"
+            (keydown.enter)="onEnterPressed($event)" required pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$">
+        </mat-form-field>
+        <mat-error *ngIf="varAction === 'delta' && deltaRef.invalid">
+            {{ uitextMustBeANumber }}
+        </mat-error>
+      </div>
+
+      <div class="radio-button-and-input-wrapper">
+        <mat-radio-button value="interpolate">
+          {{ uitextInterpolate }}
+        </mat-radio-button>
+      </div>
+
+    </mat-radio-group>
+
+  </div>
+
+  <div mat-dialog-actions [attr.align]="'end'">
+    <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
+      {{ uitextCancel }}
+    </button>
+    <button mat-raised-button type="submit" color="warn" (click)="applyValues()"
+      [disabled]="buttonDisabled(valueToSetRef, deltaRef)">
+
+      {{ uitextSave }}
+    </button>
+  </div>
+
+</form>

src/app/components/dialog-edit-pab/dialog-edit-pab.component.scss

+.mat-dialog-content {
+    margin-bottom: 2em;
+    overflow: inherit; // wtf
+}
+
+mat-form-field.select-form-field {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.radio-button-and-input-wrapper {
+    margin-bottom: .5em;
+
+    mat-radio-button {
+        width: 60%;
+    }
+
+    mat-form-field.input-form-field {
+        width: 35%;
+        margin-left: 5%;
+    }
+
+    mat-error {
+        font-size: .8em;
+        margin-top: -12px;
+        margin-bottom: 15px;
+    }
+
+    &.rbaiw-set-value, &.rbaiw-delta {
+        margin-top: -1em;
+    }
+}

src/app/components/dialog-edit-pab/dialog-edit-pab.component.ts

+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { Inject, Component } from "@angular/core";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
+
+@Component({
+    selector: "dialog-edit-pab",
+    templateUrl: "dialog-edit-pab.component.html",
+    styleUrls: [ "dialog-edit-pab.component.scss" ]
+})
+export class DialogEditPabComponent {
+
+  /** variables eligible to modification */
+  public availableVariables: any[];
+
+  /** symbols of the variables eligible to modification */
+  public availableVariableSymbols: string[];
+
+  /** variable to modify on every selected object */
+  public variable: string;
+
+  /** action to apply to the variable */
+  public varAction: string;
+
+  /** value to set to all occurrences of the variable */
+  public valueToSet: number;
+
+  /** delta to apply (add) to all occurrences of the variable */
+  public delta: number;
+
+    constructor(
+      public dialogRef: MatDialogRef<DialogEditPabComponent>,
+      private intlService: I18nService,
+      @Inject(MAT_DIALOG_DATA) public data: any
+    ) {
+      this.availableVariables = this.data.availableVariables;
+      this.availableVariableSymbols = this.availableVariables.map(av => av.value);
+      this.variable = this.availableVariableSymbols[0];
+      // default action
+      this.varAction = "set-value";
+      // example values for validation / avoiding using a placeholder
+      this.valueToSet = 1.5;
+      this.delta = -0.01;
+    }
+
+    public onEnterPressed($event) {
+      console.log("enter pressed !!");
+    }
+
+    public applyValues() {
+      console.log("Apply values !!", this.varAction, this.variable, this.valueToSet, this.delta);
+    }
+
+    public buttonDisabled(value: any, delta: any) {
+      return (
+        (this.varAction === "set-value" && ! value.valid)
+        || (this.varAction === "delta" && ! delta.valid)
+      );
+    }
+
+    public variableLabel(v: string) {
+      for (const av of this.availableVariables) {
+        if (av.value === v) {
+          return av.label;
+        }
+      }
+    }
+
+    public get uitextEditPabTitle() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_TITLE");
+    }
+
+    public get uitextVariable() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_OPTION_VARIABLE");
+    }
+
+    public get uitextSetValue() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_OPTION_SET_VALUE");
+    }
+
+    public get uitextDelta() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_OPTION_DELTA");
+    }
+
+    public get uitextInterpolate() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_OPTION_INTERPOLATE");
+    }
+
+    public get uitextSetValueInput() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_SET_VALUE_INPUT");
+    }
+
+    public get uitextDeltaInput() {
+      return this.intlService.localizeText("INFO_DIALOG_EDIT_PAB_DELTA_INPUT");
+    }
+
+    public get uitextMustBeANumber(): string {
+        return this.intlService.localizeText("ERROR_PARAM_MUST_BE_A_NUMBER");
+    }
+
+    public get uitextSave() {
+      return this.intlService.localizeText("INFO_OPTION_SAVE");
+    }
+
+    public get uitextCancel() {
+      return this.intlService.localizeText("INFO_OPTION_CANCEL");
+    }
+
+}

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

 import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
 
+import { MatDialog } from "@angular/material";
+
 import {
     Pab,
     Session,
@@ -15,6 +17,8 @@ import {
 
 import { I18nService } from "../../services/internationalisation/internationalisation.service";
 import { PabTable } from "../../formulaire/pab-table";
+import { DialogEditPabComponent } from "../dialog-edit-pab/dialog-edit-pab.component";
+import { FormulaireService } from "../../services/formulaire/formulaire.service";
 
 /**
  * The big editable data grid for calculator type "Pab" (component)
@@ -64,7 +68,9 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
     private latestClickedCell: any;
 
     public constructor(
-        private i18nService: I18nService
+        private i18nService: I18nService,
+        private formService: FormulaireService,
+        private editPabDialog: MatDialog
     ) {
         this.selectedItems = [];
     }
@@ -769,8 +775,35 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
         console.log("Remove !!!");
     }
 
+    // show modal dialog for values edition
     public showEditPab() {
-        console.log(">> Edit PAB !!");
+        if (this.selectedItems.length > 0) {
+            // list variables eligible to modification
+            const availableVariables: any[] = [];
+            for (const c of this.selectedItems) {
+                for (const p of c.parameterIterator) { // deep one
+                    if (
+                        p.visible &&
+                        ! availableVariables.map(av => av.value).includes(p.symbol)
+                    ) {
+                        availableVariables.push({
+                            label: this.formService.expandVariableNameAndUnit(CalculatorType.Pab, p.symbol),
+                            value: p.symbol
+                        });
+                    }
+                }
+            }
+            // open dialog
+            const dialogRef = this.editPabDialog.open(
+                DialogEditPabComponent,
+                {
+                    data: {
+                        availableVariables: availableVariables
+                    },
+                    disableClose: true
+                }
+            );
+        }
     }
 
     /* public ngAfterViewInit() {

src/locale/messages.en.json

@@ -58,6 +58,11 @@
     "INFO_DEVER_TITRE_COURT": "Free weir",
     "INFO_DEVER_TITRE": "Free flow weir stage-discharge laws",
     "INFO_DIALOG_COMPUTED_VALUE_TITLE": "Edit initial value",
+    "INFO_DIALOG_EDIT_PAB_TITLE": "Edit values",
+    "INFO_DIALOG_EDIT_PAB_OPTION_VARIABLE": "Variable to edit",
+    "INFO_DIALOG_EDIT_PAB_OPTION_SET_VALUE": "Fixed value",
+    "INFO_DIALOG_EDIT_PAB_OPTION_DELTA": "Delta",
+    "INFO_DIALOG_EDIT_PAB_OPTION_INTERPOLATE": "Interpolate",
     "INFO_DIALOG_EMPTY_CURRENT_SESSION": "Empty current session",
     "INFO_DIALOG_FIX_MISSING_DEPENDENCIES": "Fix missing dependencies",
     "INFO_DIALOG_FORMAT_VERSIONS_MISMATCH": "File format versions mismatch (file: %s, jalhyd: %s)",

src/locale/messages.fr.json

@@ -58,6 +58,11 @@
     "INFO_DEVER_TITRE_COURT": "Déver. dénoyés",
     "INFO_DEVER_TITRE": "Lois de déversoirs dénoyés",
     "INFO_DIALOG_COMPUTED_VALUE_TITLE": "Modifier la valeur initiale",
+    "INFO_DIALOG_EDIT_PAB_TITLE": "Modifier les valeurs",
+    "INFO_DIALOG_EDIT_PAB_OPTION_VARIABLE": "Variable à modifier",
+    "INFO_DIALOG_EDIT_PAB_OPTION_SET_VALUE": "Valeur fixe",
+    "INFO_DIALOG_EDIT_PAB_OPTION_DELTA": "Delta",
+    "INFO_DIALOG_EDIT_PAB_OPTION_INTERPOLATE": "Interpoler",
     "INFO_DIALOG_EMPTY_CURRENT_SESSION": "Vider la session courante",
     "INFO_DIALOG_FIX_MISSING_DEPENDENCIES": "Résoudre les dépendances",
     "INFO_DIALOG_FORMAT_VERSIONS_MISMATCH": "Mauvaise version du format de fichier (fichier: %s, jalhyd: %s)",