Merge pull request #5667 from Laravel-Backpack/pr/5568

Allow developer to configure the behavior of actions buttons dropdown

Author: pxpm

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,

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('<div class="nav-item dropdown"></div>');
-            actionCell.wrapInner('<div class="dropdown-menu dropdown-menu-left"></div>');
-            
             // 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('<a class="btn btn-sm px-2 py-1 btn-outline-primary dropdown-toggle actions-buttons-column" href="#" data-toggle="dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">{{ trans('backpack::crud.actions') }}</a>');
+
+            // 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('<div class="nav-item dropdown"></div>');
+                actionCell.wrapInner('<div class="dropdown-menu dropdown-menu-left"></div>');
+
+                actionCell.prepend('<a class="btn btn-sm px-2 py-1 btn-outline-primary dropdown-toggle actions-buttons-column" href="#" data-toggle="dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">{{ trans('backpack::crud.actions') }}</a>');
+                
+                // Move the remaining buttons outside the dropdown
+                const remainingButtons = actionButtons.slice(0, buttonsToShowBeforeDropdown);
+                actionCell.prepend(remainingButtons);
+            }
         });
     }
   </script>

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">
             <thead>
               <tr>