Paramètres variables: éditeur de listes de valeurs

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.html

@@ -39,12 +39,10 @@
     <div *ngIf="isListe">
         <form [formGroup]="valuesListForm">
             <mat-form-field>
-                <textarea matInput matTextareaAutosize [placeholder]="uitextListeValeurs" [ngModel]="valuesList"
-                    name="values-list" #vl="ngModel" required [pattern]="valuesListPattern"></textarea>
-                <mat-error *ngIf="vl.errors">
-                    <div *ngIf="vl.errors.required || vl.errors.pattern">
-                        {{ uitextMustBeListOfNumbers }}
-                    </div>
+                <textarea matInput matTextareaAutosize [placeholder]="uitextListeValeurs" formControlName="valuesList"
+                    [value]="valuesList" (input)="valuesList = $event.target.value"></textarea>
+                <mat-error>
+                    {{ uitextMustBeListOfNumbers }}
                     <!-- <div *ngIf="! vl.errors.required && vl.errors.jalhydModel">
                         {{ vl.errors.jalhydModel.message }}
                     </div> -->

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.scss

@@ -15,3 +15,7 @@ mat-form-field {
 .mat-dialog-content {
     overflow: hidden;
 }
+
+.decimal-separator-and-file-container {
+    margin-top: 5px;
+}

src/app/components/dialog-edit-param-values/dialog-edit-param-values.component.ts

@@ -17,13 +17,13 @@ export class DialogEditParamValuesComponent implements OnInit {
     public param: NgParameter;
 
     /** available value modes (min / max, list) */
-    public valueModes;
+    public valueModes: { value: ParamValueMode; label: string; }[];
 
     /** available decimal separators */
-    public decimalSeparators;
+    public decimalSeparators: { label: string; value: string; }[];
 
     /** current decimal separator */
-    public decimalSeparator;
+    public decimalSeparator: string;
 
     public valuesListForm: FormGroup;
 
@@ -34,13 +34,14 @@ export class DialogEditParamValuesComponent implements OnInit {
         @Inject(MAT_DIALOG_DATA) public data: any
     ) {
         this.param = data.param;
-        if (this.isListe) {
-            console.log("PARAM LIST VALUE", this.param.valueList);
-        }
 
         // an explicit ReactiveForm is required for file input component
         this.valuesListForm = this.fb.group({
-            file: [null, null]
+            file: [""],
+            valuesList: [this.valuesList, [
+                Validators.required,
+                Validators.pattern(new RegExp(this.valuesListPattern))
+            ]]
         });
 
         this.valueModes = [
@@ -66,16 +67,19 @@ export class DialogEditParamValuesComponent implements OnInit {
         this.decimalSeparator = this.decimalSeparators[0].value;
     }
 
-    /** regular expression pattern for values list validation (depends on decimal separator) */
+    /**
+     * regular expression pattern for values list validation (depends on decimal separator)
+     */
     public get valuesListPattern() {
         const escapedDecimalSeparator = (this.decimalSeparator === "." ? "\\." : this.decimalSeparator);
         const numberSubPattern = "-?([0-9]+" + escapedDecimalSeparator + ")?[0-9E]+";
         const re = numberSubPattern + "(" + this.separatorPattern + numberSubPattern + ")*";
-        // console.log("Re PAT", re);
         return re;
     }
 
-    /** accepted separator: everything but [numbers, E, +, -, decimal separator], any length */
+    /**
+     * accepted separator: everything but [numbers, E, +, -, decimal separator], any length
+     */
     public get separatorPattern() {
         return "[^0-9-+E" + this.decimalSeparator  + "]+";
     }
@@ -140,14 +144,33 @@ export class DialogEditParamValuesComponent implements OnInit {
         return this.param.valueMode === ParamValueMode.LISTE;
     }
 
+    /**
+     * renders model's numbers list as text values list (semicolon separated)
+     */
     public get valuesList() {
-        return (this.param.valueList || []).join(";");
+        let baseValue;
+        if (this.param.valueMode === ParamValueMode.LISTE) {
+            // otherwise JalHyd model complains when reading this.param.valueList
+            baseValue = this.param.valueList;
+        }
+        const ret = (baseValue || []).join(";");
+        return ret;
     }
 
+    /**
+     * injects text values list into model's numbers list
+     */
     public set valuesList(list: string) {
         const vals = [];
-        list.split(";").forEach((e) => {
+        const separatorRE = new RegExp(this.separatorPattern);
+        const parts = list.trim().split(separatorRE);
+        parts.forEach((e) => {
             if (e.length > 0) {
+                // ensure decimal separator is "." for Number()
+                if (this.decimalSeparator !== ".") {
+                    const re = new RegExp(this.decimalSeparator, "g");
+                    e = e.replace(re, ".");
+                }
                 vals.push(Number(e));
             }
         });
@@ -158,7 +181,6 @@ export class DialogEditParamValuesComponent implements OnInit {
         if (event.target.files && event.target.files.length) {
             const fr = new FileReader();
             fr.onload = () => {
-                console.log("CHARJAY", fr.result);
                 this.valuesList = String(fr.result);
             };
             fr.onerror = () => {
@@ -169,10 +191,6 @@ export class DialogEditParamValuesComponent implements OnInit {
         }
     }
 
-    public dumperr(obj) {
-        if (obj) { return Object.keys(obj).join(", "); }
-    }
-
     public onValueModeChange(event) {
         this.initVariableValues();
     }
@@ -200,10 +218,8 @@ export class DialogEditParamValuesComponent implements OnInit {
         if (this.isListe) {
             if (this.param.valueList === undefined) {
                 if (this.param.isDefined) {
-                    console.log("SET LIST", [ this.param.getValue() ]);
                     this.param.valueList = [ this.param.getValue() ];
                 } else {
-                    console.log("SET LIST", [ ]);
                     this.param.valueList = [];
                 }
             }

src/app/components/param-values/param-values.component.ts

@@ -58,7 +58,7 @@ export class ParamValuesComponent implements AfterViewInit {
         } else if (this.isListe) {
             text = this.intlService.localizeText("INFO_PARAMFIELD_PARAMVARIER_VALUES");
             const vals = this.param.valueList || [];
-            text += vals.slice(0, 20).join(";");
+            text += " " + vals.slice(0, 20).join(";");
         }
         return text;
     }

src/locale/messages.fr.json

@@ -154,7 +154,7 @@
     "INFO_PARAMFIELD_PARAMVARIER_SEPARATEUR_VIRGULE": ", (virgule)",
     "INFO_PARAMFIELD_PARAMVARIER_TITLE": "Valeurs multiples",
     "INFO_PARAMFIELD_PARAMVARIER_MODE": "Mode",
-    "INFO_PARAMFIELD_PARAMVARIER_VALUES": "Valeurs:",
+    "INFO_PARAMFIELD_PARAMVARIER_VALUES": "Valeurs :",
     "INFO_PARAMFIELD_PARAMVARIER_VALUES_FORMAT": "Liste de valeurs",
     "INFO_PARAMFIELD_PARAMVARIER_VALUES_FORMAT_ERROR": "Format incorrect; séparateurs acceptés: %s",
     "INFO_PARAMFIELD_VALEURMAXI": "À la valeur maximum",