Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
09. Sortable Eloquent models

Episodes

0%
Your progress
  • Total: 2h 27m
  • Played: 0m
  • Remaining: 2h 27m
Join or sign in to track your progress

Transcript

00:00
The eloquent sourceful package is going to allow us to do a couple of things. First of all, actually order our columns and our cards in the order that we gave these in the database, which might seem pretty straightforward because we can already do that with Laravel, but where this package really
00:15
helps is it will allow us to pass in a list of IDs, and we're going to get that list of IDs when we start to drag and drop any of our columns, it will give us the order of IDs that these sit in, same with our cards as well. What we can do with that is then we can pass these IDs back to eloquent
00:35
sortable, and that will adjust for us in the database, the order that these should be in, so it's incredibly powerful, works really, really nicely and works really nicely with drag and drop sorting. Okay, let's go ahead and get this installed.
00:48
And then as we go through to add in our drag and drop functionality, we'll see everything start to update. So let's pull in eloquent sortable and we can optionally publish the config file. We'll do that anyway, but we're going to be configuring each of
01:02
our models on a case by case basis. So what we can do is inside of any of our models, we can define this style of config, for example, sort when creating, which we want to do, we can also set the order column name, which is an order column by default.
01:18
So let's go and set up the rest of this, and then we'll add some of this config that we can see here. So the first thing that we need to do is pull in the sortable trait within the models that need to be sortable.
01:29
So we know that we've got our column model, which needs to implement the sortable interface. And we also need to pull in this sortable trait as well. So let's go ahead and use that sortable trait just up there, pull
01:42
the namespace in and we're good. This now has sortable functionality. So we're going to define the config here as well. So let's just pull this in at the top.
01:50
And we know that our column name is order. We changed this around and we're going to explicitly set sort when creating to true, because when we create new columns and cards, we want the order to be sorted and updated.
02:02
Okay. We're going to do exactly the same thing for our cards now. And then we will actually be able to output them in the right order. So let's go over to our card model.
02:11
Once again, we're going to implement the sortable interface. We're going to use the sortable trait, and we're going to go ahead and define that config with order as the column name. So let's change around the order of some of the things that we have in here.
02:25
So we've got one, two, and three. If we head over to the database, let's just reverse this. So let's say one, two, and three, and let's just check this out. You can see it just stays exactly the same.
02:35
That's kind of obvious. What we can do is come over to our board index or board show, and we can grab the columns that we want. Use the ordered functionality that comes with this package.
02:49
And that will order it by the column that we've set in the database. So we don't have to do that manually. Okay. So for our columns, they're already in the right order, but if we try and do
02:57
this same thing for our cards within our columns, so if we just open up our column live by a component, we'll do exactly the same thing. So let's say ordered and get, and let's try this out. There we go.
03:13
Three, two, and one. So everything is nicely ordered now. And after we've completed our drag and drop functionality, we'll see how we can put these orders back into the database using this package.

Episode summary

In this episode, we're diving into making our Eloquent models sortable using the Eloquent Sortable package. First, we discuss why you'd want to use this package to keep the order of your columns and cards exactly as intended in your app, especially when users start dragging and dropping stuff around.

We walk through installing the package, publishing the config (which is optional but helpful), and then head into our models — like columns and cards — to implement the sortable interface and pull in the sortable trait. We go step-by-step setting up the required configuration, such as specifying our order column and ensuring new items are sorted on creation.

Finally, we update our queries in controllers and Livewire components to fetch ordered results automatically. By the end of this video, our columns and cards show up in the right order, and we're all set up to push any changes back to the database after drag-and-drop operations. Super handy for keeping your UI and data perfectly in sync!

Episode discussion

No comments, yet. Be the first!