[Add-on] Toggle column and ToggleAttributeOperation

[tabacitu]

The idea is to have the same as the toggle field, but as a column, that'd make an AJAX request and toggle that attribute on the model.

The idea came from @lisotton in this issue here, which I can't move because it's in a different organisation so I'll just copy-paste:

Hi,

I'm still analyzing if Backpack is a fit for a project that I'm working on. I did not find anything similar with switch present in Laravel-admin: https://laravel-admin.org/docs/en/model-grid-inline-edit#Switch

It would be nice to have the field provided by this package also available for columns and with the possibility to apply the change once the user toggle the value.

Best regards,

[tabacitu]

Hi @lisotton .

I agree, it'd be useful in some projects to have a toggle column that actually toggles an attribute. We haven't added "active columns" (aka "fields as columns") in Backpack because supporting ONE column is super-easy, but supporting ALL fields as column, with the underlying saving logic to "just work"... that's a monster of an endeavour.

To create what I understand you need in Backpack, you'll have to:

• create a custom column type, which is as simple as creating resources/views/vendor/backpack/crud/columns/toggle;
• add the JS logic you need, to make an AJAX call to an endpoint you control; you can use the delete button as an example, there's a trick there to push the JS in the after_scripts section;
• create the route and controller that processes that request, toggles the attribute and returns a response;
• (improvement idea) even better, you could create an operation, something like ToggleAttributeOperation; it's super-easy, and it'd allow you to re-use this operation across as many CrudControllers as you want, to easily add toggle columns without having to re-code the route/controller/etc;

Since this is outside the scope of this package, I'm going to try to move the issue from digitallyhappy/toggle-field-for-backpack in our addons repo. I think this could be a really cool addon, if someone builds it. @lisotton if you do decide to use Backpack, and end up building the above (or similar) let me know, I'll gladly help you turn it into an addon for everybody else to reuse your code too.

Cheers!

[iMokhles]

i have started this column already and i have a working example with a different configurations but when i tried to to convert it to an add-on column i faced problem, styles and scripts don't load at all here's my example.

<!-- Toogle Column for Backpack for Laravel  -->
{{--
    Author: iMokhles
    Website: https://github.com/imokhles
    Addon: https://github.com/imokhles/toggle-column-for-backpack
--}}

@php
    $value = data_get($entry, $column['name']);
@endphp
@includeWhen(!empty($column['wrapper']), 'crud::columns.inc.wrapper_start')
<div class="checkbox">
    <label class="switch">
        <input type="checkbox"
               id="{{ $column['name'] }}_{{ $entry->id }}"
               name="{{ $column['name'] }}"
               data-table="{{ $entry->getTable() }}"
               data-column="{{ $column['name'] }}"
               data-line-id="{{ $entry->id }}"
               data-id="{{ $entry->id }}"
               data-value="{{(isset($entry->{$column['name']}) ? $entry->{$column['name']} : 0)}}"
               checked="{{ $entry->{$column['name']} }}"

        @if (isset($column['attributes']))
            @foreach ($column['attributes'] as $attribute => $value)
                {{ $attribute }}="{{ $value }}"
            @endforeach
        @endif

        >
        <span class="slider round"></span>
    </label><span>{!! $column['label'] !!}</span>
</div>
@includeWhen(!empty($column['wrapper']), 'crud::columns.inc.wrapper_end')

@push('crud_list_styles')
    <style>
        /* The switch - the box around the slider */
        .switch {
            position: relative;
            display: inline-block;
            width: 3em;
            height: 1.5em;
            margin-right: 5px;
        }
        /* Hide default HTML checkbox */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        /* The slider */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 1em;
            width: 1em;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #467FD0;
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #467FD0;
        }
        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }
        .slider.round:before {
            border-radius: 50%;
        }
    </style>
@endpush

@push('crud_list_scripts')
    <script>
        jQuery(document).ready(function($) {
            // Toggle Column
            var columnId = "{{ $column['name'] }}_{{ $entry->id }}"
            $('checkbox.switch[data-id='+columnId+']').change(function () {
                console.log("STATUS:: "+$(this).val());

            });
        });

    </script>
@endpush