From e91af64c1ccc1a1bcef8e97f8c15be477fbcb015 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Fri, 25 Jul 2025 09:46:23 -0500
Subject: [PATCH] Enhance DropdownWidget with search and click handling
 functionality for improved user interaction

---
 inventory/static/js/dropdown.js               |  39 +++++++
 .../fragments/_dropdown_fragment.html         | 103 +++++++-----------
 2 files changed, 76 insertions(+), 66 deletions(-)

diff --git a/inventory/static/js/dropdown.js b/inventory/static/js/dropdown.js
index 29882b3..d7211a9 100644
--- a/inventory/static/js/dropdown.js
+++ b/inventory/static/js/dropdown.js
@@ -41,8 +41,47 @@ const DropdownWidget = (() => {
         });
     });
 
+
+    function handleDropdownClick(e, name) {
+        if (e.target.tagName === "A") {
+            const input = document.getElementById(name);
+            const button = document.getElementById(`${name}Button`);
+            const clearButton = document.getElementById(`${name}ClearButton`);
+
+            input.value = e.target.dataset.invValue;
+            button.textContent = e.target.textContent;
+
+            if (e.target.dataset.invValue) {
+                clearButton.classList.remove("d-none");
+                button.classList.add("rounded-end-0");
+                button.classList.remove("rounded-end");
+            } else {
+                clearButton.classList.add("d-none");
+                button.classList.remove("rounded-end-0");
+                button.classList.add("rounded-end");
+            }
+        }
+    };
+
+    function searchDropdown(name) {
+        const searchInput = document.getElementById(`search${name}`);
+        const dropdown = document.getElementById(`menu${name}`);
+
+        const filter = searchInput.value.toLowerCase();
+        const items = dropdown.querySelectorAll("a.dropdown-item");
+        items.forEach(item => {
+            if (item.textContent.toLowerCase().includes(filter)) {
+                item.style.display = "";
+            } else {
+                item.style.display = "none";
+            }
+        });
+    };
+
     return {
         clear,
+        handleDropdownClick,
+        searchDropdown,
         setButton
     };
 })();
diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 3982370..4de9e96 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -2,71 +2,42 @@
 {% import "fragments/_link_fragment.html" as links %}
 
 {% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %}
-    <label for="{{ id }}" class="form-label">
-        {{ label }}
-        {% if entry_link %}
-            {{ links.entry_link(entry_link, current_item.id) }}
-        {% endif %}
-    </label>
-    <div class="dropdown">
-        <div class="btn-group w-100">
-            <button class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button" type="button" data-bs-toggle="dropdown"
-                data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
-                style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
-                {{ current_item.identifier if current_item else '-' }}
-            </button>
-            <button class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}" type="button" id="{{ id }}ClearButton"
-                style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}" onclick="DropdownWidget.clear('{{ id }}')">
-                {{ icons.render_icon('x-lg', 16) }}
-            </button>
-            <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
-            <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
-                <input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input" id="search{{ id }}" placeholder="Search...">
-                <div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
-                    {% for item in list %}
-                        <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="DropdownWidget.setButton('{{ id }}', {{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
-                    {% endfor %}
-                </div>
-            </ul>
-        </div>
+<label for="{{ id }}" class="form-label">
+    {{ label }}
+    {% if entry_link %}
+    {{ links.entry_link(entry_link, current_item.id) }}
+    {% endif %}
+</label>
+<div class="dropdown">
+    <div class="btn-group w-100">
+        <button
+            class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button"
+            type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
+            id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
+            style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
+            {{ current_item.identifier if current_item else '-' }}
+        </button>
+        <button
+            class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}"
+            type="button" id="{{ id }}ClearButton"
+            style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
+            onclick="DropdownWidget.clear('{{ id }}')">
+            {{ icons.render_icon('x-lg', 16) }}
+        </button>
+        <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
+        <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}"
+            onclick="DropdownWidget.handleDropdownClick(event, '{{ id }}')">
+            <input type="text"
+                class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"
+                id="search{{ id }}" placeholder="Search..." oninput="DropdownWidget.searchDropdown('{{ id }}')">
+            <div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
+                {% for item in list %}
+                <li><a class="dropdown-item" data-inv-value="{{ item.id }}"
+                        onclick="DropdownWidget.setButton('{{ id }}', {{ item.id }}, '{{ item.identifier }}')">{{
+                        item.identifier }}</a></li>
+                {% endfor %}
+            </div>
+        </ul>
     </div>
-    <script>
-        document.addEventListener("DOMContentLoaded", () => {
-            const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
-            const {{ id }}Input = document.getElementById("{{ id }}");
-            const {{ id }}SearchInput = document.getElementById("search{{ id }}");
-            const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
-            const {{ id }}Button = document.getElementById("{{ id }}Button");
-            const {{ id }}ClearButton = document.getElementById("{{ id }}ClearButton");
-
-            {{ id }}Dropdown.addEventListener("click", (e) => {
-                if (e.target.tagName === "A") {
-                    {{ id }}Input.value = e.target.dataset.invValue;
-                    {{ id }}Button.textContent = e.target.textContent;
-
-                    if (e.target.dataset.invValue) {
-                        {{ id }}ClearButton.classList.remove("d-none");
-                        {{ id }}Button.classList.add("rounded-end-0");
-                        {{ id }}Button.classList.remove("rounded-end");
-                    } else {
-                        {{ id }}ClearButton.classList.add("d-none");
-                        {{ id }}Button.classList.remove("rounded-end-0");
-                        {{ id }}Button.classList.add("rounded-end");
-                    }
-                }
-            });
-
-            {{ id }}SearchInput.addEventListener("input", () => {
-                const filter = {{ id }}SearchInput.value.toLowerCase();
-                const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
-                items.forEach(item => {
-                    if (item.textContent.toLowerCase().includes(filter)) {
-                        item.style.display = "";
-                    } else {
-                        item.style.display = "none";
-                    }
-                });
-            });
-        });
-    </script>
+</div>
 {% endmacro %}
\ No newline at end of file