(upbeat music) All right, in this video, we're gonna use what is basically my favorite filament form input, and that is the repeater. I use this all the time. So I'm really excited to go through it, but first, I do wanna clean up our feature form a little bit, so let's talk through how to clean that up, make it a little bit nicer,

so let's talk through how to clean that up, make it a little bit nicer, and then we're gonna get into the repeater. So first things first, we're on our feature form, let's scroll to the top, I've got some use statements I'm not using, I wanna get rid of those, but the real cleanup I wanna do is, now that we've split up our form into tabs, and we also tried sections,

now that we've split up our form into tabs, and we also tried sections, maybe you like the sections better, but either way, I like to take the array of the schema, and I like to extract that to its own method, just because it's a lot nicer. If I come look at this form at a glance, it's hard for me to see what's going on. There's just a wall of code here. We have commented code, we can clean that up,

There's just a wall of code here. We have commented code, we can clean that up, but that's not really what I'm talking about. There's all this code here, and I can't get an idea of the structure of the form just at a glance. So I'm gonna take this schema, I'm going to copy this array right here, and I'm just gonna say self, get general tab schema, oops, general tab schema,

and I'm just gonna say self, get general tab schema, oops, general tab schema, and then I'm gonna create that method here. It's a private function that returns an array, and I will just return this, okay? You don't even have to see it. Let's do the same thing here. So I'm in my effort and cost, I'm going to minimize, copy this, self, get effort and cost tab schema,

I'm going to minimize, copy this, self, get effort and cost tab schema, create that method, we are returning an array, and return this. Okay, and even in PHP storm, I like to kind of keep it here, unless I need to look at it. And so now I've saved this, I can come back to one of these features, or I'll click new feature,

I can come back to one of these features, or I'll click new feature, and the form look exactly the same as it did, but now when I go look at the code, this is much easier for me to look at. If I want to deal with one of the general fields, I can just come in here, we can expand it and see what we need to do. Okay, that's really nice. Now, if I come back to the browser

Okay, that's really nice. Now, if I come back to the browser and take a look at this, what I want to add is a third tab, and this tab is going to be milestones. So if we are going to deliver this feature in our roadmap, what are the milestones that we're going to be tracking that need to be met before this is actually delivered? Now we can do this in one of two ways. You could either decide,

Now we can do this in one of two ways. You could either decide, I want to add a JSON column on the features table, and I'm going to store all the data about these features and the different fields that you need in an array inside a JSON column. So we're going to start doing it that way. The other way you could do it is create a milestones model and a feature has many milestones, and we're going to do it that way too.

and a feature has many milestones, and we're going to do it that way too. Filament makes it really easy to switch back and forth. So I'll show you how this works and all the different visual options we have with the repeater that makes this really nice. So let's go figure this out. First, we have to go to our create features migration. Let's say after description, we're going to say table JSON and this is milestones.

Let's say after description, we're going to say table JSON and this is milestones. So we have this here, we also have a factory. So feature factory, we will just make that nullable. So milestones are just going to be set to null. One other thing I noticed as I'm in here, we are doing a random element, but we're not using our feature type. So let's just change that feature type cases. We'll do that.

So let's just change that feature type cases. We'll do that. We had a case there that was not one of the ones that we ended up deciding to use. So that would have caused us some problems. So now our feature factory is looking good. The last thing we need to do is go to the feature model and we need to cast milestones to an array. Okay, this should all work. So I'm going to go back to my terminal and now that I'm here,

Okay, this should all work. So I'm going to go back to my terminal and now that I'm here, I'm just going to run migrate fresh seed. We've got a brand new database. I'll refresh, sign in again. And I'm here, we can see I now have 10 features here. And if I go to a new feature, or actually it's going to be easier to edit a feature. And the problem with editing right now is, if I come in here and click edit,

And the problem with editing right now is, if I come in here and click edit, it's going to give me the modal, which again, generally I like, but while I'm developing, this is going to be kind of a hassle. So I'm going to go back to my feature resource. And if we look down here at the bottom, we don't have a link here for the edit page. If I look at my directory, Filament gave us the edit page when we generated the resource

If I look at my directory, Filament gave us the edit page when we generated the resource a long time ago, we just need to give it a route. So we'll just say edit and this page already exists. So now that this is here, Filament is going to look at when I click this button, it sees the page and it's going to bring us directly to the page, no longer do the modal. So I need to add a third tab here. Let's go to our feature form.

So I need to add a third tab here. Let's go to our feature form. And we've got two tabs here, we're going to add another one. And for the schema here, we're going to add a repeater. So I'm just going to type repeater. Filament has a repeater for us. We're going to call it milestones. And let's see what it gives us here. We've got a label, don't worry about orderable, that's not real.

