From 32993800fe2f0653fa52c456386ab85b160f0603 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Mon, 18 Aug 2025 15:05:24 -0500
Subject: [PATCH] Refactor dropdown and table components, add dynamic table
 functionality, and update stylesheets for improved UI

---
 .../static/css/{widget.css => combobox.css}   |  0
 inventory/static/css/dropdown.css             |  4 ++
 inventory/static/js/dropdown.js               | 23 ++++++++
 .../fragments/_dropdown_fragment.html         | 12 ++---
 .../templates/fragments/_table_fragment.html  | 53 +++++++++++++++++++
 inventory/templates/layout.html               |  3 +-
 inventory/templates/table.html                |  2 +-
 7 files changed, 89 insertions(+), 8 deletions(-)
 rename inventory/static/css/{widget.css => combobox.css} (100%)
 create mode 100644 inventory/static/css/dropdown.css

diff --git a/inventory/static/css/widget.css b/inventory/static/css/combobox.css
similarity index 100%
rename from inventory/static/css/widget.css
rename to inventory/static/css/combobox.css
diff --git a/inventory/static/css/dropdown.css b/inventory/static/css/dropdown.css
new file mode 100644
index 0000000..72868e3
--- /dev/null
+++ b/inventory/static/css/dropdown.css
@@ -0,0 +1,4 @@
+.dropdown-search-input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
diff --git a/inventory/static/js/dropdown.js b/inventory/static/js/dropdown.js
index 586fda3..9d4bde6 100644
--- a/inventory/static/js/dropdown.js
+++ b/inventory/static/js/dropdown.js
@@ -15,6 +15,8 @@ function DropDown(cfg) {
                 this.selectedId = v;
                 this.$refs.clear?.classList.remove('d-none');
             }
+
+            this.$refs.button.addEventListener('shown.bs.dropdown', (e) => this.onShown(e));
         },
 
         itemSelect(e) {
@@ -79,6 +81,27 @@ function DropDown(cfg) {
             }
 
             this.$dispatch('dropdown:cleared', {});
+        },
+
+        onShown() {
+            const { menu, search, content } = this.$refs || {};
+            if (!menu || !search || !content) return;
+
+            requestAnimationFrame(() => {
+                const viewportH = window.innerHeight;
+                const menuTop = menu.getBoundingClientRect().top;
+
+                const capByViewport = viewportH * 0.40;
+                const spaceBelow = viewportH - menuTop - 12;
+                const menuCap = Math.max(0, Math.min(capByViewport, spaceBelow));
+
+                const inputH = search.offsetHeight || 0;
+                const contentMax = Math.max(0, menuCap - inputH);
+
+                content.style.maxHeight = `${contentMax - 2}px`;
+
+                requestAnimationFrame(() => search.focus());
+            });
         }
     };
 }
diff --git a/inventory/templates/fragments/_dropdown_fragment.html b/inventory/templates/fragments/_dropdown_fragment.html
index 387955d..b192d54 100644
--- a/inventory/templates/fragments/_dropdown_fragment.html
+++ b/inventory/templates/fragments/_dropdown_fragment.html
@@ -12,10 +12,10 @@
         id: {{ id|tojson }},
         refreshUrl: {{ refresh_url|tojson if refresh_url else "null" }},
         selectUrl: {{ select_url|tojson if select_url else "null" }},
-        recordId: {{ record_id|tojson if record_id else "null"}},
-        field: {{ field_name|tojson if field_name else "null"}}
+        recordId: {{ record_id|tojson if record_id else "null" }},
+        field: {{ field_name|tojson if field_name else "null" }}
     })'
-    hx-preserve x-init="init()">
+    hx-preserve x-init="init()" x-ref="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 and enabled %}-0 border-end-0{% endif %} dropdown-button"
@@ -34,11 +34,11 @@
             {{ icons.render_icon('x-lg', 16) }}
         </button>
         <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}" x-ref="hidden">
-        <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
+        <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}" x-ref="menu">
             <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">
+                id="search{{ id }}" placeholder="Search..." x-ref="search">
+            <div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent" x-ref="content">
                 {% if list %}
                     {% for item in list %}
                     <li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{
diff --git a/inventory/templates/fragments/_table_fragment.html b/inventory/templates/fragments/_table_fragment.html
index e6c56a9..8d1be51 100644
--- a/inventory/templates/fragments/_table_fragment.html
+++ b/inventory/templates/fragments/_table_fragment.html
@@ -36,6 +36,59 @@
     </table>
 </div>
 
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
+            pageLength: {{ per_page }},
+            scrollX: true,
+            scrollY: '60vh',
+            scrollCollapse: true,
+        })
+    })
+</script>
+{% else %}
+<div class="container text-center">No data.</div>
+{% endif %}
+{% endmacro %}
+
+{% macro dynamic_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
+<!-- Table Fragment -->
+
+{% if rows %}
+{% if title %}
+<label for="datatable-{{ id|default('table')|replace(' ', '-')|lower }}" class="form-label">{{ title }}</label>
+{% endif %}
+<div class="table-responsive">
+    <table id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"
+        class="table table-bordered table-sm table-hover table-striped table-light m-0{% if title %} caption-top{% endif %}">
+        <thead class="sticky-top">
+            <tr>
+                {% for h in headers %}
+                <th class="text-nowrap">{{ h }}</th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in rows %}
+            <tr {% if entry_route %}onclick="window.location='{{ url_for('main.' + entry_route, id=row.id) }}'"
+                style="cursor: pointer;"{% endif %}{% if row['highlight'] %} class="table-info"{% endif %}>
+                {% for cell in row.cells %}
+                <td class="text-nowrap{% if cell.type=='bool' %} text-center{% endif %}">
+                    {% if cell.type == 'bool' %}
+                    {{ cell.html | safe }}
+                    {% elif cell.url %}
+                    <a class="link-success link-underline-opacity-0" href="{{ cell.url }}">{{ cell.text }}</a>
+                    {% else %}
+                    {{ cell.text or '-' }}
+                    {% endif %}
+                </td>
+                {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
 <script>
     document.addEventListener("DOMContentLoaded", function () {
         new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
diff --git a/inventory/templates/layout.html b/inventory/templates/layout.html
index 1a3ebb4..41b5250 100644
--- a/inventory/templates/layout.html
+++ b/inventory/templates/layout.html
@@ -28,7 +28,8 @@
         href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css"
         integrity="sha512-BrOPA520KmDMqieeM7XFe6a3u3Sb3F1JBaQnrIAmWg3EYrciJ+Qqe6ZcKCdfPv26rGcgTrJnZ/IdQEct8h3Zhw=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/widget.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/combobox.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/dropdown.css') }}">
     <style>
         {% block style %}{% endblock %}
     </style>
diff --git a/inventory/templates/table.html b/inventory/templates/table.html
index 2c56143..287c520 100644
--- a/inventory/templates/table.html
+++ b/inventory/templates/table.html
@@ -26,5 +26,5 @@
     ) }}
 {% endblock %}
 {% block content %}
-{{ tables.render_table(headers=header, rows=rows, id='table', entry_route=entry_route) }}
+{{ tables.dynamic_table(headers=header, rows=rows, id='table', entry_route=entry_route) }}
 {% endblock %}