Filament•2y ago

Modal action unexpectedly reset some livewire props value on custom page

I have custom page created here, I modified the layout so the actions button appears on the right place I want, above those buttons is an $items from livewire prop with the sum. But everytime I click the modal action button, it resets the prop's value. I was thinking to re-populate the prop values, using modalCancelAction here is what I got, the modalCancelAction is expect to have Filament\Support\Actions\Modal\Actions\Action in return

5 Replies

BenOP•2y ago

Here is the code snippets

public Collection $items;

protected function getActions(): array
    {
        return [
            Actions\Action::make('cancel')
                ->action(function () {
                    dd('action');
                })
                ->disabled($this->items->isEmpty())
                ->label(__('Cancel'))
                ->color('danger'),
            Actions\Action::make('hold')
                ->action(function () {
                    dd('action');
                })
                ->disabled($this->items->isEmpty())
                ->label(__('Hold'))
                ->color('secondary'),
            Actions\Action::make('other')
                ->label(__('Additional'))
                ->color('secondary')
                ->modalSubheading('')
                ->form([
                    Forms\Components\Grid::make(1)->schema([
                        Forms\Components\TextInput::make('description')
                            ->label(__('Keterangan')),
                        Forms\Components\TextInput::make('amount')
                            ->label(__('Amount')),
                    ]),
                ])
                ->action(function ($data, $livewire) {
                    dd('');
                })
                ->centerModal()
                ->modalWidth('sm')
                ->modalCancelAction(function () {
                    $this->loadItems();

                    return;
                }),
            Actions\Action::make('pay')
                ->action(function () {
                    dd('action');
                })->color('primary')
                ->disabled($this->items->isEmpty())
                ->label(__('Pay'))
                ->extraAttributes(['class' => 'col-span-3']),
        ];
    }

public Collection $items;

protected function getActions(): array
    {
        return [
            Actions\Action::make('cancel')
                ->action(function () {
                    dd('action');
                })
                ->disabled($this->items->isEmpty())
                ->label(__('Cancel'))
                ->color('danger'),
            Actions\Action::make('hold')
                ->action(function () {
                    dd('action');
                })
                ->disabled($this->items->isEmpty())
                ->label(__('Hold'))
                ->color('secondary'),
            Actions\Action::make('other')
                ->label(__('Additional'))
                ->color('secondary')
                ->modalSubheading('')
                ->form([
                    Forms\Components\Grid::make(1)->schema([
                        Forms\Components\TextInput::make('description')
                            ->label(__('Keterangan')),
                        Forms\Components\TextInput::make('amount')
                            ->label(__('Amount')),
                    ]),
                ])
                ->action(function ($data, $livewire) {
                    dd('');
                })
                ->centerModal()
                ->modalWidth('sm')
                ->modalCancelAction(function () {
                    $this->loadItems();

                    return;
                }),
            Actions\Action::make('pay')
                ->action(function () {
                    dd('action');
                })->color('primary')
                ->disabled($this->items->isEmpty())
                ->label(__('Pay'))
                ->extraAttributes(['class' => 'col-span-3']),
        ];
    }

Dan Harrin•2y ago

modalCancelAction() isnt doing what you think it is you cant use it to run logic its causing the error

BenOP•2y ago

Thanks for quick response Dan! I was also tried using ->after(fn ($livewire) => $livewire->loadItems()). It loads the items for a second but then it got reset again

Dan Harrin•2y ago

what is loadItems and why should it be called when you cancel

BenOP•2y ago

public function loadItems(): void
{
    $this->items = $this->order->refresh()->loadMissing(['items.product.media'])->items;

    $this->total = $this->items->transform(function (OrderItem $item) {
        $item->total = ($item?->amount * $item?->product?->getRawOriginal('selling_price'));

        return $item;
    })->sum('total');
}

public function loadItems(): void
{
    $this->items = $this->order->refresh()->loadMissing(['items.product.media'])->items;

    $this->total = $this->items->transform(function (OrderItem $item) {
        $item->total = ($item?->amount * $item?->product?->getRawOriginal('selling_price'));

        return $item;
    })->sum('total');
}

It was not specifically on cancel, it also happened on confirm. for example I click the confirm in the video above Hey Dan! it's solved now. I'm using the livewire listeners to do that. Thanks for your response! ->after(fn ($livewire) => $livewire->emitSelf('shouldLoadItems'))

Gaming

Programming

Modal action unexpectedly reset some livewire props value on custom page