Drag and Drop Sorting With Livewire
This episode is for members only

Sign up to access "Drag and Drop Sorting With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
05. Updating the order

Episodes

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

Transcript

00:00
So with the IDs that we're getting through with our custom sorted event, we want to pass these over to LiveWire to then actually update
00:06
the links. Let's go ahead and create out a method to do this first of all, and then we'll go ahead and call this. So in here, let's go and create out a update order method.
00:17
And for now, let's just die dump on here just to make sure that this is working. So let's just say update. OK, so how do we call this from Alpine?
00:25
Well, this is really, really easy. All we need to do is reference wire, and then go ahead and call the method that we've just created. So let's say update order, and that's
00:34
pretty much what we need to do. So let's go over and just try this out. And yeah, there we go. We're calling that LiveWire method directly from Alpine.
00:42
Obviously, we need to pass this data in. So let's go and pass the detail in, which contains, remember, that array of IDs. And then we can go ahead and accept this into here.
00:51
So let's say array, and we'll call that order. And let's instead die dump on that order just to make sure we're getting that through. Great.
00:58
OK, let's go ahead and try this again. And yeah, there we go. We get 213 with the way that we've ordered that. OK, so now we want to update the order of the actual links,
01:08
the most important part. So to do this, we just use the link model. Now remember, at this point, this isn't scoped. We'll cover that in the next episode.
01:16
But this will just adjust the order that we've set. So I'm going to say link set new order. That comes from that sortable package, that eloquent orderable or sortable package
01:25
that we've just pulled in. And then we just need to pass that directly into there. And would you believe that is as easy as it is? So let's go over and see if this has worked.
01:36
Let's come over. I'm going to move item one to the middle. There we go. Give that a refresh.
01:41
And yeah, sure enough, the ordering has been set. And of course, when we refresh the page, this order is going to be in the order that we've given. Great.
01:50
So yeah, we can just go ahead and sort these however we want now. And it's always going to be updated in the back end. OK, so there's one problem here.
01:58
If we have a link that doesn't belong to that user, this is also going to potentially be included in this sort. So let's go over and fix that in the next episode.

Episode summary

In this episode, we work on updating the order of our links after they've been sorted in the front-end. We start by making sure we can pass an array of sorted IDs from Alpine.js over to our Livewire component in Laravel. To do this, we create an updateOrder method in Livewire and hook it up so that it's triggered when the sort event happens.

After confirming that we're receiving the data correctly (using some good old dd() debugging!), we use the power of our sortable package. With just one line, we set the new order for our links using the IDs passed in. It's super satisfying to see it working — items switch positions in the database, and the next time you refresh, they stay right where you moved them!

We also briefly mention a security concern: right now, any link could be reordered, not just the user's own links. We'll fix that in the next episode to make sure users can't mess with each other's data.

Episode discussion

No comments, yet. Be the first!