Auth1Specialist Comments - Answer Overflow

Auth1Specialist

•Created by dyo on 3/4/2025 in #❓┊help

show table loading when filtering data in resource page

Add some CSS on top, and voila:

.progress {
    background-color: rgba(229,233,235, 0);
    height: 5px;
    position: relative;
    width: 100%;
    margin-top: -2px;
}

.progress-bar-red {
    height: 100%;
    position: relative;
    background-color: var(--mainTheme);
    animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -o-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -ms-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -webkit-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -moz-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
}

@keyframes cssload-width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-o-keyframes cssload-width {
    0%, 100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes cssload-width {
    0%, 100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes cssload-width {
    0%, 100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes cssload-width {
    0%, 100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.progress {
    background-color: rgba(229,233,235, 0);
    height: 5px;
    position: relative;
    width: 100%;
    margin-top: -2px;
}

.progress-bar-red {
    height: 100%;
    position: relative;
    background-color: var(--mainTheme);
    animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -o-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -ms-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -webkit-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
    -moz-animation: cssload-width 3.45s cubic-bezier(0.45, 0, 1, 1) 1;
}

@keyframes cssload-width {
    0%, 100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-o-keyframes cssload-width {
    0%, 100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes cssload-width {
    0%, 100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes cssload-width {
    0%, 100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes cssload-width {
    0%, 100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

7 replies

FFilament

•Created by dyo on 3/4/2025 in #❓┊help

show table loading when filtering data in resource page

I added a global loader in my project, which also works on tables (filtering, searching, ...). I based it off some snippet online IIRC, but here's my adapted code:

    document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
        value: false,
        delayTimer: null,
        set(value) {
            clearTimeout(this.delayTimer);
            if (value === false) {
                this.value = false;
                document.getElementById('global-loading-indicator').style.display = 'none';
            } else {
                this.delayTimer = setTimeout(() => {
                    this.value = true;
                    document.getElementById('global-loading-indicator').style.display = 'block';
                }, 700);
            }
        }
    }))
    document.addEventListener("livewire:init", () => {
        Livewire.hook('commit.prepare', () => {
            Alpine.store('isLoading').set(true)
        })
        Livewire.hook('commit', ({component, commit, respond, succeed, fail}) => {
            succeed(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
            fail(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
        })
    })

    document.addEventListener('alpine:init', () => Alpine.store('isLoading', {
        value: false,
        delayTimer: null,
        set(value) {
            clearTimeout(this.delayTimer);
            if (value === false) {
                this.value = false;
                document.getElementById('global-loading-indicator').style.display = 'none';
            } else {
                this.delayTimer = setTimeout(() => {
                    this.value = true;
                    document.getElementById('global-loading-indicator').style.display = 'block';
                }, 700);
            }
        }
    }))
    document.addEventListener("livewire:init", () => {
        Livewire.hook('commit.prepare', () => {
            Alpine.store('isLoading').set(true)
        })
        Livewire.hook('commit', ({component, commit, respond, succeed, fail}) => {
            succeed(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
            fail(() => {
                queueMicrotask(() => Alpine.store('isLoading').set(false))
            })
        })
    })

7 replies

FFilament

•Created by Excavator on 3/4/2025 in #❓┊help

Translations

You could check the rendered blade templates, see which (and if) they use a translatable string, and work from there?

3 replies

FFilament

•Created by mohdaftab on 11/25/2024 in #❓┊help

Fileupload multiple image in a tab not displaying images properly

Hi, do you perhaps have a github repo where we can replicate the issue easily? That woule incentivise people to help check this out (and if it's a confirmed issue get it fixed for everybody). Else it's a bit hard to do a deepdive (in cases like this where there are no console errors, ....). Thanks!

34 replies

FFilament

•Created by Auth1Specialist on 2/17/2025 in #❓┊help

Duplicating record before using inside of editOptionForm.

Thanks for the respons! Will try it out later!

5 replies

FFilament

•Created by Auth1Specialist on 2/17/2025 in #❓┊help

Duplicating record before using inside of editOptionForm.

Some more tries I did whitout success:

                ->editOptionAction(function(Forms\Components\Actions\Action $action, Forms\Components\Select $component, $livewire) {
                    $selectedRecord = $component->getSelectedRecord();
                    
                    if ($selectedRecord) {
                        $duplicatedRecord = $selectedRecord->replicate();
                        $duplicatedRecord->project_id = $livewire->project_id;
                        $duplicatedRecord->is_hidden = 1;
                        $duplicatedRecord->is_disabled = 1;

                        $action->fillForm($duplicatedRecord->attributesToArray());
                    }

                    return $action->slideOver();
                })

                ->editOptionAction(function(Forms\Components\Actions\Action $action, Forms\Components\Select $component, $livewire) {
                    $selectedRecord = $component->getSelectedRecord();
                    
                    if ($selectedRecord) {
                        $duplicatedRecord = $selectedRecord->replicate();
                        $duplicatedRecord->project_id = $livewire->project_id;
                        $duplicatedRecord->is_hidden = 1;
                        $duplicatedRecord->is_disabled = 1;

                        $action->fillForm($duplicatedRecord->attributesToArray());
                    }

                    return $action->slideOver();
                })

5 replies

FFilament

•Created by Hedi on 2/14/2025 in #❓┊help

Don't update the whole page for live components?

You could extract your "partial" to a separate component if possible? That way it will only reload that "part".

3 replies

FFilament

•Created by pocket.racer on 2/15/2025 in #❓┊help

How to stop going back on Form Wizard once a certain step is reached?

I have something like this, this shows a button on a certain step:

                ->submitAction(new HtmlString(Blade::render(
                    <<<BLADE
                    <x-filament::button
                        wire:click="createDocument"
                        wire:key="createDocument"
                        id="createDocument"
                        size="sm"
                        class="py-2 px-3"
                        x-show="!getSteps().includes('send')"
                    >
                        @lang('financials.create_document')
                    </x-filament::button>
                BLADE
                )))

                ->submitAction(new HtmlString(Blade::render(
                    <<<BLADE
                    <x-filament::button
                        wire:click="createDocument"
                        wire:key="createDocument"
                        id="createDocument"
                        size="sm"
                        class="py-2 px-3"
                        x-show="!getSteps().includes('send')"
                    >
                        @lang('financials.create_document')
                    </x-filament::button>
                BLADE
                )))

2 replies

FFilament

•Created by pocket.racer on 2/15/2025 in #❓┊help

How to trigger form wizard next step via javascript?

3 replies

FFilament

•Created by pocket.racer on 2/15/2025 in #❓┊help

How to trigger form wizard next step via javascript?

I do something like that in the BE, so you should be able to replicate this in the FE as well:

$this->dispatch('next-wizard-step', statePath: $this->form->getStatePath());

$this->dispatch('next-wizard-step', statePath: $this->form->getStatePath());

3 replies

FFilament

•Created by TheRealTeeHill on 1/22/2025 in #❓┊help

Dashboard widgets: drag and drop

Jep, also saw it in the other channel. I'm going to implement it and remove my own implementation 😄

11 replies

FFilament

•Created by TheRealTeeHill on 1/22/2025 in #❓┊help

Dashboard widgets: drag and drop

I also found this: https://v2.filamentphp.com/tricks/using-drag-and-drop-sorting-on-a-custom-page

11 replies

FFilament

•Created by Auth1Specialist on 1/22/2025 in #❓┊help

Triggering editaction on Stat click

OK, I figured it out:

    #[On('widget-edit')]
    public function widgetEdit(string $id): void
    {
        $this->mountAction('editDashboardAction', ['id' => $id]);
    }

    #[On('widget-edit')]
    public function widgetEdit(string $id): void
    {
        $this->mountAction('editDashboardAction', ['id' => $id]);
    }

The click events dispatches this event. Which will trigger the modal to open.

5 replies

FFilament

•Created by Auth1Specialist on 1/22/2025 in #❓┊help

Triggering editaction on Stat click

Ah, I have made some progress here. The issue seems to be the action isn't mounted. So fiddling with mounting the action before calling it. Will report back with a full solution if I find one.

5 replies

FFilament

•Created by Ne on 1/22/2025 in #❓┊help

Select the option Obstructed from view by repeater

I think I had something similar in the past as well. Can you try with

->native(false)

->native(false)

and see if you still have it?

14 replies

FFilament

•Created by TheRealTeeHill on 1/22/2025 in #❓┊help

Dashboard widgets: drag and drop

11 replies

FFilament

•Created by Oddman on 1/7/2025 in #❓┊help

Man... Filament is so damn slow :(

Can you do some profiling to see what's causing this delay? (Or do some caveman debugging, by commenting parts out / returning early, doing the call a few times, and check the time it takes) ... If you have really big components with a lot of selects that load data, it can significantly slow things down, but without more information it's a bit hard to help here IMO. Some general tips and tricks I can give: - Is this on every request? Or just with working with some components? If it's on some components, I have some tips that I use myself (These are generally for Livewire, so these work for Filament as well.): - Work with private properties in Livewire components as much as possible, when they are public they have to get diffed / synced / ... every time - I also have a lot of success with caching filament Forms in my components, like so:

    private array $componentCache = [
        AgendaAppointment::class => [],
        AgendaTemplate::class => []
    ];

Then in my actions:
public function createAgendaTemplateAction() {
        if (!array_key_exists('agendaTemplateForm', $this->componentCache)) {
            $this->componentCache['agendaTemplateForm'] = AgendaTemplate::form();
        }
}

    private array $componentCache = [
        AgendaAppointment::class => [],
        AgendaTemplate::class => []
    ];

Then in my actions:
public function createAgendaTemplateAction() {
        if (!array_key_exists('agendaTemplateForm', $this->componentCache)) {
            $this->componentCache['agendaTemplateForm'] = AgendaTemplate::form();
        }
}

I do that because these are big forms with a lot of relations / .... and these get used in the createAction, editAction, ... so normally these are initialised multiple times, meaning duplicate queries meaning longer load times ... - Other than that, I also split Livewire components if they get too large.

30 replies

FFilament

•Created by matthias on 12/19/2024 in #❓┊help

Add part of filament in external Page

How I did it (temporarily) was the following, but this worked: - Create full page Livewire (filament) components - Set livewire inject_assets to TRUE in the config - Load the full page with HTMX inside of your old page

13 replies

FFilament

•Created by treii28 on 12/16/2024 in #❓┊help

Why does nothing in this #$%^#$ work as described in docs?

I would also like to give some tips here: - Setup xdebug to debug PHP code that gets executed; - Laracast also have some great series on PHP / Alpine / ... as well. Not tutorials mind you (they also have those), but explainers on how the libraries (high-level) work. The way you grow as a developer is to realise everything you need of information is actually in the code (if you take the approach of digging into the libraries source-code, you will learn much faster). Good luck!

51 replies

FFilament

•Created by Zod on 12/17/2024 in #❓┊help

Add action to a wizard step

This might work: - You could create your own custom field -> Load a custom livewire component in it -> Set it to load lazy -> Use it in your wizard as a form -> Run code in the mount() method?

8 replies

Gaming

Programming