Action inside modal is not working

Hi
I have action that open a modal with custom view. On that view I have another action but when I click on that action nothing happens:

\Filament\Tables\Actions\Action::make('openPaymentModal')
  ->icon(...)
  ->label('Open payments')
  ->modalContent(function ($record) {
    $removePaymentAction = DeleteAction::make('removePayment')
      ->hiddenLabel()
      ->size('sm')
      ->icon('heroicon-s-x-mark');

    return view('filament.modals.payments-list', compact(
        'record',
        'removePaymentAction'
    ));
  })

\Filament\Tables\Actions\Action::make('openPaymentModal')
  ->icon(...)
  ->label('Open payments')
  ->modalContent(function ($record) {
    $removePaymentAction = DeleteAction::make('removePayment')
      ->hiddenLabel()
      ->size('sm')
      ->icon('heroicon-s-x-mark');

    return view('filament.modals.payments-list', compact(
        'record',
        'removePaymentAction'
    ));
  })

And this is my

/resources/filament/modals/payments-list.blade.php

/resources/filament/modals/payments-list.blade.php

file:

@foreach($record->payments as $payment)
<tr>
    <td class="px-3 py-3.5">{{ $payment->payed_at->format('d.m.Y') }}</td>
    <td class="px-3 py-3.5">{{ $payment->amount }}</td>
    <td class="px-3 py-3.5">{{ $removePaymentAction->record($payment) }}</td>
</tr>
@endforeach

@foreach($record->payments as $payment)
<tr>
    <td class="px-3 py-3.5">{{ $payment->payed_at->format('d.m.Y') }}</td>
    <td class="px-3 py-3.5">{{ $payment->amount }}</td>
    <td class="px-3 py-3.5">{{ $removePaymentAction->record($payment) }}</td>
</tr>
@endforeach

I am setting record on my $removePaymentAction button inside foreach loop. When I click on that button, spinner show and then disappear and nothing happens. The record doesn't get deleted. Confirmation dialog also is not triggering. Can someone help?

Solution

Just to post an update how I solved this problem. The problem was my misuse of Filament actions.

I've created new Livewire component in which created filament table, just like the documentation says. I've passed my invoice record to the livewire via property.

// app/Livewire/InvoicePaymentsTable.php
class InvoicePaymentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public Invoice $invoice;

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): MorphMany => $this->invoice->payments())
            ->inverseRelationship('payable')
            ->paginated(false)
            ->columns([
                TextColumn::make('payed_at')->dateTime('d.m.Y'),
                TextColumn::make('amount'),
            ])
            ->actions([
                DeleteAction::make()
            ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>{{ $this->table }}</div>
        blade;
    }
}

// app/Livewire/InvoicePaymentsTable.php
class InvoicePaymentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public Invoice $invoice;

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): MorphMany => $this->invoice->payments())
            ->inverseRelationship('payable')
            ->paginated(false)
            ->columns([
                TextColumn::make('payed_at')->dateTime('d.m.Y'),
                TextColumn::make('amount'),
            ])
            ->actions([
                DeleteAction::make()
            ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>{{ $this->table }}</div>
        blade;
    }
}

And in the modal content view I called the livewire component like this:

<!-- /resources/filament/modals/payments-list.blade.php -->
...
@if ($record->payments->count() > 0)
    <livewire:invoice-payments-table :invoice="$record" />
@endif

<!-- /resources/filament/modals/payments-list.blade.php -->
...
@if ($record->payments->count() > 0)
    <livewire:invoice-payments-table :invoice="$record" />
@endif

And finally Action that opens that modal:

\Filament\Tables\Actions\Action::make('openPayments')
  ->modalContent(function (Invoice $record) {
      return view('filament.modals.payments-list', compact(
          'record',
      ));
  })

\Filament\Tables\Actions\Action::make('openPayments')
  ->modalContent(function (Invoice $record) {
      return view('filament.modals.payments-list', compact(
          'record',
      ));
  })

Jump to solution

Saade•2/21/24, 6:13 PM

you need inside that view

tjodalvOP•2/21/24, 6:33 PM

When I add that inside my view then clicking on main table action returning 500 ERROR. In console I can see:

Saade•2/21/24, 6:33 PM

You're showing the payload not the response.

tjodalvOP•2/21/24, 6:34 PM

There is no response at all

tjodalvOP•2/21/24, 6:36 PM

I get black modal open across the whole page with no response. Just black modal

tjodalvOP•2/21/24, 6:42 PM

As I am using remove payment button inside of the for loop I created a function that constuct DeleteAction button for every row like this, but still doesn't work:

And then in view my loop goes like this:

But that still doesn't work for some reason.

Saade•2/21/24, 6:45 PM

https://filamentphp.com/docs/3.x/actions/modals#adding-an-action-to-custom-modal-content

Modals - Actions - Filament

tjodalvOP•2/21/24, 6:54 PM

Hi Saade, thank you for your help. I've refactored my code like this:

And in the view:

In the view I am renaming the button so it has unique name and assign record to be payment. There is no error, but that delete button is still not working. The record is not deleted in the database when the button is clicked.

Solution

tjodalv•2/22/24, 11:48 AM

// app/Livewire/InvoicePaymentsTable.php
class InvoicePaymentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public Invoice $invoice;

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): MorphMany => $this->invoice->payments())
            ->inverseRelationship('payable')
            ->paginated(false)
            ->columns([
                TextColumn::make('payed_at')->dateTime('d.m.Y'),
                TextColumn::make('amount'),
            ])
            ->actions([
                DeleteAction::make()
            ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>{{ $this->table }}</div>
        blade;
    }
}

// app/Livewire/InvoicePaymentsTable.php
class InvoicePaymentsTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public Invoice $invoice;

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): MorphMany => $this->invoice->payments())
            ->inverseRelationship('payable')
            ->paginated(false)
            ->columns([
                TextColumn::make('payed_at')->dateTime('d.m.Y'),
                TextColumn::make('amount'),
            ])
            ->actions([
                DeleteAction::make()
            ]);
    }

    public function render()
    {
        return <<<'blade'
            <div>{{ $this->table }}</div>
        blade;
    }
}

And in the modal content view I called the livewire component like this:

<!-- /resources/filament/modals/payments-list.blade.php -->
...
@if ($record->payments->count() > 0)
    <livewire:invoice-payments-table :invoice="$record" />
@endif

<!-- /resources/filament/modals/payments-list.blade.php -->
...
@if ($record->payments->count() > 0)
    <livewire:invoice-payments-table :invoice="$record" />
@endif

And finally Action that opens that modal:

\Filament\Tables\Actions\Action::make('openPayments')
  ->modalContent(function (Invoice $record) {
      return view('filament.modals.payments-list', compact(
          'record',
      ));
  })

\Filament\Tables\Actions\Action::make('openPayments')
  ->modalContent(function (Invoice $record) {
      return view('filament.modals.payments-list', compact(
          'record',
      ));
  })