From 2b7215837566715f573aee838779ee44a22b4fae Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Fri, 25 Jul 2025 09:22:30 -0500
Subject: [PATCH] Add DropdownWidget for enhanced dropdown functionality and
 improved event handling

---
 inventory/static/js/dropdown.js               | 48 +++++++++++++++++++
 .../fragments/_dropdown_fragment.html         | 36 ++------------
 inventory/templates/layout.html               |  1 +
 3 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 inventory/static/js/dropdown.js

diff --git a/inventory/static/js/dropdown.js b/inventory/static/js/dropdown.js
new file mode 100644
index 0000000..29882b3
--- /dev/null
+++ b/inventory/static/js/dropdown.js
@@ -0,0 +1,48 @@
+const DropdownWidget = (() => {
+    function setButton(name, id, identifier) {
+        const button = document.getElementById(`${name}Button`);
+        const input = document.getElementById(`${name}`);
+
+        button.dataset.invValue = id;
+        button.textContent = identifier;
+        input.value = id;
+    }
+
+    function clear(name) {
+        const input = document.getElementById(name);
+        const button = document.getElementById(`${name}Button`);
+        const clearButton = document.getElementById(`${name}ClearButton`);
+
+        input.value = "";
+        button.dataset.invValue = "";
+        button.textContent = "-";
+
+        clearButton.classList.add("d-none");
+        button.classList.remove("rounded-end-0");
+        button.classList.remove("border-end-0");
+        button.classList.add("rounded-end");
+    };
+
+    document.querySelectorAll('.dropdown-button').forEach(button => {
+        button.addEventListener('shown.bs.dropdown', () => {
+            const name = button.id.replace('Button', '');
+            const dropdown = button.closest('.dropdown');
+            const dropdownMenu = dropdown.querySelector('.dropdown-menu.show');
+            const searchInput = dropdown.querySelector('.dropdown-search-input');
+            const dropdownContent = dropdown.querySelector(`#${name}DropdownContent`);
+
+            if (!dropdownMenu || !searchInput || !dropdownContent) return;
+
+            const menuHeight = dropdownMenu.clientHeight;
+            const inputHeight = searchInput.offsetHeight;
+            const availableHeight = menuHeight - inputHeight;
+
+            dropdownContent.style.maxHeight = `${availableHeight}px`;
+        });
+    });
+
+    return {
+        clear,
+        setButton
+    };
+})();
diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 9d76e46..3982370 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -10,35 +10,27 @@
     </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{% endif %}" type="button" data-bs-toggle="dropdown"
+            <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{% if not current_item %} d-none{% endif %}" type="button" id="{{ id }}ClearButton" style="z-index: 9999;">
+            <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" id="search{{ id }}" placeholder="Search...">
+                <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="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
+                        <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>
     </div>
     <script>
-        function {{ id }}SetButton(id, identifier) {
-            const button = document.getElementById("{{ id }}Button");
-            const input = document.getElementById("{{ id }}");
-
-            button.dataset.invValue = id;
-            button.textContent = identifier;
-            input.value = id;
-        }
-
         document.addEventListener("DOMContentLoaded", () => {
             const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
             const {{ id }}Input = document.getElementById("{{ id }}");
@@ -47,24 +39,6 @@
             const {{ id }}Button = document.getElementById("{{ id }}Button");
             const {{ id }}ClearButton = document.getElementById("{{ id }}ClearButton");
 
-            {{ id }}ClearButton.addEventListener("click", () => {
-                {{ id }}Input.value = "";
-                {{ id }}Button.dataset.invValue = "";
-                {{ id }}Button.textContent = "-";
-
-                {{ id }}ClearButton.classList.add("d-none");
-                {{ id }}Button.classList.remove("rounded-end-0");
-                {{ id }}Button.classList.add("rounded-end");
-            });
-
-            {{ id }}Button.addEventListener("shown.bs.dropdown", () => {
-                const menuHeight = {{ id }}Dropdown.clientHeight;
-                const inputHeight = {{ id }}SearchInput.offsetHeight;
-                const availableHeight = menuHeight - inputHeight;
-
-                {{ id }}DropdownContent.style.maxHeight = availableHeight + "px";
-            });
-
             {{ id }}Dropdown.addEventListener("click", (e) => {
                 if (e.target.tagName === "A") {
                     {{ id }}Input.value = e.target.dataset.invValue;
diff --git a/inventory/templates/layout.html b/inventory/templates/layout.html
index 14ecd11..2560364 100644
--- a/inventory/templates/layout.html
+++ b/inventory/templates/layout.html
@@ -76,6 +76,7 @@
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
     <script src="{{ url_for('static', filename='js/csv.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
     <script src="{{ url_for('static', filename='js/image.js') }}"></script>
     <script src="{{ url_for('static', filename='js/toast.js') }}" defer></script>
     <script src="{{ url_for('static', filename='js/widget.js') }}"></script>