در حال بارگذاری ...

Switch Status to Enum0:00

(upbeat music) Okay, we've got a really great start to our features resource. But one thing I don't like about it is this status is a string. And I don't want it to be a string. I want it to be an enum for a lot of reasons. Number one, through my code base, I don't want to be referencing a string that could get mistyped or something.

I don't want to be referencing a string that could get mistyped or something. I want to reference an actual object. And so that's what an enum would allow us to do. And secondly, filament has some really cool stuff once you start using enums. So let's go ahead and implement that now. So I'm gonna go to my code base. This is my feature model. We're gonna have to cast that field to an enum,

Generate FeatureStatus Enum0:35

This is my feature model. We're gonna have to cast that field to an enum, but we have to create the enum first. So let's go to my terminal. I've not created any enums yet. So I'm going to do a make enum command. And I have to actually create the enums directory first. And I'm gonna say feature directory within enums and then feature status. I will create that.

within enums and then feature status. I will create that. It was created in the correct place. Just want you guys to know, once you have that enums directory, you don't have to prefix it anymore. So the next time I make an enum, if I just did like test new tests here, it's going to go into this app enums directory. So just be aware,

it's going to go into this app enums directory. So just be aware, you don't have to always do this prefix just the first time once that directory exists. So let's look in my code base and I've got this enums directory. I can delete this test one. I don't need that anymore. But we have our feature and then feature status. So let's go ahead.

But we have our feature and then feature status. So let's go ahead. I'm gonna close that out. I will go to it from here. And you might be wondering, if I put it in the feature directory, why do I also prefix the name with feature? That's because this app could end up having dozens of models all have a status enum. And I don't want to have to see the directory

all have a status enum. And I don't want to have to see the directory to be able to tell which one I should be working with. I like to prefix it here. It's just a personal preference. Anyways, the enum is going to return a string. So let's type it that there. And I'm going to get my cases here. I've got proposed, planned, in progress completed and canceled.

I've got proposed, planned, in progress completed and canceled. Okay, so these are the five statuses I want to use. And now I need to go back to my model and cast this so I can use the casts method. And we'll say status is cast to feature status. And I've got the class. So that's all good. Now I have it cast. And if I go back to the table, it all still works.

Style Enums in Filament2:24

Now I have it cast. And if I go back to the table, it all still works. And it's the same, but let me show you how I can make filament actually work really nicely with these enums. So if we go back here and let's go to the enum class, the feature status, we can implement a couple of contracts that filament provides. So I'm going to implement has label,

that filament provides. So I'm going to implement has label, has color and has icon. All right, so you don't have to implement all of these. You could implement just some, but I'm going to do all three. And so PHP storm is going to help me to add methods subs here. So I'm going to add the subs that the contracts demand. And so I've got get color, get icon and get label.

So I'm going to add the subs that the contracts demand. And so I've got get color, get icon and get label. Let's start with get label. And what I really just want to do, because the way I do my enums is I just define them as I want them to look kind of as the label. So the label is really simple. I can just return this value. And so this is fine, but what I like to do is actually extract this.

And so this is fine, but what I like to do is actually extract this. It's only a little bit of code, right? But if I go to my enum class, and I'm just going to do a new directory here, I'm going to call this traits. And in my enum traits, I'm going to create a new class. This will be a trait, and I'm just going to call it use value as label.

This will be a trait, and I'm just going to call it use value as label. Okay, so I've got this new use value as label. And all I'm going to do is copy this and put it here. And the only thing this does is now, instead of having to put it here, I can just at the very top say, use, use value as label. And this to me just works really well.

use, use value as label. And this to me just works really well. I know I need to have a label, and I can just put right here, I'm going to use the value as the label. It just reads really nicely to me. So you don't have to do this, but definitely something that I like in my code base. For color and icon, I think those make sense to always be implemented here directly.

For color and icon, I think those make sense to always be implemented here directly. So we've got the get color. I'm going to, let's see. I've got some options here. Proposes gray. Plan is not going to be blue, 'cause we have, let's say, info in progress is primary. These are colors that filament provides.

