00:08
our statuses and access levels as well. So let's take a second to extract what we just did in the last lesson out into a reusable
00:15
component, just like we did with our use resource actions, confirm destroy dialogue and that fun stuff. So let's right click inside of our components, new file, and we're going to call this our
00:25
sortable resource item dot view. We'll have our script set up Lang TS where we'll go ahead and import sortable from view draggable.
00:35
We'll have our const props equal define props, setting that type to accept in a model value.
00:42
Now we need a type for this model value to be dynamic so that it supports working with our difficulties, statuses and access levels. So it's not just going to be one set type here, meaning that we want to reach for a
00:51
generic and we want it to be an array of that generic. With Vue.js and set up scripts, we can support generics via an attribute called generic,
00:59
providing whatever we want that generic to be named inside of that attribute. So if we provide generic and attribute of T, we now have a generic type available inside of our script as T to make use of.
01:09
And with that, it's going to be able to infer that directly off of our model values type as well. So we're not going to need to specify what T is explicitly outside of this component.
01:18
Then just like we have with our other components, we're going to want an internal value so that we can directly work with a property to read and make updates.
01:25
So we'll have our getter that returns our props model value, and then we'll have a setter that takes in a new value and we'll want to set up an emit for our update model value
01:34
that emits that new value out. So let's also do const emit equals define emits update model value.
01:42
We're also going to have an end, which will be the drop portion of our sortable component and edit, which will emit whenever we click our pencil button to make an edit to this
01:50
resource item and destroy, which just like edit is going to be whenever you click on a trash can to delete an item. And that's it for our script takes us now to our template.
01:59
And we've already written the vast majority of this. So let's just jump over to our difficulties page and grab everything inside of including our sortable component there and drop it inside of our template.
02:09
First things first with this, our list is no longer called list, but rather our internal value. We no longer have an on order update function inside of here.
02:17
We rather want to emit this up so that the outside component, which will be our page level and handle and make that call accordingly. So we'll emit our end event there to send that upward.
02:27
Same thing with our edit and destroy. Rather than trying to handle that inside of this reusable component, we just want to emit
02:33
the edit event up, providing the item in so that the handler for that edit event has access
02:38
to the specific item and doing the exact same here for our destroy, emitting destroy, passing that item up. That should do it for our component.
02:46
Now we need to go switch and make use of it inside of our page so we can get rid of our sortable altogether, replace that with a sortable resource item, and we don't need to specify
02:56
any slots so we can self-close that. Pass our view model as our list, handle the at end event, passing that onward to our on
03:05
order update handler. Then we have the edit event, passing it to our on edit and our destroy, passing it to on destroy show. And voila.
03:15
We have a nice, reusable and sortable resource list item manager. I'm not quite sure if I successfully imported the grid vertical component. I did not.
03:24
So let's go ahead and import grid vertical from the side view next to make sure that we have that. Oh, sorry. That's called grip vertical. There we go.
03:33
And then we can clean up our index page by getting rid of those imports that we're no longer making use of. We also need to get our pencil and trash two icons in there as well.
03:40
So let's save that, jump back over here, pencil and trash two. There we go. Let's jump back into our browser and let's try editing one of our sorts here again. Okay.
03:50
So we've dropped. Let's jump back up here. Give the page a refresh and it persists at its location. Drop that into our default slot, drop that out of our default slot and everything seems
03:59
to be updating a okay there.
