Feat: Add filter toggle and info about active filters for teamer

This commit is contained in:
Björn Fromme
2023-10-23 16:19:10 +02:00
parent c155e8c19e
commit a604039426
3 changed files with 43 additions and 13 deletions
+21 -13
View File
@@ -19,24 +19,32 @@
{% endif %}
{{ form_start(filterForm) }}
<div class="border border-gray-200 rounded-md p-2 mb-4">
<div class="grid grid-cols-2 md:grid-cols-5 gap-x-1 gap-y-2 pb-2">
{{ form_row(filterForm.dateFrom) }}
{{ form_row(filterForm.dateTo) }}
{{ form_row(filterForm.jobProfile) }}
{{ form_row(filterForm.destination) }}
{{ form_row(filterForm.duration) }}
</div>
<div class="flex items-center space-x-2">
{{ form_widget(filterForm.apply, { 'attr': { 'class': 'btn btn--small' } }) }}
{{ form_widget(filterForm.reset, { 'attr': { 'class': 'btn btn--small btn--secondary' } }) }}
<div class="border border-gray-200 rounded-md p-2 mb-4" {{stimulus_controller('toggle', [], {'closed': 'hidden'}) }}>
<button type="button" {{ stimulus_action('toggle', 'toggle') }}>
<div class="flex items-center space-x-2">
{{ icon('filter', 'w-5 h-5') }}
{% if filterDto.active %}<span>{{ filterDto.activeFiltersCount }} Filter aktiv</span>{% endif %}
</div>
</button>
<div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
<div class="grid grid-cols-2 md:grid-cols-5 gap-x-1 gap-y-2 pb-2">
{{ form_row(filterForm.dateFrom) }}
{{ form_row(filterForm.dateTo) }}
{{ form_row(filterForm.jobProfile) }}
{{ form_row(filterForm.destination) }}
{{ form_row(filterForm.duration) }}
</div>
<div class="flex items-center space-x-2">
{{ form_widget(filterForm.apply, { 'attr': { 'class': 'btn btn--small' } }) }}
{{ form_widget(filterForm.reset, { 'attr': { 'class': 'btn btn--small btn--secondary' } }) }}
</div>
</div>
</div>
{{ form_rest(filterForm) }}
{{ form_end(filterForm) }}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-4">
{{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 py-4">
{% for assignment in pagination %}
<div class="relative flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
<div class="flex flex-col space-y-2 pb-2">