From 3e609701d34dcaf20e7c65a611b48badeda3f8ad Mon Sep 17 00:00:00 2001
From: "francois.grand" <francois.grand@irstea.fr>
Date: Fri, 19 Jan 2018 11:17:05 +0100
Subject: [PATCH] =?UTF-8?q?cr=C3=A9ation=20d'un=20composant=20g=C3=A9n?=
 =?UTF-8?q?=C3=A9rique=20de=20gestion=20de=20liste=20d=C3=A9roulante=20(Ge?=
 =?UTF-8?q?nericSelectComponent)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../generic-select.component.html             |  8 +++
 .../generic-select.component.ts               | 58 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/app/components/generic-select/generic-select.component.html
 create mode 100644 src/app/components/generic-select/generic-select.component.ts

diff --git a/src/app/components/generic-select/generic-select.component.html b/src/app/components/generic-select/generic-select.component.html
new file mode 100644
index 000000000..58262b7c2
--- /dev/null
+++ b/src/app/components/generic-select/generic-select.component.html
@@ -0,0 +1,8 @@
+<div class="btn-group" dropdown (click)="onSelect($event)">
+    <button dropdownToggle class="btn btn-primary dropdown-toggle waves-light my-1" type="button" mdbRippleRadius>
+        {{currentLabel}}
+    </button>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=entryValue(e)>{{entryLabel(e)}}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/generic-select/generic-select.component.ts b/src/app/components/generic-select/generic-select.component.ts
new file mode 100644
index 000000000..3c0c0b311
--- /dev/null
+++ b/src/app/components/generic-select/generic-select.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+
+import { SelectField, } from "../../formulaire/select-field";
+import { SelectEntry } from "../../formulaire/select-entry";
+import { FormulaireService } from "../../services/formulaire/formulaire.service";
+
+/*
+  exemple de template :
+  <div class="btn-group col-12 col-sm-9" dropdown (click)="onSelect($event)">
+    <button dropdownToggle class="btn btn-primary dropdown-toggle waves-light my-1" type="button" mdbRippleRadius>
+        {{currentLabel}}
+    </button>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" *ngFor="let e of entries" [value]=e.value>{{e.label}}</a>
+    </div>
+  </div>
+*/
+
+export abstract class GenericSelectComponent {
+    // valeur actuellement sélectionnée
+    // la valeur est le code non affiché repérant une entrée de la liste (cf. [value] dans le templace)
+    private _selectedValue: any;
+
+    /**
+     * selected value event
+     */
+    @Output()
+    private selectChange = new EventEmitter<string>();
+
+    private get currentLabel(): string {
+        if (this._selectedValue != undefined)
+            for (let e of this.entries)
+                if (this.entryValue(e) == this._selectedValue)
+                    return this.entryLabel(e);
+
+        return "<no selection>";
+    }
+
+    private onSelect(event: any) {
+        this._selectedValue = event.target.value;
+        this.selectChange.emit(this._selectedValue);
+    }
+
+    /**
+     * liste des objets sélectionnables
+     */
+    protected abstract get entries(): any[];
+
+    /**
+     * calcule la "valeur" d'une entrée
+     */
+    protected abstract entryValue(entry: any): string;
+
+    /**
+     * calcule l'étiquette d'une entrée (ce qui est affiché dans la liste déroulante)
+     */
+    protected abstract entryLabel(entry: any): string;
+}
-- 
GitLab