(upbeat music) Okay, we've got the form working the way we want it to, but it's just ugly. So I think we can fix it. Let's do that now and work on layouts and CSS with filament. So the first thing I wanna do, and this is maybe something we should've done back in the configuration, is we need to create a filament theme, and that allows us to do some CSS tweaks,

is we need to create a filament theme, and that allows us to do some CSS tweaks, and it's also really important when you end up installing plugins. If the plugins have any CSS they need, having a theme already built is one of the steps you'll have to take, and it's super easy. We'll do that now. Okay, so I'm here in my terminal. I'm just gonna run PHP artisan filament theme,

Okay, so I'm here in my terminal. I'm just gonna run PHP artisan filament theme, and it's just gonna go ahead and do all this work for me. It does give me a couple instructions, and it's kind of hard to see, it's like grayed out, but this is actually really important. So first we need to add a new item to the input on the VIT config. So I'm gonna copy this here, go to my code, VIT config,

So I'm gonna copy this here, go to my code, VIT config, and I've gotta add it right here. All right, let's go back to my terminal. The other thing I need to do is register the theme in the admin panel. So I'm gonna take this method, and I'm gonna go to the admin panel provider, and maybe up here right after the path sounds good, I'll put the VIT theme,

and maybe up here right after the path sounds good, I'll put the VIT theme, and then the last thing I'm gonna do is come in here and run npm run build. Now we have a theme available to us. You're not gonna see any differences. Here's a refresh, everything looks the same, but now it's gonna give us the ability to make some changes if we need to. Okay, so the first thing that we can do

to make some changes if we need to. Okay, so the first thing that we can do is we could break this form up into sections, and sections is gonna be really nice for us. So I'm gonna go to my feature form, and what I wanna do is start with here in the components, I'm gonna say section, make, we'll say the feature details, and this is where we're gonna just put the schema. So anything we put in here,

and this is where we're gonna just put the schema. So anything we put in here, let's say we want the name, the status, let's just grab that, put it here. We also definitely want the type and description. So here's the type, everything's kind of jumbled up right now. Type is gonna go there, the description we definitely want in there, and let's just take a look and see how this looks right now. So we'll refresh.

and see how this looks right now. So we'll refresh. All right, so now this is what a section is. It gives you this header. One thing we could also do is if it's more complicated, if it's not self-evident, we have a description here. So we could say, provide the details of the feature, refresh, and you've got that. Again, it might not be necessary, but I wanna show you that that's an option.

Again, it might not be necessary, but I wanna show you that that's an option. And this looks fine. I certainly don't like this and how it's aligned, and this is part of the reason we needed to create that theme. So if we wanna leave it here, we can do that. And what I would want to do is go to where I have my toggle buttons, and we have some options here for extra attributes. So we have extra attributes, extra input attributes,

for extra attributes. So we have extra attributes, extra input attributes, and extra field wrapper attributes. And so the three things here are subtly different, but important. The extra input attributes goes directly onto the input, like if it's a select or a text input or something. It's on that input itself. The extra attributes goes out and includes the label, and the extra field wrapper attributes is beyond that.

The extra attributes goes out and includes the label, and the extra field wrapper attributes is beyond that. So let's use the field wrapper attributes here. And we're just gonna pass in a class here, so we can say class. And we're just gonna say like padding top four. And we refresh. Oh, let's make sure we run npm run dev, so that should hopefully be running. And there we go.

so that should hopefully be running. And there we go. Top four worked. And let's see if we go back to our codebase, and let's make it like six. There we go. That's almost lined up. I don't know, it looks a little off. But if we did eight. Oh, that's too much.

But if we did eight. Oh, that's too much. Is there a seven? There is a seven, and that looks pretty good. I don't have a ruler out, but I think that looks fine for me. So if you had done this without creating your theme, then this is not gonna work. So make sure you create your theme before you start adding this stuff. Okay, we have a description here.

before you start adding this stuff. Okay, we have a description here. I also, anytime I use a rich editor or even a text area, to me, it feels weird if it doesn't at least start with a little bit of space. So let's make that change. I'm going to go here, and we can add extra input attributes, because we actually want to put this on the input itself. And yeah, we can do a minimum height of 200 pixels.

because we actually want to put this on the input itself. And yeah, we can do a minimum height of 200 pixels. That's very fresh. And there we go, that looks fine. If you wanted, if you don't want to use tailwind, you don't always have to, you could just do style. And I think 200's may be a bit big, so min height of, I don't know, 150 pixels. Refresh. And there we go.

Refresh. And there we go. So it's up to you. Obviously, most people do like to use tailwind these days, but these are just any attributes you want to put on an HTML element. So it could be a class, but it could be something else. Okay, so this feature details section looks pretty good to me. Let's go ahead and add a section for the level of effort and the cost.

Let's go ahead and add a section for the level of effort and the cost. I think that probably makes sense to be in its own section. So we'll say section, make, effort and cost. We have our schema here. It's important on the section that you do column spin full. Let me show you what would happen if we took that off. Now we're gonna smash this little section into here. Now, of course, there might be a scenario where you want sections side by side,

Now, of course, there might be a scenario where you want sections side by side, but column spin full will make sure that no matter what screen size you have, that this section's gonna take up the full width that's available to it. Okay, we have this effort and cost. So let's go grab effort, high cost. All of this stuff, we're just gonna move it right in here. That's very fresh.

All of this stuff, we're just gonna move it right in here. That's very fresh. Let's make sure it's still working. We have 15 days, we say it's high costs. Yeah, everything here looks pretty good. We have priority and delivered at. And I think we also have the target delivery date that we need to put somewhere. You know, let's put the priority up here. We can move these buttons down below.

