#27 : remplacement des événements Angular émis par les select par des...

 #27 : remplacement des événements Angular émis par les select par des notifications observé -> observateur
- FormulaireNode implémente IObservable (ménage dans les classes dérivées)

src/app/components/field-set/field-set.component.html

@@ -18,7 +18,7 @@
     <param-field-line *ngIf="isInputField(p)" [param]=p (onRadio)=onRadioClick($event) (onValid)=onParamLineValid()>
     </param-field-line>
 
-    <select-field-line *ngIf="isSelectField(p)" [param]=p (selectChange)=onSelectChanged($event)>
+    <select-field-line *ngIf="isSelectField(p)" [param]=p>
     </select-field-line>
 
     <check-field-line *ngIf="isCheckField(p)" [param]=p></check-field-line>

src/app/components/field-set/field-set.component.ts

@@ -136,13 +136,6 @@ export class FieldSetComponent implements DoCheck {
     @Output()
     private onRadio = new EventEmitter<any>();
 
-    /**
-     * réception d'un événement d'un select
-     */
-    private onSelectChanged(val: SelectEntry) {
-        this.selectChange.emit(val); // on transmet au parent
-    }
-
     public get isValid() {
         return this._isValid;
     }
@@ -184,10 +177,4 @@ export class FieldSetComponent implements DoCheck {
     private onParamLineValid(event: boolean) {
         this.updateValidity();
     }
-
-    /**
-     * événément de changement d'état d'un select
-     */
-    @Output()
-    private selectChange = new EventEmitter<SelectEntry>();
 }

src/app/components/fieldset-container/fieldset-container.component.html

@@ -6,7 +6,6 @@
         <!-- bouton d'ajout d'un ouvrage -->
         <button type="button" class="btn btn-grey waves-light" mdbRippleRadius (click)="addStructure()">Ajouter un ouvrage</button>
     </div>
-    <field-set *ngFor="let fs of fieldsets" [fieldSet]=fs (selectChange)=onSelectChanged($event) (onRadio)=onRadioClick($event)
-        (onValid)=onFieldsetValid()>
+    <field-set *ngFor="let fs of fieldsets" [fieldSet]=fs (onRadio)=onRadioClick($event) (onValid)=onFieldsetValid()>
     </field-set>
 </div>
\ No newline at end of file

src/app/components/fieldset-container/fieldset-container.component.ts

@@ -13,12 +13,6 @@ export class FieldsetContainerComponent implements DoCheck {
     @Input("container")
     private _container: FieldsetContainer;
 
-    /**
-     * événément de changement d'état d'un select
-     */
-    @Output()
-    private selectChange = new EventEmitter<SelectEntry>();
-
     /**
      * liste des composants FieldSet enfants
      */
@@ -44,13 +38,6 @@ export class FieldsetContainerComponent implements DoCheck {
         this._container.addFromTemplate(this._container.templates[0].id);
     }
 
-    /**
-     * réception d'un événement d'un select
-     */
-    private onSelectChanged(val: SelectEntry) {
-        this.selectChange.emit(val); // on transmet au parent
-    }
-
     /*
      * gestion des événements clic sur les radios :
      * réception d'un message du composant enfant (field-set)

src/app/components/generic-calculator/calculator.component.html

@@ -24,10 +24,9 @@
             <!-- chapitres -->
             <ng-template ngFor let-fe [ngForOf]="formElements">
                 <field-set *ngIf="isFieldset(fe)" [style.display]="getFieldsetStyleDisplay(fe.id)" [fieldSet]=fe (onRadio)=onRadioClick($event)
-                    (selectChange)=onSelectChanged($event) (validChange)=OnFieldsetValid()></field-set>
+                    (validChange)=OnFieldsetValid()></field-set>
 
-                <fieldset-container *ngIf="isFieldsetContainer(fe)" [container]=fe (selectChange)=onSelectChanged($event) (onRadio)=onRadioClick($event)
-                    (validChange)=onFieldsetContainerValid()></fieldset-container>
+                <fieldset-container *ngIf="isFieldsetContainer(fe)" [container]=fe (onRadio)=onRadioClick($event) (validChange)=onFieldsetContainerValid()></fieldset-container>
             </ng-template>
         </div>
 

src/app/components/generic-calculator/calculator.component.ts

@@ -256,14 +256,6 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         }
     }
 
-    /**
-     * réception d'un événement d'un select
-     */
-    private onSelectChanged(val: SelectEntry) {
-        this._formulaire.resetResults();
-        this._formulaire.applyDependencies();
-    }
-
     /**
      * appelé après le 1er affichage du composant
      */

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

@@ -8,7 +8,6 @@ import { NumericalString, Message } from "jalhyd";
 import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
 import { NgParameter } from "../../formulaire/ngparam";
 import { GenericInputComponent } from "../generic-input/generic-input.component";
-import { Observer, IObservable } from "../../services/observer";
 
 @Component({
     selector: "ngparam-input",

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

@@ -13,4 +13,4 @@
             <a class="dropdown-item" *ngFor="let e of entries" [value]=e>{{entryLabel(e)}}</a>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file

src/app/formulaire/definition/concrete/form-parallel-structures.ts

@@ -7,6 +7,9 @@ import { FormDefParamToCalculate } from "../form-def-paramcalc";
 import { FormDefFixedVar } from "../form-def-fixedvar";
 import { FormComputeParallelStructures } from "../form-compute-parallel-structures";
 import { FormResultFixedVar } from "../form-result-fixedvar";
+import { FieldsetContainer } from "../../fieldset-container";
+import { FieldSet } from "../../fieldset";
+import { SelectField } from "../../select-field";
 
 export class FormulaireParallelStructure extends FormulaireDefinition {
     private _formFixedVar: FormDefFixedVar;
@@ -34,6 +37,37 @@ export class FormulaireParallelStructure extends FormulaireDefinition {
     }
 
     protected completeParse() {
+        // récupération des valeurs par défaut pour les affecter au template
+
+        // for (const n of this.allFormElements)
+        //     if (n instanceof FieldsetContainer) {
+        //         var fsc: FieldsetContainer = n;
+        //         break;
+        //     }
+
+        // if (fsc == undefined)
+        //     console.log("warning : pas de valeurs par défaut trouvées pour les ouvrages en parallèle")
+        // else {
+        //     const st = CreateStructure(StructureType.Cem88d);
+        //     for (const i in st.prms.map) {
+        //         const param = st.prms.map[i];
+
+        //         let found = false;
+        //         for (const tmpl of fsc.templates) {
+        //             for (const n of tmpl.allFormElements)
+        //                 if (n.id === param.symbol) {
+        //                     // if (n.id === param.symbol) {
+        //                     const ng = n as NgParameter;
+        //                     ng.setValue(param.v);
+        //                     found = true;
+        //                     break;
+        //                 }
+        //             if (found) break;
+        //         }
+        //     }
+        // }
+
+        this.subscribeFieldsetContainer();
     }
 
     /**
@@ -58,4 +92,37 @@ export class FormulaireParallelStructure extends FormulaireDefinition {
     public get results(): CalculatorResults[] {
         return this._formResult.results;
     }
+
+    /**
+     * abonnement en tant qu'observateur du FieldsetContainer
+     */
+    private subscribeFieldsetContainer() {
+        const n = this.getFormulaireNodeById("struct_container");
+        if (n == undefined || !(n instanceof FieldsetContainer))
+            throw new Error("l'élément 'struct_container' n'est pas du type FieldsetContainer");
+        const fsc: FieldsetContainer = n as FieldsetContainer;
+        fsc.addObserver(this);
+    }
+
+    /**
+     * abonnement en tant qu'observateur du SelectField des FieldSet contenus dans le FieldsetContainer
+     */
+    private subscribeStructureSelectFields(fs: FieldSet) {
+        for (const n of fs.allFormElements)
+            if (n instanceof SelectField)
+                n.addObserver(this);
+    }
+
+    public update(sender: any, data: any) {
+        if (sender instanceof FieldsetContainer)
+            switch (data["action"]) {
+                case "newFieldset":
+                    this.reset();
+                    this.subscribeStructureSelectFields(data["fieldset"]);
+            }
+        else if (sender instanceof SelectField) {
+            // la valeur d'un des select (type d'ouvrage, loi de débit) a changé
+            this.reset();
+        }
+    }
 }

src/app/formulaire/definition/form-compute.ts

-import { IObservable, Observable, Observer } from "../../services/observer";
 import { FormResult } from "./form-result";
 import { ParamsEquation, ComputeNode } from "jalhyd";
 import { FormulaireDefinition } from "./form-definition";
 
 export abstract class FormCompute {
-    /**
-     * implémentation par délégation de IObservable
-     */
-    private _observable: Observable;
-
     constructor(protected _formBase: FormulaireDefinition, protected _formResult: FormResult) {
-        this._observable = new Observable;
     }
 
     protected abstract getNubAndParameters(): [ComputeNode, ParamsEquation];
@@ -28,6 +21,6 @@ export abstract class FormCompute {
 
         this._formBase.notifyObservers({
             "action": "resultsUpdated",
-        });
+        }, this._formBase);
     }
-}
\ No newline at end of file
+}

src/app/formulaire/definition/form-def-fixedvar.ts

@@ -81,8 +81,7 @@ export class FormDefFixedVar {
                 newCal.radioState = ParamRadioConfig.CAL;
         }
 
-        this._formBase.resetResults();
-        this._formBase.applyDependencies();
+        this._formBase.reset();
     }
 
     /**

src/app/formulaire/definition/form-def-section.ts

@@ -33,7 +33,11 @@ export class FormDefSection implements Observer {
     }
 
     private updateSectionNodeType() {
-        this._sectionNodeType = this.getNodeTypeFromSelectField();
+        const nt = this.getNodeTypeFromSelectField();
+        if (this._sectionNodeType !== nt) {
+            this._sectionNodeType = nt;
+            this._formBase.reset();
+        }
     }
 
     public getSectionVariatedParameter(): NgParameter {

src/app/formulaire/definition/form-definition.ts

@@ -2,7 +2,6 @@ import { CalculatorType, ComputeNodeType } from "jalhyd";
 import { FormulaireElement } from "../formulaire-element";
 import { NgParameter, ParamRadioConfig } from "../ngparam";
 import { Field } from "../field";
-import { IObservable, Observer, Observable } from "../../services/observer";
 import { StringMap } from "../../stringmap";
 import { FormulaireNode } from "../formulaire-node";
 import { ApplicationSetupService } from "../../services/app-setup/app-setup.service";
@@ -18,12 +17,7 @@ import { CalculatorResults } from "../../results/calculator-results";
 /**
  * classe de base pour tous les formulaires
  */
