Filament•6mo ago•

29 replies

Collapse Repeaters based on $state or with JS

Hello. I have "Orders". They have many "Items" so I use

Repeater::make

Repeater::make

.

I guess you can't use

$state

$state

since Collapsible applies to the repeater not to each individual item.

So how can I collapse each item individually based on

$state['done']

$state['done']

.
EDIT: Actually I want them to be collapsed (or automatically collapsed onLoad) if

done=true

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();
});

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

OrdersResouce.php

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;
})

->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

$item->model->ATTRIBUTE

Jump to solution

Collapse Repeaters based on $state or with JS

Hello. I have "Orders". They have many "Items" so I use

Repeater::make

Repeater::make

.

I guess you can't use

$state

$state

since Collapsible applies to the repeater not to each individual item.

So how can I collapse each item individually based on

$state['done']

$state['done']

.
EDIT: Actually I want them to be collapsed (or automatically collapsed onLoad) if

done=true

done=true

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();
});

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

OrdersResouce.php

Solution

->collapsed(function ($item): bool {
    return $operation != "create" && $item->model->done;
})

->collapsed(function ($item): bool {
    return $operation != "create" && $item->model->done;
})

$item->model->ATTRIBUTE

$item->model->ATTRIBUTE

Jump to solution

Collapse Repeaters based on $state or with JS

Collapse Repeaters based on $state or with JS

Similar Threads

Similar Threads

Similar Threads