ticket #37 : résolution de "Après l'appui sur le bouton calcul scroller l'écran vers le résultat"

src/app/calculators/generic/calculator.component.html

@@ -27,7 +27,7 @@
         <p></p>
     </div>
 </div>
-<calc-results></calc-results>
+<calc-results id="resultsComp" (contentCompleted)="onResultsCompleted()"></calc-results>
 
 <div mdbModal #confirmModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
     <div class="modal-dialog" role="document">

src/app/calculators/generic/calculator.component.ts

@@ -36,6 +36,11 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, OnDestroy, O
 
     private _subscription: Subscription; // pour souscrire aux changements d'URL envoyés par le routeur
 
+    /**
+     * true si on a cliqué sur le bouton de lancement de calcul
+     */
+    private _computeClicked: boolean;
+
     constructor(private intlService: InternationalisationService,
         private formulaireService: FormulaireService,
         private route: ActivatedRoute) {
@@ -162,6 +167,20 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, OnDestroy, O
     private doCompute() {
         this._formulaire.doCompute();
         this.resultsComponent.updateView();
+        this._computeClicked = true;
+    }
+
+    private onResultsCompleted() {
+        if (this._computeClicked) {
+            this._computeClicked = false;
+            this.scrollToResults();
+        }
+    }
+
+    private scrollToResults() {
+        const element = document.getElementById("resultsComp");
+        if (element)
+            element.scrollIntoView();
     }
 
     private getFieldsetStyleDisplay(id: string) {

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

@@ -4,4 +4,4 @@
         <section-results [style.display]="getSectionResultsStyleDisplay()"></section-results>
         <remous-results [style.display]="getRemousResultsStyleDisplay()"></remous-results>
     </div>
-</div>
\ No newline at end of file
+</div>

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

-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, Output, EventEmitter, AfterViewChecked } from "@angular/core";
 
 import { FixedVarResultsComponent } from "../../components/fixedvar-results/fixedvar-results.component";
 import { SectionResultsComponent } from "../../components/section-results/section-results.component";
@@ -9,7 +9,7 @@ import { FormulaireDefinition } from "../../formulaire/formulaire-definition";
     selector: "calc-results",
     templateUrl: "./calculator-results.component.html",
 })
-export class CalculatorResultsComponent {
+export class CalculatorResultsComponent implements AfterViewChecked {
     private _formulaire: FormulaireDefinition;
 
     /**
@@ -30,6 +30,12 @@ export class CalculatorResultsComponent {
     @ViewChild(RemousResultsComponent)
     private remousResultsComponent: RemousResultsComponent;
 
+    /**
+     * événement émis à la fin du dessin de la vue
+     */
+    @Output()
+    private contentCompleted = new EventEmitter();
+
     public set formulaire(f: FormulaireDefinition) {
         this._formulaire = f;
         if (this._formulaire == undefined) {
@@ -50,6 +56,10 @@ export class CalculatorResultsComponent {
         this.remousResultsComponent.updateView();
     }
 
+    public ngAfterViewChecked() {
+        this.contentCompleted.emit();
+    }
+
     private getFixedVarResultsStyleDisplay() {
         return this._formulaire != undefined && this._formulaire.hasFixVarResults() ? "block" : "none";
     }