Merge pull request #5512 from Laravel-Backpack/quick-button-ajax

[Feature] Add Ajax support to Quick button 😎
Laravel-Backpack · May 30, 2024 · 9181d89 · 9181d89
2 parents f2257fe + e1db6e3
commit 9181d89
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/src/resources/lang/en/crud.php b/src/resources/lang/en/crud.php
@@ -190,4 +190,10 @@
 
     // The pivot selector required validation message
     'pivot_selector_required_validation_message' => 'The pivot field is required.',
+
+    // Quick button messages
+    'quick_button_ajax_error_title' => 'Request Failed!',
+    'quick_button_ajax_error_message' => 'There was an error processing your request.',
+    'quick_button_ajax_success_title' => 'Request Completed!',
+    'quick_button_ajax_success_message' => 'Your request was completed with success.',
 ];
diff --git a/src/resources/views/crud/buttons/quick.blade.php b/src/resources/views/crud/buttons/quick.blade.php
@@ -23,6 +23,25 @@
         $wrapper['href'] = ($wrapper['href'])($entry, $crud);
     }
     $wrapper['class'] = $wrapper['class'] ?? $defaultClass;
+    //if ajax enabled
+    $buttonAjaxConfiguration = $button->meta['ajax'] ?? false;
+    if($buttonAjaxConfiguration) {
+        $wrapper['data-route'] = $wrapper['href'];
+		$wrapper['data-method'] = $button->meta['ajax']['method'] ?? 'GET';
+        $wrapper['data-refresh-table'] = $button->meta['ajax']['refreshCrudTable'] ?? false;
+
+        $wrapper['href'] = 'javascript:void(0)';
+        $wrapper['onclick'] = 'sendQuickButtonAjaxRequest(this)';
+		$wrapper['data-button-type'] = 'quick-ajax';
+
+        //success message
+        $wrapper['data-success-title'] = $button->meta['ajax']['success_title'] ?? trans('backpack::crud.quick_button_ajax_success_title');
+        $wrapper['data-success-message'] = $button->meta['ajax']['success_message'] ?? trans('backpack::crud.quick_button_ajax_success_message');
+        //error message
+        $wrapper['data-error-title'] = $button->meta['ajax']['error_title'] ?? trans('backpack::crud.quick_button_ajax_error_title');
+        $wrapper['data-error-message']  = $button->meta['ajax']['error_message'] ?? trans('backpack::crud.quick_button_ajax_error_message');
+    }
+    //endif ajax enabled
 @endphp
 
 @if ($access === true || $crud->hasAccess($access, isset($entry) ? $entry : null))
@@ -37,3 +56,67 @@
         {{ $label }}
     </{{ $wrapper['element'] }}>
 @endif
+
+
+@if($buttonAjaxConfiguration)
+{{-- Button Javascript --}}
+{{-- Pushed to the end of the page, after jQuery is loaded --}}
+@push('after_scripts') @if (request()->ajax()) @endpush @endif
+@bassetBlock('backpack/crud/buttons/quick-button.js')
+<script>
+	if (typeof sendQuickButtonAjaxRequest != 'function') {
+        $("[data-button-type=quick-ajax]").unbind('click');
+
+        function sendQuickButtonAjaxRequest(button) {
+            let route = $(button).attr('data-route');
+
+            const defaultButtonMessage = function(button, type) {
+                let buttonTitle = button.getAttribute(`data-${type}-title`);
+                let buttonMessage =  button.getAttribute(`data-${type}-message`);
+                return `<strong>${buttonTitle}</strong><br/>${buttonMessage}`;
+            }
+
+            $.ajax({
+                url: route,
+                type: $(button).attr('data-method'),
+                success: function(result) {
+
+                    if($(button).attr('data-refresh-table') && typeof crud != 'undefined' && typeof crud.table != 'undefined'){
+                        crud.table.draw(false);
+                    }
+                    let message;
+                    //if message is returned from the API use that message
+                    if(result.message){
+                        message = result.message;
+                    }
+
+                    message ??= defaultButtonMessage(button, 'success');
+
+                    new Noty({
+                        type: "success",
+                        text: message,
+                    }).show();
+                },
+                error: function(result) {
+
+                    let message;
+
+                    //if message is returned from the API use that message
+                    if(result.responseJSON.message){
+                        message = result.responseJSON.message;
+                    }
+
+                    message ??= defaultButtonMessage(button, 'error');
+
+                    new Noty({
+                        type: "error",
+                        text: message,
+                    }).show();
+                }
+            });
+        }
+	}
+</script>
+@endBassetBlock
+@if (!request()->ajax()) @endpush @endif
+@endif