Filament•9mo ago

I have to submit the form twice to update the table in a custom page with a table and a from

So, I'm building a very complicated wizard that I need to use Filament Forms and Table separately in. To start with, I want the user to write in a text field in a form, submit, then the table shows the results. I did something similar to this, but for some reason, I have to submit the form twice for the table to update.

1 Reply

MAFOP•9mo ago

Here is the custom page code:

class CreateBooking extends Page implements HasTable
{
    use InteractsWithTable;

    protected static string $resource = BookingResource::class;

    protected static string $view = 'filament.partner.resources.booking-resource.pages.new-booking';

    public ?array $clientData = [];

    public function findClientForm(Form $form): Form
    {
        return $form->schema([
            TextInput::make('name')
                ->required()

        ])
            ->statePath('clientData');
    }

    protected function getForms(): array
    {
        return [
            'findClientForm',
        ];
    }

    protected function getFindClientFormActions(): array
    {
        return [
            Action::make('findClient')
                ->submit('findClient'),
        ];
    }

    public function table(Table $table): Table
    {
        return $table
            ->query($this->getTableQuery())
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                Action::make('select')
                    ->label('Edit User')
                    ->action(fn (User $user) => $this->findClient($user->id)),
            ]);
    }

    protected function getTableQuery()
    {
        if (isset($this->clientData['name'])) {
            return User::query()
                ->where('name', 'like', '%'.$this->clientData['name'].'%');
        } else {
            return User::query()->where('id', null);
        }
    }

    public function findClient()
    {
        // ray('findClient');
        $this->getTableQuery();
    }
}

class CreateBooking extends Page implements HasTable
{
    use InteractsWithTable;

    protected static string $resource = BookingResource::class;

    protected static string $view = 'filament.partner.resources.booking-resource.pages.new-booking';

    public ?array $clientData = [];

    public function findClientForm(Form $form): Form
    {
        return $form->schema([
            TextInput::make('name')
                ->required()

        ])
            ->statePath('clientData');
    }

    protected function getForms(): array
    {
        return [
            'findClientForm',
        ];
    }

    protected function getFindClientFormActions(): array
    {
        return [
            Action::make('findClient')
                ->submit('findClient'),
        ];
    }

    public function table(Table $table): Table
    {
        return $table
            ->query($this->getTableQuery())
            ->columns([
                TextColumn::make('name'),
            ])
            ->actions([
                Action::make('select')
                    ->label('Edit User')
                    ->action(fn (User $user) => $this->findClient($user->id)),
            ]);
    }

    protected function getTableQuery()
    {
        if (isset($this->clientData['name'])) {
            return User::query()
                ->where('name', 'like', '%'.$this->clientData['name'].'%');
        } else {
            return User::query()->where('id', null);
        }
    }

    public function findClient()
    {
        // ray('findClient');
        $this->getTableQuery();
    }
}

Here is the livewire blade:

<x-filament-panels::page>
    <div class="fi-simple-page">
        <section class="rounded-xl bg-white shadow-sm ring-1 fi-section ring-gray-950/5">

            <x-filament-panels::form wire:submit="findClient">
                {{ $this->findClientForm }}

                <x-filament-panels::form.actions
                    :actions="$this->getFindClientFormActions()"
                    :full-width="false"
                />
            </x-filament-panels::form>

            {{ $this->table }}

        </section>
    </div>

</x-filament-panels::page>

<x-filament-panels::page>
    <div class="fi-simple-page">
        <section class="rounded-xl bg-white shadow-sm ring-1 fi-section ring-gray-950/5">

            <x-filament-panels::form wire:submit="findClient">
                {{ $this->findClientForm }}

                <x-filament-panels::form.actions
                    :actions="$this->getFindClientFormActions()"
                    :full-width="false"
                />
            </x-filament-panels::form>

            {{ $this->table }}

        </section>
    </div>

</x-filament-panels::page>

So, I replaced $this->getTableQuery() with $this->dispatch('updateClientsTable'); in findClient() and it worked perfectly. Ah, I also added protected $listeners = ['updateClientsTable' => '$refresh']; in the class.

Gaming

Programming

I have to submit the form twice to update the table in a custom page with a table and a from

Did you find this page helpful?