new: [genericElement:group_table_action] Added support of `show # element` in the table

src/Controller/Component/CRUDComponent.php

@@ -9,6 +9,7 @@ use Cake\Utility\Inflector;
 use Cake\Utility\Text;
 use Cake\View\ViewBuilder;
 use Cake\ORM\TableRegistry;
+use Cake\ORM\Query;
 use Cake\Routing\Router;
 use Cake\Http\Exception\MethodNotAllowedException;
 use Cake\Http\Exception\NotFoundException;
@@ -105,6 +106,7 @@ class CRUDComponent extends Component
             if ($this->metaFieldsSupported()) {
                 $query = $this->includeRequestedMetaFields($query);
             }
+            $query = $this->setRequestedEntryAmount($query);
             $data = $this->Controller->paginate($query, $this->Controller->paginate ?? []);
             if (isset($options['afterFind'])) {
                 $function = $options['afterFind'];
@@ -707,6 +709,15 @@ class CRUDComponent extends Component
         ]);
     }
 
+    protected function setRequestedEntryAmount()
+    {
+        $user = $this->Controller->ACL->getUser();
+        $tableSettings = IndexSetting::getTableSetting($user, $this->Table);
+        if (!empty($tableSettings['number_of_element'])) {
+            $this->Controller->paginate['limit'] = intval($tableSettings['number_of_element']);
+        }
+    }
+
     public function view(int $id, array $params = []): void
     {
         if (empty($id)) {

templates/element/genericElements/ListTopBar/group_table_action.php

@@ -8,6 +8,7 @@ if (empty($data['table_setting_id']) && empty($model)) {
 $data['table_setting_id'] = !empty($data['table_setting_id']) ? $data['table_setting_id'] : IndexSetting::getIDFromTable($model);
 $tableSettings = IndexSetting::getTableSetting($loggedUser, $data['table_setting_id']);
 $compactDisplay = !empty($tableSettings['compact_display']);
+$numberOfElement = $tableSettings['number_of_element'] ?? 20;
 
 $availableColumnsHtml = $this->element('/genericElements/ListTopBar/group_table_action/hiddenColumns', [
     'table_data' => $table_data,
@@ -51,7 +52,13 @@ $compactDisplayHtml = $this->element('/genericElements/ListTopBar/group_table_ac
     'table_data' => $table_data,
     'tableSettings' => $tableSettings,
     'table_setting_id' => $data['table_setting_id'],
-    'compactDisplay' => $compactDisplay
+    'compactDisplay' => $compactDisplay,
+]);
+$numberOfElementHtml = $this->element('/genericElements/ListTopBar/group_table_action/numberOfElement', [
+    'table_data' => $table_data,
+    'tableSettings' => $tableSettings,
+    'table_setting_id' => $data['table_setting_id'],
+    'numberOfElement' => $numberOfElement,
 ]);
 ?>
 <?php if (!isset($data['requirement']) || $data['requirement']) : ?>
@@ -63,6 +70,7 @@ $compactDisplayHtml = $this->element('/genericElements/ListTopBar/group_table_ac
         'toggle-button' => [
             'icon' => 'sliders-h',
             'variant' => 'primary',
+            'class' => ['table_setting_dropdown_button'],
         ],
         'submenu_alignment' => 'end',
         'submenu_direction' => 'start',
@@ -79,8 +87,22 @@ $compactDisplayHtml = $this->element('/genericElements/ListTopBar/group_table_ac
             ],
             [
                 'html' => $compactDisplayHtml,
+            ],
+            [
+                'html' => $numberOfElementHtml,
             ]
         ]
     ]);
     ?>
 <?php endif; ?>
+
+<script>
+    $(document).ready(function() {
+        const dropdownBtn = document.querySelector('button.table_setting_dropdown_button')
+        dropdownBtn.addEventListener('hidden.bs.dropdown', function() {
+            const $dropdownBtn = $(this)
+            const debouncedFunctions = $dropdownBtn.data('debouncedFunctions')
+            firePendingDebouncedFunctions(dropdownBtn)
+        })
+    })
+</script>

templates/element/genericElements/ListTopBar/group_table_action/numberOfElement.php

@@ -0,0 +1,42 @@
+<?php
+$numberOfElementSelectSeed = 'seed-' . mt_rand();
+?>
+
+<label class="dropdown-item d-flex align-items-center cursor-pointer" href="#" for="<?= $numberOfElementSelectSeed ?>">
+    <span class="fw-bold">#</span>
+    <span class="ms-2"><?= __('Show') ?></span>
+    <select id="<?= $numberOfElementSelectSeed ?>" class="select-number-of-element form-select ms-auto" style="width: 5em;">
+        <option value="20" <?= $numberOfElement == 20 ? 'selected' : '' ?>><?= __('20') ?></option>
+        <option value="50" <?= $numberOfElement == 50 ? 'selected' : '' ?>><?= __('50') ?></option>
+        <option value="100" <?= $numberOfElement == 100 ? 'selected' : '' ?>><?= __('100') ?></option>
+        <option value="200" <?= $numberOfElement == 200 ? 'selected' : '' ?>><?= __('200') ?></option>
+    </select>
+</label>
+
+<script>
+    (function() {
+        const debouncedNumberElementSaver = debounce(mergeAndSaveSettingsWithReload, 2000)
+
+        $('#<?= $numberOfElementSelectSeed ?>').change(function() {
+            const $dropdownMenu = $(this).closest('.dropdown')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            const table_setting_id = $dropdownMenu.data('table_setting_id');
+            let newTableSettings = {}
+            newTableSettings[table_setting_id] = {
+                'number_of_element': $(this).val()
+            }
+            debouncedNumberElementSaver(table_setting_id, newTableSettings, $table)
+        })
+
+        $(document).ready(function() {
+            const $select = $('#<?= $numberOfElementSelectSeed ?>')
+            const $dropdownMenu = $select.closest('.dropdown')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            registerDebouncedFunction($container, debouncedNumberElementSaver)
+        })
+    })()
+</script>