New button type for bulk operations

[susanu]

Hi guys,

I was looking at the buttons for bulk operations and most of them are pretty straight forward.
Would be nice to create bulk buttons similar to quick buttons instead of creating a new view for every button.

What do you think?

[susanu]

I implemented this in my project.
Here is the code:

• Configuration

CRUD::button('bulk_update')->stack('bottom')->view('crud::buttons.bulk')->meta([
    'access' => true,
    'icon' => 'las la-wrench',
    'route' => fn($entry, $crud) => backpack_url("{$this->crud->route}/bulk-update")
]);

• bulk.blade.php

@php
    $access = (function() use ($crud, $button) {
        if (isset($button->meta['access']) && $button->meta['access'] !== null && $button->meta['access'] !== false) {
            return $button->meta['access'];
        }
        return !is_null($crud->get(Str::of($button->name)->studly().'.access'))  ? Str::of($button->name)->studly() : $button->name;
    })();
    $icon = $button->meta['icon'] ?? '';
    $label = $button->meta['label'] ?? Str::of($button->name)->headline();

    $defaultRoute = url($crud->route. ($entry?->getKey() ? '/'.$entry?->getKey().'/' : '/') . Str::of($button->name)->kebab());

    $route = $button->meta['route'] ?? $defaultRoute;
    if (is_a($route, \Closure::class, true)) {
        $route = ($route)($entry, $crud);
    }
@endphp

@if (($access === true || $crud->hasAccess($access, isset($entry) ? $entry : null)) && $crud->get('list.bulkActions'))
    <a href="javascript:void(0)" onclick="bulkProcessEntries(this)" data-route="{{ $route }}" class="btn btn-sm btn-secondary bulk-button">
        @if ($icon) <i class="{{ $icon }}"></i> @endif {{ $label }}
    </a>
@endif

{{-- 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 bulkProcessEntries != 'function') {
        function bulkProcessEntries(button) {

            if (typeof crud.checkedItems === 'undefined' || crud.checkedItems.length == 0) {
                new Noty({
                    type: "warning",
                    text: "<strong>{!! trans('backpack::crud.bulk_no_entries_selected_title') !!}</strong><br>{!! trans('backpack::crud.bulk_no_entries_selected_message') !!}"
                }).show();

                return;
            }

            var message = ("Are you sure you want to process these :number entries?").replace(":number", crud.checkedItems.length);

            // show confirm message
            swal({
                title: "{!! trans('backpack::base.warning') !!}",
                text: message,
                icon: "warning",
                buttons: {
                    cancel: {
                        text: "{!! trans('backpack::crud.cancel') !!}",
                        value: null,
                        visible: true,
                        className: "bg-secondary",
                        closeModal: true,
                    },
                    delete: {
                        text: "Process",
                        value: true,
                        visible: true,
                        className: "bg-success",
                    }
                },
            }).then((value) => {
                if (value) {
                    // submit an AJAX call
                    $.ajax({
                        url: button.dataset.route,
                        type: 'POST',
                        data: { entries: crud.checkedItems },
                        success: function(result) {
                            if (Array.isArray(result)) {
                                // Show a success notification bubble
                                new Noty({
                                    type: "success",
                                    text: "<strong>Entries processed.</strong><br>"+result.length+"/"+crud.checkedItems.length+" items have been processed."
                                }).show();
                            } else {
                                // if the result is an array, it means
                                // we have notification bubbles to show
                                if (result instanceof Object) {
                                    // trigger one or more bubble notifications
                                    Object.entries(result).forEach(function(entry, index) {
                                        var type = entry[0];
                                        entry[1].forEach(function(message, i) {
                                            new Noty({
                                                type: type,
                                                text: message
                                            }).show();
                                        });
                                    });
                                } else {
                                    // Show a warning notification bubble
                                    new Noty({
                                        type: "warning",
                                        text: "<strong>Failed to process</strong><br>One or more items could not be processed"
                                    }).show();
                                }
                            }

                            crud.checkedItems = [];
                            crud.table.draw(false);
                        },
                        error: function(result) {
                            // Show an alert with the result
                            new Noty({
                                type: "warning",
                                text: "<strong>Failed to process</strong><br>One or more items could not be processed"
                            }).show();
                        }
                    });
                }
            });
        }
    }
</script>
@endBassetBlock
@if (!request()->ajax()) @endpush @endif

[pxpm]

I 100% agree with this. It should be easy to add a bulk button as it is to add a "quick" one.

I have a few questions on my mind:

• BulkButtons require that crud has enableBulkActions() for the checkboxes to display. One would assume that if you add a bulk button, those BulkActions should be automatically enabled for that crud right ?
• Does it make sense to introduce a new concept "bulk" for "quick buttons", or does it make more sense if we still consider it "quick", but you can set a flag like 'bulk'=> true ? Under the hood it would load a different view with the "bulk javascript", but from a developer POV it still a "quick button" with bulk => true.

What you think about the questions I raised ?

Cheers

[susanu]

BulkButtons require that crud has enableBulkActions() for the checkboxes to display. One would assume that if you add a bulk button, those BulkActions should be automatically enabled for that crud right ?

You are totally right, it should be similar to when enctype="multipart/form-data" is added to the form automatically if upload fields are found.
In this case, deprecate CRUD::enableBulkActions(); and check if buttons are found in the bottom stack for checkboxes to display.

Does it make sense to introduce a new concept "bulk" for "quick buttons", or does it make more sense if we still consider it "quick", but you can set a flag like 'bulk'=> true ? Under the hood it would load a different view with the "bulk javascript", but from a developer POV it still a "quick button" with bulk => true.

Totally agree with you, it's easier to maintain like this.
One problem i see here is that quick buttons are part of the backpack/crud and bulk buttons are part of backpack/pro.

Thank you!

[pxpm]

In this case, deprecate CRUD::enableBulkActions(); and check if buttons are found in the bottom stack for checkboxes to display.

This can't be like that, developer can push buttons to bottom stack and not use bulk actions. Imagine that you want to replicate the "top" buttons, at the end of the list, for convenience. To enable it automatically we will probably need to check if any CRUD::buttons() has a meta[bulk] = true.

One problem i see here is that quick buttons are part of the backpack/crud and bulk buttons are part of backpack/pro.

That's not a problem, the view with the "quick bulk button js" will live in PRO, similar to filters, if developer try to use it, we will tell him that's a pro feature and the view is not available in crud.

Cheers

[susanu]

Lets take an example here, 2 bulk buttons and 1 normal.

To be honest, this doesn't look good at all, i mean, when no item is selected i can tell the difference between a bulk button and a normal one.
On the second image there is no way of knowing which one is which.

I see 2 options here:

1. Create a new stack for buttons called bulk

• Display the buttons where the bottom stack is displayed right now
• Display the buttons from bottom lower in the page

2. Change the bulk actions from buttons to a single dropdown

• Display the dropdown before and after the table
• Move the bottom buttons next to the dropdown or on the next row

The dropdown version would allow us to have the logic in one place instead of 5 bulk buttons, each with their own javascript (code that is 90% the same).

Let me know if i'm going crazy or not.