Is there a way in Filament to calculate a field on the client side without Livewire? AlpineJS?

I have a form as defined here:

->form([
    Forms\Components\TextInput::make('adjustment')
        ->live()
        ->helperText('Increase or decrease available quantity')
        ->integer()
        ->required()
        ->afterStateUpdated(function (Forms\Get $get, Forms\Set $set, Location $record): void {
            $set(
                'available_quantity',
                $record->pivot->available_quantity + $get('adjustment')
            );
        }),
    Forms\Components\TextInput::make('available_quantity')
        ->disabled(),
    Forms\Components\Textarea::make('comment')
        ->helperText('Reason for adjustment'),
])
->fillForm(
    function (Location $record): array {
        return [
            'available_quantity' => $record->pivot->available_quantity,
        ];
    }
)

->form([
    Forms\Components\TextInput::make('adjustment')
        ->live()
        ->helperText('Increase or decrease available quantity')
        ->integer()
        ->required()
        ->afterStateUpdated(function (Forms\Get $get, Forms\Set $set, Location $record): void {
            $set(
                'available_quantity',
                $record->pivot->available_quantity + $get('adjustment')
            );
        }),
    Forms\Components\TextInput::make('available_quantity')
        ->disabled(),
    Forms\Components\Textarea::make('comment')
        ->helperText('Reason for adjustment'),
])
->fillForm(
    function (Location $record): array {
        return [
            'available_quantity' => $record->pivot->available_quantity,
        ];
    }
)

The problem with this calculated field available_quantity is that the calculation requires the adjustment field to be live which causes debounce issues with the client as seen in the attached GIF. When updating the field that has already sent an ajax request to the server, the client side updates but then reverts if another client side update occurred before getting the ajax response. In a non-Filament app I'd solve this by just doing the calculation through AlpineJS and never requiring a live field. However, I'm not sure how I'd do this in the context of a Filament app.

Solution:

Actually what you want is to use AlpineJS to do it for you.. using extraAttributes I suspect? Roughly like: ```php Forms\Components\TextInput::make('adjustment') ->helperText('Increase or decrease available quantity')...

Jump to solution

6 Replies

Solution

toeknee•5d ago

Actually what you want is to use AlpineJS to do it for you.. using extraAttributes I suspect? Roughly like:

Forms\Components\TextInput::make('adjustment')
    ->helperText('Increase or decrease available quantity')
    ->integer()
    ->required()
    ->extraAttributes(['x-model' => 'adjustment', '@input' => 'updateAvailableQuantity()']),
Forms\Components\TextInput::make('available_quantity')
    ->disabled()
    ->extraAttributes(['x-model' => 'available_quantity']),
Forms\Components\Textarea::make('comment')
    ->helperText('Reason for adjustment'),
])
->extraAttributes(fn($record) => ['x-data' => '{
    adjustment: 0,
    available_quantity: ' . $record->pivot->available_quantity . ',
    updateAvailableQuantity() {
        this.available_quantity = ' . $record->pivot->available_quantity . ' + parseInt(this.adjustment);
    }
}'])
->fillForm(
    function (Location $record): array {
        return [
            'available_quantity' => $record->pivot->available_quantity,
        ];
    }
)

Forms\Components\TextInput::make('adjustment')
    ->helperText('Increase or decrease available quantity')
    ->integer()
    ->required()
    ->extraAttributes(['x-model' => 'adjustment', '@input' => 'updateAvailableQuantity()']),
Forms\Components\TextInput::make('available_quantity')
    ->disabled()
    ->extraAttributes(['x-model' => 'available_quantity']),
Forms\Components\Textarea::make('comment')
    ->helperText('Reason for adjustment'),
])
->extraAttributes(fn($record) => ['x-data' => '{
    adjustment: 0,
    available_quantity: ' . $record->pivot->available_quantity . ',
    updateAvailableQuantity() {
        this.available_quantity = ' . $record->pivot->available_quantity . ' + parseInt(this.adjustment);
    }
}'])
->fillForm(
    function (Location $record): array {
        return [
            'available_quantity' => $record->pivot->available_quantity,
        ];
    }
)

mortyOP•5d ago

exactly what I'm looking for thanks 😄 I'll go add this and report back.

mortyOP•4d ago

So, It's not working but I believe because this is adding the x-data to the trigger button and not the form itself.

mortyOP•4d ago

Not sure how to overcome that I tried using extraModalWindowAttributes but that doesn't add anything. I tested extraModalWindowAttributes with a test attribute and it works so it appears that because there is already an x-data attribute on the modal, it doesn't add the custom one. Solved. I put the extra attributes on a form group component: Forms\Components\Group::make()->extraAttributes()->schema([]) Everything is working speedily! 😄 thanks.

toeknee•4d ago

Fantastic work!

Gaming

Programming

Is there a way in Filament to calculate a field on the client side without Livewire? AlpineJS?

Did you find this page helpful?