[feature] Paginator add list size per page

Author: a.dmitryuk

assets/js/app.js

@@ -32,6 +32,7 @@ class App {
         this.#createModalWindowsForDeleteActions();
         this.#createPopovers();
         this.#createTooltips();
+        this.#createPaginator();
 
         document.addEventListener('ea.collection.item-added', () => this.#createAutoCompleteFields());
     }
@@ -456,4 +457,18 @@ class App {
             });
         });
     }
+
+    #createPaginator() {
+        document
+            .querySelectorAll('.list-pagination-counter select[data-ea-paginator-list-size-per-page]')
+            .forEach((element) => {
+                element.addEventListener('change', (event) => {
+                    const url = new URL(window.location.href);
+                    url.searchParams.set('size', event.currentTarget.value);
+                    url.searchParams.set('page', '1');
+
+                    window.location.replace(url.toString());
+                });
+            });
+    }
 }

public/app.92065ad6.js

@@ -5,7 +5,7 @@
         "/app.54fc226c.css"
       ],
       "js": [
-        "/app.92065ad6.js"
+        "/app.b25cfb59.js"
       ]
     },
     "form": {

public/app.b25cfb59.js

@@ -1,6 +1,6 @@
 {
   "app.css": "app.54fc226c.css",
-  "app.js": "app.92065ad6.js",
+  "app.js": "app.b25cfb59.js",
   "form.js": "form.875c88d4.js",
   "page-layout.js": "page-layout.6e9fe55d.js",
   "page-color-scheme.js": "page-color-scheme.30cb23c2.js",

public/app.92065ad6.js.LICENSE.txt public/app.b25cfb59.js.LICENSE.txtpublic/app.92065ad6.js.LICENSE.txt renamed to public/app.b25cfb59.js.LICENSE.txt

@@ -39,6 +39,11 @@ class Crud
     private bool $paginatorFetchJoinCollection = true;
     private ?bool $paginatorUseOutputWalkers = null;
 
+    /** @var int[] */
+    private array $listSizePerPage = [
+        10, 20, 30, 40, 50, 100, 150,
+    ];
+
     private function __construct(private readonly CrudDto $dto)
     {
     }
@@ -326,6 +331,14 @@ public function setPaginatorPageSize(int $maxResultsPerPage): self
         return $this;
     }
 
+    /**
+     * @param int[] $listSizePerPage
+     */
+    public function setListSizePerPage(array $listSizePerPage): void
+    {
+        $this->listSizePerPage = $listSizePerPage;
+    }
+
     public function setPaginatorRangeSize(int $maxPagesOnEachSide): self
     {
         if ($maxPagesOnEachSide < 0) {
@@ -439,7 +452,13 @@ public function hideNullValues(bool $hide = true): self
 
     public function getAsDto(): CrudDto
     {
-        $this->dto->setPaginator(new PaginatorDto($this->paginatorPageSize, $this->paginatorRangeSize, 1, $this->paginatorFetchJoinCollection, $this->paginatorUseOutputWalkers));
+        $this->dto->setPaginator(new PaginatorDto(
+            $this->paginatorPageSize,
+            $this->paginatorRangeSize, 1,
+            $this->listSizePerPage,
+            $this->paginatorFetchJoinCollection,
+            $this->paginatorUseOutputWalkers
+        ));
 
         return $this->dto;
     }

public/entrypoints.json

@@ -9,10 +9,14 @@ final class PaginatorDto
 {
     private ?int $pageNumber = null;
 
+    /**
+     * @param int[] $listSizePerPage
+     */
     public function __construct(
         private readonly int $pageSize,
         private readonly int $rangeSize,
         private readonly int $rangeEdgeSize,
+        private readonly array $listSizePerPage,
         private readonly bool $fetchJoinCollection,
         private readonly ?bool $useOutputWalkers,
     ) {
@@ -52,4 +56,12 @@ public function useOutputWalkers(): ?bool
     {
         return $this->useOutputWalkers;
     }
+
+    /**
+     * @return int[]
+     */
+    public function getListSizePerPage(): array
+    {
+        return $this->listSizePerPage;
+    }
 }

public/manifest.json

@@ -5,6 +5,11 @@
 
 <div class="list-pagination">
     <div class="list-pagination-counter">
+        <select data-ea-paginator-list-size-per-page class="form-select flex d-inline w-auto me-1">
+            {% for size in ea.crud.paginator.listSizePerPage %}
+                <option value="{{ size }}" {{ ea.crud.paginator.pageSize == size ? 'selected' : '' }}>{{ size }}</option>
+            {% endfor %}
+        </select>
         {% if render_detailed_pagination is defined ? render_detailed_pagination : true %}
             {{ 'paginator.results'|trans({'%count%': paginator.numResults|format})|raw }}
         {% endif %}