Filament•3mo ago

Update Edit Modal on Table

Hi all I hope this is simple to someone. I have the following ( Non-Panel): Filament Table -> Edit Action which opens a Modal -> On the modal is a Filament Form which also has a custom Livewire Class so I can embed a Table into the Form Modal. -> Edit a record on the embeded table and click 'save' -> This is where I now need the form modal to ( the one which has a table and a form ) to update its fields from the database? When I update the table on the modal I need the Modal From to update its fields ( a refresh ). Hopefully the screenshot helps clarify. Any ideas? Thanks everyone

18 Replies

David | Fortune ValidatorOP•3mo ago

I think it’s gets complicated because I need the model data itself to update. I have tried dispatching to the parent class with the original table and update from the database. This works in that it updates the table records but the Edit Model which is currently open does not refresh its data. I hope I explained that okay. If not let me know. Any ideas anyone?

Expecto Patronum•3mo ago

Im sorry my question is cannot answer to your question . But im amazed with your layout . I have task that need to implement same as you . Is that possible for me to look at your code in order to know how u do it ? Im still new in filament .

David | Fortune ValidatorOP•3mo ago

I cannot share the codebase due to the work restrictions but I can help. which part were you wanting to replicate?

MilenKo•3mo ago

@David | Fortune Validator Let's start step by step. So if I understood correctly you'd like to move the column on the right (from the screenshot) into a modal which would do it's things (record to db etc.) and upon closing will update some input values on the page live? Sorry if I missunderstood as I am reading the message and assume what was clear so far for me

David | Fortune ValidatorOP•3mo ago

Not quite. The table on the left has records. I click edit on one record. Make some changes. And click save. Once this happens it will in effect update a total field in the database which is the BuyingPrice you see on the right. It’s the live update on the right that I need to occur to match that of the new database value.

Expecto Patronum•3mo ago

The table and summary . How did you manage to design such that way.

David | Fortune ValidatorOP•3mo ago

That calls a livewire component with the filament table in it

MilenKo•3mo ago

@David | Fortune Validator Can't you use a Live wire listener on change of the desired input/element and add a function to either query the updated price from the DB or do some math to re-apply the same calculation? Something wire:change on the view element?

David | Fortune ValidatorOP•3mo ago

I think this is what I’m aiming for but stuck on the how. How to trigger the upgrade. I do utilise ->after when the record saves to update the database. I have tried to dispatch an event to the parent page that contains the form and table. The records update on the table behind the model but not within the modal that’s currently open. I probably didn’t explain that very well so I do apologise I think because it’s all nested tables / actions / modals. It’s working out how to trigger an update on one of them after something else happens in a child element ( the table ) This is a snippet of the code. That livewire class holds the table which I’m updating. I then need the buying price under it to update

MilenKo•3mo ago

@David | Fortune Validator Can you have a small simple project with a simillar improvising setup to share so that you don't share your product app but I can have a look and assist? also it is important to know if your modal is using a livewire component/is part of Filament data edit modal or is a custom code you wrote? Quickly checking up my projects, I've done a similar job by dispatching an event (e.g. PriceUpdated) and since this update is dispatched using Livewire, it is available to all livewire components without any extra needs, so your sidebar can have a listener for the event and trigger an update function with your required method code... Here is what I mean by events:

// Within your Livewire Component trigger an event (adapte the code as it may suite)
public function updated($property)
{
    $this->dispatchBrowserEvent('updated');
}

// To listen for the event:
wire.on('updated', () => {
  // Do something here...
});

// Within your Livewire Component trigger an event (adapte the code as it may suite)
public function updated($property)
{
    $this->dispatchBrowserEvent('updated');
}

// To listen for the event:
wire.on('updated', () => {
  // Do something here...
});

This will allow you to do any sorts of manipulations as you may please and all you need is just to make sure nobody else is listening for the same event, so make it something more distinct (e.g. PriceTotalFromModalChanged etc.)

David | Fortune ValidatorOP•3mo ago

I’ll see if I can get something simply out this weekend, thank you. The model you see open is an EditAction on the table behind the modal. The table you see visibly on the modal on the screenshot is also firing an editaction model where I make some changes and hit save. So in short: two editaction modals are in play. Thank you for sharing your ideas 🙏

MilenKo•3mo ago

No worries, you can ONLY thank me IF it worked, as otherwise it is just some useless blabla. Btw, I can tell that you've changed the Filament admin appearance quite a bit and it does not look like standard admin that everybody can have in minutes. Congrats on that. I myself was looking earlir ho to implement my fully custom design into it and just recently figured out that the entire Filament is just a bunch of well written Livewire components so anything can get changed to whatever as far as is is put in the right places. I wish there were ways to overwrite templates if they are present in a custom theme folder and not just the colors but it seems as so far I did not found a simple way except to modify the code myself to implement some checks if inside a theme folder I have the same compoinent name etc. I guess filament is giving us the freedom to create and maybe I should be using more of Groups, Infolists, Tables etc. but so far I am just starting to sprad my wings with Filament and I still feel sometimes like I am limited in my knowledge as to get a custom template fully implemented quicly into filament... Of course no disrespect tot he huge community and we can be thankful to anybody that shares the code volunteerly as quite a few people I spoke owning a Nova license aggree Filament is a much better option 🙂

Expecto Patronum•3mo ago

This code in your resource or in livewire?

David | Fortune ValidatorOP•3mo ago

It’s all in livewire / filament classes. Which is why I’m struggling to find a way to listen for an event.

bogus•3mo ago

@David | Fortune Validator I'm not sure, but maybe this can help https://laraveldaily.com/post/filament-relation-manager-live-update-main-form-after-changes

Laravel Daily

Filament Relation Manager: Live-Update Main Form After Changes

Dennyvik•3mo ago

try looking into livewire dispatch event, maybe it can help.

David | Fortune ValidatorOP•3mo ago

Thank you. I’ll take a read. This is outside of panels setup though so not sure relationship manager will work for me.

Gaming

Programming

Update Edit Modal on Table