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
06. Scoping the order update
Transcript
00:00
Since we're dealing with links that only belong to the current user, it doesn't make sense to globally do this on our link model.
00:07
So let's take a look at the set new order method within this package and see what we can do here. OK, so we've got a bunch of IDs that we're passing in. We already know that.
00:15
We've got a start order, and that is just one. We can leave that as it is. We've got a primary key column. That's going to be the ID.
00:23
And modify query is a callback. So this sounds like something that we can use. Now, let's just demo this functionality out by creating out another item in here.
00:33
Let's call this item x. And we're going to set that to user 2. And we're going to set the order to empty. Now, if I get rid of all of these
00:42
and we try the ordering again, remember, this is scoped, so we don't see the item here. Let's pull this down and then come over to the database and see what we've got.
00:50
So this is fine, because we are passing in only the things that we want to order. But we really want to scope this to the current user just in case.
00:58
It doesn't make sense to do this globally. So let's go ahead and follow exactly what we had here. We've got the start order. Then we've got the column here, which is the ID.
01:07
And then we have this closure back in here that we can use to order this. So in here, we get a query builder, which we can continue to chain in.
01:15
So from that query builder, we're going to say where belongs to. So this is the link, remember. And we want to make sure that that belongs to that user.
01:26
So this is just eloquent stuff here. And this will make sure that the links that we are updating only belong to that user. Now, one issue, we don't have the relationship set up
01:35
in our link model. So let's go ahead and link this back to the user first of all before we run this. So we'll say this belongs to, so that can actually work.
01:45
And we know that the links belong to a user. OK, great. So let's go over and just try this again. We won't see much difference.
01:52
Let's reorder this a few times and give that a refresh. And this would have now been completely unaffected by that query, just in case anything matches. So there we go.
02:03
We have successfully scoped this to the current user because, of course, we don't want to just pass these in. And remember, even if our code as it stands at the moment doesn't allow the order to be changed based on what we've
02:16
selected on the front end, remember with Livewire, things like this should be dealt as public data that's getting passed through. Anyone can pass through any order in here.
02:25
So they could technically pass an ID of an order in for one of the links that doesn't belong to them. So by scoping it to the current user, we're protecting against people ordering other people's links.
6 episodes• 22 mins•4 months ago
Overview
Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js.
We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database.
Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.