F
Filament•10mo ago
tjodalv

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 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. ```php...
Jump to solution
7 Replies
Saade
Saade•10mo ago
you need <x-filament-actions::modals /> inside that view
tjodalv
tjodalvOP•10mo ago
When I add that inside my view then clicking on main table action returning 500 ERROR. In console I can see:
No description
Saade
Saade•10mo ago
You're showing the payload not the response.
tjodalv
tjodalvOP•10mo ago
There is no response at all I get black modal open across the whole page with no response. Just black modal 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: 
->modalContent(function ($record) {
    $removePaymentAction = static function ($model) {
      return DeleteAction::make("removePayment{$model->id}")
        ->record($model)
        ->hiddenLabel()
        ->size('sm')
        ->icon('heroicon-s-x-mark');
    };

    return view('filament.modals.payments-list', compact(
        'record',
        'removePaymentAction'
    ));
})
->modalContent(function ($record) {
    $removePaymentAction = static function ($model) {
      return DeleteAction::make("removePayment{$model->id}")
        ->record($model)
        ->hiddenLabel()
        ->size('sm')
        ->icon('heroicon-s-x-mark');
    };

    return view('filament.modals.payments-list', compact(
        'record',
        'removePaymentAction'
    ));
})
And then in view my loop goes like this: 
@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($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($payment) }}</td>
</tr>
@endforeach
But that still doesn't work for some reason.
Saade
Saade•10mo ago
tjodalv
tjodalvOP•10mo ago
Hi Saade, thank you for your help. I've refactored my code like this: 
->registerModalActions([
    DeleteAction::make("removeInvoicePayment")
        ->hiddenLabel()
        ->size('sm')
        ->icon('heroicon-s-x-mark')
])
->modalContent(function ($record, $action) {
    return view('filament.modals.payments-list', compact(
        'record',
        'action'
    ));
})
->registerModalActions([
    DeleteAction::make("removeInvoicePayment")
        ->hiddenLabel()
        ->size('sm')
        ->icon('heroicon-s-x-mark')
])
->modalContent(function ($record, $action) {
    return view('filament.modals.payments-list', compact(
        'record',
        'action'
    ));
})
And in the view: 
@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">{{ $action->getModalAction('removeInvoicePayment')->name("removeInvoicePayment{$payment->id}")->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">{{ $action->getModalAction('removeInvoicePayment')->name("removeInvoicePayment{$payment->id}")->record($payment) }}</td>
</tr>
@endforeach
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
tjodalv•10mo ago
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',
      ));
  })
Want results from more Discord servers?
Add your server