From 7c92bbcdfedc892c849fb65d6c48181f61d95068 Mon Sep 17 00:00:00 2001
From: STEINNI <nicolas.stein@ext.ec.europa.eu>
Date: Mon, 20 Oct 2025 16:34:01 +0000
Subject: [PATCH] fixed dbl-fillOptions in bz-select

---
 app/assets/styles/app.css           | 12 +++++++++++-
 app/thirdparty/buildoz/buildoz.js   | 19 +++++++++++++------
 app/views/editors/KeyframeView.html |  5 ++---
 app/views/editors/KeyframeView.js   | 11 +++++++----
 4 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
index 396d745..4fabffe 100755
--- a/app/assets/styles/app.css
+++ b/app/assets/styles/app.css
@@ -333,6 +333,15 @@ menu[eicmenu] [menuitem]  i[class^="icon-"] {
 }
 article[eiccard] > header h1{ text-align: center; }
 
+input{ 
+    width: 100%;
+    border-radius: 1em;
+    padding-left: 1em;
+    box-sizing: border-box;
+    height: 2em;
+    background-color: #6B5;
+    border: none;
+}
 
 /* Customizations to buildoz*/
 bz-select > button{
@@ -349,4 +358,5 @@ bz-select option:hover{
 }
 
 bz-toggler div.toggle-switch span.toggle-bar { background-color: #473; }
-bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
\ No newline at end of file
+bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
+
diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js
index a145260..37b02c4 100644
--- a/app/thirdparty/buildoz/buildoz.js
+++ b/app/thirdparty/buildoz/buildoz.js
@@ -40,6 +40,7 @@ class Buildoz extends HTMLElement {
 
 class BZselect extends Buildoz {
     #value
+    #fillFromMarkup = true
 
     constructor(){
         super()
@@ -58,9 +59,12 @@ class BZselect extends Buildoz {
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
         this.options = this.querySelectorAll('option')
-        for(const opt of this.options){ 
-            opt.addEventListener('click', this.onClick.bind(this))
-            if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
+        if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
+            for(const opt of this.options){ 
+                opt.addEventListener('click', this.onClick.bind(this))
+                if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
+            }
+            this.#fillFromMarkup = false
         }
     }
     
@@ -88,7 +92,7 @@ class BZselect extends Buildoz {
         }
     }
 
-    toggle(){
+    toggle(){ 
         for(const opt of this.options){
             if(this.open) opt.classList.remove('open')
             else opt.classList.add('open')
@@ -96,7 +100,7 @@ class BZselect extends Buildoz {
         this.open = !this.open
     }
 
-    onClick(evt){
+    onClick(evt){ 
         const opt = evt.target.closest('option')
         if(opt && opt.value) this.onOption(opt.value) 
     }
@@ -108,17 +112,20 @@ class BZselect extends Buildoz {
     }
 
     addOption(value, markup){
+        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
         const opt = document.createElement('option')
         opt.setAttribute('value', value)
         opt.innerHTML = markup
         opt.addEventListener('click',this.onClick.bind(this))
         this.append(opt)
         this.options = this.querySelectorAll('option')
+        this.#fillFromMarkup = false
     }
 
     fillOptions(opts, erase = true){ 
+        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
         if(erase){
-            //this.options = this.querySelectorAll('option')
+            this.options = this.querySelectorAll('option') 
             this.options.forEach(node => { node.remove() })
             this.options = this.querySelectorAll('option')
             this.onOption('', true) // unselect last
diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html
index 3d98b40..89d2ea8 100644
--- a/app/views/editors/KeyframeView.html
+++ b/app/views/editors/KeyframeView.html
@@ -18,7 +18,6 @@
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
-            <bz-toggler></bz-toggler>
         </section>
     </article>
     <article eiccard>
@@ -27,8 +26,8 @@
         </section>
     </article>
     <article eiccard="">
-         <header><h1>Agent properties</h1></header>
-        <section>Props form</section>
+        <header><h1>Agent properties</h1></header>
+        <section data-output="agentProperties"></section>
     </article>
 
 </div>    
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js
index 8185222..21a761a 100644
--- a/app/views/editors/KeyframeView.js
+++ b/app/views/editors/KeyframeView.js
@@ -52,6 +52,7 @@ class KeyframeView extends WindozDomContent {
     }
 
     fillAgentProperties(agentProps){
+        let allFields = []
         for(const propName in agentProps){
             const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
             let component
@@ -77,16 +78,18 @@ class KeyframeView extends WindozDomContent {
                     break                    
                 case 'list':
                     component = document.createElement('bz-select')
-                    console.log('choices', agentProps[propName].choices)
-                    // component.fillOptions( agentProps[propName].choices.map(item => {
-                    //     return({ markup: `${item}`, value: item})
-                    // })) 
+                    component.fillOptions( agentProps[propName].choices.map(item => {
+                        return({ markup: `${item}`, value: item})
+                    })) 
                     break
                 default:
                     console.warn(`Unknown field type ${agentProps[propName].type}`)
             }
             fieldRow.append(component)
+            allFields.push(fieldRow)
         }
+        this.outputs.agentProperties.innerHTML=''
+        this.outputs.agentProperties.append(...allFields)
     }
 
 }