From 7d56f2b71616021e56b5c8ad4fb476be484f5a0e Mon Sep 17 00:00:00 2001
From: Rick Kuipers <rick@wedevelop.nl>
Date: Sat, 10 Feb 2024 19:35:06 +0100
Subject: [PATCH] Add PageSize component and keep filter form to the side

---
 assets/src/controller.js                         |  2 --
 .../WeDevelopUXTableExtension.php                |  6 ++++++
 src/Twig/Component/PageSize.php                  | 16 ++++++++++++++++
 templates/components/Filter.html.twig            |  2 +-
 templates/components/PageSize.html.twig          |  3 +++
 templates/components/Table.html.twig             | 10 +++++-----
 6 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 src/Twig/Component/PageSize.php
 create mode 100644 templates/components/PageSize.html.twig

diff --git a/assets/src/controller.js b/assets/src/controller.js
index 01c2664..86058b6 100644
--- 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
index e94693b..99506aa 100644
--- 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
new file mode 100644
index 0000000..9a4c421
--- /dev/null
+++ 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
index 56dcea5..2e1fc9e 100644
--- 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
new file mode 100644
index 0000000..631c01b
--- /dev/null
+++ 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
index b12b98d..6816b42 100644
--- 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>