From 72899c6c054d1cda1b1779ab30f574d7dcbca7f8 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Mon, 29 Jul 2019 16:16:23 +0200
Subject: [PATCH] #157 : add help button option on fieldset and
fieldset-container
---
.../calculators/cloisons/cloisons.config.json | 16 +++++--
.../field-set/field-set.component.html | 48 +++++++++++--------
.../field-set/field-set.component.scss | 27 ++++++++---
.../field-set/field-set.component.ts | 12 +++++
.../fieldset-container.component.html | 5 ++
.../fieldset-container.component.scss | 12 +++++
.../fieldset-container.component.ts | 15 ++++++
.../calculator.component.ts | 5 +-
.../formulaire/definition/form-definition.ts | 11 -----
src/app/formulaire/fieldset-container.ts | 1 +
src/app/formulaire/fieldset.ts | 2 +-
src/app/formulaire/formulaire-node.ts | 5 ++
src/app/formulaire/ngparam.ts | 1 +
src/app/formulaire/select-field.ts | 1 +
14 files changed, 114 insertions(+), 47 deletions(-)
diff --git a/src/app/calculators/cloisons/cloisons.config.json b/src/app/calculators/cloisons/cloisons.config.json
index e8104fbd0..7295b9408 100644
--- a/src/app/calculators/cloisons/cloisons.config.json
+++ b/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",
diff --git a/src/app/components/field-set/field-set.component.html b/src/app/components/field-set/field-set.component.html
index 9e9ba53f6..cb781df18 100644
--- a/src/app/components/field-set/field-set.component.html
+++ b/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>
diff --git a/src/app/components/field-set/field-set.component.scss b/src/app/components/field-set/field-set.component.scss
index 72defe6df..d9b528ffa 100644
--- a/src/app/components/field-set/field-set.component.scss
+++ b/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
diff --git a/src/app/components/field-set/field-set.component.ts b/src/app/components/field-set/field-set.component.ts
index e12bb9d4c..eea59f37d 100644
--- a/src/app/components/field-set/field-set.component.ts
+++ b/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");
+ }
}
diff --git a/src/app/components/fieldset-container/fieldset-container.component.html b/src/app/components/fieldset-container/fieldset-container.component.html
index 0bb2ea7c2..494bf1f1e 100644
--- a/src/app/components/fieldset-container/fieldset-container.component.html
+++ b/src/app/components/fieldset-container/fieldset-container.component.html
@@ -1,4 +1,9 @@
<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>
diff --git a/src/app/components/fieldset-container/fieldset-container.component.scss b/src/app/components/fieldset-container/fieldset-container.component.scss
index bbc65715f..0a700234c 100644
--- a/src/app/components/fieldset-container/fieldset-container.component.scss
+++ b/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 {
diff --git a/src/app/components/fieldset-container/fieldset-container.component.ts b/src/app/components/fieldset-container/fieldset-container.component.ts
index e10c849a3..784034788 100644
--- a/src/app/components/fieldset-container/fieldset-container.component.ts
+++ b/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");
+ }
}
diff --git a/src/app/components/generic-calculator/calculator.component.ts b/src/app/components/generic-calculator/calculator.component.ts
index d39743855..60555c257 100644
--- a/src/app/components/generic-calculator/calculator.component.ts
+++ b/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
diff --git a/src/app/formulaire/definition/form-definition.ts b/src/app/formulaire/definition/form-definition.ts
index ebeb77d4a..ec6244f68 100644
--- a/src/app/formulaire/definition/form-definition.ts
+++ b/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;
}
diff --git a/src/app/formulaire/fieldset-container.ts b/src/app/formulaire/fieldset-container.ts
index 0884e2111..626851a2f 100644
--- a/src/app/formulaire/fieldset-container.ts
+++ b/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"];
diff --git a/src/app/formulaire/fieldset.ts b/src/app/formulaire/fieldset.ts
index 1cb63ce98..f03bb0082 100644
--- a/src/app/formulaire/fieldset.ts
+++ b/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"];
diff --git a/src/app/formulaire/formulaire-node.ts b/src/app/formulaire/formulaire-node.ts
index b1406fec9..776c0cb60 100644
--- a/src/app/formulaire/formulaire-node.ts
+++ b/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
*/
diff --git a/src/app/formulaire/ngparam.ts b/src/app/formulaire/ngparam.ts
index c10a48d45..eb25f2163 100644
--- a/src/app/formulaire/ngparam.ts
+++ b/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();
}
diff --git a/src/app/formulaire/select-field.ts b/src/app/formulaire/select-field.ts
index 07f944d09..df656ceb0 100644
--- a/src/app/formulaire/select-field.ts
+++ b/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
--
GitLab