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
@@ -60,6 +60,7 @@ class IndexController extends AbstractController
'errors' => $errors, 'errors' => $errors,
'pagination' => $pagination, 'pagination' => $pagination,
'filterForm' => $filterForm, 'filterForm' => $filterForm,
'filterDto' => $filterDto,
]); ]);
} }
} }
+21
View File
@@ -24,6 +24,27 @@ class AssignmentFilterDto
$this->reset = $reset; $this->reset = $reset;
} }
public function isActive(): bool
{
return $this->getActiveFiltersCount() > 0;
}
public function getActiveFiltersCount(): int
{
$freshInstance = new static();
$filterCount = 0;
$reflection = new \ReflectionClass(static::class);
foreach ($reflection->getProperties() as $property) {
$name = $property->getName();
if ($this->$name !== $freshInstance->$name) {
++$filterCount;
}
}
return $filterCount;
}
public function getDateFrom(): ?\DateTimeImmutable public function getDateFrom(): ?\DateTimeImmutable
{ {
return $this->dateFrom; return $this->dateFrom;
+21 -13
View File
@@ -19,24 +19,32 @@
{% endif %} {% endif %}
{{ form_start(filterForm) }} {{ form_start(filterForm) }}
<div class="border border-gray-200 rounded-md p-2 mb-4"> <div class="border border-gray-200 rounded-md p-2 mb-4" {{stimulus_controller('toggle', [], {'closed': 'hidden'}) }}>
<div class="grid grid-cols-2 md:grid-cols-5 gap-x-1 gap-y-2 pb-2"> <button type="button" {{ stimulus_action('toggle', 'toggle') }}>
{{ form_row(filterForm.dateFrom) }} <div class="flex items-center space-x-2">
{{ form_row(filterForm.dateTo) }} {{ icon('filter', 'w-5 h-5') }}
{{ form_row(filterForm.jobProfile) }} {% if filterDto.active %}<span>{{ filterDto.activeFiltersCount }} Filter aktiv</span>{% endif %}
{{ form_row(filterForm.destination) }} </div>
{{ form_row(filterForm.duration) }} </button>
</div> <div class="hidden" {{ stimulus_target('toggle', 'toggle') }}>
<div class="flex items-center space-x-2"> <div class="grid grid-cols-2 md:grid-cols-5 gap-x-1 gap-y-2 pb-2">
{{ form_widget(filterForm.apply, { 'attr': { 'class': 'btn btn--small' } }) }} {{ form_row(filterForm.dateFrom) }}
{{ form_widget(filterForm.reset, { 'attr': { 'class': 'btn btn--small btn--secondary' } }) }} {{ 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>
</div> </div>
{{ form_rest(filterForm) }} {{ form_rest(filterForm) }}
{{ form_end(filterForm) }} {{ form_end(filterForm) }}
{{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-4"> <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 py-4">
{% for assignment in pagination %} {% 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="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"> <div class="flex flex-col space-y-2 pb-2">