Preventing Input Overwrites During Live Calculations in Filament
I've built a webshop using Filament and created an Order resource that contains OrderLine items. Each OrderLine includes fields for price, discount, and quantity. When any of these fields are updated, an afterStateUpdated function is triggered to recalculate both the total value of the individual OrderLine and the overall Order.
The issue I'm facing is related to the ->live() and ->debounce() methods. When a large order is being edited, these recalculations can take some time. If the user makes further changes while the calculations are still running in the background, once the calculations finish, the form fields are reset to the values that were present when the calculation started—effectively undoing the user's latest inputs.
My question is:
Is there a way to show a loading indicator or temporarily disable the input fields while the calculations are in progress? If so, what's the best approach to implement this in Filament?
2 Replies
I think you'd have to add a
wire:loading.attr="disabled" attribute with the extraInputAttributes() method.
Alternatively, is it possible to do the recalculations in AlpineJS on the front end or do you need database access to recalculate?
Err, actually you probably want wire:loading.attr="readonly" as disabling might prevent the field from being sent in the request.Both the disabled and readonly attributes are not adde when the calculations are ran. Calculations take place in AfterStateUpdated function of a parent repeater so could that be the issue? The values can be caluclated on the front end (only one field "Product" collects data from the database but the issue is not relevent for this field). How do i set this up?