add DropAfter option to line buttons

Author: pxpm

src/config/backpack/operations/list.php

@@ -49,8 +49,15 @@
     // Nest action buttons within a dropdown in actions column
     'lineButtonsAsDropdown' => false,
 
-    // What is the minimum threshold of action buttons for nesting into a dropdown
-    'lineButtonsAsDropdownThreshold' => 1,
+    // 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
+    'lineButtonsAsDropdownMinimumToDrop' => 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
+    'lineButtonsAsDropdownDropAfter' => 0,
 
     // Show a "Reset" button next to the List operation subheading
     // (Showing 1 to 25 of 9999 entries. Reset)

src/resources/views/crud/inc/datatables_logic.blade.php

@@ -401,30 +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 minimumThreshold = $('#crudTable').data('line-buttons-as-dropdown-threshold');
+        const minimumToDrop = $('#crudTable').data('line-buttons-as-dropdown-minimum-to-drop');
+        const dropAfter = $('#crudTable').data('line-buttons-as-dropdown-drop-after');
 
         $('#crudTable tbody tr').each(function (i, tr) {
             const actionCell = $(tr).find('td').eq(actionColumnIndex);
             const actionButtons = actionCell.find('a.btn.btn-link');
-            if(actionCell.find('.actions-buttons-column').length) return;
-            if(actionButtons.length < minimumThreshold) return;
+            if (actionCell.find('.actions-buttons-column').length) return;
+            if (actionButtons.length < minimumToDrop) 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
-            actionButtons.each((index, action) => {
+            const dropdownItems = actionButtons.slice(dropAfter).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, dropAfter);
+                actionCell.prepend(remainingButtons);
+            }
         });
     }
   </script>

src/resources/views/crud/list.blade.php

@@ -62,7 +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-threshold="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownThreshold') }}"
+              data-line-buttons-as-dropdown-minimum-to-drop="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownMinimumToDrop') }}"
+              data-line-buttons-as-dropdown-drop-after="{{ (int) $crud->getOperationSetting('lineButtonsAsDropdownDropAfter') }}"
               cellspacing="0">
             <thead>
               <tr>