F
Filament•2w ago
Will Aguilar

React to Repeater being deleted

Is there a way to react to a repeater item being deleted? I created a custom entry following the documentation here - https://filamentphp.com/docs/4.x/infolists/custom-entries I have the following logic 
PaymentSummaryEntry::make('payment_summary')
    ->hiddenLabel()
    ->columnSpanFull()
    ->live()
    ->orderTotal(function (Get $get): float {
        return PaymentStep::calculateOrderTotal($get);
    })
    ->paidAmount(function (Get $get): float {
        return PaymentStep::calculatePaidAmount($get);
    }),

Repeater::make('payment_methods')
    ->hiddenLabel()
    ->live()
    ->schema([
        TextInput::make('amount')
            ->label('general.amount')
            ->numeric()
            ->required()
            ->step(0.1)
            ->live(onBlur: true)
            ->stripCharacters(',')
            ->mask(RawJs::make('$money($input)')),
    ]),
PaymentSummaryEntry::make('payment_summary')
    ->hiddenLabel()
    ->columnSpanFull()
    ->live()
    ->orderTotal(function (Get $get): float {
        return PaymentStep::calculateOrderTotal($get);
    })
    ->paidAmount(function (Get $get): float {
        return PaymentStep::calculatePaidAmount($get);
    }),

Repeater::make('payment_methods')
    ->hiddenLabel()
    ->live()
    ->schema([
        TextInput::make('amount')
            ->label('general.amount')
            ->numeric()
            ->required()
            ->step(0.1)
            ->live(onBlur: true)
            ->stripCharacters(',')
            ->mask(RawJs::make('$money($input)')),
    ]),
Here is my function calculatePaidAmount 
/**
 * Calculate the total paid amount from payment methods
 */
private static function calculatePaidAmount(Get $get): float
{
    $paymentMethods = $get('payment_methods') ?? [];
    $totalPaid = 0.0;

    foreach ($paymentMethods as $payment) {
        $totalPaid += PaymentStep::parseNumber($payment['amount'] ?? 0);
    }

    return $totalPaid;
}
/**
 * Calculate the total paid amount from payment methods
 */
private static function calculatePaidAmount(Get $get): float
{
    $paymentMethods = $get('payment_methods') ?? [];
    $totalPaid = 0.0;

    foreach ($paymentMethods as $payment) {
        $totalPaid += PaymentStep::parseNumber($payment['amount'] ?? 0);
    }

    return $totalPaid;
}
In the first picture everything is being calculated correctly. In the second image I'm entering an amount and the totals are being calcualted correctly. In the last image, I have deleted the repeater item but the amounts didn't trigger an update so they didn't et recalculated. So I need to figure out how to add reactivity to the repeater being delete so I can recalculate paid amount or maybe my custon infolist component needs reactivity?
Custom entries - Infolists - Filament
No description
No description
No description
Solution:
->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
This one work. To me also makes sense that ->delete would trigger afterStateUpdated()....
Jump to solution
4 Replies
Dennis Koch
Dennis Koch•2w ago
There is no event, but you could overwrite the DeleteAction with one that fires an event via modifyDeleteActionUsing() Something like this: 
Repeater::make()->modifyDeleteActionUsing(fn ($action) => 
  $action->after(fn () => $this->dispatch('deleted'))
);
Repeater::make()->modifyDeleteActionUsing(fn ($action) => 
  $action->after(fn () => $this->dispatch('deleted'))
);
Deleting and item should call afterStateUpdated() though. Not sure why it's not working. Maybe try ->partiallyRenderAfterUpdate('payment_summary')
Solution
Will Aguilar
Will Aguilar•2w ago
->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
This one work. To me also makes sense that ->delete would trigger afterStateUpdated(). I got it working tho, thank you for the answer
Will Aguilar
Will AguilarOP•2w ago
So the solution is clashing with the reactivity inside the repeater.... 
Select::make('payment_method_id')
    ->label('module-order.payment_method')
    ->live()
    ->required()
    ->searchable()
    ->options(PaymentMethod::pluck('name', 'id')),

Grid::make()
    ->columnSpanFull()
    ->schema(fn (Get $get): array => PaymentStep::getPaymentMethodFields($get)),
Select::make('payment_method_id')
    ->label('module-order.payment_method')
    ->live()
    ->required()
    ->searchable()
    ->options(PaymentMethod::pluck('name', 'id')),

Grid::make()
    ->columnSpanFull()
    ->schema(fn (Get $get): array => PaymentStep::getPaymentMethodFields($get)),
If I add->partiallyRenderComponentsAfterStateUpdated(['payment_summary']) the payment_summary updates correctly but the reactivity inside the schema stops working so the Grid stops generating fields. If I remove the partiallyRenderComponentsAfterStateUpdated reactive inside repeater starts working but the payment_summary doesn't update 😥 Already tried 
 ->deleteAction(fn ($action) => $action->after(fn ($livewire) => $livewire->dispatch('deleted')))

->deleteAction(fn ($action) => $action->after(fn ($livewire) => $livewire->dispatch('payment-methods-deleted')))
 ->deleteAction(fn ($action) => $action->after(fn ($livewire) => $livewire->dispatch('deleted')))

->deleteAction(fn ($action) => $action->after(fn ($livewire) => $livewire->dispatch('payment-methods-deleted')))
Also, moved the logic to the blade file but everytime the repeater entry gets deleted it doesn't update 
Repeater::make('payment_methods')
    ->hiddenLabel()
    ->live()


# resources/views/filament/infolists/components/payment-summary-entry.blade.php
{{ $get('payment_methods') }} 
Repeater::make('payment_methods')
    ->hiddenLabel()
    ->live()


# resources/views/filament/infolists/components/payment-summary-entry.blade.php
{{ $get('payment_methods') }}
Will Aguilar
Will AguilarOP•2w ago
On the second update I commented 
// ->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
// ->partiallyRenderComponentsAfterStateUpdated(['payment_summary'])
and the select change reacts correctly, the summary gets udpated correctly. However, deleting the repeater entry does nothing 🙁

Did you find this page helpful?