-
we need to expose a function that will allow the user to edit a course as well. So let's add in an additional function called onEdit that will take in a course of type course DTO.
-
With that, we can use the dialog value to open our dialog, passing that course in as the resource. And then we want to set our new form default state
-
using the name from the course's name, the status ID from the course's status ID, and then do the same for our difficulty ID
-
from our course difficulty ID, as well as the access level ID, populating that with the course's access level ID. That red squiggly is because we now need
-
to normalize those numbers to strings for ShotCM views sake. So we'll add toString to the end of each of those IDs. And then just as we are with our onCreate,
-
after we show the dialog, we can go ahead and copy the line that will set the first input to the focus. And then we need to define expose an edit method as onEdit.
-
Lastly, while we're in here, after our form dialog is submitted, we want to handle the new update event, sending that to form put using backticks slash courses
-
slash and then reach for that dialog resource ID. Let's jump back into our courses page, scroll on down to where we have our edit button within our dropdown menu,
-
and we can add an at click event handler for that, reaching for our actions edit method and passing this specific course that we're looping over within it. Give that a save.
-
Let's quickly go ahead and jump into our browser and just make sure that that works real quick. So I'm going to go ahead and hit the three dots. We should now be able to hit edit and see our form dialog open up
-
with the courses details populated as the defaults. And this looks all right. We noticed that the difficulty is set to a non-default value. The status and access level are set to a default. So we can check another one
-
just to make sure that it's working. Let's go with our course test two, edit that one, and sure enough, they are. Awesome. Let's go ahead and jump into our terminal next because we need to create an action.
-
So node ace make action, put this inside of our courses directory and call this update course. Clear that out, jump back into our text editor,
-
and let's go ahead and jump into that update course action. For our programs, we're going to want our organization of type organization, the ID number that we are editing for the course,
-
as well as the inferred validated data from our course validator. We can just reuse the one from our create there as they both will accept the exact same data.
-
Let's grab those out of our handle method. And our very first step is to get our course that we'll be editing. So we'll await organization related courses
-
and query from that where the ID is the courses ID that we're editing and then grab the first otherwise fail. Once we have that course, we can go ahead and await course,
-
merge in our new validated data and save that to the database. Then we can go ahead and return that course or whatever is calling this action. We can then jump into our courses controller
-
and we want to add in an async update method that takes in params, request, response,
-
and organization from the HTTP context. We'll first validate our data using await, request, validate using,
-
and pass it in our course validator. This also has our with organization metadata attached to it. So we'll pass that along as well, providing it the organization's ID.
-
Then we can go ahead and await our update course action, call the handle method there, passing in our organization, the ID from params ID, and then the validated data.
-
And I'm gonna go ahead and move ID to be first there since that one has a manual value being provided. Return, response, redirect, and send them right on back where they came from.
-
Give that a save as our squiggly should just be formatting. There we go. And lastly, we can jump into our web routes and add a new route here for our update.
-
So router.put slash courses slash, and then provide in an ID parameter. We'll use our courses controllers, update method,
-
and call this route our courses update. Should be able to give that a save. Jump back into our browser now. Let's go ahead and give that a refresh. There we go.
-
Let's go into one of our courses, edit it. I'm just gonna attack edit onto the end of the name. We'll switch the access level from free to paid, the status from not started to planned,
-
and the difficulty to medium. Let's update our course. And okay, it got updated here in the background, but our modal stayed open for some reason. Let's go ahead and right click inspect, jump into the console.
-
Let's try doing that one more time. So let's just hit update course. Okay, it doesn't look like we got any errors. So let's jump back into our text editor, go into our courses action, and oh yes, okay.
-
Sure enough, we forgot to add in the on success handler to our form put. So with that applied, we should now be able to jump back into our browser.
-
Let's go ahead and just hit update course one more time. There we go. That's much better. And we can verify that our edit applied via course test three edit. It got switched to planned, medium, and paid.
-
We can go ahead and edit once more, getting rid of that edit text and switching this back to free, back to not started, and back to easy, update. And there we go.
