From 1f772451383dc6da0c37350d7d0a34472205f615 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 21 Dec 2022 08:53:12 +0800
Subject: [PATCH] display results empty

---
 src/layouts/partials/no-results-found.html | 11 ++++++++++-
 src/layouts/partials/package-grid.html     | 11 +++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/layouts/partials/no-results-found.html b/src/layouts/partials/no-results-found.html
index 628e831..f27ee3d 100644
--- a/src/layouts/partials/no-results-found.html
+++ b/src/layouts/partials/no-results-found.html
@@ -1,5 +1,5 @@
 <hr>
-  <section>
+  <section id="noResult" class="no-results">
     <div class="container black-bg">
       <div class="row">
         <div class="col two-boxes-up two-boxes-down">
@@ -10,3 +10,12 @@
     </div>
   </section>
 <hr>
+
+<style>
+  .no-results {
+    display: none;
+  }
+  .no-results.show {
+    display: block;
+  }
+</style>
\ No newline at end of file
diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 913f6ff..40545eb 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -24,6 +24,7 @@
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
       </div>
+      {{- partial "no-results-found.html" }}
     </div>
   </div>
   <hr>
@@ -120,6 +121,7 @@
 
   const onSearch = debounce(() => {
     const searchInput = document.getElementById('searchTermDesktop');
+    const noResult = document.getElementById('noResult');
     if (searchInput.value) {
       const term = searchInput.value;
       const packages = getPackageThumbs();
@@ -130,16 +132,25 @@
       });
       const grid = document.getElementById('packageGrid');
       grid.textContent = '';
+      let searchCount = 0;
       for(const sp of sortedPackages) {
         const score = getMatchScore(term, sp.dataset);
         if (score > 20) {
           sp.classList.remove('hidden');
+          searchCount++;
         } else {
           sp.classList.add('hidden');
         }
         grid.appendChild(sp);
       }
+
+      if (searchCount) {
+        noResult.classList.remove('show');
+      } else {
+        noResult.classList.add('show');
+      }
     } else {
+      noResult.classList.remove('show');
       sortPackages();
     }
   }, 300);