FilamentF
Filament•5mo ago
Hache_raw

Collapse Repeaters based on $state or with JS

Hello. I have "Orders". They have many "Items" so I use Repeater::make.

I guess you can't use $state since Collapsible applies to the repeater not to each individual item.

So how can I collapse each item individually based on $state['done'].
EDIT: Actually I want them to be collapsed (or automatically collapsed onLoad) if done=true, not collapse them with a button.

In the browser, the "done" filed is a switch, so...
I've tried with JS, but can't figure how to. I was able to get this far using ChatGPT, but I think it does a worse job than I do:

document.addEventListener('livewire:navigated', () => {
    const statePath = 'item';

    function procesarToggle(toggle) {
        const idAttr = toggle.getAttribute('id');
        const match = idAttr.match(/record-\d+/);
        
        if (!match) return;
        const itemKey = match[0];

        const checked = toggle.getAttribute('aria-checked') === 'true';

        if (checked) {
            window.Livewire.dispatch('repeater::collapseItem', { statePath, itemKey });
        } else {
            window.Livewire.dispatch('repeater::expandItem', { statePath, itemKey });
        }
    }

    function configurarEventos() {
        const toggles = document.querySelectorAll(`button[id^="data.${statePath}"][id$=".done"]`);

        toggles.forEach((toggle) => {
            procesarToggle(toggle);
        });
    }

    configurarEventos();
});


The image below is from my OrdersResouce.php
image.png
Solution
Hey, i looked into Laravel 4.x docs and they added more utilities.
Looking at the https://filamentphp.com/docs/4.x/forms/repeater#collapsing-items table, nothing working for me.

But looking into https://filamentphp.com/docs/4.x/forms/repeater#adding-a-label-to-repeater-items-based-on-their-content table, I noticed "item" param. And it worked:
->collapsed(function ($item): bool {
    return $operation != "create" && $item->model->done;
})


PS:
I had to remove some incompatible plugins to update to Filament 4 beta to try this.

Then, I discarded all the changes and went back to 3.x just to confirm it also works even while not stated in the 3.x docs.

So this is the current solution so far; using $item->model->ATTRIBUTE
Jump to solution
Was this page helpful?