Merge pull request #134 from UCL-ARC/126/search-s3

126/search-s3

Author: acholyn

mod_app/static/css/s3-browser.css

@@ -26,6 +26,7 @@ main {
 
 .s3-browser__title {
   text-align: center;
+  margin-bottom: 1rem;
   p {
     font-size: 90%;
     font-weight: 600;
@@ -65,6 +66,10 @@ main {
   }
 }
 
+#searchInput {
+  height: 1.3rem;
+}
+
 .s3-browser__filter__button {
   background-color: white;
   border-color: inherit;

mod_app/static/js/bucketItemSelectorFunctions.js

@@ -27,3 +27,20 @@ function filterBy(elemType) {
     }
   });
 }
+
+function searchByText(searchTerm) {
+  const cardWrappers = document.querySelectorAll(".s3-browser__card__wrapper");
+  cardWrappers.forEach((wrapper) => {
+    const pTagContent = wrapper.querySelector("p")
+      ? wrapper.querySelector("p").textContent
+      : "";
+    if (
+      searchTerm === "" ||
+      pTagContent.toLowerCase().includes(searchTerm.toLowerCase())
+    ) {
+      wrapper.classList.remove("no-display");
+    } else {
+      wrapper.classList.add("no-display");
+    }
+  });
+}

mod_app/templates/bucket_items.html

@@ -10,9 +10,11 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
                     <span class="btn s3-browser__filter__button" onclick="filterBy" data-type="video" id="key--video">Video</span>/
                     <span  onclick="filterBy" class="btn s3-browser__filter__button" data-type="img" id="key--img">Image</span>/
                     <span  onclick="filterBy" class="btn s3-browser__filter__button" data-type="none" id="view-all">View all</span>
-
-
                 </p>
+                <div class="search-container">
+                    <input type="text" id="searchInput" placeholder="Start typing to search...">
+                    <button onclick="handleSearch()" class="btn">Search</button>
+                </div>
             </div>
             <div class="s3-browser__wrapper">
                 {% for item_key, item_value in item_data.items.items %}
@@ -98,6 +100,15 @@ <h3 class="center-text"> You are currently viewing items in the S3 bucket</h3>
                 this.classList.toggle("active");
 
             });
+            // search stuff
+            function handleSearch() {
+                const searchTerm = document.getElementById('searchInput').value;
+                searchByText(searchTerm);
+            };
+
+            document.getElementById('searchInput').addEventListener('input', () => {
+                handleSearch();
+            });
         </script>
     </body>
 {% endblock %}