-export abstract class FormulaireDefinition extends FormulaireNode { //implements IFormulaireDefinition {
-    /**
-     * implémentation par délégation de IObservable
-     */
-    private _observable: Observable;
-
+export abstract class FormulaireDefinition extends FormulaireNode {
     /**
      * type de calculette
      */
@@ -40,7 +34,6 @@ export abstract class FormulaireDefinition extends FormulaireNode { //implements
     ) {
         super();
         this._calcType = calcType;
-        this._observable = new Observable();
     }
 
     public get calculatorType(): CalculatorType {
@@ -211,6 +204,15 @@ export abstract class FormulaireDefinition extends FormulaireNode { //implements
         throw new Error(`Formulaire.getNodeParameterValue() : pas de paramètre ${symbol} trouvé`);
     }
 
+    /**
+     * réinitialisation du formulaire suite à un changement d'une valeur, d'une option, ... :
+     * effacement des résultats, application des dépendances, ...
+     */
+    public reset() {
+        this.resetResults();
+        this.applyDependencies();
+    }
+
     /**
      * retourne la valeur actuellement sélectionnée d'un SelectField
      * @param selectFieldId id du SelectField
@@ -241,7 +243,7 @@ export abstract class FormulaireDefinition extends FormulaireNode { //implements
             fe.applyDependencies(this);
     }
 
-    public abstract resetResults();
+    protected abstract resetResults();
     public abstract doCompute();
     public abstract get hasResults(): boolean;
     public abstract get results(): CalculatorResults[];
@@ -306,26 +308,12 @@ export abstract class FormulaireDefinition extends FormulaireNode { //implements
         throw new Error("FormulaireDefinition.clone() non implémenté");
     }
 
-    // interface IObservable
-
-    /**
-     * ajoute un observateur à la liste
-     */
-    public addObserver(o: Observer) {
-        this._observable.addObserver(o);
-    }
-
-    /**
-     * supprime un observateur de la liste
-     */
-    public removeObserver(o: Observer) {
-        this._observable.removeObserver(o);
-    }
+    // interface Observer
 
-    /**
-     * notifie un événement aux observateurs
-     */
-    public notifyObservers(data: any) {
-        this._observable.notifyObservers(data, this);
-    }
+    // update(sender: IObservable, data: any) {
+    // switch (data["action"]) {
+    //     case "resetForm":  // événement demandant une réinitialisation du formulaire (changement d'un SelectField, ...)
+    //         this.onReset();
+    // }
+    // }
 }

src/app/formulaire/fieldset-container.ts

@@ -68,6 +68,12 @@ export class FieldsetContainer extends FormulaireElement {
         this.fieldsets.push(inst);
         inst.applyDependencies(this.parentForm);
         this.updateLocalisation()
+
+        // notification de création d'un FieldSet
+        this.notifyObservers({
+            "action": "newFieldset",
+            "fieldset": inst
+        }, this);
     }
 
     public get fieldsets(): FieldSet[] {

src/app/formulaire/formulaire-node.ts

@@ -2,11 +2,12 @@ import { JalhydObject } from "jalhyd"
 
 import { FormulaireDefinition } from "./definition/form-definition";
 import { DeepFormulaireNodeIterator } from "./form-iterator/deep-node-iterator";
+import { IObservable, Observer, Observable } from "../services/observer";
 
 /**
  * représentation sous forme d'arbre du formulaire et de ses éléments
  */
-export abstract class FormulaireNode {
+export abstract class FormulaireNode implements IObservable {
     /**
      * identifiant dans le fichier de conf
      */
@@ -32,10 +33,16 @@ export abstract class FormulaireNode {
     */
     private _fromTemplate: FormulaireNode;
 
+    /**
+     * implémentation par délégation de IObservable
+     */
+    private _observable: Observable;
+
     constructor(isTmpl: boolean = false) {
         this._kids = [];
         this._uid = JalhydObject.nextUID;
         this._isTemplate = isTmpl;
+        this._observable = new Observable()
     }
 
     get id(): string {
@@ -177,4 +184,27 @@ export abstract class FormulaireNode {
     public abstract parseConfig(json: {}, data?: {});
 
     public abstract parseDependencies(json: {}, parentForm: FormulaireDefinition);
+
+    // interface IObservable
+
+    /**
+     * ajoute un observateur à la liste
+     */
+    public addObserver(o: Observer) {
+        this._observable.addObserver(o);
+    }
+
+    /**
+     * supprime un observateur de la liste
+     */
+    public removeObserver(o: Observer) {
+        this._observable.removeObserver(o);
+    }
+
+    /**
+     * notifie un événement aux observateurs
+     */
+    notifyObservers(data: any, sender?: any) {
+        this._observable.notifyObservers(data, sender);
+    }
 }

src/app/formulaire/ngparam.ts

@@ -4,7 +4,6 @@ import { InputField } from "./input-field";
 import { Dependency } from "./dependency/dependency";
 import { DependencyConditionType } from "./dependency/dependency-condition";
 import { ValueDependencyCondition } from "./dependency/value-dependency-condition";
-import { Observable, IObservable, Observer } from "../services/observer";
 import { FormulaireDefinition } from "./definition/form-definition";
 import { ApplicationSetupService } from "../services/app-setup/app-setup.service";
 
@@ -44,7 +43,7 @@ export enum ParamValueMode {
 /**
  * classe englobante de ParamDefinition (champs supplémentaires pour l'affichage, radio boutons, ...)
  */
-export class NgParameter extends InputField { // implements IObservable {
+export class NgParameter extends InputField {
     public unit: string;
     public radioConfig: ParamRadioConfig;
     public radioState: ParamRadioConfig;
@@ -75,14 +74,8 @@ export class NgParameter extends InputField { // implements IObservable {
      */
     private _valueList: number[];
 
-    /**
-     * implémentation par délégation de IObservable
-     */
-    private _observable: Observable;
-
     constructor(private _paramDef: ParamDefinition, isTmpl = false) {
         super(isTmpl);
-        this._observable = new Observable();
     }
 
     get symbol(): string {
@@ -326,27 +319,4 @@ export class NgParameter extends InputField { // implements IObservable {
     protected clone(): NgParameter {
         return new NgParameter(this._paramDef.clone());
     }
-
-    // // interface IObservable
-
-    // /**
-    //  * ajoute un observateur à la liste
-    //  */
-    // public addObserver(o: Observer) {
-    //     this._observable.addObserver(o);
-    // }
-
-    // /**
-    //  * supprime un observateur de la liste
-    //  */
-    // public removeObserver(o: Observer) {
-    //     this._observable.removeObserver(o);
-    // }
-
-    // /**
-    //  * notifie un événement aux observateurs
-    //  */
-    // public notifyObservers(data: any) {
-    //     this._observable.notifyObservers(data, this);
-    // }
 }

src/app/formulaire/select-field.ts

@@ -6,17 +6,14 @@ import { ValueDependencyCondition } from "./dependency/value-dependency-conditio
 import { StringMap } from "../stringmap";
 import { IObservable, Observable, Observer } from "../services/observer";
 
-export class SelectField extends Field implements IObservable {
+export class SelectField extends Field {
     private _entries: SelectEntry[];
 
     private _selectedEntry: SelectEntry;
 
-    private _observable: Observable;
-
     constructor(isTmpl = false) {
         super(isTmpl);
         this._entries = [];
-        this._observable = new Observable();
     }
 
     public get entries() {
@@ -36,7 +33,10 @@ export class SelectField extends Field implements IObservable {
     public setValue(v: SelectEntry) {
         if (this._selectedEntry !== v) {
             this._selectedEntry = v;
-            this.notifyObservers({ "action": "select", "value": v });
+            this.notifyObservers({
+                "action": "select",
+                "value": v
+            }, this);
         }
     }
 
@@ -93,27 +93,4 @@ export class SelectField extends Field implements IObservable {
             this.addEntry(e);
         }
     }
-
-    // interface IObservable
-
-    /**
-     * ajoute un observateur à la liste
-     */
-    public addObserver(o: Observer) {
-        this._observable.addObserver(o);
-    }
-
-    /**
-     * supprime un observateur de la liste
-     */
-    public removeObserver(o: Observer) {
-        this._observable.removeObserver(o);
-    }
-
-    /**
-     * notifie un événement aux observateurs
-     */
-    public notifyObservers(data: any) {
-        this._observable.notifyObservers(data, this);
-    }
 }