Merge branch 'feature/search'

aantakli · Oct 16, 2024 · 55407e7 · 55407e7
2 parents 4a2b0cc + 1292665
commit 55407e7
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git a/app/components/behaviors/behavior-graph.js b/app/components/behaviors/behavior-graph.js
@@ -80,7 +80,47 @@ export default Ember.Component.extend({
 	// ******************** Declare actions ********************
 	// actions used in the .hbs file
 	actions: {
-
+    handleInput(event) {
+      let inputValue = event.target.value;
+
+      let accordions = event.target.parentElement.getElementsByClassName("accordion");
+      for (let i = 0; i < accordions.length; i++) {
+        let accordion = accordions[i];
+        for (let j = 0; j < accordion.children.length; j++) {
+          let child = accordion.children[j];
+          if(inputValue === ""){
+            child.classList.remove('active');
+          } else {
+            child.classList.add('active');
+          }
+        }
+      }
+
+      // Declare variables
+      let filter, container, list, element, i, txtValue;
+      filter = inputValue.toUpperCase();
+      container = event.target.parentElement;
+      list = container.getElementsByClassName("node-name");
+
+      // Loop through all list items, and hide those who don't match the search query
+      for (i = 0; i < list.length; i++) {
+        element = list[i];
+        txtValue = element.textContent || element.innerText;
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+          element.parentElement.classList.add("visible");
+          let categorietext = element.parentElement.parentElement.parentElement.children[0].children[1].children[0].innerText;
+          if(categorietext === "Default Nodes"){
+            element.parentElement.style.display = "flex !important";
+            console.log(element.parentElement)
+          } else {
+            element.parentElement.style.display = "";
+          }
+        } else {
+          element.parentElement.style.display = "none";
+          element.parentElement.classList.remove("visible");
+        }
+      }
+    }
 	},
 
 	willDestroyElement() {

diff --git a/app/styles/components/behaviors/behavior-graph.css b/app/styles/components/behaviors/behavior-graph.css
@@ -87,16 +87,24 @@ div.button-group {
   padding: 0 !important;
 }
 
-  .node-container h4 {
-    height: 2.5em;
-    margin-top: 20px !important;
-    margin-bottom: 0px !important;
-    background: color-title-bg;
-    color: color-h-font;
-    font-family: "Segoe UI", monospace, Arial,sans-serif;
-    font-size: 16px;
-    padding: 10px 15px;
-  }
+.node-container h4 {
+  height: 2.5em;
+  margin-top: 20px !important;
+  margin-bottom: 0px !important;
+  background: color-title-bg;
+  color: color-h-font;
+  font-family: "Segoe UI", monospace, Arial,sans-serif;
+  font-size: 16px;
+  padding: 10px 15px;
+}
+
+:global(#searchInput) {
+  height: 2.5em;
+  margin-bottom: 0px !important;
+  font-family: "Segoe UI", monospace, Arial, sans-serif;
+  font-size: 16px;
+  padding: 10px 15px;
+}
 
 :global(.title.composite-selection),
 :global(.title.decorator-selection),

diff --git a/app/templates/components/behaviors/behavior-graph.hbs b/app/templates/components/behaviors/behavior-graph.hbs
@@ -21,6 +21,8 @@
             </select> --}}
           {{!-- </div> --}}
         </div>
+
+        <input type="text" id="searchInput" placeholder="Search for Leaf.." oninput={{action "handleInput"}}>
         <!-- Container for nodes that can be added to the graph -->
         <div class='node-container' local-class='node-container'>