-
So we'll just call this second and then we'll add in another one called third. Well, if I could spell right. Currently, if we click on our little drag handle
-
and reorder these, we see them reordered here on our page, but that's not actually persisting through to our database. So whenever we refresh, they go right back to the same order that they were previously.
-
Our next goal is to get that sort change to actually persist through and hold by storing into our database. So what we wanna do is jump back into our text editor,
-
jump into our sortable modules, and we'll focus specifically on our modules here in this lesson. As there's gonna be quite a bit of difference here between how we sort our modules and how we sort our lessons.
-
The sortable component from viewDraggable here is going to emit out an end event whenever we drop an item after we've clicked and dragged it. So as we jump into our browser,
-
if we click on this item, whenever we move it, that end event hasn't emitted yet. It's whenever we actually let go of that drag, that's when the end event fires.
-
So we can use that as our commit event to send that change out to our database. And we capture that by adding it as at end,
-
and we can add an onModuleOrderChange function into our script. So just after our onEdit,
-
I'm gonna add in a function onModuleOrderChange, and we don't need to accept anything into it as our view model already has the update back to it.
-
So by the time we get the event here at our end, it's already been committed to our view model, so we have it ready to work with there. And from our modules view model here,
-
all that we care about are the order of the IDs for the order change event. So we'll grab them and put them into just an ID number array by looping over a module's value with a map,
-
grabbing each module and plucking just its module ID. With that, we wanna use Inertia's router. So we can import that from InertiaJS V3, if it's not already, and we're gonna send out a patch request
-
to our prefix URL slash modules slash order, and we'll create that route here momentarily. With that patch, we wanna send up the new ID orders,
-
and we also want to preserve the scroll position. So we'll set that to true. And I don't think my router actually imported, so I'll hit command dot and double check that. There we go.
-
That should be all that we need here on the client side. So I'm gonna go ahead and give that a save. We got some formatting action going on. And next, let's go ahead and jump into our terminal and create ourselves an action for this. So we'll do nodase make action,
-
put this inside of our modules folder, and we'll call this update module order, and clear that out. Now, jump back into our text editor. And just like with our tag, before we jump into that action,
-
we need to create a validator for this. Just kind of verifying that the IDs that we're patching up are an array of numbers. We'll have our module order validator
-
equals vine compile vine object with our ID's key set to a vine array of type vine number. If we're reordering something,
-
we should at least have one ID in our array. So neither one of these are going to be optional. If you wish, you can add the exist organization on your vine number.
-
That will verify that each number in your array exists in the organization, but that will do a query per ID that you have in that array. We're not gonna be doing that here today because how we're gonna be writing this
-
inside of our action to update the order of our modules is gonna ensure that we don't have any cross-pollination between our courses going on with our module IDs. So with our validator set there,
-
let's go and scroll back up to our module actions and we should be able to jump into our update module order action. For this, we will take in our organization
-
of type organization. We'll take in our course ID of type number, and then we'll take in our array of IDs of type number array.
-
The IDs here being our module IDs in the same order that we want them to be persisted in. We'll go ahead and grab those out of our handle method. And the very first thing that we wanna do here
-
is grab our course using that course ID. So we'll reach through our organization to the related courses who query the specific course ID here that we are looking for,
-
and then grab the first or fail. Then we wanna find the modules. And I'm gonna use let to hold this modules variable here as we'll end up overriding the value.
-
Set that to await and reach through our course to its related modules, and we can just query all of them there. So by grabbing our course first and then querying through the course,
-
we're getting just the modules that are specifically bound to that course. Now that we have our modules, we want to update our order. And just in case any of our modules run into an issue,
-
we only want to commit any order changes if they are all successful. So we'll wrap this in a transaction, importing DB from listed services DB
-
and calling transaction, providing in our managed transaction callback here. Then we'll go ahead and loop over each module inside of our modules array.
-
The first thing that we'll do is grab its new order using our IDs array to find the index of the module ID that we're currently looping over and then incrementing it by one
-
because our modules ordering starts at a one based index and not zero. So we wanna take whatever that index is that we found and increment it by one because say the index is zero
-
instead of our IDs array. We want that to end up being one at the end of the day as our updated order. Then we'll tell our module model to use our transaction,
-
passing it our transaction object. And then we can await module and merge in the updated order value and then call save to save it to the database.
-
Outside of our transaction, after all of that has persisted into our database, we can overwrite our modules object to just kind of resort it.
-
So we'll call modules.sort taking an A and B where A.order minus B.order to get the final updated module ordering.
-
An alternative there is to re-query it based off of the order. Then finally, we'll go ahead and return back that modules array. So we can go ahead and give this a save and jump now down to our modules controller
-
where we need to add in a new order method. So we'll do async order, take in our params, request, response, and organization from the HTTP context.
-
Just like everything else, since we have a validator, we'll first want to validate that and we can pluck out specifically just those IDs from that validated data. So we'll call validate using
-
and pass in our module order validator to that. Remember, this one doesn't need our organization metadata, so we don't need to worry about passing that into this validator. And instead, we can go ahead
-
and directly updates our module order using that action called the handle method. And inside of here, we can pass in our course ID, which is gonna come from our params,
-
course ID value, then the organization, and finally, that ID's array. Then we'll want to return response, redirect right on back and give that a save.
-
Taking us now into our web routes and I'm gonna put this one before our other patch. So router.patch slash courses slash course ID
-
slash modules slash order. We don't need any specific ID here because this is impacting all of our courses modules.
-
This will then use our modules controller, it's order method, and we give it a name of modules order. Give it a save and let's test it out. So we'll jump into our browser.
-
So I'll do a refresh there. We should be able to take our third item and move it to the second position. And it looks like it got an object. This is on our courses query.
-
So I'm assuming that is meant to be our course ID. So we should be able to jump back into our text editor. This is most likely going to be inside of our sortable modules.
-
And it would be where we're passing through the course ID. And actually, yeah, I'll tell you what. So we have that prefix URL as a computed property, which means that it's a proxy.
-
So on our prefix URL that we're using inside of our script, we need to tack onto that a dot value so that we get to the actual computed value there. So let's give that a save.
-
Jump back into our browser now. We can get rid of this pop-up, give our page here a refresh. You should see your order reset back to what it was. And let's try that one more time. So let's click our third,
-
move it up to the second position, drop it in. And okay, so now nothing happened or so it seemed, but if we give our page a refresh, you see that we're still persisting that third at the second position
-
and second at the third position. If we now move our second item from third to first, you'll see that our lessons have switched
-
from 1.0, 1.1, and 1.2 to 2.0, 2.1, and 2.2, meaning that our first module has now updated
-
from an order of one to an order of two. If we move our third in front of our first, that now changes from two to three, meaning that's persisting to our database.
-
We can confirm that by refreshing and still maintaining that same sort and everything's now working.
