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
10. Sorting columns

Episodes

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

Transcript

00:00
The goal of this episode is the ability to drag and drop our columns across to a new position and have that column position or order set in the database. Okay. So we're going to use sortable JS for this, which is a really popular JavaScript library
00:20
for basically just sorting stuff either between different components, like we need in a Trello clone, but also just sorting our columns or our cards. Now we're not going to use this on its own. We need something that tightly integrates with Livewire.
00:36
So once we have gone ahead and applied everything to our columns and our cards and we drag, we get all the data we need to then put this back into the database. So for that, we are going to use the Livewire sortable JS package. Okay.
00:52
We're going to get this installed, get this to actually work and have the ability to move stuff, and then we'll look at syncing this back to the database. Okay. Let's go and pull this in with NPM.
01:02
So let's head over to the editor, pull this in. And what else do we need to do here? Well, we need to go ahead and just pull this into our bundle. So we can just do that directly within AppJS under our resources.
01:15
Okay. Let's pull this in and everything should be registered now and pretty much ready to go. Okay. Let's go through the steps to get our columns actually draggable.
01:24
And like I said, we'll then get these synced in the database. Now, before we do anything, we want to come over to our board show component, and we're going to add in a method in here for what's going to happen when we actually sort something. This will eventually be responsible for setting the new order.
01:43
But for now, let's just scaffold this out. While we're here, we might as well pull in the items that we're actually going to get in here and we'll die dump them in a second. What we're really interested, though, is over on our board show component,
01:56
setting up this iteration so we can order each of these columns. Okay. Let's go ahead and just pull everything down here so we can start to apply any of the attributes that this needs.
02:08
So we are going to use wire sortable, which comes from that package, and we are going to invoke sorted when these are moved. Now, if we head over to the browser, you'll notice that we still can't sort everything. That's just because we need to know what needs to be sorted, which in our case is just
02:26
each of these columns. Now, rather than do this directly within the column, we're going to go ahead and add a wrapper to this to define out the handler for this. So let's go and first of all, add in our wire key because we're creating an outer element
02:40
now. We also need to specify a unique key in here. So live wire knows what to update. And then in here, we're going to use wire sortable again, but we're going to choose
02:50
the item. Now, the item can contain any unique value that you need to be sent back to that sorted method in our board show component. So in our case, we know that is just going to be the column ID because we're going to
03:04
pass the column ID back to the eloquent sortable package to put these in the right order. OK, so now that we've defined the overall sortable and the item itself, let's go over and see the difference. So now, as you can see, I can start to drag these around.
03:20
When I let go, we get a little bit of an issue, but we can fix that up. OK, so now that these are sortable, let's go ahead and just dump out in our board show what we get within this items array, and then we'll fix up that hydration issue. OK, let's go ahead and drag one.
03:36
And here we go. So we've got three items in here, and you can see that for each of these, we get the order, which is the order we want to put back in the database and the value, which is the ID of the item.
03:48
Now, with the eloquent sortable package, we don't actually need the order because that will take care of the order for us. But we need to know the ID in the correct order within this array so we can put that back in.
04:01
OK, let's fix up this hydration issue where when we move one, it's not really doing anything. Let's just try that again and see what the issue might be. OK, let's go over to our console and check this out.
04:12
So I'm going to try and move one of these over. And yeah, it looks like it can't render a particular component here. So it might just be because of this key here that I didn't specify properly. Let's just try that again and see if that works.
04:24
And yeah, there we go. I just used the wrong syntax. OK, so now that this is sortable and we can move these in the right order, of course, at the moment, nothing is updating because we are not saving this in the back end.
04:38
Let's go over to board show and look at what we need to do here. The first thing that we need to do is pluck out the correct order of all of the IDs that we need. In fact, before we do that, let's just remind ourselves about these items.
04:51
And I'm going to move this over and we need to pluck out this value, which is the ID. That's what we assigned over here. OK, so we're going to pluck these out now. That's pretty straightforward since we're just dealing with an array.
05:04
We can collect this up so we get a nice Laravel collection. We can pluck out that value, which is the ID of each of these items, and we can cast that back to an array. What we can now do is use the sortable package to set a new order.
05:19
I'm just going to die dump on this order just so we know that it's right. So remember, we've got ID of one, two and three. That should change to two, one and three. And yeah, sure enough, that's in the right order.
05:31
OK, so to use the eloquent sortable package that we pulled in in the last episode to resort this, we're going to reference the model directly and we're going to say set new order. Now, this is an incredibly simple thing that we need to do. It's just literally passing the new order in here.
05:50
That's all we need to do. And that will now resort that in the database for us. So if we head over and we try and move this across, you can see that it's changed. Give the page a refresh.
06:01
And now that is resorted. It really is as simple as that to update the order in the database. But we've got a little bit of an issue here. And that is we want to scope this to the currently authenticated user so people can't order our
06:16
columns. If you think about this, what this method is doing is it's taking a bunch of IDs and setting a new order in the database. Now, there's nothing here to protect us against someone else passing in a list of our column
06:30
IDs, which they could just guess and resorting them. So let's take a look at this set new order method and see what it does. Now, IDs we know we've already passed them in. We've got a start order, which we can set to one.
06:42
We've got a primary key column, which we can specify. But then we've got this callable, which allows us to modify the query. So within this, what we can do is we can scope this to the currently authenticated user. OK, let's go ahead and pass in one for the start order.
06:58
Let's pass ID for what we are passing in here because it's just a bunch of IDs. And then let's go ahead and pull in this callback just in here, which gives us a build instance, which we can scope with. So we want to say, and this is the entire reason that when we set up our database,
07:17
we set the user ID directly in here. We can take our query and we can say where the user ID equals the currently authenticated user's ID. So what this will do is it will only sort the columns that we now own.
07:34
OK, let's go over and try this again. I'm going to move column one to the end. And yeah, sure enough, it's worked. But it's now tied down specifically to our user.

Episode summary

In this episode, we're making our board columns draggable so you can reorder them however you like, and that new order actually gets saved back to the database! To do this, we start by using the "sortable JS" library, which is a super popular way to let users drag and drop items on the page (Trello-style!). Since we're using Livewire for the frontend, we also bring in the handy Livewire Sortable JS package for a tighter integration.

We walk through installing the package, bringing it into our JavaScript bundle, and wiring everything up inside our Board Show component. You'll see how we make each column draggable, set up the necessary Livewire directives, and handle the drag events. There are some little hiccups (like hydration issues and fixing keys), but we iron those out together.

Once that's done, we tap into the magic of the Eloquent Sortable package to reorder columns in the database. We collect the new order of column IDs after a drag, then pass them to the model to persist the sort – it's crazy simple! But, we take it a step further and make sure the sorting action is scoped to the currently authenticated user, so people can't mess with each other's boards. After all that, your columns are now fully sortable and up-to-date in the database, just like you'd expect!

Episode discussion

No comments, yet. Be the first!