Alright, let's dig into selects because this is where Filament really shines. It's one of the most critical aspects of building a functional, great user experience for your application and Filament does an amazing job here. If you're not using Filament, the concepts I'm going to talk about here are just going to be really valuable for whatever app you're implementing in. So, let's first go to our database structure and remind ourselves on the conferences we have a region. So, this is like Laracon EU, USA, Australia, etc. And so, what I want to do is go over to the venues. Let's do the create venues table and let's make sure each venue has a region as well.

And so, what I want to do is go over to the venues. Let's do the create venues table and let's make sure each venue has a region as well. Okay, so every time we create a venue, we need to know what region it's in and what I want to do is define the region as an enum in my application because it has to be one of just a few sets of options. So, let's go ahead and look at how we would do that. So, if we come up into our project and we go into the app folder, I'm going to create a directory here and this is going to be enums. And so, what I'm going to do is now create a PHP class and this is going to be Region and the template I'm going to use is the enum and let's hit okay.

And so, what I'm going to do is now create a php class and this is going to be Region and the template I'm going to use is the enum and let's hit okay. So, we're going to add this here and so the enum is going to return a string and here we just need to add, so our case would be US is the US and we've got a couple other cases. So, let's go ahead and add this enum and cast the region field in both of those tables to this enum. So, we're going to go to our Venue model and we've got casts here, so we'll say region is just the Region enum and we can copy this and we go to the Conference is also going to be that enum.

is just the region enum and we can copy this and we go to the conference is also going to be that enum. So, now this is standard Laravel and what this does is it defines that the only values that are acceptable as a string in this region is one of these five values. A Filament is going to help us implement that so that we can't choose anything else and then it will also help us because we don't use these magic strings that float around our application, we're actually going to be able to reference the class and then the case within the class. So, we did make some database changes, so let's open up our Cedar and I want to be able to log into my app without having to create the user every time, so let's just do that.

So, we did make some database changes, so let's open up our Cedar and I want to be able to log into my app without having to create the User every time, so let's just do that really quickly. Okay, so now every time I run this command, I'm actually going to create this User, so I don't have to do that each time and let's run php artisan migrate:fresh --seed and let's try to log in here. Okay, so now let's go to our venues this time and let's go to a new venue and we have not implemented this new field here, so if we go to the venue resource within here, let's add a select and this is the region and so what we're going to do here, first we're going to pass enum and we're going to pass in that Region class that we just had.

add a select and this is the region and so what we're going to do here, first we're going to pass enum and we're going to pass in that Region class that we just had. Now what does this do? This is the Laravel validation rule for an enum, so this will make sure that even if someone tampers with the front end of our site or anything else, we're only going to accept the values that are in this class. What this doesn't do is set the options, so we also have to set the options and again we just pass in the Region::class and so now we have a select that is going to give us the options from the enum and validate that the one that was submitted is one of those options.

us the options from the enum and validate that the one that was submitted is one of those options. Let's make this smaller, bring our browser back and if we look in here, we can see that we have all the different options that we defined in our enum class and if we actually take a look and inspect this, if we expand this here, we can see the value is the same, so the label and the value are exactly the same. So let's go ahead and fill this in. So we hit create and now that worked and let's make this a little bit bigger so we can just go back to the venue and let's add a new venue and while we're here, let's add a third one and instead let's use this create and add another.

go back to the venue and let's add a new venue and while we're here, let's add a third one and instead let's use this create and add another. This is a really nice feature that Affilimate comes with where you stay on the page and you can do this again. So now we have three different venues that are all in the US, the US region and so now if we go back to conferences, let's create a conference and so before we fill this out, let's update the region field on the conference resource to be the same as we just did. So let's actually copy it from here, let's go to our conference resource and where we have region before, we're going to replace it with this. So let's fill out this form and so let's go ahead and create this conference.

have region before, we're going to replace it with this. So let's fill out this form and so let's go ahead and create this Conference. We have not selected a venue yet, so let's just make this full screen. Now let's go back to the venues and let's add another venue. Let's say we're also evaluating one venue in the EU. Now if we go back to our conferences, we edit this and let's say I want to choose a venue. You can see this venue in the EU is showing up even though I know that this Conference is in the US, so that's really not a valid option for this. We should only be showing our users the venues that are in the right region so that they can pick from the correct ones.

