F
Filament•10mo ago
Phil

Get form dirty state in requiresConfirmation method of an action

How do I find out whether a form has been changed? I have a synchronize button that should show a hint if it is pressed and there are unsaved changes
1 Reply
acroninja
acroninja•2w ago
Make a trait that extends the updatedInteractsWithForms method, 
 namespace App\Traits;

use Filament\Actions\Action;
use Illuminate\Support\HtmlString;

trait HasDirtyState
{
    protected bool $formDirty = false;

    public function updatedInteractsWithForms(string $statePath): void
    {
        parent::updatedInteractsWithForms($statePath);

        if (data_get($this->oldFormState, $statePath) !== data_get($this, $statePath)) {
            $this->formDirty = true;
            $this->resetCachedHeaderActions()
                 ->dispatch('$refresh');
        }
    }

    protected function getCancelFormAction(): Action
    {
        return parent::getCancelFormAction()
            ->visible(fn ($livewire) => $livewire->formDirty);
    }

    protected function getSaveFormAction(): Action
    {
        return Action::make('save')
            ->visible(fn ($livewire) => $livewire->formDirty)
            ->action(function () {
                $this->formDirty = false;
                $this->save();
                $this->resetCachedHeaderActions()
                    ->dispatch('$refresh');
            })
            ->visible(fn ($livewire) => $livewire->formDirty);
    }


    public function resetCachedHeaderActions(): static
    {
        // Clear the page header cached actions
        $this->cachedHeaderActions = [];
        // Immediately rebuild them so they're available
        $this->cacheHeaderActions();

        return $this;
    }
 namespace App\Traits;

use Filament\Actions\Action;
use Illuminate\Support\HtmlString;

trait HasDirtyState
{
    protected bool $formDirty = false;

    public function updatedInteractsWithForms(string $statePath): void
    {
        parent::updatedInteractsWithForms($statePath);

        if (data_get($this->oldFormState, $statePath) !== data_get($this, $statePath)) {
            $this->formDirty = true;
            $this->resetCachedHeaderActions()
                 ->dispatch('$refresh');
        }
    }

    protected function getCancelFormAction(): Action
    {
        return parent::getCancelFormAction()
            ->visible(fn ($livewire) => $livewire->formDirty);
    }

    protected function getSaveFormAction(): Action
    {
        return Action::make('save')
            ->visible(fn ($livewire) => $livewire->formDirty)
            ->action(function () {
                $this->formDirty = false;
                $this->save();
                $this->resetCachedHeaderActions()
                    ->dispatch('$refresh');
            })
            ->visible(fn ($livewire) => $livewire->formDirty);
    }


    public function resetCachedHeaderActions(): static
    {
        // Clear the page header cached actions
        $this->cachedHeaderActions = [];
        // Immediately rebuild them so they're available
        $this->cacheHeaderActions();

        return $this;
    }
Add it to your edit page 
class EditOrder extends EditRecord
{
    use HasDirtyState;
class EditOrder extends EditRecord
{
    use HasDirtyState;
In my case I wanted to only show the actions when the form is dirty, so use this closure 
->visible(fn ($livewire) => $livewire->formDirty)
->visible(fn ($livewire) => $livewire->formDirty)
Note you'll need to add ->live() to the form components

Did you find this page helpful?