You know, let's put the priority up here. We can move these buttons down below. That should be fine. And then maybe we add a third section for dates. So we'll take the priority. We'll grab this, we'll move it. Let's see, we have name, status and type. So we're gonna go above the type. Let's start by looking at this. And then this no longer needs all of that padding at the top

Let's start by looking at this. And then this no longer needs all of that padding at the top so we can just get rid of that refresh. This is looking okay. I just think that the priority is kind of smushed here a little bit. So let's give it some padding on the left side. So we'll go here again, extra field wrapper attributes. And I don't need any of this column span stuff.

extra field wrapper attributes. And I don't need any of this column span stuff. All I really need is padding left of three. Okay, and I think this looks a lot better. So now we have a little bit of space here. Everything else is working. And now we just need our dates field. I don't know, maybe that should go above the efforting costs 'cause it's probably more important. So we'll do one more section here.

'cause it's probably more important. So we'll do one more section here. Section make, we'll just say dates. All right, we've got this description. Two columns is good. And then for the schema, we're going to grab the target delivery date and the delivered at date. Put this all in here. We've got a huge amount of space.

Put this all in here. We've got a huge amount of space. Let's refresh, come in here. Now, of course, the dates are, again, we probably should have done something conditional here. We should only really show a delivered at date once it is completed. So now that I'm thinking of this through, I don't think we need this section. We can probably just use the space we have here

I don't think we need this section. We can probably just use the space we have here and put the two dates there. So let's just grab this. We're going to get rid of it. We can delete this entire section. And we're just gonna go right after the toggle buttons, throw this in here, refresh. That looks pretty good. Now, again, if I go to planned, delivered at

That looks pretty good. Now, again, if I go to planned, delivered at is gonna, our target delivery date's gonna show here. Let's go ahead and implement hiding the delivered at date unless we have completed. So we can just grab this visible JS. This probably, let's format this a little bit nicer. And we'll grab this visible JS, copy it, and put it right here. The only thing we need here, this would be completed.

and put it right here. The only thing we need here, this would be completed. All right, we go back here. Those dates are gone. If I go to planned, I've got one date. If I go to completed, I've got a different date. Everything there's good. Now that we've got some spacing here, I do think we need maybe a little bit of space to try to get this aligned to there.

I do think we need maybe a little bit of space to try to get this aligned to there. So that's okay, we can bring it back. We'll do our extra field wrapper attributes. Class padding top of five. Don't need that. And I guess when the date is hidden, it doesn't look great. You know what, let's just remove it. We don't need that.

You know what, let's just remove it. We don't need that. Okay, so we have our fields here. And this looks a lot better than it did. And this is one way that you can organize your forms. Now the last thing I wanna show you is, sometimes it's nice if you can make these collapsible. So if all I care about is this part, I could just like minimize this. And that's really easy by going to the section

I could just like minimize this. And that's really easy by going to the section and just calling collapsible on it. So I refresh, I've got this here. And that allows me to just kind of go one section at a time. I like this a lot. I'm gonna put it on the other section as well. Right under the description, we'll make it collapsible. And so yeah, if you want to open or close either of these, that's fine. Now another option, if you don't like this,

that's fine. Now another option, if you don't like this, is we could use a tab layout. And instead of having both of them on the screen at the same time, but I have to scroll down, we could also have tabs. And you could have the feature details first, and then the effort and cost second. And then you can go back and forth and you wouldn't have to do any vertical scrolling.

And then you can go back and forth and you wouldn't have to do any vertical scrolling. So let's implement that and see how that looks. We'll go back here. And at the very top of our components in the schema, we're gonna say tabs. And now we can kind of let this pre-fill for us. So this is what it looks like. You're gonna have your tabs here. We're gonna have one for feature details.

You're gonna have your tabs here. We're gonna have one for feature details. All of this stuff is gonna go in there. And then we will have a second tab for, what do we call it? Effort and cost. We have the schema for that as well. And so if we go ahead and take this schema, let's copy and paste it, move it all up there. And then the second one, there's not as much.

let's copy and paste it, move it all up there. And then the second one, there's not as much. We'll just take all of this. Move that here. I've got something wrong. And there we go. So we're almost there. We've got these two tabs here. We just need to give it some columns. So let's go up here.

We just need to give it some columns. So let's go up here. That first section we had, we wanted it to be columns of three. There we go. So that's what we had before. And the effort in days, I think we wanted that to be two columns. So we come here, columns of two. I do think this can be nice,

So we come here, columns of two. I do think this can be nice, but the problem is if you start doing stuff, again, let me change the effort and costs here. On this, we do have a default. Let me remove the default. And so now when I load a new page, this is empty. So sometimes it can be a little confusing to your users. You do this and try to create it. The nice thing about Filament is it does take you

You do this and try to create it. The nice thing about Filament is it does take you to the missing field that needs to be entered. So it actually is smart enough to know you have to go to that second tab. So it just depends on what you like. Do you want to have a more vertical form or do you want to break it up into tabs? It's up to you. The tabs, if you like, could also go vertically

It's up to you. The tabs, if you like, could also go vertically instead of horizontal. So you could just add vertical here. And if we refresh the page, now the tabs are over here and everything fits on the right side. So it's up to you. I think let's just leave it as the tabs here. And we can go back and forth

I think let's just leave it as the tabs here. And we can go back and forth to the different sections of the form that we like. However you like to build your forms, that's up to you.