From 925fbd9da83129f6dcb3e97f02415779068a415e Mon Sep 17 00:00:00 2001
From: schefbi <sandro.scheidt@be.ch>
Date: Fri, 16 Aug 2024 14:38:51 +0200
Subject: [PATCH] Dropdown initial empty value  #170 #171 #175

---
 app/components/input/input-dropdown.js         |  2 ++
 .../components/input/input-dropdown.hbs        | 18 ++++++++++--------
 public/locale/de-CH.js                         |  1 +
 public/locale/fr-CH.js                         |  1 +
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/components/input/input-dropdown.js b/app/components/input/input-dropdown.js
index cc3af4c7..8b1ee5cd 100644
--- a/app/components/input/input-dropdown.js
+++ b/app/components/input/input-dropdown.js
@@ -15,6 +15,8 @@ export default Component.extend({
     change(){
         let field = this.get('field');
         let currentValue = null;
+
+        document.getElementById(this.elementId).children[0].classList.remove('required');
     
         document.getElementsByName(field.id).forEach(input => {
             if(field.options.showAsRadioButtons) {
diff --git a/app/templates/components/input/input-dropdown.hbs b/app/templates/components/input/input-dropdown.hbs
index 170d95a0..1fd0639b 100644
--- a/app/templates/components/input/input-dropdown.hbs
+++ b/app/templates/components/input/input-dropdown.hbs
@@ -7,15 +7,17 @@
     {{/each}}
   </div>
 {{else}}
-  <select id="vss{{this.field.id}}" class="uk-select" name={{this.field.id}} autocomplete={{this.field.options.autocomplete}}
+  {{#if this.field.options.required}}
+  <select id="vss{{this.field.id}}" class="uk-select required" name={{this.field.id}} autocomplete={{this.field.options.autocomplete}}
+    disabled={{this.field.options.disabled}} required="">
+    <option disabled selected value>{{translate "formOptionEmpty"}}</option>
+    {{this.dropdownOptions}}
+  </select>
+    {{else}}
+      <select id="vss{{this.field.id}}" class="uk-select" name={{this.field.id}} autocomplete={{this.field.options.autocomplete}}
     disabled={{this.field.options.disabled}}>
-    {{#unless this.field.options.required}}
-      <option value=""></option>
-    {{/unless}}
+    <option value>{{translate "formOptionEmpty"}}</option>
     {{this.dropdownOptions}}
-    <!--
-    {{#each this.field.options.options as |option|}}
-      <option value={{option.Key}}>{{option.Value}}</option>
-    {{/each}}--> 
   </select>
+  {{/if}}
 {{/if}}
diff --git a/public/locale/de-CH.js b/public/locale/de-CH.js
index c4e9c761..a69e9c25 100644
--- a/public/locale/de-CH.js
+++ b/public/locale/de-CH.js
@@ -92,6 +92,7 @@ window.kursausschreibung.locale["de-CH"] = {
   "formAddressLine1Placeholder": "Musterstrasse 99",
   "formZipPlaceholder": "3000",
   "formLocationPlaceholder": "Bern",
+  "formOptionEmpty": "-- Leer --",
   "duplicateEmailError": "Die E-Mail-Adresse muss unterschiedlich sein, ansonsten kann das Formular nicht übermittelt werden.",
   "addPerson": "Weitere Person anmelden",
   "removePerson": "Letzte Person entfernen",
diff --git a/public/locale/fr-CH.js b/public/locale/fr-CH.js
index f104061a..3203747e 100644
--- a/public/locale/fr-CH.js
+++ b/public/locale/fr-CH.js
@@ -90,6 +90,7 @@ window.kursausschreibung.locale["fr-CH"] = {
     "formAddressLine1Placeholder": "Musterstrasse 99",
     "formZipPlaceholder": "3000",
     "formLocationPlaceholder": "Bern",
+    "formOptionEmpty": "-- Vide --",
     "duplicateEmailError": "L'adresse e-mail doit être différente, sinon le formulaire ne peut pas être soumis.",
     "addPerson": "Inscrire une autre personne",
     "removePerson": "Enlever la dernière personne",