feat: admin list filtering and search
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
{#
|
||||
Generic filter bar for admin list views.
|
||||
|
||||
Expects:
|
||||
- filter: the AbstractListFilterDto the list was actually built from
|
||||
- form: FormView of the entity's filter form (only `q` is rendered here)
|
||||
- route: route name of the list itself
|
||||
- modal_route: route name of the filter modal
|
||||
#}
|
||||
{% import '_partials/_query_passthrough.html.twig' as passthrough %}
|
||||
|
||||
{% set chips = filter.activeFilters %}
|
||||
|
||||
<div class="pb-4">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
{# Everything except the search term itself rides along, so searching narrows the current
|
||||
filter instead of replacing it. The page is dropped on purpose: a new search starts at 1. #}
|
||||
<form hx-get="{{ path(route) }}"
|
||||
hx-target="body"
|
||||
hx-push-url="true"
|
||||
action="{{ path(route) }}"
|
||||
method="get"
|
||||
class="flex items-center gap-2">
|
||||
{{ passthrough.render(app.request.query.all|filter((value, key) => key not in ['q', 'page', 'f'])) }}
|
||||
<input type="hidden" name="f" value="1">
|
||||
<div class="relative">
|
||||
<input type="search"
|
||||
name="q"
|
||||
value="{{ filter.q }}"
|
||||
placeholder="{{ form.q.vars.attr.placeholder|default('Suchen…') }}"
|
||||
class="block w-64 rounded-md border-0 py-1.5 pl-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary text-sm">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none">
|
||||
{{ icon('search', 'w-4 h-4 text-gray-500') }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button type="button"
|
||||
hx-get="{{ path(modal_route, app.request.query.all) }}"
|
||||
hx-target="body"
|
||||
hx-swap="beforeend"
|
||||
class="button button--secondary button--small inline-flex items-center gap-1.5">
|
||||
{{ icon('filter', 'w-4 h-4') }}
|
||||
Filter{% if filter.activeCount > 0 %} ({{ filter.activeCount }}){% endif %}
|
||||
</button>
|
||||
|
||||
{% if filter.isActive %}
|
||||
<a href="{{ path(route) }}" class="text-sm text-gray-600 underline hover:text-gray-900">
|
||||
zurücksetzen
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if chips|length > 0 %}
|
||||
<div class="flex flex-wrap items-center gap-2 pt-3">
|
||||
{% for chip in chips %}
|
||||
<span class="inline-flex items-center gap-1.5 rounded-full bg-gray-100 border border-gray-300 pl-3 {{ chip.isRemovable ? 'pr-1' : 'pr-3' }} py-1 text-xs text-gray-700">
|
||||
<span><span class="font-bold">{{ chip.label }}:</span> {{ chip.value }}</span>
|
||||
{% if chip.isRemovable %}
|
||||
<a href="{{ path(route, filter_query_without(chip.removeKeys)) }}"
|
||||
class="inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-gray-300"
|
||||
aria-label="Filter „{{ chip.label }}“ entfernen">
|
||||
{{ icon('close', 'w-3 h-3') }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
{#
|
||||
Renders query parameters as hidden inputs so they survive a filter submit.
|
||||
|
||||
A filter form only submits its own fields, so anything else that describes the current list —
|
||||
the sorting, the page size, the return URL — has to be carried along explicitly or it is lost
|
||||
the moment somebody searches.
|
||||
#}
|
||||
{% macro render(values, prefix) %}
|
||||
{%- for key, value in values -%}
|
||||
{%- set name = prefix ? prefix ~ '[' ~ key ~ ']' : key -%}
|
||||
{%- if value is iterable -%}
|
||||
{{ _self.render(value, name) }}
|
||||
{%- else -%}
|
||||
<input type="hidden" name="{{ name }}" value="{{ value }}">
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user