We've got a label, don't worry about orderable, that's not real. We have a title, maybe a due date, and I don't know how about a toggle that will be whether it's completed or not. And so that is good. We need to go ahead and close that. And everything looks good here, at least as a start. So let's go refresh the page and now you can see we've got milestones.

So let's go refresh the page and now you can see we've got milestones. And so it's this form input, right now it's empty because it's nullable, but you click add to milestones and you get this nice form here. So I can add a title, my title, the due date could be there. And sure, it was completed. Save the changes. Oh, it's like my target delivery date field is required.

Save the changes. Oh, it's like my target delivery date field is required. I didn't update all of my cedar based on some of the requirements we had here. Let's just change it to proposed and that way we can save it. So now I saved the form, it worked here. If I refresh the page, it still works. If I look in the database, I now have my milestones saved here

If I look in the database, I now have my milestones saved here and everything works. So this is nice. I don't like the layout of this. So I can come back to my repeater and say, give me three columns. Now this is gonna be a little bit better. You would want to adjust that vertical height. And I still don't love this.

You would want to adjust that vertical height. And I still don't love this. You know, if I add a couple more milestones here, you know, by the time I get to four, it doesn't even fit on this page. And I don't need all the space. This just feels like a lot of vertical space that could be made a lot nicer. So let me show you, I almost never use the repeater like this.

So let me show you, I almost never use the repeater like this. I don't think the layout works really well for anything I want to do. What I love is, let's come back here. And this is new in filament four. If you're using four or five, you have this option to just say table. And what we have to pass in here are the table columns that we're gonna use.

And what we have to pass in here are the table columns that we're gonna use. And here we want to make sure we're using the table column that is in the repeater name say. So you don't want to just use a normal column because that's actually for a table, not a table repeater. So we're gonna do a table column. We'll make this title. And then we'll do the due date.

We'll make this title. And then we'll do the due date. And lastly, we have it's completed. So let's just make sure that's correct. Give myself a comma here. And we're all good. Let's go ahead and refresh our page. And now look at the difference between this and what we had previously. So I can only fit three previously.

and what we had previously. So I can only fit three previously. Now I've got, what, five, six, seven. Like this is so much nicer. And if I want to change how this looks, I can just type whatever I want here. I always like to also, if it's required, add the star here. And when I refresh and come to my milestones, you can see that this one is required.

And when I refresh and come to my milestones, you can see that this one is required. If due date's not required, I can just change this to due date and is completed. We can go look at the browser and look at our milestones. And that looks a lot nicer. So I love the table repeater. The other thing that it comes with out of the box is you can reorder stuff. So if this date was before this one,

is you can reorder stuff. So if this date was before this one, I can just reorder, really simple. If I want to delete all of these, save. There we go. Look at our, we can look in here. And now that I deleted them, we just have an empty array. So that's nice. Now one thing you might want to do is make sure that every feature has at least one milestone. And so if you want to do that,

is make sure that every feature has at least one milestone. And so if you want to do that, you can come in here and say the minimum items is one. And if you do that, you probably also want to set a number of default items. So I'm going to, in this case, if I'm using an existing record, it already sees that there are zero. So it's pulling what the existing record has. But now if I go back to my features

So it's pulling what the existing record has. But now if I go back to my features and I do a new feature, I look at milestones. It's already got one here preloaded for me. And if I were to try to create this without adding one milestone, it's going to give me a validation error that says you have to have at least one. So that's really nice when you have minimum items. You can also put a maximum number of items.

So that's really nice when you have minimum items. You can also put a maximum number of items. And let's say it's just three. So if I do that, refresh the page, I come here. If I try to add a fourth, the button's gone. So that's really nice. All of this stuff is just baked in and you don't have to worry about it. You don't have to add validation. Well, what if I go add a fourth or something?

You don't have to add validation. Well, what if I go add a fourth or something? First of all, the server validation is already going to work because Filament makes that already available to you, but also the UI works. Now, there is one thing I do like how this looks and everything. But if you want an even more streamlined UI, you have another option. And I can say, oops, compact.

you have another option. And I can say, oops, compact. And this is really cool. So if I look here and refresh, now look at that. Title here, I get the date 0101 2025. And like, this is nice. This is really compact, really nice. If I show you, watch your eyes, I'm going into light mode. I like how this looks a lot. Look how nice that is when you're reordering.

I like how this looks a lot. Look how nice that is when you're reordering. You've got the animation. Like this is beautiful. So this comes right out of the box. This used to be a third party package in Filament 3. It got brought in to core in Filament before and I'm so happy with it. This is so great. Okay, so now I'm gonna go back to the features table,

This is so great. Okay, so now I'm gonna go back to the features table, find an existing one. We'll just grab this one. And I'm gonna edit this, but we haven't spent any time on viewing a record yet. And this is called an info list. But the table repeater also has a really nice table repeatable info list that I wanna show you because this is really great.

