feat: filter timeline by date range and hotels

templates/administrative/assignment/timeline.html.twig

@@ -1,13 +1,38 @@
 {% extends 'administrative/layout.html.twig' %}
 
-{% block title %}Einsatzübersicht{% endblock %}
+{% block title %}Timeline{% endblock %}
 
 {% block content %}
+    <div class="flex items-start justify-between pb-4">
+        <h1 class="text-2xl font-bold">
+            Timeline
+        </h1>
+        <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 }) }}"
+                    title="Filter"
+                    hx-get="{{ path('app_common_timeline_filter', { 'r': return_url() }) }}"
+                    hx-target="body"
+                    hx-swap="beforeend">
+                {{ 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 %}
+            </button>
+            {% if filterDto.active %}
+                <a href="{{ path('app_common_timeline_filter_reset', { 'r': return_url() }) }}" class="btn btn--small btn--secondary">
+                    Reset
+                </a>
+            {% endif %}
+        </div>
+    </div>
     <div class="scroll-container border border-gray-300 mb-16">
         <table>
             <tr class="[&_th]:sticky [&_th]:top-0 [&_th]:z-10">
                 <th></th>
-                {% for day in period %}
+                {% for day in filterDto.period %}
                     <th>
                         {{ day | date('d.m.Y') }}
                     </th>
@@ -18,7 +43,7 @@
                     <td class="border border-gray-700 bg-gray-200 align-middle font-bold sticky left-0 z-10" rowspan="{{ rows | length }}">
                         {{ hotelCode }}
                     </td>
-                    {% for day in period %}
+                    {% for day in filterDto.period %}
                         {% if colspan is defined and colspan > 1 %}
                             {% set colspan = colspan - 1 %}
                         {% elseif rows[0][day|date('Ymd')] is defined %}
@@ -39,10 +64,8 @@
                                         <span class="text-xs">{{ item.teamerName | raw }}</span>
                                         {{ icon('info', 'w-4 h-4') }}
                                     </button>
-                                    <span class="text-xs">{{ item.jobProfile }}</span>
-                                {% else %}
-                                    <span class="text-xs">{{ item.jobProfile }}</span>
                                 {% endif %}
+                                <span class="text-xs">{{ item.jobProfile }}</span>
                             </td>
                         {% else %}
                             <td class="border border-gray-700"></td>
@@ -51,7 +74,7 @@
                 </tr>
                 {% for row in rows[1:] %}
                     <tr>
-                        {% for day in period %}
+                        {% for day in filterDto.period %}
                             {% if colspan is defined and colspan > 1 %}
                                 {% set colspan = colspan - 1 %}
                             {% elseif row[day|date('Ymd')] is defined %}
@@ -72,10 +95,8 @@
                                             <span class="text-xs">{{ item.teamerName | raw }}</span>
                                             {{ icon('info', 'w-4 h-4') }}
                                         </button>
-                                        <span class="text-xs">{{ item.jobProfile }}</span>
-                                    {% else %}
-                                        <span class="text-xs">{{ item.jobProfile }}</span>
                                     {% endif %}
+                                    <span class="text-xs">{{ item.jobProfile }}</span>
                                 </td>
                             {% else %}
                                 <td class="border border-gray-700"></td>

templates/common/modal_timeline_filter.html.twig

@@ -0,0 +1,20 @@
+{% extends 'htmx_modal.html.twig' %}
+
+{% block title %}Timeline filtern{% endblock %}
+
+{% block content %}
+    {{ form_start(filterForm, { 'attr': { 'hx-post': app.request.uri, 'hx-target': '#htmx-modal', 'hx-swap': 'outerHTML' } }) }}
+    <div class="flex flex-col space-y-2 pb-4 flex-1">
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+            {{ form_row(filterForm.dateFrom) }}
+            {{ form_row(filterForm.dateTo) }}
+        </div>
+        {{ form_row(filterForm.hotels) }}
+        <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>
+    </div>
+    {{ form_rest(filterForm) }}
+    {{ form_end(filterForm) }}
+{% endblock %}

templates/htmx_modal.html.twig

@@ -12,7 +12,7 @@
                     {{ icon('close', 'w-6 h-6')}}
                 </button>
             </div>
-            <div class="max-h-96 overflow-y-scroll">
+            <div class="h-96 overflow-y-scroll">
                 <div class="px-8">
                     {% block content %}{% endblock %}
                 </div>