update select to load js.

typerefinery-ai · Jun 20, 2024 · 62b1c94 · 62b1c94
1 parent 4c09f1f
commit 62b1c94
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 26 deletions.
diff --git a/...n/resources/apps/typerefinery/components/stix/forms/fields/select/clientlibs/behaviour.js b/...n/resources/apps/typerefinery/components/stix/forms/fields/select/clientlibs/behaviour.js
@@ -8,6 +8,6 @@ window.Typerefinery.Components.Stix.Forms.Select = Typerefinery.Components.Stix.
     "use strict";
 
     //init and watch for new components
-    componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
+    componentsNs.watchDOMForComponent(`${ns.selectorComponent}${ns.selectorInitNot}`, ns.init);
 
 })(jQuery, window.Typerefinery.Components.Stix.Forms.Select, window.Typerefinery.Components, document, window);
diff --git a/...n/resources/apps/typerefinery/components/stix/forms/fields/select/clientlibs/functions.js b/...n/resources/apps/typerefinery/components/stix/forms/fields/select/clientlibs/functions.js
@@ -111,10 +111,21 @@ window.Typerefinery.Components.Stix.Forms.Select.Instances = Typerefinery.Compon
     ns.init = async ($component) => {
         console.group("select init");
         const componentConfig = componentNs.getComponentConfig($component);
+        console.log("componentConfig", componentConfig);
         if(componentConfig.multipleSelection) {
             $component.attr('multiple', 'true');
         }
 
+        if (!componentConfig.id) {
+          console.log("$component",$component);
+          console.log("$component.html()",$component.html());
+          console.log("componentConfig",componentConfig);
+          console.log("componentConfig.id",componentConfig.id);
+          console.error("component id is required");
+          console.groupEnd();
+          return
+        }
+
 
         console.log("componentConfig.id",componentConfig.id);
         console.log("component select",$component.get(0));
@@ -124,36 +135,70 @@ window.Typerefinery.Components.Stix.Forms.Select.Instances = Typerefinery.Compon
         const defaultSelectedOptions = ns.getDefaultOptionsSelected(componentConfig.defaultSelectedOptions);
 
         if(componentConfig.readOptionsFromDataSource) {
-          console.log("loading options from data source");
-          var optionsList = await ns.getOptionsFromDataSource(componentConfig);
-          console.log("data source list", optionsList);
-          ns.addOptionsToSelect($component, defaultSelectedOptions, optionsList, componentConfig.keyNameInOptionList, componentConfig.keyNameInOptionList, componentConfig.labelNameInOptionList);
-          console.log($component.html());
+          console.log("loading options from data source", componentConfig.readOptionsFromDataSource);
+          console.groupEnd();
+          await ns.getOptionsFromDataSource(componentConfig).then((optionsList) => {
+
+            console.group("select init, resuming after loading options from data source");
+            console.log("componentConfig", componentConfig);
+            console.log("id", componentConfig.id);
+            console.log("data source list", optionsList);
+            ns.addOptionsToSelect($component, defaultSelectedOptions, optionsList, componentConfig.keyNameInOptionList, componentConfig.keyNameInOptionList, componentConfig.labelNameInOptionList);
+            console.log($component.html());
+            console.log("loaded options");
+
+            console.log("init choices");
+            console.log("init choices for", $component.get(0));
+
+            selectInstances[componentConfig.id] = new Choices($component.get(0), {
+                removeItemButton: true,
+                maxItemCount: componentConfig.maxSelection || -1,
+                allowHTML: false,
+                shouldSort: true,
+                loadingText: 'Loading...',
+                itemSelectText: 'Press to select',
+                uniqueItemText: 'Only unique values can be added',
+                addItemText: (value) => {
+                  return `Press Enter to add <b>"${value}"</b>`;
+                },
+            }); 
+
+            console.groupEnd();
+
+          });
+
         } else {
           console.log("loading options from config");
           if(componentConfig.selectOptions && Array.isArray(componentConfig.selectOptions)) {
             console.log("config options list", componentConfig.selectOptions)
             ns.addOptionsToSelect($component, defaultSelectedOptions, componentConfig.selectOptions, "value", "label");
           }
+          console.log("loaded options");
+
+          console.log("init choices");
+
+          if ($component.get(0)) {
+
+            selectInstances[componentConfig.id] = new Choices($component.get(0), {
+                removeItemButton: true,
+                maxItemCount: componentConfig.maxSelection || -1,
+                allowHTML: false,
+                shouldSort: true,
+                loadingText: 'Loading...',
+                itemSelectText: 'Press to select',
+                uniqueItemText: 'Only unique values can be added',
+                addItemText: (value) => {
+                  return `Press Enter to add <b>"${value}"</b>`;
+                },
+            }); 
+
+          } else {
+            console.error("component not found");
+          }
+
+          console.groupEnd();
         }
-        console.log("loaded options");
-
-        console.log("init choices");
-
-        selectInstances[componentConfig.id] = new Choices($component.get(0), {
-            removeItemButton: true,
-            maxItemCount: componentConfig.maxSelection || -1,
-            allowHTML: false,
-            shouldSort: true,
-            loadingText: 'Loading...',
-            itemSelectText: 'Press to select',
-            uniqueItemText: 'Only unique values can be added',
-            addItemText: (value) => {
-              return `Press Enter to add <b>"${value}"</b>`;
-            },
-        }); 
-
-        console.groupEnd();
+
     }
 
 

diff --git a/...kend/src/main/resources/apps/typerefinery/components/stix/forms/fields/select/select.html b/...kend/src/main/resources/apps/typerefinery/components/stix/forms/fields/select/select.html
@@ -14,7 +14,7 @@
     limitations under the License.
 */-->
 <sly data-sly-use.model="ai.typerefinery.websight.models.components.forms.Select">
-  <div class="${model.componentClassNames}" type="${model.inputType}" component="stix-${model.componentName}">
+  <div class="${model.componentClassNames}" type="${model.inputType}" component="${model.componentName}-input">
     <sly data-sly-use.template="./variant.html" data-sly-call="${template.variant @ model=model}">
     </sly>
   </div>

diff --git a/...end/src/main/resources/apps/typerefinery/components/stix/forms/fields/select/variant.html b/...end/src/main/resources/apps/typerefinery/components/stix/forms/fields/select/variant.html
@@ -15,7 +15,7 @@
 */-->
 <template data-sly-template.variant="${ @ model }">
   <select 
-    component="${model.componentName}"
+    component="stix-${model.componentName}"
     isInput="true"
     id="${model.id}" 
     type="${model.inputType}"