00:06
we also want to have a confirmation step whenever we're deleting our difficulties. So we can make use of that reusable, confirm destroyed dialogue that we created whenever we were working on that organization select.
00:16
The slot content of this dialogue is going to be the text or form that we want to display to the user as they're confirming whether or not they want to delete the item. For right now, let's just set this to something like,
00:24
are you sure you'd like to delete your, and we can put this inside of a strong and say our destroy.resource,
00:32
and then optionally chain in that resource's name. And then round that out with a difficulty question mark. We already have our destroy flag being extracted from our use resource actions.
00:42
We can bind the view model open flag for this dialogue to that destroy is open flag. The title for this dialogue is going to be
00:50
delete difficulty with a question mark. And we'll have this go out to an action href. So whenever they confirm the deletion, this is the href that will be called with a delete HTTP method.
01:00
To get our backticks in there slash difficulties slash, and then reach for that destroy resource and then optionally chain in the ID.
01:08
And then we need to add in our delete or trashcan icon inside of the action portion of our difficulties list here. So after the edit button, let's add another button.
01:17
This too will be size extra small with a variant of destructive, which will make it red. And inside of this button, we'll add the crash. And I'm going to use the two variants
01:27
from loose side view next. Give this a class of width three H3 to match our pencil. And let's also give it an ARIA label of delete difficulty.
01:36
We'll create a click handler function called on destroy show and pass that loop item in. Scroll on up to our script
01:44
because we now need to create that on destroy show function. So function on destroy show accepts in the resource, which is the difficulty DTO.
01:53
And this one's going to reach for the destroy dialogue and call open for that, passing that resource in. We're going to circle back to this function and add more to it. So it's not going to be just this one line,
02:03
but we'll stop and leave it there for now. So if we got everything right, we should be able to jump back into our browser. All right, now we have our edit, which will open up our edit difficulty. And we also have our delete,
02:12
which will open up our delete confirmation for our difficulty stating, are you sure you'd like to delete your test hyphen to difficulty. For now, let's hit cancel because we haven't rigged up that delete action yet.
02:22
And let's jump back into our text editor and do that now. So let's go into our web routes. Underneath our put,
02:28
we'll do router.delete slash difficulties slash ID as a route parameter and reach for our difficulty controllers.
02:36
And we haven't made it yet, but we will here soon. Destroy method, calling this difficulties.destroy. All right, I'm going to command click into our difficulties controller,
02:45
scroll on down and now let's add in that destroy method. So async, destroy, HTTP context, where we're going to want our params,
02:53
request, response, and then of course our organization. All right, now we need our destroyed difficulty action. So node is make action, put this inside of our difficulties folder
03:03
and call this destroy difficulty. Let's get that created. We can clear out our terminal and jump back into our text editor. Await, import that destroyed difficulty action,
03:13
call the handle method. And we're going to want to pass in the ID from our params and the organization. And then at the end of the day, let's go ahead and return response, redirect back.
03:23
All right, now we can jump into that destroyed difficulty. We're going to want our organization from our organization model and that number ID.
03:32
Extract that out of our handle method. And then we can go ahead and let's grab an instance of that difficulty. Await, and we can reach through our organization's relationship.
03:41
So related difficulties called the query method, where, and limit this to the specific ID being passed in and grab the first, otherwise fail.
03:50
Once we have that instance, we can go ahead and await, reach through that difficulty and call the delete method to delete it out of our database. And then lastly, let's just go ahead and return that instance
04:00
in case whatever calls us needs it. All right, give it a save so that the squigglies go away. And now we can jump back into our browser and we should be able to go through and test out our deletion.
04:08
So let's click on the delete for our test two, hit delete there. And there we go. It's now gone and out of our difficulties.
