So let's just take a look at them really quickly. We're going to start off with a course here which has many episodes. Now, we're not going to have the ability to sort the course. We want to sort the episodes within this course.

There are lots of different ways that you can sort, but a one-to-many relationship is probably going to be the most common. And of course, we have that episode model just over here as well. Let's take a look at the database really quickly just to see what we have on here.

So a course just has a title and of course, if we head over to the episodes here, this just belongs to a course and also has a title. So we're keeping the data here really, really straightforward. So the first thing that we're going to do is just set up these models in Laravel Nova.

I haven't done that just yet. We're going to start completely from scratch just so this is a little bit clearer. So let's go ahead and create a Nova resource for our course and let's also do that for our episode as well.

So if we head over to course under app and Nova, let's go down here and just fill in some information about this. So the title here is obviously going to be the title of the course. We might want to be able to search on the title as well

and down here we're going to add a couple of fields. So we're going to add a text field in here. So let's just grab that from Nova really quickly. There we go. And we're going to go ahead and make this out

and of course that's going to be the title and we also want a has many relationship is here as well. So let's go ahead and grab that and make that for the episodes over on the episode itself. This is going to be pretty similar.

So let's go down here and just fill in the title and we'll also allow to search on the title as well. And if we come down here, let's go ahead and once again add in some text and let's go ahead and make that out with the title of the episode

and we may as well add a belongs to on here as well. Just so we have this nice and clear so that belongs to a course. We don't actually have the relationship set up for that. So let's go ahead and do that now really quickly

and we want to of course head to episode and just say that this belongs to a course just so we can head back to that course. Once we're finished up creating an episode for it. So this belongs to and it belongs to a course.

So with that done we're pretty much good to go in terms of Nova. So let's give this a refresh. We can go ahead and create a course here. So I'm going to go ahead and create course one

and I'm going to name these specifically with numbers just so we have a better idea of what we're doing and let's create another course in here as well just called course two and let's go over to course one and let's add some episodes for this.

So of course we're going to follow the naming convention here episode one two three and let's just do one more. Okay, so let's stick to course one for now, which has four episodes now

and what we're actually going to do just to demonstrate the sortable nature of this because we're going to be using this package here to do that. Let's just dump these out on the dashboard really quickly. So we'll head over to dashboard dot view.

In fact, let's go to our web routes first and let's go ahead and pass down all the courses that we have and let's also eager load in the episodes. Let's just grab all courses and pass these down

and then of course over on the dashboard we can just iterate through these. So let's go through courses as course and go ahead and end that out there and for each of these let's just create an h2 with a class of font semi bold and let's just say course title

and then of course we want to iterate through all of the episodes. So episodes as episode and let's go ahead and just dump these out here in a div. So episode and title great.

So if we head over now and give this a refresh what we should see is yeah, let's just actually fix that up course episodes. There we go. So we've got episode one two three and four now,

of course, they're in the correct order at the moment, but we want to make these sortable. So let's dive straight into this first package eloquent sortable. We're going to install this get it set up

and then we'll head over to Nova and look at this Nova sortable package. So this basically allows you this package allows you to go ahead and provide an order column and then have your models ordered by that column very very simple, but this does all the hard work for you.

So we're going to go ahead and pull this package in let's head back over to the docks. We can publish the config file if we want to but let's just go ahead and ignore that and we need to go ahead and first of all implement this sortable interface

and then we need to use this sortable trait. So let's head over to our episode model because that's what we want to be sortable and let's go ahead and implement sortable.

We might just need to re-index our workspace. There we go. And we're going to go ahead and use that trait. Let's just find the name sortable trait. There we go. Great. So we've got that in there now.

Now we need to figure out which column we're going to use now. We don't have one at the moment. So we're going to have to go back and add that in. So let's go ahead and create our migration here and we'll just say add order to episodes table

and let's open that up and let's go down here and just add in an integer here. We're not going to make this unsigned because we may go into negative numbers. We might not do but we'll keep it as just a standard integer

and really importantly this needs to be nullable. The reason it needs to be nullable is that when we initially create an episode on a course, this is going to be a null value until this package can work out which value it needs to sign to order.

So it will retrospectively go back and update this order based on the items you already have. Okay, let's go down and finally just add in the drop here. So let's drop the order column and we're pretty much done. So let's go ahead and just migrate this and now we can configure our model.

So we're going to head over to the episode model and we're going to go ahead and add in first of all a fillable column for order. We may not need to do that, but let's go ahead and add that in there anyway, just in case we need to touch it ourselves

and then we're going to go ahead and create out a sortable property in here and we're going to go ahead and give the order column name. So ours is called order. Then we're going to go ahead and say sort when creating and set this to true.

So this is kind of like the config on a per model basis, although you can set that globally and we're also going to say sort on has many and set that to true. Now we're initially just going to comment this out

and when we pull in the Nova package, we're going to see how this value makes the Nova package work in terms of our has many relationship. So our model is now sortable technically. If we head over to the dashboard, nothing has changed here.

Let's now go ahead and look at how we can get the drag and drop functionality of these so we can sort them. So if we go ahead and install this package here and pull this in, there's not really too much we need to do here.

We're going to head over to the episode Nova resource and we're just going to use a trait on here. So this is has sortable rows. Once again, just index that workspace has sortable rows

and that is all we need to do. Now if we just come over to Nova and give this a refresh, nothing has really changed here yet. What we're going to need to do is over on our episode model,

pull back in this config option that we just wrote out. So once we've done that, if we give the page a refresh here, you can see that we've got these icons telling us what we need to do. Well, move to end, move to start, doesn't really matter,

but we can go ahead and order these now. And notice that we have the correct order in here already. This package under the hood is using this sortable package that we just pulled in to show the sorting order,

but also allow us to sort this as well. So once again over on the dashboard, everything looks good. Let's move episode 4 to the second position and you can see that we get a resource successfully reordered.

If we give this a refresh, sure enough, it is still in that place. And when we give this a refresh, you can see that that has now changed around. So probably in 90% of cases, this is how you're going to be reordering things using a HasMany relationship.

But the two packages we've pulled in have lots of different configuration options and more features that you can check out if you need some more advanced usage. But pretty much what we've done here is what we're going to see a lot of the time. So hopefully this has helped showing you how you can reorder your models in Nova.