Feat: Improve assignment filter ux

This commit is contained in:
Björn Fromme
2023-10-24 14:51:35 +02:00
parent d7d4e996bd
commit 51b2c9bb11
5 changed files with 68 additions and 48 deletions
+25 -14
View File
@@ -3,22 +3,33 @@
{% block title %}Einsatzübersicht{% endblock %}
{% block content %}
<div class="flex items-start justify-between">
<h1 class="text-2xl font-bold pb-4">
<div class="flex items-start justify-between pb-4">
<h1 class="text-2xl font-bold">
Einsatzübersicht
</h1>
<button type="button"
class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
{{ stimulus_controller('modal-button', [], [], {'ajax-modal': '#ajax-modal'}) }}
{{ stimulus_action('modal-button', 'ajax', null, {
'title': 'Einsätze filtern',
'url': path('app_common_assignment_filter', { 'r': return_url() })
}) }}>
<div class="flex items-center space-x-1">
{{ icon('filter', 'w-5 h-5 shrink-0') }}
{% if filterDto.active %}<span>{{ filterDto.activeFiltersCount }} Filter aktiv</span>{% endif %}
</div>
</button>
<div class="flex flex-col items-end space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
<button type="button"
class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
{{ stimulus_controller('modal-button', [], [], {'ajax-modal': '#ajax-modal'}) }}
{{ stimulus_action('modal-button', 'ajax', null, {
'title': 'Einsätze filtern',
'url': path('app_common_assignment_filter', { 'r': return_url() })
}) }}>
<div class="flex items-center space-x-1">
{{ icon('filter', 'w-4 h-4 shrink-0') }}
{% if filterDto.active %}
<span class="whitespace-nowrap">{{ filterDto.activeFiltersCount }} Filter aktiv</span>
{% else %}
<span>Filter</span>
{% endif %}
</div>
</button>
{% if filterDto.active %}
<a href="{{ path('app_common_assignment_filter_reset', { 'r': return_url() }) }}" class="btn btn--small btn--secondary">
Reset
</a>
{% endif %}
</div>
</div>
<div class="data-table-wrapper">
+26 -26
View File
@@ -3,34 +3,34 @@
{% block title %}Einsatzübersicht{% endblock %}
{% block content %}
<div class="flex items-start justify-between">
<h1 class="text-2xl font-bold pb-4">
Einsatzübersicht
<div class="flex items-start justify-between pb-4">
<h1 class="text-2xl font-bold">
Einsatz&shy;übersicht
</h1>
<button type="button"
class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
{{ stimulus_controller('modal-button', [], [], {'ajax-modal': '#ajax-modal'}) }}
{{ stimulus_action('modal-button', 'ajax', null, {
'title': 'Einsätze filtern',
'url': path('app_common_assignment_filter', { 'r': return_url() })
}) }}>
<div class="flex items-center space-x-1">
{{ icon('filter', 'w-5 h-5 shrink-0') }}
{% if filterDto.active %}<span>{{ filterDto.activeFiltersCount }} Filter aktiv</span>{% endif %}
</div>
</button>
</div>
{% if errors|length %}
<div class="border border-red-500 rounded-md p-4 text-red-500 mb-8">
<ul>
{% for error in errors %}
<li>
{{ error.message }}
</li>
{% endfor %}
</ul>
<div class="flex flex-col items-end space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
<button type="button"
class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
{{ stimulus_controller('modal-button', [], [], {'ajax-modal': '#ajax-modal'}) }}
{{ stimulus_action('modal-button', 'ajax', null, {
'title': 'Einsätze filtern',
'url': path('app_common_assignment_filter', { 'r': return_url() })
}) }}>
<div class="flex items-center space-x-1">
{{ icon('filter', 'w-4 h-4 shrink-0') }}
{% if filterDto.active %}
<span class="whitespace-nowrap">{{ filterDto.activeFiltersCount }} Filter aktiv</span>
{% else %}
<span>Filter</span>
{% endif %}
</div>
</button>
{% if filterDto.active %}
<a href="{{ path('app_common_assignment_filter_reset', { 'r': return_url() }) }}" class="btn btn--small btn--secondary">
Reset
</a>
{% endif %}
</div>
{% endif %}
</div>
{{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 py-4">