Creating, Editing, & Deleting Course Modules

In This Lesson

We'll add the ability to create, edit, and delete a course's modules using the reusable components and composables we've created in past lessons.

Created by: @tomgobich
Published: 1 year ago

Small Note

Within our StoreModule action, we discuss how we're querying through our organization to get the desired course via it's courseId as a way to verify the courseId belongs to the organization. We're also then using that queried course to create the module.

While this works great, I wanted to also mention that you can directly validate your route parameters inside your VineJS Validations in case you'd prefer to do that instead.

As always, if you have any questions on this, feel free to ask in the comments below!

Join the Discussion 0 comments

Be the first to comment!

Transcript

form dialogue and destroy confirmation dialogue via our use resource actions. So we'll do form, dialogue, destroy and on success
and use our resource actions composable there, giving that a type of module DTO. All that and then pass it a default form state
with a name set to an empty string and a status ID set to our props. Organization statuses at that first index and its ID.
Then we can scroll on down to underneath our sortable component and let's add a button in. This will be a variant of ghost,
a size of small with a class flex gap two and we'll add in a plus icon from this side be next for the class with four H four
and the text will be add module. When we click this button, we're going to want to open up our form dialogue component,
which will hold a form input that'll have a label of name, a view model of form name, error of form errors name
and a placeholder of whatever you see fit. We can do something like my cool module and then self-close that form input. Then we'll have another form input.
That's a type of select with a label of status and a view model of form status ID.
Again, add in the error form errors status ID. And then we'll have our select items that will loop over each status
in our props organization statuses. Give that a key of status ID and a value of status ID.
Inside of that select item will display the status name. For our form dialogues props, we'll have a resource of series module,
a view model with the open flag set to dialogue is open, whether or not it is editing set to dialogue resource ID
and whether or not it is processing with our form processing flag. While we're down here, let's go ahead and add in our confirm, destroy dialogue with a view model,
open flag set to destroy is open, a title of delete module and an action href with backticks
set to and we'll have a prefix URL that we'll reuse on a couple of actions. We'll add that here momentarily. But in addition to that,
we want to do slash modules slash and then reach for that destroy resource ID. We can end that dialogue out and add,
are you sure you'd like to delete your, and then add in strong tags, destroy resource name module.
All of this modules data, including lessons will be deleted forever. We can then scroll back up to our script.
We'll start by adding that prefix URL in. So for this, we can do const prefix URL equals, set this to computed and then have that return back
slash courses and reach for the course ID off of our props. Once we have that, let's add in a couple of functions. So we'll do function on create
and we'll call our dialogue value open. In addition to opening that dialogue, we also want to add focus to the first input inside of the dialogue.
So let's give this a ref of dialogue focus L. We can scroll back up to our script and add that ref in. So const dialogue focus L equals ref
and command dot to import ref. Once we have opened up our dialogue, we can go ahead and get the next thick, give the dialogue time to actually open and register.
And then we can reach for that dialogue focus L, its value, its input L, and then the actual HTML element inside of there and focus it.
We can give our on create function a copy and a paste, switching on create to on edit that will accept in a resource of type module DTO.
We want to pass that resource into the open and also reinstantiate the default form values. So name will be resource name
and the status ID will be resource status ID. We can scroll back down to our template now
and add our on edit to our button with the pencil icon. So at click on edit and pass the module in, and then we can scroll on down to our add module
and add an at click on create to that. Inside of this right hand div now within our module list, we can add in a dropdown menu
that has a dropdown menu trigger with the class margin left to text slate 400,
hover text slate 950 and an animation duration of 300. We'll add in an ellipsis vertical icon from Lucid View next with a class with 4H4
and self-close that. Underneath our trigger, we'll have our dropdown menu content with a dropdown menu item for our edit and then another one for our delete.
When edit is clicked, we'll call our on edit and pass the module in same as we are with our pencil. And for delete, when that's clicked,
we'll call our destroy open and pass that module in. Lastly, for our form dialogue, I'm gonna go ahead and break this down into separate lines. When that is submitted,
we have a create event for when we're creating a new record that we can use our form to send a post request
out to our prefix URL slash modules. When we are updating, we can use our form to send a put
out to our prefix URL slash modules slash and then reach for the dialogue resource ID.
For both of these, we wanna pass our on success in, but we also want to preserve the scroll position as well. So we'll set that to true too. I'm gonna copy that options object
and paste it into our create there as well. That then takes us into our modules controller where we can grab access to our imports.
We'll have an async store method with an HTTP context. And we can give that a copy and a paste for our update and our destroy there as well.
So update there and destroy there. We'll need an action for each of these. So let's jump into our terminal and go ahead and create that next. So node ace make action,
put this inside of a modules folder and we'll call our first one store module and create that hit up to get that command back switching store to update module up one more time
to also create one for destroy module. And we can do node ace make validator and create a module validator as well. Clear that out, jump back into our text editor
and let's start with that validator. So we'll go into validators module and we'll export const module validator equals vine with metadata
as we'll need our organization metadata and then call compile with vine object inside of it,
accepting a name of vine string with a max length of 100 and a status ID with a vine number
that exists in our organization. So we'll use our existing organization helper to verify that this exists in our statuses table.
We can use this module for both our create and edit. It's gonna be the same for both. So we can jump into our actions next and fill those out. So we'll start with, see our modules folder there. We'll start with our stores.
That's the first action we'll need. And our programs for this is going to need our organization of type organization, our course ID so that we know what course this module is applicable to.
And that's gonna be a type number and then our data which we can infer using the type of our module validator. I'm gonna go ahead and extract the organization course ID
and data out of our handle method. And the first thing that we're gonna do here is query our course. And I'll explain why here momentarily. So let's do our organization related courses query
where the ID is our course ID and then find the first or fail. The reason we're gonna grab our course here specifically
is so that we can verify it belongs to the organization this user is working with. Since we're reaching through the organization's relationship to query for the course, we know that if we get a result back,
that course does indeed belong to the organization. If we get a 404, then the course either does not exist outright or it does not belong to the organization the user is working with.
It's a small step, but since our course ID is gonna be coming from our route parameters, this is just a simple way that we can verify that course is indeed correct in terms of our data integrity. Then since we have the course,
we can go ahead and return and use that course to reach through the relationship to its modules to create our brand new module. So we can go ahead and spread the data in,
add in the organization ID as our organization ID. And then just like everything else, we need to find the next order for the module.
So we can go ahead and add in a static async private method of find next order. And guess what? We can use that course once more to do exactly that. We need to import that course type. There we go.
So we'll do const last module equals, oh wait, course reach through its relationship to our modules query,
order it by the order field in a descending fashion so that we get the highest sort first and then find the first item matching our query.
We can then return and use a ternary check to check for the last module. And if we indeed found it, then we can use that last module and its order and increment that value by one.
Otherwise we can default this to one instead of zero. And we're using a one based index here for our modules and our modules alone, because they're the only thing that's going to have
a logical order in terms of display starting at one. They typically go 1.0, 1.1, 2.0, 2.1, so on and so forth.
And we can go ahead and add a select for the order field onto our query there as well. And then await this find next order,
passing that course in to get the next order. That should do it for our store module. Now we have our update module next. Params for this are going to be the exact same.
So we'll have our organization of type organization, the module ID instead of the course ID, and then data infer type of module validator.
Again, let's extract those out of our handle method. And we can start by finding our module. So awaits organization related modules,
query where the ID matches the ID we're looking for, and then just find the first to fail. Now we don't need our course for updating our module because the module has already been bound to the course. We don't need to recheck that here.
So we can instead just await module, merge in the updated data and then save it to the database, returning the updated module back.
Taking us next to our destroy module. Now this one's gonna be a little bit different. First, we have our organization of type organization, our course ID of type number,
and then our module ID of type number. And you guessed it, that course ID indicates that we are also going to need our course for this one. Let's extract all of those out of our handle method
and start by getting our course. So we'll await organization related courses, query where ID is our course ID, and then find the first or fail.
But then from that course, we wanna get the module. So we'll await course related modules, query where the ID matches the specific module ID
that we're looking for, and then call first or fail. Next, let's get ourselves a transaction going. So we'll import DB from Lucid Services DB and call transaction and pass a callback in
so that we can use a managed transaction here. Again, a managed transaction will automatically roll back if an error occurs inside of this callback function, and then it will commit it if no errors occur
and the end of the callback function is reached, managing that flow for us. First, we wanna bind the transaction to both of these.
So we will call use transaction for both passing TRX in. So module use transaction TRX. Since we queried them individually, that transaction won't cascade through.
If we applied the transaction to our course and then queried our module, it would. First, inside of our transaction, we want to await and then delete our module.
After we've deleted our module, we want to try and decrement the order of all modules that have an order higher than the one that we're deleting. So that's where our course comes into play.
So we'll await course related modules, call the query method and query where the order is greater than the order of the module
that we are deleting. For modules that match this query, we want to decrement their order value by one, essentially filling in the void
for the module we are deleting in terms of our ordering. Then we can go ahead and return our module to finish that action out.
So if the module we are deleting has an order of 10, this query will take all other modules bound to this course
where the order is higher than 10 and decremented by one. So 11 becomes 10, 12 becomes 11, so on and so forth.
We're now ready to fill out our modules controller. So for our store, we're gonna want params, request, response, and organization from our HTTP context.
We'll start by verifying our data is correct by using await, request, validate using, and we'll use our module validator. We also need to add in our with organization metadata,
providing our organization ID there. Then we will await store module, call the handle method, pass the course ID from our params course ID.
Then we want to pass the organization and the data in as well. Once we're through all that, we can return, response, redirect, right on back.
Next for our update, we are also going to want to validate the exact same. So we'll give that a copy. And we also want our params, request, response,
and organization from our HTTP context for that too. We can paste our validator in, await, update module, call the handle method there,
passing the ID from params ID, the organization, and that validated data in. Once more, return, response, redirect, right on back once we're done.
For our destroy, again, this one being a little different, we want params, response, and organization from our HTTP context. And from that, we can just correctly call
our destroy module action and its handle method passing the course ID from our params course ID, our ID from params ID,
and then the organization in. Then just like all the others, return, response, redirect, right on back. All right, lastly, let's jump into our web routes. Underneath our courses,
we'll have a section here for our modules and we'll have a router.post slash courses, course ID slash modules.
That will use our modules controller store method as modules store. Then we'll have a router put slash courses
slash course ID slash modules slash ID using our modules controller again
and its update method as modules update. Finally, we'll have a router delete slash courses slash course ID
slash modules slash ID using our modules controllers destroy method as modules destroy.
We can give that a save and all should be good to test out now. So let's jump back into our browser and yep, that should definitely have a question mark for the property reference.
So let's jump back into, I believe that was our sortable modules component. Scroll on down, that was the confirm destroy. Yep, right there. Add the question mark in, give that a save.
Let's try that one more time. So jump back into our browser, refresh. There we go. Okay, things are looking better now. We'll start by adding in a new module. Call this test module one.
Let's change its status to planned and add series module. Cool, so not only did that get added in, but it also got added in after our introduction module. Let's add one called delete me.
Add that one in and there we go. Let's first try editing it. So we'll just tack edit onto there and switch it from not started to recorded. Update, looks good so far.
We can test out our pencil icon, get rid of the edit, update once more and hit our three dots and delete and confirm delete. And awesome, everything is working there A-okay.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.