#157 : add help button option on select and input

src/app/calculators/cloisons/cloisons.config.json

@@ -33,12 +33,12 @@
                 "source": "device_loi_debit",
                 "help": "pab/cloisonsSelect"
             },
+            "h1",
             {
-                "id": "h1",
+                "id": "L",
                 "type": "input",
                 "help": "pab/cloisonsInput"
             },
-            "L",
             "CdWSL",
             "CdWR",
             "CdGR",

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

@@ -4,5 +4,11 @@
         (keydown.Tab)="onTabPressed($event, false)" (keydown.shift.Tab)="onTabPressed($event, true)"
         pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required>
 
+    <div *ngIf="enableHelpButton" class="overlap-input">
+        <mat-icon (click)="openHelp($event)" [title]="uitextOpenHelp" color="accent">
+            help
+        </mat-icon>
+    </div>
+
     <mat-error>{{ errorMessage }}</mat-error>
 </mat-form-field>

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

@@ -4,4 +4,9 @@
             {{ entryLabel(e) }}
         </mat-option>
     </mat-select>
+    <div *ngIf="enableHelpButton" class="overlap-select">
+        <mat-icon (click)="openHelp($event)" [title]="uitextOpenHelp" color="accent">
+            help
+        </mat-icon>
+    </div>
 </mat-form-field>

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

@@ -20,4 +20,16 @@ mat-form-field {
             font-size: 1em;
         }
     }
+
+    .overlap-input {
+        position: absolute;
+        right: 0;
+        text-align: right;
+        top: 0;
+    
+        mat-icon {
+            cursor: pointer;
+            transform: scale(0.9);
+        }
+    }
 }

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

@@ -112,4 +112,19 @@ export class NgParamInputComponent extends GenericInputComponent implements Obse
     public ngOnDestroy() {
         this._paramDef.removeObserver(this);
     }
+
+    public openHelp($event: any) {
+        window.open("assets/docs-fr/calculators/" + this._model.helpLink + ".html", "_blank");
+        $event.preventDefault();
+        $event.stopPropagation();
+        return false;
+    }
+
+    public get enableHelpButton() {
+        return this._model && this._model.helpLink;
+    }
+
+    public get uitextOpenHelp() {
+        return this.intlService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+    }
 }

src/app/components/param-computed/param-computed.component.scss

@@ -15,7 +15,7 @@
         .param-computed-more {
             position: absolute;
             bottom: 0;
-            right: 0;
+            right: -7px;
         }
 
         ::ng-deep .mat-form-field-label {

src/app/components/param-values/param-values.component.scss

@@ -15,7 +15,7 @@
         .param-values-more {
             position: absolute;
             bottom: 0;
-            right: 0;
+            right: -7px;
         }
 
         ::ng-deep .mat-form-field-label {

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

@@ -21,4 +21,16 @@ mat-form-field {
             font-size: 1em;
         }
     }
+
+    .overlap-select {
+        position: absolute;
+        right: 20px;
+        text-align: right;
+        top: 2px;
+    
+        mat-icon {
+            cursor: pointer;
+            transform: scale(0.9);
+        }
+    }
 }

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

@@ -2,6 +2,7 @@ import { Component, Input } from "@angular/core";
 
 import { SelectField } from "../../formulaire/select-field";
 import { SelectEntry } from "../../formulaire/select-entry";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
 
 @Component({
     selector: "select-field-line",
@@ -14,6 +15,8 @@ export class SelectFieldLineComponent {
     @Input()
     private _select: SelectField;
 
+    public constructor(private i18nService: I18nService) {}
+
     public get selectId() {
         return this._select.id;
     }
@@ -44,4 +47,19 @@ export class SelectFieldLineComponent {
             return "";
         }
     }
+
+    public openHelp($event: any) {
+        window.open("assets/docs-fr/calculators/" + this._select.helpLink + ".html", "_blank");
+        $event.preventDefault();
+        $event.stopPropagation();
+        return false;
+    }
+
+    public get enableHelpButton() {
+        return this._select && this._select.helpLink;
+    }
+
+    public get uitextOpenHelp() {
+        return this.i18nService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+    }
 }