chore: add clear filter function, so you can see everything, but the …

…tree remains intact
pennions · Jul 31, 2024 · 51be8c4 · 51be8c4
1 parent 9c67e66
commit 51be8c4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/flightkit/components/tree-navigation.js b/flightkit/components/tree-navigation.js
@@ -230,13 +230,15 @@ export class FlightkitTreeNavigation extends HTMLElement {
         }
     }
 
-    resetTree() {
+    resetTree(all = true) {
         let foundElements = this.querySelectorAll('[data-branch-values]');
 
         for (const element of foundElements) {
             element.parentElement.style.opacity = '';
             element.parentElement.classList.remove('hidden');
-            element.removeAttribute('open');
+            if (all) {
+                element.removeAttribute('open');
+            }
         }
     }
 
@@ -250,6 +252,11 @@ export class FlightkitTreeNavigation extends HTMLElement {
         element.removeAttribute('open');
     }
 
+    clearFilter() {
+        this.resetTree(false);
+        this.filter = { value: '', caseSensitive: false };
+    }
+
     filterTree() {
         let searchTimer = setTimeout(() => {
             let foundElements = this.querySelectorAll('[data-branch-values]');

diff --git a/flightkit/index.html b/flightkit/index.html
@@ -16,10 +16,6 @@
         code {
             width: fit-content;
         }
-
-        #search {
-            width: 100%;
-        }
     </style>
 </head>
 
@@ -35,9 +31,11 @@
 
             <button class="bg-gray-light" type="button" id="deselect">Deselect database tree</button>
             <button id="toggleSearch" type="button" class="bg-gray-light"> Toggle search mode</button>
+
         </div>
 
-        <input id="search" class="mt-5" type="text" placeholder="search" />
+        <div class="row gap-1 mt-5"><input id="search" type="text" placeholder="search" /> <button id="clearSearch"
+                type="button">X</button></div>
         <flk-tree-nav id="db-nav" class="mt-5" icon-set="database" comment="(" e-tree-click="clicky"
             max-depth="4"></flk-tree-nav>
     </div>
@@ -103,6 +101,11 @@
                 myDbNav.deselectTree();
             })
 
+            document.getElementById('clearSearch').addEventListener('click', () => {
+                myDbNav.clearFilter();
+                document.getElementById('search').value = ""
+            })
+
             document.getElementById('toggleSearch').addEventListener('click', () => {
                 const style = myDbNav.getAttribute('search-style');
                 if (!style || style === null) {