From f92b86e3b6bf0f9190e0777d2c7b0f70a715fae2 Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Mon, 15 Jan 2018 11:30:34 +0100
Subject: [PATCH] =?UTF-8?q?ticket=20#37=20:=20ParamInputComponent=20renomm?=
=?UTF-8?q?=C3=A9=20en=20NgParamInputComponent=20et=20r=C3=A9=C3=A9crit=20?=
=?UTF-8?q?en=20utilisant=20GenericInputComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/app.module.ts | 4 +-
.../ngparam-input/ngparam-input.component.ts | 78 +++++++
.../param-field-line.component.html | 2 +-
.../param-input/param-input.component.html | 6 -
.../param-input/param-input.component.ts | 211 ------------------
5 files changed, 81 insertions(+), 220 deletions(-)
create mode 100644 src/app/components/ngparam-input/ngparam-input.component.ts
delete mode 100644 src/app/components/param-input/param-input.component.html
delete mode 100644 src/app/components/param-input/param-input.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 421f4a801..45e68d2f0 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/ngparam-input/ngparam-input.component.ts b/src/app/components/ngparam-input/ngparam-input.component.ts
new file mode 100644
index 000000000..adfaea812
--- /dev/null
+++ b/src/app/components/ngparam-input/ngparam-input.component.ts
@@ -0,0 +1,78 @@
+// 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;
+ }
+}
diff --git a/src/app/components/param-field-line/param-field-line.component.html b/src/app/components/param-field-line/param-field-line.component.html
index cdb8f8274..2dcc686ee 100644
--- a/src/app/components/param-field-line/param-field-line.component.html
+++ b/src/app/components/param-field-line/param-field-line.component.html
@@ -1,7 +1,7 @@
<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">
diff --git a/src/app/components/param-input/param-input.component.html b/src/app/components/param-input/param-input.component.html
deleted file mode 100644
index 472ce2a3e..000000000
--- a/src/app/components/param-input/param-input.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<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
diff --git a/src/app/components/param-input/param-input.component.ts b/src/app/components/param-input/param-input.component.ts
deleted file mode 100644
index 1b16d3a64..000000000
--- a/src/app/components/param-input/param-input.component.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-// 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() { }
-}
--
GitLab