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
02. Listing some orderable data
Transcript
00:00
So chances are you are integrating this into an existing app, but if you're not, I'm just going to show you around really quickly the setup that I have in case you want to follow along.
00:10
So I've gone ahead and created out a fresh Laravel application without any starter kit. I've then gone ahead and installed Livewire with Composer, and I've gone ahead and generated an app.blade.php layout just here. I've gone ahead and pulled in our assets because we're going to need to use JavaScript to write out.
00:28
I'll plug in a bit later. And I've also included app.css. And as you can see, I've pulled Tailwind in here. If you're already working with a starter kit, you'll probably have all of this set up.
00:39
OK, so what we're going to do is create out a component that works as a full page component. So let's do that first of all and see how that looks. So let's run phpArtisan Livewire make. And let's make our component just called links.
00:53
We're going to list out a bunch of links here that we can order. It doesn't really matter what data we're working with. OK, so now that we've done that, instead of registering this directly within a blade template, we're going to directly reference that links component inside of here.
01:09
And when we come over, as you can see, we don't get much difference here. That's just because this component is now using this default app.blade.php file. And that's within the components and layout section under views. OK, so over on our links component, the blade file,
01:26
let's just go ahead and output something so we know that we can see something in here. And yeah, sure enough, this works. OK, so I'm going to first of all come over to app.blade.php. And I'm just going to wrap all of this slot content inside of some kind of container,
01:39
just so we can keep this nice and tidy while we're building this. So let's go ahead and set a max width here of, say, 2xl. Let's set the margin on the x-axis to auto. And we'll set a little bit of padding on the y-axis just so it moves away.
01:55
As you can see, that just sits in the middle. You can even probably get away with reducing this a little bit more. OK, so now that we've done that, let's get some data on the page. And for that, of course, we are going to need a model.
02:06
So let's make out a model here and call this link. Create a migration alongside of this. And let's go ahead and fill this in. So let's say create links table.
02:14
And let's keep this super simple. Now, what I want to do is scope this to a user. Because when we look at later updating the order of this with the package that we're going to pull in,
02:24
we're going to have to scope this specifically to the currently authenticated user. What you don't want to do is update all of the records in a single table with the new order you've just created, or that's going to affect other people's data as well.
02:37
So let's go ahead and add in a foreign ID here for the user. And let's go ahead and run our constraint on that. And let's just add some really basic data about this item. So let's say string and URL.
02:51
And since we're ordering this, of course, we're going to need some sort of column to order this. So let's go ahead and choose an unsigned integer here. Let's call this order.
03:00
And we're going to make sure this is nullable. So by default, things might not have an order. OK, so I'm going to go ahead and run my migrations here. So php artisan migrate.
03:11
And there we go. Everything has been created. And as you can see, we've got our links table. OK, so let's just add some dummy data in here just to test this out.
03:18
Now, we don't have a user at the moment. But we can very easily do that on the command line with Tynker. So let's go ahead and boot up a Tynker session. Let's use our user model here.
03:28
Grab a factory instance out. And just create out maybe two users, actually. So let's say times two and create. And we should end up with two users in our database.
03:40
And let's just take a look here. Yeah, there we go. Great. So let's just add these for the first user first of all.
03:46
So I'm going to go ahead and set that as user one. Let's go ahead and just set this to item one. We'll just keep this simple for now. And we'll leave the order as null.
03:55
So let's save this out. And we'll go ahead and duplicate this down. And we'll just create three items here. Let's create three of these all with an empty order.
04:05
OK, let's get these output to the page. And then we can talk about how we're actually going to order these. OK, so over in our links component. So let's open this up.
04:13
We're going to go ahead and just pass these directly down to our template. So let's go and fetch out our links here. And let's just say get for now just so we can dump them out to the page. And let's come over to our links.play.php file.
04:27
So let's go ahead and put these in a wrapper. And we'll space these out with tailwind. So let's set a space y of three here. And then we can just very easily iterate over each of them links as a link.
04:39
And then that for each. And then we can go ahead and output them in here. So we are, of course, going to use the link URL. Let's grab that.
04:48
And we should see something like the following. Great. OK, so since we're going to be dragging and dropping these, let's add some quick styles to this.
04:54
So I'm going to set a background of slate 200 here. Let's set the text to gray 700. And we'll go ahead and add some padding as well. So let's say three and six.
05:04
We'll make this rounded. And let's go ahead and set the font here to medium. I think we should just be about done. OK, great.
05:11
So this looks like something that we can go ahead and order. OK, so how are we going to go ahead and order these models? Well, we could, of course, do this ourselves. But I'm going to lean on a package which allows us to set a sort order
05:23
and order things really easily. So we're going to go ahead and pull in the eloquent sortable package from spartzy. So let's go down here and pull this in and see how it works. It's really, really easy to use.
05:34
So let's go ahead and install this package and check what else we need to do. So we're going to go ahead and publish the config file because we may need to change around the default orderable column. So let's go ahead and do that now.
05:45
That's gone ahead and created our config file over in eloquent sortable. And as you can see here, we've got this order column name. Now, we chose order as the column name. So I'm just going to go ahead and switch this over.
05:59
OK, so we'll leave all the other options here. But let's now take a look at what else we need to do. So we're going to go ahead and pull in the contract here. So let's go over to our link model.
06:10
And go ahead and implement this. Let's go ahead and pull that in. And we just need to go ahead and pull in this trait as well. So let's go and use this trait in here.
06:18
And we should be pretty much done. Great. OK, if we head over to the browser and just check this out, you can see there's not much difference here.
06:25
But if we go and order this within our link component, we have access to new functionality now. So we could say ordered and get. Now, let's go over and give that a refresh.
06:37
As you can see, there's no difference here. But once we do start to change the order around, that is going to affect this. For example, I could set this to 3, 2, and 1.
06:46
And as you can see, they've changed over. Now, we're going to leave these as null for now. Because we're going to see how this package is going to update this. But there's one glaring issue here.
06:54
And these are not specifically for this user. So I'm going to go ahead and head over to the user model here. Create out a new relationship. And this is incredibly important.
07:04
Because when we get to change over the order later, there's a really crucial part of this package where we need to scope this to the user. So let's go ahead and say links in here.
07:14
And then we can access that relationship directly. So let's return that this has many and link. And we're done. So now we can switch this over to auth, user, and links instead.
07:31
And we can say ordered and get. Now, at the moment, we don't have a logged in user. So just to demo this out, we're going to go ahead and use the auth facade here, or the auth helper.
07:43
And we're going to say log in using ID 1. And that will just log that user for us just to test this out. And as you can see, this is working as we would expect. OK, so we now have orderable data.
07:54
And once we, on the front end, get this plug-in to change the order, we can then feed that back to our links component. And then we can actually adjust the order in the database every single time something is dragged.
6 episodes• 22 mins•1 year 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!
Episode discussion
No comments, yet. Be the first!