Filament Page with Livewire Components

I have a Filament Page with Livewire components that I want to have interaction between the three main areas. For example the response component contains a table with a row action :

class Responses extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public $client_id;

    public function table(Table $table): Table
    {
        return $table
            ->poll(2)
            ->query(ConversationResponses::query()
                ->where('client_id',  $this->client_id)
                ->where('active', true)
            )
            ->columns([
                TextColumn::make('response'),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                \Filament\Tables\Actions\Action::make('select')
                ->action(function (ConversationResponses $record ): void {
                    // $record->copy response text to To Edit Frame
                   
					logger( $record->response );  // Works fine
                }),
            ], position: ActionsPosition::BeforeColumns);
    }

    public function render()
    {
        return <<<'HTML'
        <div class="col-span-2">
            {{ $this->table }}
        </div>
        HTML;
    }
}

How do I pass the $record in the Action to a different component on the same blade page? It is very clear that I need to learn livewire. and I need to learn more about how livewire is handled by Filament. Here is the target component is simply an edit box where changes can be made, then actions taken. The action 'select' would $record->response into the TextImput on the other:

class EditWindow extends Component implements HasForms//, HasTable
{
    // use InteractsWithTable;
    use InteractsWithForms;

    public $client_id;
    public $data;

    public function form(Form $form): Form
    {
        return $form
        ->schema([
            \Filament\Forms\Components\Textarea::make('message_text') ->rows(12)->cols(40),
        ])
        ->statePath('data')
        // ->model(\App\Models\Conversation::class)
        ;
    }

    // protected function mount()
    // {
    //     // Initialize data or perform any necessary setup
    // }


    public function render()
    {
        return <<<'HTML'
        <div class="col-span-2">
            {{ $this->form }}
        </div>
        HTML;
    }
}

LaryAI

1 year ago

Level 58

To enable interaction between your Responses and EditWindow components, you can use Livewire's event system. Here's how you can achieve this:

Emit an Event from the Responses Component:

In your Responses component, you can emit an event when the action is triggered. Modify the action method to emit an event with the response data.

public function table(Table $table): Table
{
    return $table
        ->poll(2)
        ->query(ConversationResponses::query()
            ->where('client_id',  $this->client_id)
            ->where('active', true)
        )
        ->columns([
            TextColumn::make('response'),
        ])
        ->filters([
            // ...
        ])
        ->actions([
            \Filament\Tables\Actions\Action::make('select')
            ->action(function (ConversationResponses $record): void {
                // Emit an event with the response data
                $this->emit('responseSelected', $record->response);
            }),
        ], position: ActionsPosition::BeforeColumns);
}

Listen for the Event in the EditWindow Component:

In your EditWindow component, listen for the event and update the message_text field accordingly.

class EditWindow extends Component implements HasForms
{
    use InteractsWithForms;

    public $client_id;
    public $data = [
        'message_text' => '',
    ];

    protected $listeners = ['responseSelected' => 'updateMessageText'];

    public function updateMessageText($response)
    {
        $this->data['message_text'] = $response;
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                \Filament\Forms\Components\Textarea::make('message_text')
                    ->rows(12)
                    ->cols(40),
            ])
            ->statePath('data');
    }

    public function render()
    {
        return <<<HTML
        <div class="col-span-2">
            {{ $this->form }}
        </div>
        HTML;
    }
}

Ensure Both Components are on the Same Blade Page:

Make sure both components are included in the same Blade view so they can interact with each other. For example:
```
<div>
    @livewire('responses', ['client_id' => $clientId])
    @livewire('edit-window', ['client_id' => $clientId])
</div>
```

By following these steps, when a row action is triggered in the Responses component, it will emit an event that the EditWindow component listens for, updating the message_text field with the selected response. This approach leverages Livewire's event system to facilitate communication between components.

ddoddsr

1 year ago

Level 5

@LaryAI I'll give this a try with another task. I use a single livewire component because it was better understood at the time.

Please or to participate in this conversation.