table repeatable info list that I wanna show you because this is really great. I'm gonna edit this. Let's just add like two milestones. First milestone. And we'll save these changes here. And so now when I go to view this record, I'm not seeing the milestones here at all. I need to go to the view feature. And it's actually in the feature resource

I need to go to the view feature. And it's actually in the feature resource because the info list is defined here. So we're gonna look in this. And I just wanna add here at the bottom. This is a repeatable entry. We're gonna make title it milestones. And so we have the label here, we have the schema. We'll make this an icon entry. But the other thing that we need to add

We'll make this an icon entry. But the other thing that we need to add is I believe it's the columns. So we're gonna use the table column here. And this is the info lists. Really important to grab the info list a repeatable entry table column. And so we'll make these here. And now if I go back to the browser and refresh, looks like I have an issue

And now if I go back to the browser and refresh, looks like I have an issue because this is expecting an int and I was giving it an array. And this is not actually columns. That's the wrong thing, it's a table. The method is table and you pass the columns in here. So now if I go back and take a look one more time, here we go. We have the milestones and they're showing up

here we go. We have the milestones and they're showing up almost exactly how they looked when we entered them. And it displays really nicely on your info list. Now I think this works really well and I'm happy with it. This is how I would keep it. But I do wanna show you, if you had decided, I think the milestone should be a model and a feature has many milestones.

I think the milestone should be a model and a feature has many milestones. How the repeater pretty much works exactly the same way if you decided to use it for it has many. So let's go back to the code and actually we're gonna go to our terminal and we're gonna say make model. This is going to be milestones and we need a migration. Let's do the create milestones table.

and we need a migration. Let's do the create milestones table. This should be really simple. Name, description, sorry, due date and is completed. We don't actually need the description. We just want the name due date and this is going to be constrained and we'll cascade on delete. We'll say foreign ID there. This way the database is gonna know

We'll say foreign ID there. This way the database is gonna know that this is the feature ID and it's gonna link it all together. So this looks good now if I go to the feature model, we're going to have to comment this out. So we're gonna make a public function here. We'll call it milestones and this is going to be a has many. Here we go and I don't know what it was generating here.

and this is going to be a has many. Here we go and I don't know what it was generating here. Oh, and this is obviously in the wrong place. I was trying to put it in the cast. So we'll put it right here and this is going to return. This has many, this is just gonna be milestone. Okay, and then the milestone is going to belong to a feature. Okay, now the last thing we're gonna need to do is get the column off of there

Okay, now the last thing we're gonna need to do is get the column off of there just so we don't have any conflicts. So create features. Let's comment this out for now and that's a feature factory. We need to comment this out as well. All right, so if I go back to the terminal, I can run migrate fresh seed. There we go.

I can run migrate fresh seed. There we go. I'm going to reload the page, get signed in. I apologize I've been in light mode this whole time guys. Someone should have told me, I'm just kidding. All right, so now here we are. We're back in dark mode and we have the features. If I try to edit this one and I come to the milestones, this is still here, but I need to make one little change to it. And I'm gonna go back to my feature form.

this is still here, but I need to make one little change to it. And I'm gonna go back to my feature form. And all I need to do here is add a relationship. Milestones. Okay, and so we have title, due date and is completed, which create milestones table, we call that name. So we would have to change that. Let's just make sure it's all the same, title, due date and is completed. So we're gonna migrate fresh one more time.

title, due date and is completed. So we're gonna migrate fresh one more time. Get back logged in. Okay, and we'll go back to our features. Let's find one, let's go to edit, get the milestones. And if I add to a milestone, I'm just gonna put something is completed and I'm gonna save the changes and that also worked. And so now if I go to my database and I take a look, we don't have that milestones here anymore,

And so now if I go to my database and I take a look, we don't have that milestones here anymore, but I do have, if I refresh here, a milestones table. And so this was attached here. All the data was saved properly. It's linked to feature ID two. And if you're familiar with the relation managers in filament, then you can just use a relation manager to see all of your different milestones. So just one little line of code change.

to see all of your different milestones. So just one little line of code change. If we go back to the feature form, you just add the relationship here. And that is all you need to tell filament. And filament knows how to add that thing. If I come back here and go to milestones, if I delete this and save, we have a minimum of a one item. We can change that really quickly and say zero here, save and that saved.

We can change that really quickly and say zero here, save and that saved. If I go to my database, take a look, it is no longer there. Filament handles all of it. It's so nice. So that is a repeater and particularly a table repeater. I think you'll use it all the time. I'm using it constantly in my apps and I hope you love it. (upbeat music)

I'm using it constantly in my apps and I hope you love it. (upbeat music)