'cause we have, let's say, info in progress is primary. These are colors that filament provides. We'll get into this later. Success and danger. So we've got the label and the color, and the icon is not done yet. So before we do the icon, maybe let's get rid of it. Let's not implement has icon just yet. And let's take a look at how filament has already changed.

Let's not implement has icon just yet. And let's take a look at how filament has already changed. When I refresh this, now you can see I've got blue here, because when I implemented the has color, and I have the color here, it knows that planned is my info color, which is a blue color. And so filament is smart enough to know when you implement these contracts,

And so filament is smart enough to know when you implement these contracts, how to style your enums when they show up anywhere. It could be in a table, it could be in an info list. So it's actually really cool that it does that for you. Now we'll do the icon to show you how that works. So we're going to go back to has icon. We'll bring that in, and then I have the icons here. And so I'm going to refresh,

and then I have the icons here. And so I'm going to refresh, and now we've got these really nice icons as well that just get added where they need to be. So this looks okay, but I would really like this to be a badge. This doesn't look great right now. So let me go to my features table, and where I have the status, I'm just going to chain on badge.

and where I have the status, I'm just going to chain on badge. And so now when I come back here, this looks pretty nice. The icon is now the correct color along with the words. It's a badge, like everything here looks really nice. So I like this a lot. I could also make this sortable and refresh, and now I can sort by my enums here. So filament just makes this super easy,

and now I can sort by my enums here. So filament just makes this super easy, you just define in the enum class, what you want it to look like, and then it applies those things throughout the app, which is very, very nice. Now this is just how enums are displayed, but we also want to, like if I'm editing this, I'm going to want to make sure this is not typing in

Use Enum Select Input6:51

like if I'm editing this, I'm going to want to make sure this is not typing in whatever I want, 'cause this would certainly be a problem. This is not a valid enum. So let's change this to a select and let us pick those enums as well, which filament makes very simple. I've got my features table. I can just go back to my feature form right here.

I've got my features table. I can just go back to my feature form right here. And I've got status as a text input. Let's make it a select. And let's say we have options. Our options are just the feature status.class. I can just pass the enum class here and filament knows how to make them my options. I also want to put enum here because this will allow us to validate that.

I also want to put enum here because this will allow us to validate that. Whatever is selected in the select is actually one of the enum options that we have. So if I refresh and now come here, this is giving me all the enum options that I have. And one thing I like to do with a lot of selects is make them searchable, because then it just looks a little bit nicer instead of the default.

because then it just looks a little bit nicer instead of the default. This is better if I type completed. This is nice and searchable. So that's how you implement the enums into a select picker, which is very simple, straightforward, and make sure that when you're selecting an option, you're getting one of the correct values. The last thing I'm going to do just to make sure the whole app is complete

Replace Magic Strings8:12

The last thing I'm going to do just to make sure the whole app is complete is as I'm going to my create features table, I've got a string here. This is exactly why we use enums. We don't want these magic strings. What if I had a spelling error here and then everything's wrong? Instead of using that, we're just going to use the feature status.

Instead of using that, we're just going to use the feature status. And this is going to be proposed. And we're going to call the value here because this default needs to be a string. And so calling value is how we get that string. Same thing in our factory. We have our feature factory. And instead of getting a random element from this, we will just do feature status cases.

And instead of getting a random element from this, we will just do feature status cases. So let's make sure that works. Let's go back to Tinkerwell. Let's try to create 10 more. And all that worked. And you can see the status completed, proposed. So all that works. If we go back to our table, we had 10. Now we have 20.

If we go back to our table, we had 10. Now we have 20. And they all have features. If we migrate, I have migrate fresh seed here. We bring it all back. If we go to Tinkerwell, let's create 10 more. Everything looks good, except I lost my user. So let's see, I need to make user one more time. And if we go back here, let's log in. And everything is working great.

And if we go back here, let's log in. And everything is working great. Our enums are working just as expected. (upbeat music)

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