diff --git a/src/config/backpack/operations/list.php b/src/config/backpack/operations/list.php index 5436fb001f..ca1b9ffe12 100644 --- a/src/config/backpack/operations/list.php +++ b/src/config/backpack/operations/list.php @@ -49,6 +49,16 @@ // Nest action buttons within a dropdown in actions column 'lineButtonsAsDropdown' => false, + // What is the minimum actions for the dropdown to be created + // Example: when minimum to drop is «2», any row with less than «2» action buttons + // will not create a dropdown, but will show the buttons inline + 'lineButtonsAsDropdownMinimum' => 1, + + // Force «X» actions to be shown inline before the dropdown is created + // Example: when setting this to «2», the first «2» actions will be shown inline + // and the rest will be moved to the dropdown + 'lineButtonsAsDropdownShowBefore' => 0, + // Show a "Reset" button next to the List operation subheading // (Showing 1 to 25 of 9999 entries. Reset) // that allows the user to erase local storage for that datatable, diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php index b3b4f3c5fb..78b6c444cc 100644 --- a/src/resources/views/crud/inc/datatables_logic.blade.php +++ b/src/resources/views/crud/inc/datatables_logic.blade.php @@ -401,26 +401,40 @@ function resizeCrudTableColumnWidths() { @endif }); - + function formatActionColumnAsDropdown() { // Get action column const actionColumnIndex = $('#crudTable').find('th[data-action-column=true]').index(); if (actionColumnIndex === -1) return; + const minimumButtonsToBuildDropdown = $('#crudTable').data('line-buttons-as-dropdown-minimum'); + const buttonsToShowBeforeDropdown = $('#crudTable').data('line-buttons-as-dropdown-show-before-dropdown'); + $('#crudTable tbody tr').each(function (i, tr) { const actionCell = $(tr).find('td').eq(actionColumnIndex); - if(actionCell.find('.actions-buttons-column').length) return; + const actionButtons = actionCell.find('a.btn.btn-link'); + if (actionCell.find('.actions-buttons-column').length) return; + if (actionButtons.length < minimumButtonsToBuildDropdown) return; - // Wrap the cell with the component needed for the dropdown - actionCell.wrapInner('
'); - actionCell.wrapInner(''); - // Prepare buttons as dropdown items - actionCell.find('a.btn.btn-link').each((index, action) => { + const dropdownItems = actionButtons.slice(buttonsToShowBeforeDropdown).map((index, action) => { $(action).addClass('dropdown-item').removeClass('btn btn-sm btn-link'); $(action).find('i').addClass('me-2 text-primary'); + return action; }); - actionCell.prepend('{{ trans('backpack::crud.actions') }}'); + + // Only create dropdown if there are items to drop + if (dropdownItems.length > 0) { + // Wrap the cell with the component needed for the dropdown + actionCell.wrapInner(''); + actionCell.wrapInner(''); + + actionCell.prepend('{{ trans('backpack::crud.actions') }}'); + + // Move the remaining buttons outside the dropdown + const remainingButtons = actionButtons.slice(0, buttonsToShowBeforeDropdown); + actionCell.prepend(remainingButtons); + } }); } diff --git a/src/resources/views/crud/list.blade.php b/src/resources/views/crud/list.blade.php index 4859a15d2d..93ad711f6e 100644 --- a/src/resources/views/crud/list.blade.php +++ b/src/resources/views/crud/list.blade.php @@ -62,6 +62,8 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h data-has-details-row="{{ (int) $crud->getOperationSetting('detailsRow') }}" data-has-bulk-actions="{{ (int) $crud->getOperationSetting('bulkActions') }}" data-has-line-buttons-as-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdown') }}" + data-line-buttons-as-dropdown-minimum="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownMinimum') }}" + data-line-buttons-as-dropdown-show-before-dropdown="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownShowBefore') }}" cellspacing="0">