From ae13ededfda26d80c2a8bb61468e9e0d31928ae9 Mon Sep 17 00:00:00 2001
From: Mathias Chouet <mathias.chouet@irstea.fr>
Date: Thu, 16 Apr 2020 13:22:16 +0200
Subject: [PATCH] Work on GUI for Verificateur
---
src/app/calculators/verificateur/config.json | 1 -
.../generic-select.component.html | 6 +++-
.../results-chart/chart-type.component.ts | 4 +++
.../select-field-line.component.ts | 14 ++++++++
.../elements/select-field-reference.ts | 32 +++++++++++++++----
src/app/formulaire/elements/select-field.ts | 8 ++++-
src/app/util.ts | 22 +++++++++++++
src/locale/messages.en.json | 2 ++
src/locale/messages.fr.json | 2 ++
9 files changed, 81 insertions(+), 10 deletions(-)
diff --git a/src/app/calculators/verificateur/config.json b/src/app/calculators/verificateur/config.json
index 204203e1f..5b03751ed 100644
--- a/src/app/calculators/verificateur/config.json
+++ b/src/app/calculators/verificateur/config.json
@@ -24,7 +24,6 @@
{
"type": "select",
"id": "select_species_list",
- "default": "SPECIES_1",
"source": "verificateur_species",
"multiple": true
}
diff --git a/src/app/components/generic-select/generic-select.component.html b/src/app/components/generic-select/generic-select.component.html
index dd35d4673..4d420c820 100644
--- a/src/app/components/generic-select/generic-select.component.html
+++ b/src/app/components/generic-select/generic-select.component.html
@@ -3,13 +3,17 @@
<mat-select-trigger *ngIf="isMultiple">
{{ selectedValue && selectedValue[0] ? selectedValue[0].label : '' }}
<span *ngIf="selectedValue?.length > 1" class="multiple-selection-label">
- (+ {{selectedValue.length - 1}} {{selectedValue?.length === 2 ? 'other' : 'others'}})
+ (+ {{ selectedValue.length - 1 }} {{ selectedValue?.length === 2 ? uitextAndOther : uitextAndOthers }})
</span>
</mat-select-trigger>
<mat-option *ngFor="let e of entries" [value]="e" [title]="entryLabel(e)">
{{ entryLabel(e) }}
</mat-option>
</mat-select>
+ <button mat-button *ngIf="showClearButton" matSuffix mat-icon-button
+ aria-label="Clear" (click)="selectedValue=[]; $event.stopPropagation()">
+ <mat-icon>close</mat-icon>
+ </button>
<div *ngIf="enableHelpButton" class="overlap-select">
<mat-icon id="help-select" (click)="openHelp($event)" [title]="uitextOpenHelp" color="accent">
help
diff --git a/src/app/components/results-chart/chart-type.component.ts b/src/app/components/results-chart/chart-type.component.ts
index b136874f6..7b24c7098 100644
--- a/src/app/components/results-chart/chart-type.component.ts
+++ b/src/app/components/results-chart/chart-type.component.ts
@@ -57,6 +57,10 @@ export class ChartTypeSelectComponent implements IObservable {
return false;
}
+ public get showClearButton(): boolean {
+ return false;
+ }
+
public get label() {
return this.intlService.localizeText("INFO_PARAMFIELD_CHART_TYPE");
}
diff --git a/src/app/components/select-field-line/select-field-line.component.ts b/src/app/components/select-field-line/select-field-line.component.ts
index b660c875c..f2c43341d 100644
--- a/src/app/components/select-field-line/select-field-line.component.ts
+++ b/src/app/components/select-field-line/select-field-line.component.ts
@@ -97,13 +97,27 @@ export class SelectFieldLineComponent implements OnInit {
return false;
}
+ public get showClearButton(): boolean {
+ return this.isMultiple && this.selectedValue && ! (Array.isArray(this.selectedValue) && this.selectedValue.length === 0);
+ }
+
public get uitextOpenHelp() {
return this.i18nService.localizeText("INFO_CALCULATOR_OPEN_HELP");
}
+ public get uitextAndOther() {
+ return this.i18nService.localizeText("INFO_SELECT_MULTIPLE_AND_OTHER");
+ }
+
+ public get uitextAndOthers() {
+ return this.i18nService.localizeText("INFO_SELECT_MULTIPLE_AND_OTHERS");
+ }
+
// called every time we navigate to the module
ngOnInit(): void {
+ console.log("> ngOnInit()", this.selectId);
if (this._select instanceof SelectFieldReference) {
+ console.log(">> updateEntries() !", this.selectId);
this._select.updateEntries();
}
}
diff --git a/src/app/formulaire/elements/select-field-reference.ts b/src/app/formulaire/elements/select-field-reference.ts
index 924d1a869..c4024feea 100644
--- a/src/app/formulaire/elements/select-field-reference.ts
+++ b/src/app/formulaire/elements/select-field-reference.ts
@@ -2,6 +2,8 @@ import { SelectField } from "./select-field";
import { SelectEntry } from "./select-entry";
import { FormulaireNode } from "./formulaire-node";
+import { arraysAreEqual } from "../../util";
+
/**
* A select field that populates itself with references to
* available objects (for ex. Nub or ParamDefinition)
@@ -46,7 +48,7 @@ export abstract class SelectFieldReference extends SelectField {
// if no entry is available anymore, unset value
if (this.entries.length === 0) {
if (this.multiple) {
- super.setValue([ undefined ]);
+ super.setValue([]);
} else {
super.setValue(undefined);
}
@@ -64,16 +66,24 @@ export abstract class SelectFieldReference extends SelectField {
* Updates selectedValue; notifies observers only if
* value.id has changed
*/
- public setValue(v: SelectEntry) {
+ public setValue(v: SelectEntry | SelectEntry[]) {
const previousSelectedEntry = this._selectedEntry;
this._selectedEntry = v;
- if (
+ // if value changed
+ let valueChanged = (
! previousSelectedEntry
- || ( // @TODO manage multiple values
+ || (
! Array.isArray(previousSelectedEntry)
+ && ! Array.isArray(v)
&& previousSelectedEntry.id !== v.id
)
- ) {
+ || (
+ Array.isArray(previousSelectedEntry)
+ && Array.isArray(v)
+ && arraysAreEqual(previousSelectedEntry, v, "id", true)
+ )
+ );
+ if (valueChanged) {
this.notifySelectValueChanged();
}
}
@@ -94,7 +104,11 @@ export abstract class SelectFieldReference extends SelectField {
for (const e of this._entries) {
if (e.id === id) {
found = true;
- this.setValue(e);
+ if (this._multiple) {
+ this.setValue([ e ]);
+ } else {
+ this.setValue(e);
+ }
}
}
if (! found) {
@@ -105,7 +119,11 @@ export abstract class SelectFieldReference extends SelectField {
protected setDefaultValue() {
// default to first available entry if any
if (this._entries.length > 0) {
- this.setValue(this._entries[0]);
+ if (this._multiple) {
+ this.setValue([ this._entries[0] ]);
+ } else {
+ this.setValue(this._entries[0]);
+ }
} else {
// notify observers that no value is selected anymore
this.notifySelectValueChanged();
diff --git a/src/app/formulaire/elements/select-field.ts b/src/app/formulaire/elements/select-field.ts
index 5fdf96889..4818e5709 100644
--- a/src/app/formulaire/elements/select-field.ts
+++ b/src/app/formulaire/elements/select-field.ts
@@ -67,7 +67,11 @@ export class SelectField extends Field {
public addEntry(e: SelectEntry) {
this._entries.push(e);
if (! this._selectedEntry) {
- this.setValue(e);
+ if (this._multiple) {
+ this.setValue([ e ]);
+ } else {
+ this.setValue(e);
+ }
}
}
@@ -207,9 +211,11 @@ export class SelectField extends Field {
}
break;
+ // possible values depend on Session
case "verificateur_species":
// add UIDs of all Espece type Nubs in the session
const especeNubs = Session.getInstance().getAllNubs().filter((element) => element.calcType === CalculatorType.Espece);
+ console.log("especeNubs", especeNubs);
for (const en of especeNubs) {
this.addEntry(new SelectEntry(en.uid, en.uid, "Espèce personnalisée : " + en.uid));
}
diff --git a/src/app/util.ts b/src/app/util.ts
index 6f5719bc5..cfc9ca3af 100644
--- a/src/app/util.ts
+++ b/src/app/util.ts
@@ -161,3 +161,25 @@ export function generateValuesCombination(
return formula(nub, vals);
}
}
+
+export function arraysAreEqual(arrayA: any[], arrayB: any[], property?: string, sort = false): boolean {
+ if (sort) {
+ arrayA.sort((a, b) => a-b);
+ arrayB.sort((a, b) => a-b);
+ }
+ let equal = true;
+ if (arrayA.length === arrayB.length) {
+ for (let i=0; i < arrayA.length; i++) {
+ const eA = arrayA[i];
+ const eB = arrayB[i];
+ if (property === undefined) {
+ equal = equal && (eA === eB);
+ } else {
+ equal = equal && (eA[property] === eB[property]);
+ }
+ }
+ } else {
+ equal = false;
+ }
+ return equal;
+}
diff --git a/src/locale/messages.en.json b/src/locale/messages.en.json
index ade6d6943..fb4e4605e 100644
--- a/src/locale/messages.en.json
+++ b/src/locale/messages.en.json
@@ -472,6 +472,8 @@
"INFO_RESULTS_EXPORT_AS_SPREADSHEET": "Export as XLSX",
"INFO_SECTIONPARAMETREE_TITRE_COURT": "Param. section",
"INFO_SECTIONPARAMETREE_TITRE": "Parametric section",
+ "INFO_SELECT_MULTIPLE_AND_OTHER": "other",
+ "INFO_SELECT_MULTIPLE_AND_OTHERS": "others",
"INFO_SETUP_ENABLE_HOTKEYS": "Enable keyboard shortcuts",
"INFO_SETUP_ENABLE_EMPTY_FIELDS": "Create new calculators with empty fields (no default values)",
"INFO_SETUP_ENABLE_NOTIFICATIONS": "Enable on-screen notifications",
diff --git a/src/locale/messages.fr.json b/src/locale/messages.fr.json
index 021a098f1..da9489786 100644
--- a/src/locale/messages.fr.json
+++ b/src/locale/messages.fr.json
@@ -473,6 +473,8 @@
"INFO_RESULTS_EXPORT_AS_SPREADSHEET": "Exporter en XLSX",
"INFO_SECTIONPARAMETREE_TITRE_COURT": "Sec. param.",
"INFO_SECTIONPARAMETREE_TITRE": "Section paramétrée",
+ "INFO_SELECT_MULTIPLE_AND_OTHER": "autre",
+ "INFO_SELECT_MULTIPLE_AND_OTHERS": "autres",
"INFO_SETUP_ENABLE_HOTKEYS": "Activer les raccourcis clavier",
"INFO_SETUP_ENABLE_EMPTY_FIELDS": "Créer les nouveaux modules avec des champs vides (aucune valeur par défaut)",
"INFO_SETUP_ENABLE_NOTIFICATIONS": "Activer les notifications à l'écran",
--
GitLab