Filament•14mo ago

Open modal when user clicks button, show details of item clicked.

I have a livewire component (modal) that receives an ID on mount and doesn't have data until the user clicks a button. The form isn't getting a default value, presumably because it's getting initialized when the page loads (no data yet), and then nothing happens when a user clicks the button. I could be wrong about this, but if I'm right, how can I defer loading the form until the data is there to populate it.

class EditMonthEndTask extends Component implements HasForms, HasInfolists
{
    use InteractsWithInfolists, InteractsWithForms;

    public array $task = [];
    public $taskId;
    protected Team $team;

    protected $listeners = ['editTask'];

    public function mount(int $taskId = null): void
    {
        $this->taskId = $taskId;
        $this->task = (!empty($taskId)) ? MonthEndTask::find($taskId)->toArray() : [];
        $this->team = SelectedLocation::get()->team ?? new Team();
        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.components.month-end.edit-month-end-task', ['task' => $this->task]);
    }

    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('title')->required()->default($this->task['title'] ?? ''),
        ])->statePath('task');
    }
}

class EditMonthEndTask extends Component implements HasForms, HasInfolists
{
    use InteractsWithInfolists, InteractsWithForms;

    public array $task = [];
    public $taskId;
    protected Team $team;

    protected $listeners = ['editTask'];

    public function mount(int $taskId = null): void
    {
        $this->taskId = $taskId;
        $this->task = (!empty($taskId)) ? MonthEndTask::find($taskId)->toArray() : [];
        $this->team = SelectedLocation::get()->team ?? new Team();
        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.components.month-end.edit-month-end-task', ['task' => $this->task]);
    }

    public function form(Form $form): Form
    {
        return $form->schema([
            TextInput::make('title')->required()->default($this->task['title'] ?? ''),
        ])->statePath('task');
    }
}

Solution:

btw look at the custom actions documenation, in case it helps https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#passing-action-arguments

Adding an action to a Livewire component - Actions - Filament

Jump to solution

8 Replies

Jon MasonOP•14mo ago

I've used livewire events to be able to load the task when the user clicks the button, but it's still not acting right. It's getting the event in the Modal component class, but when I try to dispatch the open-modal event, it just shows the backdrop and doesn't actually open the modal.

 public function editTask($id)
    {
        $this->task = MonthEndTask::find($id)->toArray();
        $this->form->fill();
        $this->dispatch('open-modal', id: 'edit-month-end-task');
    }

 public function editTask($id)
    {
        $this->task = MonthEndTask::find($id)->toArray();
        $this->form->fill();
        $this->dispatch('open-modal', id: 'edit-month-end-task');
    }

ChesterS•14mo ago

Are you trying to edit an item with a model? If so, why not use an action?

    public function editSomethingAction(): Action
    {
    return Action::make('editSomething')
        ->form(function (array $arguments) {
            return [
                Select::make('selectSomething')
            ];
        })
        ->action(function (array $arguments, array $data) {
            // do something with the data
        });
}

    public function editSomethingAction(): Action
    {
    return Action::make('editSomething')
        ->form(function (array $arguments) {
            return [
                Select::make('selectSomething')
            ];
        })
        ->action(function (array $arguments, array $data) {
            // do something with the data
        });
}

Jon MasonOP•14mo ago

Can an Entry have an action? I think part of the problem is that I have an infolist, and each item within the list is a custom entry, and I'm not sure how to attach an action to each of those entries. It would certainly be easier.

ChesterS•14mo ago

I'm ... not sure. I haven't had the chance to use infolists yet. But from other discussions I remember that there were some issues when sharing data between nested forms/actions. One of the suggestions was to store a local variable like $tast_being_edited_id and use that to pass data around.

Jon MasonOP•14mo ago

ok, that's an interesting idea. I can get the data, I just can't seem to trigger the modal, but I'm using a Livewire component where the blade view is a filament modal blade component. So I don't know if it's causing issues trying to trigger the modal from the same component as the blade view if that makes sense. I dunno. I've done this in the past with livewire v2 before I started using filament, so it seems like it should work.

Solution

ChesterS•14mo ago

btw look at the custom actions documenation, in case it helps https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component#passing-action-arguments

Adding an action to a Livewire component - Actions - Filament

Jon MasonOP•14mo ago

holy crap that worked. That simplifies things so much....i'm speechless. I don't know why I couldn't figure that out before. I must've configured it wrong..

Jon MasonOP•14mo ago

is it possible to add additional html markup to the modal? that's the only thing I think I'm missing. I have more complex stuff to do in this view.. source diving a bit...it looks like I could use the standard modal and add actions to it.. ok, was able to use the standard (non-action) modal and get it working that way.

Gaming

Programming

Open modal when user clicks button, show details of item clicked.