-
to be relatively similar to whenever we updated our organizations. So we can start by creating a update difficulty action, jump back into our text editor, and
-
again, we'll start in our controller. So we can go ahead and collapse our models down, jump into our difficulties controller,
-
add in an async update method with our HTTP context, with which we'll want our programs do request, response, and our organization.
-
We'll want to validate the data, so we'll await, request, validate using, just using that difficulty validator, nothing's going to change between our data between creating and updating here.
-
And then we'll reach for our await update difficulty action, call the handle method,
-
and from that, we're going to want to pass in the ID from our params, our organization, as well as the validated data.
-
Once we've updated the organization, we're clear to return, response, redirect back to where the user previously was.
-
Let's jump into that update difficulty handle method and specify the params to accept in
-
our organization, type organization, our ID of type number, and our data inferring from the type of our difficulty validator.
-
Extract that organization ID and data out, and we'll first query to find the difficulty record.
-
So we'll await organization dot related difficulties query, where the difficulty ID matches our
-
param ID, and then find the first or fail. So we'll throw a 404 error if the difficulty cannot be found.
-
Then we will await, reach for that difficulty that we found, merge in our updated data, and then save to commit it to the database.
-
Evidently, I find difficulty rather difficult to type out, so let me fix that real quick, and then we can return back our difficulty in case whatever's calling this needs it.
-
In our case, it doesn't, but that means that we're now clear to jump into our web routes,
-
add our router dot put slash difficulties slash ID, reach for our difficulties controller.
-
It's update method is difficulties dot update. Let's go ahead and scroll on down and jump into our difficulties index page, and inside
-
of our list, we want to add in a button to be able to edit a difficulty. So after the div that has our background color, item name, and whether or not it's the default,
-
let's add in another div with a class flex gap two. Let's add in an opacity of zero, and then reach for the group hover to change the opacity
-
to 100 whenever we hover over the group. The group is an individual list item, so whenever we hover over this item, this div will then show. Otherwise, it will be hidden by default.
-
And let's tack a duration 300 so that it has a slight animation to it. We'll add in a button to here, the size of extra small, and a pencil icon from Lucide
-
view next with a class with three H three, and you'll probably want to tack an ARIA label on that as well of edit difficulty or something of the sort.
-
So when we click this button, we want to open up our dialog with the same state as the item we're clicking.
-
So we'll have an on edit function up in our script, and we'll pass the item in as its argument. We'll scroll up to that script and add that function in.
-
So function on edit, and this will be our resource item of type difficulty DTO. So we want to reach for our dialog value, all the open method.
-
We need to do value here because we're no longer in the template. So we need to reach through the proxy for the actual underlying value, pass our resource
-
in and then set the new state default with the name set to the resources name and the color set to the resources color.
-
Then we need to scroll back down to our form dialog, add in our editing flag, set to dialog
-
dot resource ID, and then add in our update handler that will reach out to form, put slash
-
difficulties slash, and then we need to add in that dialog resource ID as the ID route parameter.
-
Again, also tacking that on success in whenever the successful response is received. And I believe that should do it.
-
So if we jump back into our browser, hover over our items, we can see a little edit icon over there. So if I click edit here, it opens our dialog up, test two and our red color are the default
-
values for our form. If I tack in a hyphen edit onto this, update it, you'll see that immediately gets reflected
-
now in our list, thanks to that watch effect that we have in our script. And let's jump back into it and let's now change the color for maybe a red to a teal
-
Close that, choose color picker out, update our difficulty, and you'll see that updates A-OK as well.
