Kaynağa Gözat

Enable HTMX for quick table search

jeremystretch 4 yıl önce
ebeveyn
işleme
5c34a75032

+ 1 - 1
netbox/templates/generic/object_list.html

@@ -87,7 +87,7 @@
       {% endif %}
 
       {# Object table controls #}
-      {% include 'inc/table_controls.html' with table_modal="ObjectTable_config" %}
+      {% include 'inc/table_controls_htmx.html' with table_modal="ObjectTable_config" %}
 
       <form method="post" class="form form-horizontal">
         {% csrf_token %}

+ 32 - 0
netbox/templates/inc/table_controls_htmx.html

@@ -0,0 +1,32 @@
+{% load helpers %}
+
+<div class="row mb-3 justify-content-between">
+  <div class="table-controls noprint col col-12 col-md-8 col-lg-4">
+    <div class="input-group input-group-sm">
+      <input
+        type="text"
+        name="q"
+        class="form-control"
+        placeholder="Quick search"
+        hx-get="{{ request.full_path }}"
+        hx-target="#object_list"
+        hx-trigger="keyup changed delay:500ms"
+      />
+    </div>
+  </div>
+  <div class="table-controls noprint col col-md-3 mb-0">
+    {% if request.user.is_authenticated and table_modal %}
+      <div class="table-configure input-group input-group-sm">
+        <button
+          type="button"
+          data-bs-toggle="modal"
+          title="Configure Table"
+          data-bs-target="#{{ table_modal }}"
+          class="btn btn-sm btn-outline-dark"
+        >
+          <i class="mdi mdi-cog"></i> Configure Table
+        </button>
+      </div>
+    {% endif %}
+  </div>
+</div>