Fix #188 Utiliser la touche TAB pour passer d'un champ à l'autre

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

@@ -20,7 +20,8 @@
 
 <mat-card-content>
     <ng-template ngFor let-p [ngForOf]="fields">
-        <param-field-line *ngIf="isInputField(p)" [param]=p (radio)=onRadioClick($event) (valid)=onParamLineValid() (inputChange)=onInputChange()>
+        <param-field-line *ngIf="isInputField(p)" [param]=p (radio)=onRadioClick($event) (valid)=onParamLineValid()
+            (inputChange)=onInputChange() (tabPressed)="onTabPressed($event)">
         </param-field-line>
 
         <select-field-line *ngIf="isSelectField(p)" [_select]=p>

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

@@ -117,6 +117,10 @@ export class FieldSetComponent implements DoCheck {
     @Output()
     private radio = new EventEmitter<any>();
 
+    /** événement signalant un appui sur TAB ou SHIFT+TAB */
+    @Output()
+    protected tabPressed = new EventEmitter<any>();
+
     private hasRadioFix(): boolean {
         if (this._fieldSet.hasInputs) {
             switch (this._fieldSet.getInput(0).radioConfig) {
@@ -209,6 +213,13 @@ export class FieldSetComponent implements DoCheck {
         this.validChange.emit();
     }
 
+    /**
+     * Renvoie l'événement au composant du dessus
+     */
+    public onTabPressed(event) {
+        this.tabPressed.emit(event);
+    }
+
     public ngDoCheck() {
         this.updateValidity();
     }

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

@@ -8,6 +8,7 @@
     <field-set *ngFor="let fs of fieldsets" class="fieldset-inner" [fieldSet]=fs
         (radio)=onRadioClick($event) (validChange)=onFieldsetValid() (inputChange)=onInputChange()
         (addFieldset)=onAddFieldset($event) (removeFieldset)=onRemoveFieldset($event)
-        (moveFieldsetDown)=onMoveFieldsetDown($event) (moveFieldsetUp)=onMoveFieldsetUp($event)>
+        (moveFieldsetDown)=onMoveFieldsetDown($event) (moveFieldsetUp)=onMoveFieldsetUp($event)
+        (tabPressed)="onTabPressed($event)">
     </field-set>
 </mat-card-content>

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

@@ -60,6 +60,10 @@ export class FieldsetContainerComponent implements DoCheck, AfterViewInit {
     @Output()
     private inputChange = new EventEmitter();
 
+    /** événement signalant un appui sur TAB ou SHIFT+TAB */
+    @Output()
+    protected tabPressed = new EventEmitter<any>();
+
     private addStructure(after?: FieldSet) {
         if (after) {
             this._container.addFromTemplate(0, after.indexAsKid());
@@ -204,4 +208,11 @@ export class FieldsetContainerComponent implements DoCheck, AfterViewInit {
         const form = this._container.parent as FormulaireDefinition;
         form.moveFieldsetDown(fs);
     }
+
+    /**
+     * Renvoie l'événement au composant du dessus
+     */
+    public onTabPressed(event) {
+        this.tabPressed.emit(event);
+    }
 }

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

@@ -32,10 +32,14 @@
                 <!-- chapitres -->
                 <mat-card id="calc-card-field-sets" fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
                     <ng-template ngFor let-fe [ngForOf]="formElements">
-                        <field-set *ngIf="isFieldset(fe)" [style.display]="getFieldsetStyleDisplay(fe.id)" [fieldSet]=fe (radio)=onRadioClick($event)
-                            (validChange)=OnFieldsetValid() (inputChange)=onInputChange()></field-set>
+                        <field-set *ngIf="isFieldset(fe)" [style.display]="getFieldsetStyleDisplay(fe.id)" [fieldSet]=fe
+                            (radio)=onRadioClick($event) (validChange)=OnFieldsetValid() (inputChange)=onInputChange()
+                            (tabPressed)="onTabPressed($event)">
+                        </field-set>
 
-                        <fieldset-container *ngIf="isFieldsetContainer(fe)" [_container]=fe (radio)=onRadioClick($event) (validChange)=onFieldsetContainerValid()></fieldset-container>
+                        <fieldset-container *ngIf="isFieldsetContainer(fe)" [_container]=fe (radio)=onRadioClick($event)
+                            (validChange)=onFieldsetContainerValid() (tabPressed)="onTabPressed($event)">
+                        </fieldset-container>
                     </ng-template>
 
                     <mat-card-actions>

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

-import { Component, OnInit, DoCheck, OnDestroy, ViewChild, ViewChildren, QueryList, AfterViewChecked } from "@angular/core";
+import { Component, OnInit, DoCheck, OnDestroy, ViewChild, ViewChildren, QueryList, AfterViewChecked, ElementRef, Renderer2 } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { Observer, Session, ParamValueMode } from "jalhyd";
@@ -98,7 +98,9 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
     constructor(
         private route: ActivatedRoute,
         private router: Router,
-        private confirmCloseCalcDialog: MatDialog
+        private confirmCloseCalcDialog: MatDialog,
+        private _elementRef: ElementRef,
+        private renderer: Renderer2
     ) {
         super();
         this.intlService = ServiceFactory.instance.i18nService;
@@ -308,7 +310,11 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
                     // accumulator (valeur précédente du résultat)
                     acc,
                     // currentValue (élément courant dans le tableau)
-                    fieldset
+                    fieldset,
+                    // currentIndex (indice courant dans le tableau)
+                    currIndex,
+                    // array (tableau parcouru)
+                    array
                 ) => {
                     return acc && fieldset.isValid;
                 }
@@ -322,7 +328,11 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
                     // accumulator (valeur précédente du résultat)
                     acc,
                     // currentValue (élément courant dans le tableau)
-                    fieldsetContainer
+                    fieldsetContainer,
+                    // currentIndex (indice courant dans le tableau)
+                    currIndex,
+                    // array (tableau parcouru)
+                    array
                 ) => {
                     return acc && fieldsetContainer.isValid;
                 }
@@ -357,6 +367,43 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         this._formulaire.resetResults([]);
     }
 
+    /**
+     * Passe d'un champ de saisie à l'autre lors de l'appui sur
+     * TAB, sans passer par les autres éléments d'interface
+     */
+    public onTabPressed(event: any) {
+        // event source input id
+        const srcId = event.originalEvent.target.id;
+
+        // find all available inputs
+        const qs = "ngparam-input input.form-control";
+        let inputs: Node[] = Array.from(this._elementRef.nativeElement.querySelectorAll(qs));
+
+        // find calculated symbol if any, to exclude it from inputs list
+        let calcSymbol = "";
+        if (this._formulaire.currentNub.calculatedParam) {
+            calcSymbol = this._formulaire.currentNub.calculatedParam.symbol;
+        }
+        inputs = inputs.filter((i: any) => {
+            return i.id !== calcSymbol;
+        });
+
+        // find position among inputs list
+        const currentIndex = inputs.findIndex((i: any) => {
+            return i.id === srcId;
+        });
+
+        // focus previous / next input
+        let newIndex = currentIndex;
+        if (event.shift) {
+            newIndex = (newIndex === 0) ? (inputs.length - 1) : (newIndex - 1);
+        } else {
+            newIndex = (newIndex + 1) % inputs.length;
+        }
+        const elt = (inputs[newIndex] as HTMLElement);
+        elt.focus();
+    }
+
     public openHelp() {
         window.open("assets/docs-fr/calculators/" + this._formulaire.helpLink + "/", "_blank");
     }

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

 <mat-form-field>
     <input matInput #inputControl="ngModel" class="form-control" type="text" inputmode="numeric"
         [id]="inputId" [name]="inputId" [disabled]="isDisabled" [(ngModel)]="uiValue" [placeholder]="title"
+        (keydown.Tab)="onTabPressed($event, false)" (keydown.shift.Tab)="onTabPressed($event, true)"
         pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required>
 
     <mat-error>{{ errorMessage }}</mat-error>

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

@@ -59,6 +59,12 @@ export abstract class GenericInputComponent extends BaseComponent implements OnC
     @Output()
     protected change = new EventEmitter<any>();
 
+    /**
+     * événement signalant un appui sur TAB ou SHIFT+TAB
+     */
+    @Output()
+    protected tabPressed = new EventEmitter<any>();
+
     /**
      * valeur saisie.
      * Cette variable n'est modifiée que lorsqu'on affecte le modèle ou que l'utilisateur fait une saisie
@@ -231,6 +237,14 @@ export abstract class GenericInputComponent extends BaseComponent implements OnC
         }
     }
 
+    /**
+     * Renvoie l'événement au composant du dessus
+     */
+    public onTabPressed(event, shift: boolean) {
+        this.tabPressed.emit({ originalEvent: event, shift: shift });
+        return false; // stops event propagation
+    }
+
     private updateAll() {
         this.updateAndValidateUI();
         this.validateModel();

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

@@ -4,7 +4,8 @@
     <!-- input de saisie de la valeur -->
     <div fxFlex="1 0 120px">
         <!-- composant pour gérer le cas général (valeur numérique à saisir) -->
-        <ngparam-input [title]="param.title" [hidden]="! isRadioFixChecked" (change)="onInputChange($event)"></ngparam-input>
+        <ngparam-input [title]="param.title" [hidden]="! isRadioFixChecked"
+            (change)="onInputChange($event)" (tabPressed)="onTabPressed($event)"></ngparam-input>
  
         <!-- composant pour gérer le cas "paramètre calculé" -->
         <param-computed *ngIf="isRadioCalChecked" [title]="title" [param]="param"></param-computed>

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

@@ -127,6 +127,10 @@ export class ParamFieldLineComponent implements OnChanges {
     @Output()
     private inputChange: EventEmitter<void>;
 
+    /** événement signalant un appui sur TAB ou SHIFT+TAB */
+    @Output()
+    protected tabPressed = new EventEmitter<any>();
+
     /** true si la valeur saisie est valide */
     private _isInputValid = false;
 
@@ -266,6 +270,13 @@ export class ParamFieldLineComponent implements OnChanges {
         this.emitValidity();
     }
 
+    /**
+     * Renvoie l'événement au composant du dessus
+     */
+    public onTabPressed(event) {
+        this.tabPressed.emit(event);
+    }
+
     /**
      * émission d'un événement de validité
      */