We should only be showing our users the venues that are in the right region so that they can pick from the correct ones. So let's show you how to do that here with Affilimate. So we go back to the conference resource here, we can see that we can choose the region and then we also have this select to choose the venue_id, which it's using the relationship of venue. So what we want to do is actually modify the query that this relationship is using to pull back options from the venue. So right now it's pulling back everything, but we actually want to, let's first start by just hard coding it.

So right now it's pulling back everything, but we actually want to, let's first start by just hard coding it. So we can add in a third parameter here, and if we even wanted to name it, we can name it modifyQuery using, and we're going to pass a closure here. We're going to return the $query, and this is where it's nice that we're using a enum because we don't have to use those magic strings we talked about before, we'll just have the US. And now if we go back to our browser and refresh, you can see that the only options here are the ones from the US. So that kind of solves what we're doing, but now if I change my region to the EU, I'm still

the ones from the US. So that kind of solves what we're doing, but now if I change my region to the EU, I'm still only seeing the US because we hard coded it. So how can we make this reactive? They're called dependent select pickers, and it's really common to say, all right, when I choose this, give me only the eligible options here. So let's go ahead and implement that. So the first thing to understand about Filament and FilamentForms is that we are in a Livewire app. So by default, all of these components are set, just wire:model and wire:model as of

app. So by default, all of these components are set, just wiredModel and wiredModel as of Livewire v3, none of them are live updates. So we're not making API requests to the back end when one of those changes are made, but we can change that behavior here. So when we have the select, we can change that to live. And so now every time I make a change to this select input, we are actually going to make a call back to the server and update the server with what was chosen here. So what that means is anytime a change is made here, the whole component is going to re-render.

So what that means is anytime a change is made here, the whole component is going to re-render. So this closure is going to run again. So if we just Ray something like hello, and I actually don't have Ray installed in this project yet. So let's go to our terminal. If you're not using Ray for debugging, I highly, highly recommend it, especially in a Livewire app, because instead of adding a die and dump here where you would have to time it, all right, let me add the die and dump while the page is loaded, because otherwise this would run right when the page is loaded, Ray just allows you to send that stuff out to debug.

right, let me add the die and dump while the page is loaded, because otherwise this would run right when the page is loaded, Ray just allows you to send that stuff out to debug and you can see it in real time. Let's go to the browser, and I'm going to refresh the page, let's get Ray up here and let's pin it. So you can see hello ran on line 58 of our ConferenceResource, which is where we just were. If I change the region to EU, it's running again. So every time I make a change here, we have a request back to the server, it's a Livewire request, and then everything on this form is re-rendering itself.

So every time I make a change here, we have a request back to the server, it's a Livewire request, and then everything on this form is re-rendering itself. So as you can imagine, if we go back to the code, and so if we want to use that request to set the proper region here, we just need to know what value did we select in the region and pass that in as the operator here. So the way that we can do that is by passing in another parameter here. And when you're using a closure within the context of Filament, you can just pass in the get class, and we're going to call it get. And so what this allows us to do is use this variable get, which is actually a method, and we're just going to pass in region.

And so what this allows us to do is use this variable get, which is actually a method, and we're just going to pass in region. So this get variable here, we can use it with this syntax to get the value of what was selected here. So let's go back to the browser. Let's do a full refresh. You can see now we've got US here, and when I change it to EU, now we're getting that updated value. So the last thing we just need to do is pass that in here. So instead of using Ray, let's just grab it, put it right here, go back to our browser.

So the last thing we just need to do is pass that in here. So instead of using Ray, let's just grab it, put it right here, go back to our browser. And so now you can see we are still getting the three because we selected US. If we change it to EU, now we only have the one option. So this is dependent select pickers, and it was super easy. Now let's go ahead and use our factory to spin up a bunch of different venues. So if we go to our venue factory, we do have to make some updates here because we've made some changes. So we do have the region now as well. And we can do this faker randomElement.

So we do have the region now as well. And we can do this faker randomElement. If we pass in our enum here, let's go into Tinkerwell. Let's see if we can factory up one of these. I actually want to have a bunch of them in the US, but we can just let it random. So let's factory up, I don't know, 200 of them. We'll create. And now if we go back to the browser, let's give it a refresh. And when I choose US, now I've got tons and tons of options here. And if I change it to the EU, again, lots and lots of options.

