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

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

Solution

// 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

Action inside modal is not working

Action inside modal is not working

Similar Threads

Similar Threads

Similar Threads