Modify logic for table column filtering to further isolate the column filtering and the filterset tab

This commit is contained in:
Daniel Sheppard 2024-03-21 23:09:30 -05:00
parent 8a7df0b98d
commit a422a3cd98
5 changed files with 38 additions and 32 deletions

View File

@ -161,10 +161,17 @@ class ObjectListView(BaseMultiObjectView, ActionsMixin, TableMixin):
# Render the objects table # Render the objects table
table = self.get_table(self.queryset, request, has_bulk_actions) table = self.get_table(self.queryset, request, has_bulk_actions)
# Check for filterset_form on this view, if a form exists, apply to context and table, otherwise set to None # Check for filterset_form on this view, if a form exists
# * Apply to context for use by the filter form tab and initialize the form
# * Apply to the table for use by the table and initialize a separate instance of the form for use by the table
# column filters
# * Otherwise set to None
if self.filterset_form: if self.filterset_form:
filterset_form = self.filterset_form(request.GET) filterset_form = self.filterset_form(request.GET)
table.filterset_form = filterset_form table.filterset_form = self.filterset_form(request.GET)
else:
filterset_form = None
table.filterset_form = None
# If this is an HTMX request, return only the rendered table HTML # If this is an HTMX request, return only the rendered table HTML
if request.htmx: if request.htmx:

View File

@ -29,8 +29,13 @@ span.color-label {
opacity: 0; opacity: 0;
} }
// Override column filter form dropdown // Override bootstrap "dropdown" positioning and display for column filters
.column-filter { .column-filter {
position: static; position: static;
display: inline; display: inline;
} }
// Override mdi font-size to adjust filter icon size
.btn.dropdown-toggle > .mdi-filter-settings {
font-size: 1.25rem;
}

View File

@ -2,8 +2,7 @@
{% if form_field %} {% if form_field %}
<div class="column-filter dropdown"> <div class="column-filter dropdown">
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<i class="mdi mdi-filter-settings"></i>
<i class="mdi mdi-filter-settings" style="font-size: 1.25rem;"> </i>
</a> </a>
<div class="dropdown-menu"> <div class="dropdown-menu">
{% render_table_filter_field form_field table=table request=request %} {% render_table_filter_field form_field table=table request=request %}

View File

@ -5,35 +5,30 @@
<thead> <thead>
<tr> <tr>
{% for column in table.columns %} {% for column in table.columns %}
{% if column.orderable %} <th {{ column.attrs.th.as_html }}>
<th {{ column.attrs.th.as_html }}> {% if column.is_ordered %}
{% if column.is_ordered %} <div class="float-end">
<div class="float-end"> <a href="#"
<a href="#" hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field='' %}"
hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field='' %}" hx-target="closest .htmx-container"
hx-target="closest .htmx-container" {% if not table.embedded %}hx-push-url="true"{% endif %}
{% if not table.embedded %}hx-push-url="true"{% endif %} class="text-danger"
class="text-danger" ><i class="mdi mdi-close"></i></a>
><i class="mdi mdi-close"></i></a> </div>
</div> {% endif %}
{% endif %} {% if table.filterset_form %}
{% if table.filterset_form %} {% include 'inc/table_header_filter_dropdown.html' with form_field=table.filterset_form|get_filter_field:column.name %}
{% include 'inc/table_header_filter_dropdown.html' with form_field=table.filterset_form|get_filter_field:column.name %} {% endif %}
{% endif %} {% if column.orderable %}
<a href="#" <a href="#"
hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}" hx-get="{{ table.htmx_url }}{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
hx-target="closest .htmx-container" hx-target="closest .htmx-container"
{% if not table.embedded %}hx-push-url="true"{% endif %} {% if not table.embedded %}hx-push-url="true"{% endif %}
>{{ column.header }}</a> >{{ column.header }}</a>
</th> {% else %}
{% else %}
<th {{ column.attrs.th.as_html }}>
{% if table.filterset_form %}
{% include 'inc/table_header_filter_dropdown.html' with form_field=table.filterset_form|get_filter_field:column.name %}
{% endif %}
{{ column.header }} {{ column.header }}
</th> {% endif %}
{% endif %} </th>
{% endfor %} {% endfor %}
</tr> </tr>
</thead> </thead>

View File

@ -136,7 +136,7 @@ def render_field(field, bulk_nullable=False, label=None):
@register.inclusion_tag('form_helpers/render_field.html') @register.inclusion_tag('form_helpers/render_field.html')
def render_table_filter_field(field, table=None, request=None): def render_table_filter_field(field, table, request):
""" """
Render a single form field for table column filters from template Render a single form field for table column filters from template
""" """