Add new field type checklist_array - My contribution

[lordjack]

Feature Request

What's the feature you think Backpack should have?

My suggestion is the addition of another CheckboxList field type with array for the form. Example: checklist_array

I implements this new feature, and would like to share this solution with this solution, so that other developers may also need to use and also contribute to the framework that is very good, I am very liking to use it.

Have you already implemented a prototype solution, for your own project?

Yes

Do you see this as a core feature or an add-on?

Yes

Follow my contribution.

I create a file at resources/views/vendor/backpack/crud/fields/checklist_array.blade.php with the below content (checklist_array):

I updated the code for the one below, One of the updates I did was, when editing it did not bring the selected values. Now you are bringing through script in javascript

<!-- checklist with directly provided options -->
<!-- checklist_filtered -->
@php
$options = isset($field['options']) ? $field['options'] : [];

// calculate the value of the hidden input
$field['value'] = old(square_brackets_to_dots($field['name'])) ?? ($field['value'] ?? ($field['default'] ?? []));

if (is_string($field['value'])) {
    $field['value'] = json_decode($field['value']);
} 

// define the init-function on the wrapper
$field['wrapper']['data-init-function'] = $field['wrapper']['data-init-function'] ?? 'bpFieldInitChecklist';
@endphp

@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')

<input type="hidden" value='@json($field['value'])' name="{{ $field['name'] }}">

<div class="row">
    @foreach ($options as $option)
    <div class="col-sm-4">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="{{ $field['name'] }}[]" value="{{ $option }}" @if( ( old( $field["name"] )
                    && in_array($option , old( $field["name"])) ) ) checked="checked" @endif> {!! $option !!}
            </label>
        </div>
    </div>
    @endforeach
</div>

{{-- HINT --}}
@if (isset($field['hint']))
<p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->fieldTypeNotLoaded($field))
@php
$crud->markFieldTypeAsLoaded($field);
@endphp
{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
<script>
    function bpFieldInitChecklist(element) {
                //console.log(element);
                var hidden_input = element.find('input[type=hidden]');
                var selected_options = JSON.parse(hidden_input.val() || '[]');
                var checkboxes = element.find('input[type=checkbox]');
                var container = element.find('.row');

                // set the default checked/unchecked states on checklist options
                checkboxes.each(function(key, option) {
                    var id = $(this).val();
                    if (selected_options.map(String).includes(id)) {
                        $(this).prop('checked', 'checked');
                    } else {
                        $(this).prop('checked', false);
                    }
                });

                // when a checkbox is clicked
                // set the correct value on the hidden input
                checkboxes.click(function() {
                    var newValue = [];

                    checkboxes.each(function() {
                        if ($(this).is(':checked')) {
                            var id = $(this).val();
                            newValue.push(id);
                        }
                    });

                    hidden_input.val(JSON.stringify(newValue));

                });
            }

</script>
@endpush

@endif
{{-- End of Extra CSS and JS --}}
{{-- ########################################## --}}

   //form
   $this->crud->addField([
        'label'     => 'Printers',
        'type'      => 'checklist_array',
        'name'      => 'printer',
        'attribute' => 'printer_name',
        'options'   => ['HP', 'Cannon', 'Dell'],
    ]);
 
//model
protected $casts = [
        ...
        'printer' => 'array',
    ];