Feat: Refactor assignment filter to modal

This commit is contained in:
Björn Fromme
2023-10-24 11:40:40 +02:00
parent 5e35af9665
commit cb06bcd636
9 changed files with 119 additions and 89 deletions
@@ -1,25 +0,0 @@
{{ form_start(filterForm) }}
<div class="border border-gray-200 rounded-md p-2 mb-4" {{stimulus_controller('toggle', [], {'closed': 'hidden'}) }}>
<button type="button" {{ stimulus_action('toggle', 'toggle') }}
class="btn btn--small">
<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 py-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) }}
+17 -5
View File
@@ -3,11 +3,23 @@
{% block title %}Einsatzübersicht{% endblock %}
{% block content %}
<h1 class="text-2xl font-bold pb-4">
Einsatzübersicht
</h1>
{% include '_partials/_filterpanel.html.twig' %}
<div class="flex items-start justify-between">
<h1 class="text-2xl font-bold pb-4">
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>
<div class="data-table-wrapper">
<div class="data-table-wrapper__inner">
@@ -0,0 +1,14 @@
{{ form_start(filterForm) }}
<div class="flex flex-col space-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' } }) }}
{{ form_widget(filterForm.reset, { 'attr': { 'class': 'btn btn--secondary' } }) }}
</div>
{{ form_rest(filterForm) }}
{{ form_end(filterForm) }}
+17 -5
View File
@@ -3,9 +3,23 @@
{% block title %}Einsatzübersicht{% endblock %}
{% block content %}
<h1 class="text-2xl font-bold pb-4">
Einsatzübersicht
</h1>
<div class="flex items-start justify-between">
<h1 class="text-2xl font-bold pb-4">
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>
{% if errors|length %}
<div class="border border-red-500 rounded-md p-4 text-red-500 mb-8">
<ul>
@@ -18,8 +32,6 @@
</div>
{% endif %}
{% include '_partials/_filterpanel.html.twig' %}
{{ 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 %}