Work on GUI for Verificateur

src/app/calculators/verificateur/config.json

@@ -24,7 +24,6 @@
             {
                 "type": "select",
                 "id": "select_species_list",
-                "default": "SPECIES_1",
                 "source": "verificateur_species",
                 "multiple": true
             }

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

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");
     }

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();
         }
     }

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();

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);
+            }
         }
     }
 
@@ -205,9 +209,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));
                 }

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;
+}

src/locale/messages.en.json

@@ -450,6 +450,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",

src/locale/messages.fr.json

@@ -450,6 +450,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",