Adding Basic Filters0:00
Now that we have the table columns we want, let's talk about adding filters so that we can filter the table just the data that we want. So right now, we don't see any filters here, so we need to add one. So we go into our resource, and we find the filters method here. So let's start with the most simple one. Let's add a ternary filter. And let's do this on the newTalk. And that's all we have to do to add the filter. So if we go back to the UI and refresh, you'll see now we have a filter icon here. It shows that zero are currently applied. And this gives me a select that has either empty, which shows me everything, or we can choose yes, and that will just give me the newTalks. You'll also see this indicator shows
Relationship Select Filters0:32
a select that has either empty, which show me everything, or we can choose yes, and that will just give me the new talks. You'll also see this indicator shows we do have one filter applied. And we also have active filters showing here that will give us an indication of what the table has been filtered to. And of course, we can reset our filters and clear them to go back to the way it was. Now we can also do something a little more complicated. So let's say we want to filter on speakers, for example. So let's do a select filter. And we'll make this on, let's just pass in the name of the relationship. And we will add this relationship method where we say it's a speaker, and we want to show the name. We don't have to write the query.
the relationship. And we will add this relationship method where we say it's a Speaker, and we want to show the name. We don't have to write the query. We don't have to do anything. We can just refresh the page. And if we want to see just Ashley, then we can do that. Now of course, that might not be the user experience we want. So we can, first of all, we can select multiple. We can also make it searchable. And we can also preload like we did before so that it doesn't take too long for all these records to come through. And so now, I come back here and the filters have been cleared. And when I go to Speaker, I can choose multiple. Let's say I want Clint and Bradley and General.
Custom Query Filter1:36
And so now, I come back here and the filters have been cleared. And when I go to speaker, I can choose multiple. Let's say I want Clint and Bradley and General. Makes it really simple. Filament handles writing all the queries for you. So when you're dealing with relationships, it's very simple. Now let's say we only want to see speakers that have an avatar. So we can add that filter as well. And that's a little bit more custom. So in this case, we're just going to pass in the filter. And we're going to say hasAvatar. And here we just need to pass in the query method. And we're going to pass in the existing query, and we're going to modify it and return it. So in this case, we just want to do whereHas.
pass in the existing query, and we're going to modify it and return it. So in this case, we just want to do whereHas speaker. And then we'll pass this in where the avatar is not null. And so if we go back to the browser, and let's clear out all of our existing filters. Let's do a reset. And we can see hasAvatar here. And when I check this, I just get the one record that has an avatar. Now if you don't want the checkbox, you want it to be a toggle, that's easy as well. We just come up here and add a toggle. So if we go to the UI, you can see now
We just come up here and add a toggle. So if we go to the UI, you can see now it's a toggle here. Now the toggle or the checkbox can be somewhat confusing because when I have this turned off, this speaker does have an avatar, but we're not saying only show me the ones without an avatar. So that's where this ternary sometimes can be helpful where you have a filter to take care of the null instance as well as no and yes. In this case, we're just going to show the ones that have an avatar, otherwise show everything. So we might want to modify that label a little bit. So we'll just say a label of show only.
Status Tabs Filtering3:12
want to modify that label a little bit. So we'll just say a label of show only speakers with avatars. And so that will make it more clear to your users that we just want to show speakers with avatars, and then when we turn this off, we'll show all speakers whether they have an avatar or not. Okay, now let's say we wanted to add a filter for the status of the talk. And if we want to do that, now of course we could add a select filter and pass that in here, but when you are using the Filament Panel Builder, now this is pretty much the first time in this course where I'm doing something very specific to the Panel Builder. So we can add tabs that would show up here.
is pretty much the first time in this course where I'm doing something very specific to the Panel Builder. So we can add tabs that would show up here and those will allow us to modify a query and just show the records. It's kind of a higher level filter and it's only available for the Panel Builder. It's not available if you're just using the tables package, but let's go ahead and implement that and so we can have tabs up here that will allow us to filter by the different talks that are in various statuses. So in this case, we need to leave the talk resource and actually go to the list class that lists the talks, and here we need to add a method for getTabs. So you can see this returns
go to the List class that lists the talks, and here we need to add a method for getTabs. So you can see this returns an array, so let's create an array and we'll say all and that's just going to return a Tab class and this is the Tab class on the Filament resource. And so this will be all talks, and then let's say accepted, and now we're going to have a tab and we're going to name it accepted, and now we need to chain on a modify query using. So we add a closure here and we just need to return a query.
chain on a modify query using. So we add a closure here and we just need to return a query and we'll say where status is let's do our talk status approved. And so not accepted, let's make this approved. Alright, let's just start with that and go back to our browser give it a refresh, and now you can see up here so if I just want to see my approved, I can see just the approved talks or I can go back to all talks. Once I'm within approved, I can also use the additional filters and so if I want to find an approved talk by Arturo, there are none.
all talks. Once I'm within approved, I can also use the additional filters and so if I want to find an approved talk by Arturo, there are none so these can be combined to let you filter down even further. So let's implement the other two statuses. We've got submitted and the last one is rejected. Let's reformat that a little bit. We go back to our browser, and here we go. So if you want to see everything, you can just go to all talks, but we can easily filter down to these, and this makes a little bit more sense instead of having the filters over here because it's such a core component of what you're trying to do.
down to these, and this makes a little bit more sense instead of having the filters over here because it's such a core component of what you're trying to do like if I'm managing my conference, I want to see the talks that I haven't reviewed yet so show me the submitted ones. Let me work through those, and as I change it, they'll move over to the other sections. One other thing I want to show is let's say I'm here, and I've filtered down, and I want to see only new talks and from these four speakers, and let's say I go over to my dashboard and then come back to the talks you're going to see it's back to reset to where it was before, and sometimes that's what you want, but sometimes you want to save those filters for your users
Persisting Filters in Session6:24
you're going to see it's back to reset to where it was before, and sometimes that's what you want, but sometimes you want to save those filters for your users so that when they come back to what they were working on previously, they actually have the same filters set, and that's really easy to do. Now let's go back to the Resource class again and on the table itself, so let's go up to the very top, we will just add a method here that's persistFilters in the session. So now that we've added this, if we go back to the browser, let's go ahead and add some of those filters. I want new talks from a few of these speakers, and if I go to, let's say conferences, come back to talks.
Customizing Filters Button6:56
and add some of those filters. I want new talks from a few of these speakers, and if I go to, let's say conferences, come back to talks now I come back and it's exactly where I left it before. So a lot of times this is nice for your users not to lose where they were. One other thing I want to show is you might want to be a little bit more explicit of what this button actually does and so what I would like is, I'd like this to be a button that has a label that actually says filters just so it's a little more clear. So we can do that in Filament. Let's come back here and we'll say Filters Trigger Action So we're going to pass in the action here and then we'll just return it as modified with
So we're going to pass in the action here and then we'll just return it as modified with a button and we'll say the label is filters. And so if we go back to the browser and refresh now you can see, to me that's a little bit more clear what is going to happen when I click on this button.
