commit 32191ed0bec769c6befe108a314aed9e203c1bf9
author SamarV-121 <samar@samarv121.dev> Sun Jun 23 17:52:06 2024 +0530
committer SamarV-121 <samar@samarv121.dev> Sun Jun 23 17:59:33 2024 +0530
tree b033457d793804b3a0341d55fe3a14f22f6fdc56
parent 058768c205566746a3b792661fc8f58dfcd303ba

www: devices: Improve search bar

- Properly align it
- Add support to search using vendor names

Change-Id: I9b2ba34e989178bdc22ce678910718c2ce5b1297

components/aside.html.twig

diff --git a/components/aside.html.twig b/components/aside.html.twig
index e9e629f..ba9b632 100644
--- a/components/aside.html.twig
+++ b/components/aside.html.twig
@@ -2,7 +2,7 @@
 
 <aside>
   <h2>Devices</h2>
-  <input type="text" id="device-search" placeholder="Search device" onkeyup="searchDevices()" />
+  <input type="text" class="device-search" placeholder="Search device" onkeyup="searchDevices()" />
   {% for vendor, devices in deviceVendors %}
     {% set hasSelectedDevice = false %}
     {% for device in devices %}

public/assets/app.css

diff --git a/public/assets/app.css b/public/assets/app.css
index 5f1984f..edace0f 100644
--- a/public/assets/app.css
+++ b/public/assets/app.css
@@ -207,6 +207,16 @@
   transition: background-color 200ms ease-in-out;
 }
 
+.device-search {
+  border-radius: 20px;
+  padding: 10px;
+  margin: 0 15px 15px 15px;
+  border: none;
+  outline: none;
+  width: calc(100% - 30px);
+  box-sizing: border-box;
+}
+
 .selected-device,
 .selected-device:hover {
   background-color: var(--button-bg-active) !important;
@@ -706,15 +716,3 @@
     flex-direction: column-reverse;
   }
 }
-
-#device-search {
-  border-radius: 20px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-  margin-left: 15px;
-  margin-right: 10px;
-  margin-bottom: 15px;
-  border: none;
-  outline: none;
-}

public/js/device_search.js

diff --git a/public/js/device_search.js b/public/js/device_search.js
index a1a5531..a471f64 100644
--- a/public/js/device_search.js
+++ b/public/js/device_search.js
@@ -1,25 +1,36 @@
 const searchDevices = () => {
-  const searchInput = document.getElementById('device-search');
-  const devices = document.getElementsByClassName('device-box');
+  const searchInput = document.getElementsByClassName('device-search')[0];
   const filter = searchInput.value.trim().toLowerCase();
+  const vendors = document.querySelectorAll('.accordion-item');
 
-  Array.from(devices).forEach(device => {
-    const deviceName = device.textContent.trim().toLowerCase();
-    const vendorElement = device.closest('.accordion-item');
-    const accordionInput = vendorElement.querySelector('input[type="checkbox"]');
+  vendors.forEach(vendorElement => {
+    const devices = vendorElement.querySelectorAll('.device-box');
+    const selectedDevice = vendorElement.querySelector('.selected-device');
+    const vendorLabel = vendorElement
+      .querySelector('.accordion-label .label-content span')
+      .textContent.trim()
+      .toLowerCase();
 
-    const shouldDisplayDevice = deviceName.includes(filter);
+    devices.forEach(device => {
+      const deviceName = device.textContent.trim().toLowerCase();
+      const accordionInput = vendorElement.querySelector(
+        'input[type="checkbox"]'
+      );
 
-    if (shouldDisplayDevice) {
-      device.style.display = 'block';
-      accordionInput.checked = true;
-    } else {
-      device.style.display = 'none';
-    }
+      const shouldDisplayDevice =
+        deviceName.includes(filter) || vendorLabel.includes(filter);
 
-    if (filter === '') {
-      device.style.display = 'block';
-      accordionInput.checked = false;
-    }
+      if (shouldDisplayDevice) {
+        device.style.display = 'block';
+        accordionInput.checked = true;
+      } else {
+        device.style.display = 'none';
+      }
+
+      if (filter === '') {
+        device.style.display = 'block';
+        accordionInput.checked = selectedDevice ? true : false;
+      }
+    });
   });
 };