ticket #37 : ParamInputComponent renommé en NgParamInputComponent et réécrit...

ticket #37 : ParamInputComponent renommé en NgParamInputComponent et réécrit en utilisant GenericInputComponent

src/app/app.module.ts

@@ -14,7 +14,7 @@ import { InternationalisationService } from "./services/internationalisation/int
 import { HttpService } from "./services/http/http.service";
 import { ApplicationSetupService } from "./services/app-setup/app-setup.service";
 import { AppComponent } from './app.component';
-import { ParamInputComponent } from './components/param-input/param-input.component';
+import { NgParamInputComponent } from './components/ngparam-input/ngparam-input.component';
 import { FieldSetComponent } from './components/field-set/field-set.component';
 import { ParamFieldLineComponent } from './components/param-field-line/param-field-line.component';
 import { SelectFieldLineComponent } from './components/select-field-line/select-field-line.component';
@@ -59,7 +59,7 @@ const appRoutes: Routes = [
   ],
   declarations: [ // composants, pipes et directives
     AppComponent,
-    ParamInputComponent,
+    NgParamInputComponent,
     FieldSetComponent,
     ParamFieldLineComponent, SelectFieldLineComponent, CheckFieldLineComponent,
     LogComponent,

src/app/components/ngparam-input/ngparam-input.component.ts

+// cf. https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
+
+import { Component, Input, forwardRef, OnInit, DoCheck, ChangeDetectorRef } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from "@angular/forms";
+
+import { ComputeNodeType, ParamDefinition, NumericalString, Message, MessageCode } from "jalhyd";
+
+import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
+import { NgParameter } from "../../formulaire/ngparam";
+import { GenericInputComponent } from "../generic-input/generic-input.component";
+
+@Component({
+    selector: "ngparam-input",
+    templateUrl: "../generic-input/generic-input.component.html"
+})
+export class NgParamInputComponent extends GenericInputComponent {
+    /**
+     * managed parameter
+     */
+    @Input('param')
+    private _paramDef: NgParameter;
+
+    constructor(private intlService: InternationalisationService) {
+        super();
+    }
+
+    protected getModelValue(): any {
+        return this._paramDef.getValue();
+    }
+
+    protected setModelValue(v: any) {
+        try {
+            this._paramDef.setValue(v);
+        }
+        catch (e) {
+            // géré par validateModelValue()
+        }
+    }
+
+    protected validateModelValue(v: any): { isValid: boolean, message: string } {
+        let msg = undefined;
+        let valid = false;
+
+        try {
+            this._paramDef.checkValue(v);
+            valid = true;
+        }
+        catch (e) {
+            if (e instanceof Message)
+                msg = this.intlService.localizeMessage(e);
+            else
+                msg = "invalid value";
+        }
+
+        return { isValid: valid, message: msg };
+    }
+
+    protected modelToUI(v: any): string {
+        return String(v);
+    }
+
+    protected validateUIValue(ui: string): { isValid: boolean, message: string } {
+        let valid: boolean = false;
+        let msg: string = undefined;
+
+        let v: NumericalString = new NumericalString(ui);
+        if (!v.isNumerical)
+            msg = "Veuillez entrer une valeur numérique";
+        else
+            valid = true;
+
+        return { isValid: valid, message: msg };
+    }
+
+    protected uiToModel(ui: string) {
+        return +ui;
+    }
+}

src/app/components/param-field-line/param-field-line.component.html

 <div class="row">
     <!-- input de saisie de la valeur -->
     <div class="col-12 col-sm-6 pt-3">
-        <param-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></param-input>
+        <ngparam-input [inputDisabled]="isInputDisabled" [param]="_param" [title]="title"></ngparam-input>
     </div>
 
     <div class="btn-group" role="group">

src/app/components/param-input/param-input.component.html

-<div class="md-form form-sm">
-    <input mdbActive type="text" id="form1" class="form-control" [disabled]="isDisabled" [ngModel]="_uiValue.uncheckedValueString"
-        (ngModelChange)="setValue($event)">
-    <label for="form1">{{_title}}</label>
-    <small class="text-danger">{{_message}}</small>
-</div>
\ No newline at end of file

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

-// cf. https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
-
-import { Component, Input, forwardRef, OnInit, DoCheck, ChangeDetectorRef } from "@angular/core";
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from "@angular/forms";
-
-import { ComputeNodeType, ParamDefinition, NumericalString, Message, MessageCode } from "jalhyd";
-
-import { InternationalisationService, LanguageCode } from "../../services/internationalisation/internationalisation.service";
-import { NgParameter } from "../../formulaire/ngparam";
-
-@Component({
-    selector: "param-input",
-    templateUrl: "./param-input.component.html",
-    providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ParamInputComponent),
-            multi: true
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => ParamInputComponent),
-            multi: true
-        }
-    ]
-})
-export class ParamInputComponent implements ControlValueAccessor, DoCheck {
-    /**
-     * enable/disable input field
-     */
-    @Input('inputDisabled')
-    private _inputDisabled: boolean;
-
-    /**
-     * managed parameter
-     */
-    @Input('param')
-    private _paramDef: NgParameter;
-
-    @Input('title')
-    private _title: string;
-
-    private _message: string;
-
-    /**
-     * flag d'affichage du titre
-     */
-    public displayTitle: boolean = false;
-
-    /**
-     * true si la modification du paramètre géré vient de l'interface utilisateur
-     * false si la modification du paramètre géré vient d'un appel du code
-     */
-    private _fromUI: boolean;
-
-    /**
-     * valeur dans le contrôle (saisie par l'utilisateur)
-     */
-    private _uiValue: NumericalString;
-
-    constructor(private changeDetector: ChangeDetectorRef, private intlService: InternationalisationService) {
-        this._uiValue = new NumericalString();
-    }
-
-    private getSfromUI(): string {
-        return this._fromUI ? " fromUI " : " fromMODEL";
-    }
-
-    private getSParam(): string {
-        return " " + this._paramDef.symbol + "=" + this._paramDef.toString()
-    }
-
-    private getSUIvalue(v: NumericalString = undefined): string {
-        if (v == undefined)
-            return "  uiValue=" + this._uiValue.toString() + "";
-
-        return "  uiValue=" + v.toString() + "";
-    }
-
-    private get uitextParamInput(): string {
-        return this.intlService.localizeText("INFO_SAISIEPARAM_TITRE");
-    }
-
-    private get isDisabled(): boolean {
-        return this._inputDisabled;
-    }
-
-    /**
-     * fonction appelée lorsque l'utilisateur fait une saisie
-     * @param event valeur du contrôle
-     */
-    private setValue(event: any) {
-        this._fromUI = true;
-        this._uiValue.value = event;
-        // this.log(this._uiValue.toString());
-        return this.validateUIValue();
-    }
-
-    /**
-     * fonction appelée lors d'un rafraîchissement de l'UI
-     */
-    ngDoCheck(): void {
-        // this.log("ngDoCheck start : " + this.getSParam() + this.getSUIvalue() + this.getSfromUI());
-
-        if (this._fromUI)
-            this.updateMessage(this._uiValue);
-        else {
-            if (this._paramDef.isDefined) {
-                this.updateMessage(new NumericalString(this._paramDef.getValue()));
-                this._uiValue.value = String(this._paramDef.getValue());
-            }
-            else
-                this.updateMessage(this._uiValue);
-        }
-
-        // this.log("ngDoCheck end : " + this.getSParam() + this.getSUIvalue());
-
-        this._fromUI = false;
-    }
-
-    private updateMessage(v: NumericalString) {
-        // this.log("updateMessage start :" + this.getSParam() + this.getSfromUI() + this.getSUIvalue(v) + "  message=" + this._message);
-
-        if (v.isNumerical) {
-            this._message = undefined;
-
-            try {
-                this._paramDef.checkValue(v.numericalValue);
-            }
-            catch (e) {
-                if (e instanceof Message)
-                    this._message = this.intlService.localizeMessage(e);
-                else
-                    this._message = "invalid value";
-            }
-        }
-        else {
-            switch (this.intlService.currentLanguage.code) {
-                case LanguageCode.FRENCH:
-                    this._message = "Veuillez entrer une valeur numérique";
-                    break;
-
-                default:
-                    this._message = "Please enter a numerical value";
-            }
-        }
-
-        // this.log("updateMessage end :" + this.getSParam() + this.getSfromUI() + this.getSUIvalue(v) + "  message=" + this._message);
-    }
-
-    private validateUIValue() {
-        // this.log("");
-        // this.log("validateValue start : val '" + this._uiValue.toString() + "'" + this.getSParam() + this.getSfromUI());
-
-        let ok: boolean = this._uiValue.isNumerical;
-        if (ok) {
-            try {
-                if (!this._paramDef.isDefined || this._paramDef.getValue() != this._uiValue.numericalValue) {
-                    this._paramDef.setValue(this._uiValue.numericalValue);
-                    this.changeDetector.detectChanges();  // provoque une détection des changements dans les contrôles
-                }
-            }
-            catch (e) {
-                ok = false;
-            }
-        }
-
-        if (!ok) {
-            // this.log("validateValue end : " + this.getSParam());
-
-            let err = {
-                rangeError: {
-                    // given: val,
-                    given: this._uiValue.toString(),
-                    max: 4,
-                    min: 0
-                }
-            };
-            return err;
-        }
-
-        // this.log("validateValue end : " + this.getSParam());
-        return null;
-    }
-
-    // private log(m: string) {
-    //     console.log("ParamInputComponent(" + this._id + ") : " + m);
-    // }
-
-    // ControlValueAccessor interface
-
-    propagateChange = (_: any) => { };
-
-    /*
-    //From ControlValueAccessor interface
-    writeValue(value: any) {
-        if (value !== this.innerValue) {
-            this.innerValue = value;
-        }
-    }
-    */
-    writeValue(value: any) {
-        // this.log("writeValue " + value);
-    }
-
-    registerOnChange(fn: any) {
-        this.propagateChange = fn;
-    }
-
-    registerOnTouched() { }
-}