Add PageSize component and keep filter form to the side

wedevelopnl · Feb 10, 2024 · 7d56f2b · 7d56f2b
1 parent 5fac3fd
commit 7d56f2b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/assets/src/controller.js b/assets/src/controller.js
@@ -4,8 +4,6 @@ import { useDebounce } from "stimulus-use";
 export default class extends Controller {
     static debounces = ['search']
 
-    activeElement;
-
     connect() {
         useDebounce(this);
     }

diff --git a/src/DependencyInjection/WeDevelopUXTableExtension.php b/src/DependencyInjection/WeDevelopUXTableExtension.php
@@ -10,6 +10,7 @@
 use WeDevelop\UXTable\DataProvider\DoctrineORMProvider;
 use WeDevelop\UXTable\Security\OpenerSigner;
 use WeDevelop\UXTable\Twig\Component\Filter;
+use WeDevelop\UXTable\Twig\Component\PageSize;
 use WeDevelop\UXTable\Twig\Component\SortLink;
 use WeDevelop\UXTable\Twig\Component\Table;
 use WeDevelop\UXTable\Twig\OpenerExtension;
@@ -53,6 +54,11 @@ public function load(array $configs, ContainerBuilder $container): void
             ->setAutoconfigured(true)
         ;
 
+        $container->register(PageSize::class, PageSize::class)
+            ->setAutowired(true)
+            ->setAutoconfigured(true)
+        ;
+
         $container->registerForAutoconfiguration(DataProviderInterface::class)
             ->addTag(DataProviderInterface::class);
 

diff --git a/src/Twig/Component/PageSize.php b/src/Twig/Component/PageSize.php
@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace WeDevelop\UXTable\Twig\Component;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use WeDevelop\UXTable\Table\TableInterface;
+
+#[AsTwigComponent(name: 'UXTable:PageSize', template: '@WeDevelopUXTable/components/PageSize.html.twig')]
+final class PageSize
+{
+    public TableInterface $table;
+
+    public array $variables = [];
+}
diff --git a/templates/components/Filter.html.twig b/templates/components/Filter.html.twig
@@ -1,3 +1,3 @@
 <div{{ attributes }}>
-    {{ form_widget(this.table.formView.filter[this.filter], this.variables) }}
+    {{ form_widget(this.table.formView.filter[this.filter], this.variables | merge({'attr': {'form': 'wedevelop-ux-table-' ~ this.table.name}})) }}
 </div>
diff --git a/templates/components/PageSize.html.twig b/templates/components/PageSize.html.twig
@@ -0,0 +1,3 @@
+<div{{ attributes }}>
+    {{ form_widget(this.table.formView.pageSize, this.variables | merge({'attr': {'form': 'wedevelop-ux-table-' ~ this.table.name}})) }}
+</div>
diff --git a/templates/components/Table.html.twig b/templates/components/Table.html.twig
@@ -1,11 +1,11 @@
 <div{{ attributes }}>
     <section {{ stimulus_controller('wedevelopnl/ux-table/ux-table') }}>
         <turbo-frame id="ux-table-{{ this.table.name }}" data-turbo-action="advance">
-            {{ form_start(table.formView) }}
-                {% block content %}{% endblock %}
-                {% for field in this.preservationForm %}
-                    {{ form_widget(field) }}
-                {% endfor %}
+            {% block content %}{% endblock %}
+            {{ form_start(table.formView, {'attr': {'id': 'wedevelop-ux-table-' ~ this.table.name}}) }}
+            {% for field in this.preservationForm %}
+                {{ form_widget(field) }}
+            {% endfor %}
             {{ form_end(table.formView) }}
         </turbo-frame>
     </section>