And when I choose US, now I've got tons and tons of options here. And if I change it to the EU, again, lots and lots of options. So this obviously is not an ideal user experience for your users, because it's really hard to find the right one when you've got this big of a list. So Filament comes with a combo box that makes it a lot easier to find what you're looking for. So let's go back to our conference resource. We can now just add one modifier to this venueId. And we're going to make this searchable. So now let's go back to the browser, give it a refresh.

And we're going to make this searchable. So now let's go back to the browser, give it a refresh. And now I can start typing to search something. So if I add just one letter, here are the different options that work. We've got Buddy. So let's try Buddy. And that comes back with the option that we have. Now, you did notice that maybe it was a little too slow for you. I don't really like how that looks. We're not going to have, especially in this app, that many options for venue.

I don't really like how that looks. We're not going to have, especially in this app, that many options for venue. So let's just go ahead and preload all the options so that we don't have to constantly go back to the server, run queries. So now if I do a refresh here, and I pull up this, it's much easier. And as I start typing, it's much, much faster. So this is nice when you have a small amount of data. It's a much better user experience. If you have a really large amount of data, you're going to want to not use preload and let all that stuff come in from the server.

If you have a really large amount of data, you're going to want to not use preload and let all that stuff come in from the server. So now let's talk about not just making this a better experience for you, the developer, but also for your users where, let's say, for example, in real life, I was out visiting a venue. I realized I have some information wrong about the venue. And so I want to be able to get to this record and go edit it. Let me show you how to do that really simply within Filament. So if we go back to the resource here, and we have the Select, we can add another method here that's EditOptionForm.

So if we go back to the resource here, and we have the Select, we can add another method here that's editOptionForm. And so we can pass in the form that we want to use. And this will give us a modal that we can use to actually edit the record that we're about to select. Now, we already have a form for venues. So if I go to my venue resource, you can see I have this form right here. Now, what I don't want to do is start duplicating code a bunch of places, like copying this and pasting it over there. So what I like to do, and this is a practice I do for every model, I don't actually like

and pasting it over there. So what I like to do, and this is a practice I do for every model, I don't actually like the form to live in the resource. I'm going to copy this array. And instead, I'm going to do the Venue model and getForm. So now I just need to add the static method getForm to my Venue model. So I'm going to come in here, I actually have a phpStorm live template. So I just type getForm. And this is what I want. So I'm going to return an array, let's delete that and paste.

And this is what I want. So I'm going to return an array, let's delete that and paste. And everything here is good. I just need to import the classes. And so now that I have this static method to get the form, when I go back to my ConferenceResource, and I want a form where I can edit this venue, I can just pass in the venue model, getForm. And I'm using the same form on my VenueResource as I'm using right here. If we go to the browser, let's find that AprilDoyle. And when I select it, you can see now over here, I have an edit button.

If we go to the browser, let's find that April 1, April Doyle. And when I select it, you can see now over here, I have an edit button. And when I click the edit button, I actually have a modal that pops up. And let's say there was something else I wanted to add to the name, I can save that here. And they're all updates in real time. But what if, let's say I was out driving around, and I found a new venue that wasn't even in my database yet. And I wanted to come here, I want to set that as my conference venue, but doesn't even exist in my app.

And I wanted to come here, I want to set that as my conference venue, but doesn't even exist in my app. Well, that's easy as well. If we go back here, and we can have create option form, we'll do the same thing venue get form. If we go back, instead of choosing a venue, I can click this plus button. And again, it's pulling up the same venue form. So this is exactly like creating the venue from the venue resource page. But it's just here in a modal, and I can do it in lines. And when I submit this, not only does it create the record, but it also selects it for me.

But it's just here in a modal, and I can do it in lines. And when I submit this, not only does it create the record, but it also selects it for me. Because obviously, if I'm creating it here, that's probably the one I want to choose. And now you give your users the ability to add their own data in line, and they don't have to get out of the context they were in. So it's great for your users. It's also great for you as a developer. When you're testing, and you're like, okay, I want to test when the venue has this type of attribute. Well, instead of having to go create that, and then make sure you select that one, you

of attribute. Well, instead of having to go create that, and then make sure you select that one, you could just say, you know, all right, I want to take this one and I want to edit, you know, I want to make sure if the country is something different. You can do that in line, and then your testing becomes a lot easier. So this is so powerful for your users and for you as the developer.