Implement #85

playlegendold · Mar 28, 2021 · 5415fd7 · 5415fd7
1 parent 7e31976
commit 5415fd7
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 0 deletions.
diff --git a/assets/scripts/collection.js b/assets/scripts/collection.js
@@ -238,7 +238,23 @@ export const newCollection = (selector, type, setup) => {
     });
   };
 
+  const applyFilter = (filterStr) => {
+    const multiWhitespacesRgx = new RegExp(/\s+/g);
+    filterStr = filterStr || "";
+    const cleanFilterStr = filterStr.trim().replace(multiWhitespacesRgx).toLowerCase();
+
+    collection.data.forEach((element) => {
+      const row = element.row;
+      const cleanName = row.name.trim().replace(multiWhitespacesRgx).toLowerCase();
+
+      element.visible = cleanName.includes(cleanFilterStr);
+    });
+
+    render();
+  }
+
   return {
+    applyFilter,
     setData,
     updateItem,
     deleteItem,

diff --git a/assets/styles/components.css b/assets/styles/components.css
@@ -7,3 +7,4 @@
 @import "./components/managementNav.css";
 @import "./components/errorBox.css";
 @import "./components/card.css";
+@import "./components/searchbar.css";
diff --git a/assets/styles/components/searchbar.css b/assets/styles/components/searchbar.css
@@ -0,0 +1,15 @@
+.searchbar-wrapper {
+
+}
+
+.searchbar {
+    border: none;
+    text-decoration: none;
+    outline: none;
+}
+
+.searchbar:hover, .searchbar:focus {
+    border: none;
+    text-decoration: none;
+    outline: none;
+  }
diff --git a/views/heightmaps.ejs b/views/heightmaps.ejs
@@ -14,6 +14,10 @@
         <div class="mb-4 flex justify-between items-center">
             <div class="schematic-quick-actions"></div>
             <div>
+                <span class="mr-4 border-solid border border-gray-300 px-1 py-1 rounded-lg">
+                  <input type="text" class="searchbar"/>
+                  <i class="fas fa-search"></i>
+                </span>
                 <button class="rounded-lg inline-flex items-center bg-green-600 text-white hover:bg-green-700 py-2 px-2 md:px-4"
                         onclick="WEL.heightmaps.create(heightmapCategories)">
                     <span>Upload</span>
@@ -118,6 +122,16 @@
             }
           },
         });
+
+        document.querySelector(".searchbar").addEventListener("keyup", (e) => {
+          e.preventDefault();
+          
+          if(collectionHeightmaps) {
+            const value = e.target.value;
+            collectionHeightmaps.applyFilter(value);
+          }
+        });
+      
           <% if (header.username) { %>
         WEL.heightmaps.dragDrop(collectionHeightmaps.dom, heightmapCategories);
           <% } %>

diff --git a/views/schematics.ejs b/views/schematics.ejs
@@ -14,6 +14,10 @@
         <div class="mb-4 flex justify-between items-center">
             <div class="schematic-quick-actions"></div>
             <div>
+                <span class="mr-4 border-solid border border-gray-300 px-1 py-1 rounded-lg">
+                  <input type="text" class="searchbar"/>
+                  <i class="fas fa-search"></i>
+                </span>
                 <button class="rounded-lg inline-flex items-center bg-green-600 text-white hover:bg-green-700 py-2 px-2 md:px-4"
                         onclick="WEL.schematics.create(schematicCategories)">
                     <span>Upload</span>
@@ -190,6 +194,16 @@
           },
             <% } %>
         });
+
+        document.querySelector(".searchbar").addEventListener("keyup", (e) => {
+          e.preventDefault();
+          
+          if(collectionSchematic) {
+            const value = e.target.value;
+            collectionSchematic.applyFilter(value);
+          }
+        });
+
           <% if (header.username) { %>
         WEL.schematics.dragDrop(collectionSchematic.dom, schematicCategories);
           <% } %>