Filament Table + Livewire UI Custom Modal

Hi!
I have a Livewire Component which

InteractsWithTable

InteractsWithTable

InteractsWithTable

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

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

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

getTableQuery()

getTableQuery()

function:

Typed property $wedding must not be accessed before initialization

Typed property $wedding must not be accessed before initialization

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

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

Filament Table + Livewire UI Custom Modal

Similar Threads

Similar Threads

Similar Threads