Data Tables with Turbo Frames

Hey @Ruslan

That's a complex question, these effects depend on the browser, and probably some of them will not work at all. Probably if you share what browser you are using, I will be able to help more.

Cheers.

Hey @Nick-F!

Morphing is alive and well on Turbo 8, though I admit that I don't have any real experience with it yet (not because it's bad or anything, I've just not been available!). If you have the meta tags, I can't think of a reason why you wouldn't see the morphing functionality... which I realize isn't much help, but maybe it'll give you more confidence to try again.

Cheers and good luck!

Hey @CDesign!

Sorry for my VERY slow reply! I would check a few things:

A) Is Turbo running otherwise - like do you see no page reloads during normal navigation? My guess is yes, but we need to check.

B) Watch your browser console closely. Do you see any errors? It's possible that the form is submitting into the frame... but then some error (e.g. a 500 error) is causing the response to NOT contain the matching frame... and then perhaps (I can't remember if it actually does this), the entire page is refreshing.

If you're still having the issue and this doesn't help, let me know!

Cheers!

Hey Adn,

Hm, maybe you add it yourself :p Anyway, if you want to reload content in the specific frame - I believe you need something like this:

<a href="{{ path('your_route') }}" data-turbo-action="replace" data-turbo-frame="current_frame">My Link</a>

I.e. data-turbo-action="replace" should do the trick, you just need to point that link to specific frame, and specific URL of course. It might be so that it will work with empty href though, i.e. it will be pointed to the same URL you're currently on, but I didn't try it :)

I hope this helps!

Cheers!

Thanks for your reply !

My bad, a target="_top" is enough...
It still new for me ! Sorry for the inconvenience ! :D

just for clarification for others

in file _card.html.twig

<turbo-frame id=planet-card-{{ planet.id }}>
 <div class="px-6 py-4">
        <h4>
        <!-- target="_top" is important -->
            <a class="hover:text-blue-300 transition-color duration-100" target="_top"
               href="{{ path('app_planet_show', { 'id': planet.id }) }}"> {{ planet.name }}</a>

        </h4>
        <small>{{ planet.lightYearsFromEarth }}</small>
    </div>
</turbo-frame>

Hey Adn,

Ah, ok, no problem :) Yeah, it's easy to stuck in new stack ;) thanks for sharing your final solution with others!

Cheers!

Hey @kbond!

After talking with you on Slack, you basically figured this out on your own... then told ME. Yes! It's awesome! We can delay the CSS transition so it only happens if the page load is particularly slow. All in CSS:

<turbo-frame
    id="voyage-list"
    data-turbo-action="advance"
    class="aria-busy:opacity-50 transition-opacity aria-busy:delay-700"
>

I LIKE that

Update: the issue with the page jumping to top after using data-turbo-action="advance" happens in Brave browser, not on Firefox, Chrome or Edge.

Hey @escobarcampos!

Ah, fascinating! It works in every other browser? I would not have expected that detail to be browser-dependent...

Hey @Fabrice!

Sorry for the slow reply! But I'm happy to chat about this topic!

1. Requests are submitted via Ajax using Turbo Drive (if I understood correctly). But if our application is not ready to accommodate Turbo Drive (since all our Javascript must use Stimulus), what should we do?

For this example of data tables, the Ajax is submitted via Turbo Frames - we put a frame around the <table>. So, this only means that any JavaScript behavior inside the frame needs to be written in Stimulus. The rest of your site should be ok without it. So, you would disable Turbo Drive (like we talk about in the Drive chapter), but then use frames for this. It is possible that using the advance might not play nicely with a disabled Turbo drive... I'm not sure. It's worth a try!

1. This question follows on from the 1st. Do you think it is possible to shift all this logic into a LiveComponent? As well as the method that will return the results? I mean, can we in LiveComponent create a LiveAction that we can set the #[MapQueryParameter] to in order to make this all work?

Yup! You'll need this PR - https://github.com/symfony/ux/pull/1230 - in order for the URL on the page to change, but I'll merge that really soon. And you might not even need a LiveAction I would bind the search input to a LiveProp model, then the navigation links would trigger a model change for a page model - e.g. changing it from 2 to 3.

1. ...do you think it is possible to create a trait (like ComponentWithFormTrait but something like "ComponentWithDataTableTrait"), and this trait would define all the logic and we would have some abstract methods to define such as the targeted entity, the repository method to use, the sort columns, etc.. And everything would be done automatically?

Yea! Definitely! That's a really cool idea. More broadly, I'd love to see a PHP library we could use to help build the "data table" and the sort column links, etc. But, anyway, if you built this all inside of a LiveComponent, indeed, I think there would be a lot of boilerplate code. You could have the query as a LiveProp(writable:true), a $page = 1 as a LiveProp(writable: true) and also 2 for sort direction and sort column. You could have one abstract method - e.g. getQueryBuilder() - where you would use the $query prop to create the query builder for that entity. Then a method - e.g. getResults() in your trait - that calls this method, sets the orderBy on it, initializes the pagination and returns it. You would use this.results in your template to loop over. Finally, you might have some sort of helpers to help build the pagination links and column sorting headers.

If you try this out, I'd love to know how it goes. It feels generic enough that it could at least be something shared publicly.

Cheers!

Thank you for your reply ! So I will try all this soon when I have time, and post the result to you!

thank you !