#157 : add help button option on fieldset and fieldset-container

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

@@ -10,7 +10,8 @@
             "BB",
             "PB",
             "DH"
-        ]
+        ],
+        "help": "pab/cloisonsFieldset"
     },
     {
         "id": "fs_ouvrage",
@@ -19,6 +20,7 @@
         "defaultNodeType": "StructureRectangle",
         "defaultStructType": "SeuilRectangulaire",
         "defaultLoiDebit": "WeirSubmergedLarinier",
+        "help": "pab/cloisonsTemplate",
         "fields": [
             {
                 "id": "select_ouvrage",
@@ -28,9 +30,14 @@
             {
                 "id": "select_loidebit",
                 "type": "select",
-                "source": "device_loi_debit"
+                "source": "device_loi_debit",
+                "help": "pab/cloisonsSelect"
+            },
+            {
+                "id": "h1",
+                "type": "input",
+                "help": "pab/cloisonsInput"
             },
-            "h1",
             "L",
             "CdWSL",
             "CdWR",
@@ -47,7 +54,8 @@
         "type": "template_container",
         "templates": [
             "fs_ouvrage"
-        ]
+        ],
+        "help": "pab/cloisonsTemplateContainer"
     },
     {
         "type": "options",

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

@@ -2,27 +2,33 @@
     <mat-card-title>
         {{ title }}
     </mat-card-title>
-    <div *ngIf="showButtons" class="hyd-window-btns">
-        <mat-select id="add-many-children" [(value)]="childrenToAdd">
-            <mat-option *ngFor="let i of addManyOptionsList" [value]="i">
-                {{ i }}
-            </mat-option>
-        </mat-select>
-        <button type="button" mat-icon-button (click)="onAddClick()" class="add-structure" [title]="uitextAddStructure">
-            <mat-icon>add_box</mat-icon>
-        </button>
-        <button type="button" mat-icon-button (click)="onCopyClick()" class="copy-structure" [title]="uitextCopyStructure">
-            <mat-icon>content_copy</mat-icon>
-        </button>
-        |
-        <button type="button" mat-icon-button [disabled]="! enableRemoveButton" (click)="onRemoveClick()" [title]="uitextRemoveStructure">
-            <mat-icon>delete</mat-icon>
-        </button>
-        <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveUpClick()" [title]="uitextMoveStructureUp">
-            <mat-icon>arrow_upward</mat-icon>
-        </button>
-        <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveDownClick()" [title]="uitextMoveStructureDown">
-            <mat-icon>arrow_downward</mat-icon>
+    <div class="hyd-window-btns">
+        <span *ngIf="showButtons">
+            <mat-select id="add-many-children" [(value)]="childrenToAdd">
+                <mat-option *ngFor="let i of addManyOptionsList" [value]="i">
+                    {{ i }}
+                </mat-option>
+            </mat-select>
+            <button type="button" mat-icon-button (click)="onAddClick()" class="add-structure" [title]="uitextAddStructure">
+                <mat-icon>add_box</mat-icon>
+            </button>
+            <button type="button" mat-icon-button (click)="onCopyClick()" class="copy-structure" [title]="uitextCopyStructure">
+                <mat-icon>content_copy</mat-icon>
+            </button>
+            |
+            <button type="button" mat-icon-button [disabled]="! enableRemoveButton" (click)="onRemoveClick()" [title]="uitextRemoveStructure">
+                <mat-icon>delete</mat-icon>
+            </button>
+            <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveUpClick()" [title]="uitextMoveStructureUp">
+                <mat-icon>arrow_upward</mat-icon>
+            </button>
+            <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveDownClick()" [title]="uitextMoveStructureDown">
+                <mat-icon>arrow_downward</mat-icon>
+            </button>
+            <span *ngIf="enableHelpButton">|</span>
+        </span>
+        <button *ngIf="enableHelpButton" class="help-button" type="button" mat-icon-button  (click)="openHelp()" [title]="uitextOpenHelp">
+            <mat-icon>help</mat-icon>
         </button>
     </div>
 </mat-card-header>

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

@@ -24,12 +24,17 @@ mat-card-header {
 
     .hyd-window-btns {
         text-align: right;
-    
-        mat-icon {
-            cursor: pointer;
-            transform: scale(1.2);
-            margin-top: 6px;
-            margin-right: 5px;
+        position: absolute;
+        right: 1em;
+
+        button {
+            margin-top: -11px;
+            margin-right: -10px;
+            
+            mat-icon {
+                cursor: pointer;
+                transform: scale(1);
+            }
         }
     }
 }
@@ -67,6 +72,8 @@ mat-card-actions {
                     width: 26px;
                     height: 20px;
                     line-height: 20px;
+                    margin-top: 0;
+                    margin-right: 0;
 
                     mat-icon {
                         margin-top: 0;
@@ -74,6 +81,14 @@ mat-card-actions {
                         transform: scale(1);
                     }
 
+                    &.help-button {
+                        margin-left: 4px;
+
+                        mat-icon {
+                            transform: scale(0.9);
+                        }
+                    }
+
                     &.copy-structure {
                         mat-icon {
                             transform: scale(0.9); // this one is slightly bigger

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

@@ -404,4 +404,16 @@ export class FieldSetComponent implements DoCheck {
             sprintf(this.i18nService.localizeText("INFO_DEVICE_MOVED"), pos)
         );
     }
+
+    public openHelp() {
+        window.open("assets/docs-fr/calculators/" + this._fieldSet.helpLink + ".html", "_blank");
+    }
+
+    public get enableHelpButton() {
+        return this._fieldSet && this._fieldSet.helpLink;
+    }
+
+    public get uitextOpenHelp() {
+        return this.i18nService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+    }
 }

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

 <mat-card-header class="bg-accent-light">
+    <div class="hyd-window-btns">
+        <mat-icon *ngIf="enableHelpButton" (click)="openHelp()" [title]="uitextOpenHelp">
+            help
+        </mat-icon>
+    </div>
     <mat-card-title>
         {{ title }}
     </mat-card-title>

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

@@ -13,6 +13,18 @@ mat-card-header {
     padding-top: 8px;
     color: white;
 
+    .hyd-window-btns {
+        position: absolute;
+        right: 1em;
+        text-align: right;
+    
+        mat-icon {
+            cursor: pointer;
+            transform: scale(1);
+            margin-top: -2px;
+        }
+    }
+
     // Pourquoi n'est-ce pas hérité de calculator.component.scss ?
     // À cause de la surcharge de mat-card-header ci-dessus ?
     mat-card-title {

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

@@ -4,6 +4,7 @@ import { FieldsetContainer } from "../../formulaire/fieldset-container";
 import { FieldSetComponent } from "../field-set/field-set.component";
 import { FieldSet } from "../../formulaire/fieldset";
 import { FormulaireDefinition } from "../../formulaire/definition/form-definition";
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
 
 @Component({
     selector: "fieldset-container",
@@ -64,6 +65,8 @@ export class FieldsetContainerComponent implements DoCheck, AfterViewInit {
     @Output()
     protected tabPressed = new EventEmitter<any>();
 
+    public constructor(private i18nService: I18nService) {}
+
     /**
      * Ajoute un nouveau sous-nub (Structure, PabCloisons selon le cas)
      * dans un nouveau fieldset
@@ -200,4 +203,16 @@ export class FieldsetContainerComponent implements DoCheck, AfterViewInit {
     public onTabPressed(event) {
         this.tabPressed.emit(event);
     }
+
+    public openHelp() {
+        window.open("assets/docs-fr/calculators/" + this._container.helpLink + ".html", "_blank");
+    }
+
+    public get enableHelpButton() {
+        return this._container && this._container.helpLink;
+    }
+
+    public get uitextOpenHelp() {
+        return this.i18nService.localizeText("INFO_CALCULATOR_OPEN_HELP");
+    }
 }

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

@@ -457,10 +457,7 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
      * flag d'affichage du bouton d'aide
      */
     public get enableHelpButton() {
-        if (this._formulaire) {
-            return this._formulaire.helpLink !== undefined;
-        }
-        return false;
+        return this._formulaire && this._formulaire.helpLink;
     }
 
     // for "one wide column" layout

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

@@ -31,9 +31,6 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs
     /** fichier de configuration */
     private _jsonConfig: {};
 
-    /** aide en ligne */
-    private _helpLink: string;
-
     /** clé-valeurs du fichier de localisation spécifique à ce module */
     private _specificLocalisation: StringMap;
 
@@ -391,14 +388,6 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs
         }
     }
 
-    public get helpLink(): string {
-        return this._helpLink;
-    }
-
-    public set helpLink(h: string) {
-        this._helpLink = h;
-    }
-
     public isDisplayed(id: string) {
         return (<FormulaireElement>this.getFormulaireNodeById(id)).isDisplayed;
     }

src/app/formulaire/fieldset-container.ts

@@ -108,6 +108,7 @@ export class FieldsetContainer extends FormulaireElement {
 
     public parseConfig(json: {}, data?: {}) {
         this._confId = json["id"];
+        this.helpLink = json["help"];
         const templates = data as any[];
 
         const templateNames: string[] = json["templates"];

src/app/formulaire/fieldset.ts

@@ -3,7 +3,6 @@ import { CalculatorType, ComputeNodeType, ParamDefinition, LoiDebit, Props, Obse
 import { FormulaireElement } from "./formulaire-element";
 import { Field } from "./field";
 import { SelectField } from "./select-field";
-import { SelectFieldModel } from "./select-field-model";
 import { NgParameter, ParamRadioConfig } from "./ngparam";
 import { FormulaireDefinition } from "./definition/form-definition";
 import { StringMap } from "../stringmap";
@@ -264,6 +263,7 @@ export class FieldSet extends FormulaireElement implements Observer {
         this._jsonConfig = json;
 
         this._confId = json["id"];
+        this.helpLink = json["help"];
 
         const parentForm = this.parentForm as FormulaireDefinition;
         const ct: string = json["calcType"];

src/app/formulaire/formulaire-node.ts

@@ -4,6 +4,10 @@ import { JalhydObject, IObservable, Observer, Observable } from "jalhyd";
  * représentation sous forme d'arbre du formulaire et de ses éléments
  */
 export abstract class FormulaireNode implements IObservable {
+
+    /** aide en ligne */
+    public helpLink: string;
+
     /**
      * identifiant dans le fichier de conf
      */
@@ -56,6 +60,7 @@ export abstract class FormulaireNode implements IObservable {
         return this._uid;
     }
 
+
     /**
      * cherche un FormulaireNode par son id de conf
      */

src/app/formulaire/ngparam.ts

@@ -439,6 +439,7 @@ export class NgParameter extends InputField implements Observer {
 
     public parseConfig(json: {}) {
         this._confId = json["id"];
+        this.helpLink = json["help"];
         this.unit = this.paramDefinition.unit;
         this.radioConfig = this.getRadioConfig();
     }

src/app/formulaire/select-field.ts

@@ -93,6 +93,7 @@ export class SelectField extends Field {
 
     public parseConfig(field: {}, data?: {}) {
         this._confId = field["id"];
+        this.helpLink = field["help"];
         const source = field["source"];
         const nub: Nub = (this.parentForm as FormulaireDefinition).currentNub;
         // ad-hoc cases