Recursive checkbox state

[aldesrahim]

Package

Panel builder

Package Version

v3.3.3

How can we help you?

So, I want to create a custom field that contain checkboxes of permissions (nested), and every time the "parent" checkbox is changed, its children will be checked and disabled.

I am using AlpineJS for this, I dont really know if this an AlpineJS problem or am I missing something.

Anyone have any ideas or solutions to this? Thank you!

PermissionList.php (field)

namespace App\Forms\Components;

use App\Models\Permission;
use Filament\Forms\Components;
use Illuminate\Support\Collection;

class PermissionList extends Components\Field
{
    use Components\Concerns\HasExtraInputAttributes;

    protected string $view = 'forms.components.permission-list.index';

    protected function setUp(): void
    {
        parent::setUp();

        $this->default([]);

        $this->afterStateHydrated(static function (PermissionList $component, $state) {
            if (is_array($state)) {
                return;
            }

            $component->state([]);
        });
    }

    public function getPermissions(): Collection
    {
        return Permission::query()
            ->whereNull('parent_id')
            ->where('guard_name', 'web')
            ->with('children')
            ->get();
    }
}

forms.components.permission-list.index.blade.php (blade)

@php
    $isDisabled = $isDisabled();
    $statePath = $getStatePath();
    $permissions = $getPermissions();
@endphp

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div
        class="permission-list"
        x-data="{
            toggleChildrenCheckboxes: function (checkboxes, state) {
                checkboxes.forEach(checkbox => {
                    checkbox.checked = state
                    checkbox.disabled = state

                    let parent = checkbox.closest('li')
                    let children = [...parent.querySelectorAll('ul li input[type=checkbox]')].filter(child => child != checkbox)

                    this.toggleChildrenCheckboxes(children, state)
                })
            },
            onCheckboxChange: function (e) {
                let checkbox = e.target;
                let state = checkbox.checked;

                let parent = checkbox.closest('li')
                let dataId = parent.dataset.id
                let children = parent.querySelectorAll(`ul[data-parent-id='${dataId}'] li input[type=checkbox]`)

                this.toggleChildrenCheckboxes(children, state)
            }
        }"
        x-init=""
    >
        <x-filament::grid
            :default="$getColumns('default')"
            :sm="$getColumns('sm')"
            :md="$getColumns('md')"
            :lg="$getColumns('lg')"
            :xl="$getColumns('xl')"
            :two-xl="$getColumns('2xl')"
            :attributes="
                \Filament\Support\prepare_inherited_attributes($attributes)
                    ->merge($getExtraAttributes(), escape: false)
                    ->class([
                        'fi-fo-checkbox-list gap-4',
                    ])
            "
        >
            @if($permissions->isEmpty())
                <div wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.empty"></div>
            @else
                @include('forms.components.permission-list.permissions', ['permissions' => $permissions])
            @endif
        </x-filament::grid>
    </div>
</x-dynamic-component>

forms.components.permission-list.permissions.php (blade)

<ul class="list-inside" @if(isset($parent)) data-parent-id="{{ $parent->id }}" @endif>
    @foreach($permissions as $permission)
        @php
            $value = $permission->id;
            $label = $permission->description;
        @endphp

        <li
            data-id="{{ $permission->id }}"
            wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.options.{{ $value }}"
        >
            <label
                class="fi-fo-checkbox-list-option-label flex gap-x-3"
            >
                <x-filament::input.checkbox
                    :valid="!$errors->has($statePath)"
                    :attributes="
                    \Filament\Support\prepare_inherited_attributes($getExtraInputAttributeBag())
                        ->merge([
                            'value' => $value,
                            'wire:loading.attr' => 'disabled',
                            $applyStateBindingModifiers('wire:model') => $statePath,
                            'x-on:change' => 'onCheckboxChange',
                        ], escape: false)
                        ->class(['mt-1'])
                "
                />

                <div class="grid text-sm leading-6">
                    <span
                        class="fi-fo-checkbox-list-option-label overflow-hidden break-words font-medium text-gray-950 dark:text-white"
                    >
                        {{ $label }}
                    </span>
                </div>
            </label>

            @if($permission->children->isNotEmpty())
                @include('forms.components.permission-list.permissions', ['parent' => $permission, 'permissions' => $permission->children])
            @endif
        </li>
    @endforeach
</ul>

Demo

Screen.Recording.2025-03-17.112841.mp4