Checkbox from array with images

[miquelangeld]

I'm posting this in case someone finds it helpful, maybe somebody can use and improve it (that's for sure, I'm not the finest developer in town) I don't know if this is the correct place to publish that, maybe it should be published in discussions.

I took the code from this feature request and made some changes to add images.

checklist_array.php:

@php
    $options = isset($field['options']) ? $field['options'] : [];
    $optionsImages = isset($field['image_options']) ? $field['image_options'] : [];

    $field['value'] = old(square_brackets_to_dots($field['name'])) ?? ($field['value'] ?? ($field['default'] ?? []));
    if (is_string($field['value'])) {
        $field['value'] = json_decode($field['value']);
    }
    $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 $key => $option)
        <div class="col-sm-3">
            <div class="checkbox">
                @if($field["with_images"])
                    <input type="checkbox"
                           name="{{ $field['name'] }}[]"

                           value="{{ $option }}"
                           id="{{ $field['name'].$key }}"
                           @if( ( old( $field["name"] ) && in_array($option , old( $field["name"])) ) )
                               checked="checked"
                        @endif
                    >
                    <label for="{{$field['name'].$key}}"><img data-toggle="tooltip"
                                                              data-placement="bottom"
                                                              title="{{ $option }}" src="{{'/storage/'.$optionsImages[$key]}}" width="25px"/></label>

                @else
                <label for="{{ $field['name'].$key }}">
                        <input type="checkbox"

                               name="{{ $field['name'] }}[]"
                               value="{{ $option }}"
                               id="{{ $field['name'].$key }}"
                               @if( ( old( $field["name"] ) && in_array($option , old( $field["name"])) ) )
                                    checked="checked"
                               @endif
                        >
                        {!! $option !!}
                </label>
                @endif
            </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 --}}
<style>
    label[for^={{ $field['name'] }}] {
        border: 1px solid #fff;
        padding: 10px;
        display: block;
        position: relative;
        margin: 10px;
        cursor: pointer;
    }

    label[for^={{ $field['name'] }}]:before {
        background-color: white;
        color: white;
        content: " ";
        display: block;
        border-radius: 50%;
        border: 1px solid grey;
        position: absolute;
        top: -5px;
        left: -5px;
        width: 25px;
        height: 25px;
        text-align: center;
        line-height: 28px;
        transition-duration: 0.4s;
        transform: scale(0);
    }

    label[for^={{ $field['name'] }}] img {
        height: 50px;
        width: 50px;
        transition-duration: 0.2s;
        transform-origin: 50% 50%;
    }

    :checked + label {
        border-color: #ddd;
    }

    :checked + label:before {
        content: "✓";
        background-color: green;
        transform: scale(1);
    }

    :checked + label img {
        transform: scale(0.9);
        /* box-shadow: 0 0 5px #333; */
        z-index: -1;
    }
    input[type="checkbox"][id^={{ $field['name'] }}] {
        display: none;
    }
</style>
{{-- 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 --}}
{{-- ########################################## --}}

in the controller:

$this->crud->addField([
            'label'     => 'Alergens',
            'with_images' => true,
            'image_options' => Allergen::all()->pluck('pictogram')->toArray(),
            'type'      => 'checklist_array',
            'name'      => 'alergens',
            'attribute' => 'printer_name',
            'options'   => Allergen::all()->pluck('name')->toArray(),
        ]);

[jcastroa87]

Thanks a lot @miquelangeld for contribute with our community.

Cheers