From 19ce49cc55ed423f2288067426cb9c6ce6a16dd7 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 24 Jul 2025 13:55:45 -0500
Subject: [PATCH] Refactor dropdown fragment to enhance button functionality
 and improve clear button visibility.

---
 .../fragments/_dropdown_fragment.html         | 56 ++++++++++++++-----
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 208ca7f..4b1b9f8 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -1,3 +1,4 @@
+{% import "fragments/_icon_fragment.html" as icons %}
 {% import "fragments/_link_fragment.html" as links %}
 
 {% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %}
@@ -8,20 +9,25 @@
         {% endif %}
     </label>
     <div class="dropdown">
-        <button class="btn btn-outline-dark dropdown-toggle w-100 overflow-x-hidden" 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>
-        <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...">
-            <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>
-                {% endfor %}
-            </div>
-        </ul>
+        <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"
+                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;">
+                {{ 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...">
+                <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>
+                    {% endfor %}
+                </div>
+            </ul>
+        </div>
     </div>
     <script>
         function {{ id }}SetButton(id, identifier) {
@@ -38,6 +44,17 @@
             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 }}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;
@@ -50,6 +67,17 @@
             {{ 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");
+                    }
                 }
             });