tonysm/turbo-demo-app

More example

Closed this issue ยท 9 comments

@tonysm can u make more example with turbo. Crud with validation on modal would be great

Yeah, modals seem to be a recurring request. Will prepare something.

About CRUDs, what do you mean? Like a regular page with a table where creation and edit are done via modals? Because the app already has validations lists.. just not a "traditional" CRUD UI, I guess.

"Like a regular page with a table where creation and edit are done via modals" Yeah like this tony.

I've added a tweets example with modals and flyouts.

2021-01-31.18-25-31.mp4

@tonysm found some issue when using "Edit in Flyout" and "Tweet modal".
If I click "Edit In Flyout" -> Clear tweet content -> click submit -> we have validation error.
Close flyout and click "Edit" again, validation error still here and we don't have original tweet text.
Same for "Tweet modal".
I think we need call Turbo.visit() when click "Edit in Flyout"

That wouldn't case the frame to refresh. It would simply "visit" the page, no? Which isn't the same. We would need to re-trigger the frame to refresh, which I thought it did.

I have a clue on what could be the issue. Will give something a try here.

@vanthao03596 I've made it refresh the frame inside the flyout every time it opens: f7caed4

If you could, an example with Livewire and file uploads. I'm trying to make a Livewire component that handles fancy file uploads, but once you hit 'upload', Turbo takes over. Don't exactly follow how Turbo & Livewire lifecycles are interacting, some docs on this would be great. tnx. @tonysm

@tonysm any chance you can do an example of a Livewire form working with Turbo (Frame)? Much needed. Tnx.

@cjaoude can you give me a practical example where you want something like that? I would disable Turbo in a form inside a Livewire component myself (see here) and let Livewire handle it.

If you want to, you could dispatch Turbo Stream events from Livewire actions and have another Custom Element that handles these events to apply the Turbo Streams. There's an example like that in the demo app (here's the Livewire component dispatching Turbo Streams and here's the Custom Element source and the usage).