Filament Table + Livewire UI Custom Modal

Hi! I have a Livewire Component which InteractsWithTable:

...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}

...
class Index extends Component implements HasTable
{
    use InteractsWithTable;
    
    public $wedding_id; // This is from URL query string
    protected Wedding $wedding;

    public function mount(): void 
    {
        $this->wedding = Wedding::findOrFail($this->wedding_id);
    }

    protected function getTableQuery(): Builder
    {
        return $this->wedding->budgetItemsQuery();

        // This function only returns a Builder in the model like this:
        // public function budgetItemsQuery(): Builder
        // {
        //    return Item::where('budget_id', $this->budget->id);
        // }
    }

    protected function getTableColumns(): array 
    {
        return [
            TextColumn::make('title'),
            TextColumn::make('value'),
        ];
    }

    protected function getTableActions(): array
    {
        return [
            Action::make('edit')
                ->color('warning')
                ->icon('heroicon-o-pencil')
                ->action(function () {
                    return $this->emit('openModal', 'item.edit');
                })
        ];
    }
}

The emit function should open another Livewire component:

use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}

use LivewireUI\Modal\ModalComponent;

class Edit extends ModalComponent
{
    public function render()
    {
        return view('livewire.item.edit'); // Only contains a div with some text so far.
    }
}

When I click on the Action, I have an error pointing on the variable in the

getTableQuery()

getTableQuery()

function:

Typed property $wedding must not be accessed before initialization

Typed property $wedding must not be accessed before initialization

Tried to replace the code in the function to:

return Item::query();

return Item::query();

and the modal works fine, but I need to filter for the appropriate Items. What am I missing? Any other improvements, that I can make? Thanks

3 Replies

Benjámin•15mo ago

up, please?

Dan Harrin•15mo ago

i dont really understand why you would use wireui we have a whole modal system you can use

protected function getTableActions(): array
    {
        return [
            EditAction::make()
                ->form([
                    TextInput::make('title')->required(),
                    TextInput::make('value')->required(),
                ]),
        ];
    }

protected function getTableActions(): array
    {
        return [
            EditAction::make()
                ->form([
                    TextInput::make('title')->required(),
                    TextInput::make('value')->required(),
                ]),
        ];
    }

or create a custom action with a modal form

Benjámin•15mo ago

I didn't know I could use it like that, thanks! EditAction works fine, and the other part of the question got solved by going with public property instead of protected.

Gaming

Programming

Filament Table + Livewire UI Custom Modal