From 51be8c43222345d621b3b7be446890c83fe92c44 Mon Sep 17 00:00:00 2001
From: Jelmer Veen <jelmerveen@pennions.com>
Date: Wed, 31 Jul 2024 15:05:35 +0200
Subject: [PATCH] chore: add clear filter function, so you can see everything,
 but the tree remains intact

---
 flightkit/components/tree-navigation.js | 11 +++++++++--
 flightkit/index.html                    | 13 ++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/flightkit/components/tree-navigation.js b/flightkit/components/tree-navigation.js
index d21c52a..4e8ae44 100644
--- 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
index dcf4a25..3aa0cec 100644
--- 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) {