Okay, let's continue and work on the actual filters. So we'll start with the status filters up here, and we'll make this a Livewire component as well. So php artisan make:livewire, let's call it StatusFilters. And let's start off by moving all the markup into there. So this is in our layout, because it appears on the index page and on this show page. So it should be in here. Where is it? So all of this stuff here. So we'll grab this and say, Livewire StatusFilters, okay?

So all of this stuff here. So we'll grab this and say, Livewire status filters, okay? And let's move it into there, status filters. And there is one root div, so we're good. And we can just paste that in and re-indent it. Okay, so let's see if it still renders correctly. And it doesn't. What did I do wrong? Okay, so I grabbed the wrong thing. So let's undo this.

Okay, so I grabbed the wrong thing. So let's undo this. And let's bring this back here. I just want this part. Yeah, so let's grab this, Livewire status filters. Okay, and let's paste that in status filters. There's one root element here, so that should be fine. And let's see if this works. Okay, and it should still appear on the show page as well. And it does.

Okay, and it should still appear on the show page as well. And it does. Okay. So I want to work on the selected category here, or selected status. So let's go ahead and add a piece of state on our StatusFilters, Livewire component. So let's say, we can name it selected, but I want to make it part of the query string as well. And selected doesn't really make sense in the query string. So let's name it status. And let's default it to all.

So let's name it status. And let's default it to all. And like I said, I want it to be part of the query string as well. So we can maintain state based on the URL with the given query strings. So let's say protected $queryString equals status. Okay, so this should be in sync with this variable here. Okay, so let's see if that works. So by default, it should be all. Okay, and it is. So now as we click on the different statuses, I want the query string to change and I want

Okay, and it is. So now as we click on the different statuses, I want the query string to change and I want the piece of state here to change as well. So let's do that. So back to our view, we can add a wire:click on all of these anchor tags and call a method which we can define as well. So let's say wire:click. And let's also say prevent the default. And we'll make a method called setStatus. Or we can do directly in here as well.

And we'll make a method called setStatus. Or we can do directly in here as well. I'll stick to a method. And we'll say all for this one, and then we'll change the rest of them. So this one will be considering and I'll fill in the rest of them inProgress and so on and so forth. Okay, so I added them. Let's go ahead and save that. And let's define that new method called setStatus. So we'll put it here.

And let's define that new method called setStatus. So we'll put it here. setStatus, and that takes a new status. And we're just updating our state here. So this status equals newStatus. Okay. So you should see the query string change here as I click on these statuses. Okay, and it does work. So let's work on the underline or the active one being shown as we click on them. So back to the view, we just have to put a conditional on this border-blue.

So let's work on the underline or the active one being shown as we click on them. So back to the view, we just have to put a conditional on this border-blue. So this border-blue is the selected one. And that's this over here. Actually, it's bold as well, or a different color. So let's explicitly add the text-gray-900 on the selected one. Okay. And the default color is text-gray-400. So I believe I can just add it on a parent element instead of adding it to each one here. So if I remove that, that should change the color.

So I believe I can just add it on a parent element instead of adding it to each one here. So if I remove that, that should change the color. And it does. But let's put it up here. So text-gray-400. Okay. So let's add the conditional around this one here. So border-blue and text-gray-900. So say if, and for this case in particular, it's status equals all, we have to add them for each status.

So say if, and for this case in particular, it's status equals all, we have to add them for each status. So we add these two classes, and then we can end if here. Okay. And let me just grab all of this actually. Okay. And let's see if this works. So right now we are closed. So it doesn't show here. But if you go back to all, it should show it and it does.

one. Okay. So like I said earlier, this also appears on the show page. And as you see, it resets to all ideas here. So two things I want to change here. I don't want any status to be selected when we're on the show page. And I don't want a query string here. So let's do that. So back to our component. Let's make a mount method here.

So back to our component. Let's make a mount method here. Okay. And let's just check if we're on the show page. So there are a few ways to do this. I'm just going to make use of the route facade and say if route, and there's a method called currentRouteName. In our case, it's idea.show. So if we're on the show page, I don't want a selected status. So we can set that to no.

So if we're on the show page, I don't want a selected status. So we can set that to no. So this status is no. Okay. And like I said, I don't want a query string as well. So this query string is, say, an empty array. Okay. And let's make sure to import Route, say the facade here. And let's see if this works. So let's go back to the main page.

Cool. Actually, one more case that we have to handle here is if we're on the show page and we click on one of these, this should go back to the index page. And right now it doesn't. Okay. So after we set the status, we can do that. So right here, let's say return, redirect, route. And let's just say, let's go back to the index page. So idea.index. And we can set the query string here to that new status that we just clicked.

So idea.index. And we can set the query string here to that new status that we just clicked. So say status is this status. Okay. Let's see if this works. So save that. Let's go to the show page. Actually, let's start on the main page here. Let's go back here, actually. Okay.

Let's go back here, actually. Okay. So status considering. And you can see that it does a full page refresh now. So let's try it on the show page. So I'm going to scroll down a bit, and you'll see that it does redirect back to the index page. However, I don't want this to do a full page refresh if we're already on the index page. So again, let me scroll down a bit to show you that it does do a full page refresh. And that's fine.

So again, let me scroll down a bit to show you that it does do a full page refresh. And that's fine. But I want it to be the Livewire way without a full page refresh if we're on this index page. We can do something like this and check the current route name and check if it's the idea.index page or the idea.show page again, and only redirect if that's the case. So let's grab this and let's try it out. Actually, let me just dd it to show you that that will not work. So when we're on the setStatus method, the current route name will not be idea.show. And you'll see what it is when we try it.

So when we're on the setStatus method, the current route name will not be idea.show. And you'll see what it is when we try it. So let's go here. Let's try to set the status. And you'll see we are on a route called Livewire.message. So that's because we are hitting this new method here called setStatus. And this has its own Livewire route called Livewire.message. So what we want is actually the previous route. So I believe there is a previous method on the URL facade, and we can make use of that. But I want to use route names like we've been doing.

So I believe there is a previous method on the URL facade, and we can make use of that. But I want to use route names like we've been doing. And I found this thread on Stack Overflow, which does exactly that. So it's this long statement here. Let's grab this and let's make use of it here. So let's comment this out and let's make use of it right here. So if this long thing. So this is a previous route name. So in our case, we're checking against idea.show, then redirect. But if not, then do nothing.

So in our case, we're checking against idea.show, then redirect. But if not, then do nothing. So on the index page, that should not perform a full page refresh. So let's see if this works. Okay. So on the show page, it still should perform a redirect and go back to the index page. And it does. But on here, let me scroll down a bit. It should not. And it doesn't go.

It should not. And it doesn't go. So it does work. So let me just extract this to a private method since it's kind of long. So let's just grab this. Let's call it getPreviousRouteName. And if I needed this globally, I would put it in a global helper file. But for now, I just need it in this controller. So I'll just put it on a private method here. Let's say getPreviousRouteName.

So I'll just put it on a private method here. Let's say getPreviousRouteName. Okay. And let's just return this and let's try it again. Should work on the main page. There should be no full page refresh. But on the show page, there is one. Cool. Okay. Now let's actually work on filtering the ideas based on the status that

Okay. Now let's actually work on filtering the ideas based on the status that they selected up here. So we have this query string that we can make use of. So let's do that. So back to our ideas index, and we can make use of the when method to add a conditional select based on a condition here. And the condition is if the query string. So we can do request()->status is not or does not equal all. So if it does equal all, then it won't go into this when closure.

So we can do request status is not or does not equal all. So if it does equal all, then it won't go into this when closure. So it's a closure function query, and it won't add this conditional. Or this where clause that I'm about to add. So let's say return query where status_id. And the status_id is an integer on the ideas table. As you can see here, we just want to filter based on what they selected. But in the query string, I added the actual name of the status. So we need a way to map the ID to the actual name. So let's do that.

status. So we need a way to map the ID to the actual name. So let's do that. So let me just hard code this for now. So it passes or not passes. So it works. So let's just see if this works, actually. So status ID one is what? Open. So this should only show open ideas, and it does work. Okay, so let's go ahead and map the names to IDs.

So this should only show open ideas, and it does work. Okay, so let's go ahead and map the names to IDs. So I make a variable here called statuses. And let's grab all the statuses, but let's pluck the ID and the name. And let's go ahead and dump this, actually, so you can see what we're working with. Okay. And let's make sure to import this. Okay. And you see, we get a collection, and the key is the name,

Okay. And you see, we get a collection, and the key is the name, and the value is the ID it's associated with. So now we can make use of this to grab the ID. So let's get rid of this. And we need to use it in this closure here. So let's say use statuses. And instead of hard coding one, let's say statuses. Let's get the query string. So the name request status.

Let's get the query string. So the name request status. Okay. So this should work. So let's try it out. So closed works implemented does not work. I think it does work if I refresh. Yeah, and it does. So it doesn't work when Livewire makes a request, but it does work when we just put it in the query string.

So it doesn't work when Livewire makes a request, but it does work when we just put it in the query string. Okay. So in progress, refresh does work considering refresh and all refresh. Okay, so let's try it from the show page. And this should work because it's making a full page refresh. So in progress, and it does work implemented, and it does work. Cool.

This is just a simple explanation with no code.

So we get nothing because it happens before this status is updated. So let's just add one more condition here on our ideas index, and only when there is an actual status. So we can just do request status and this. Okay. So let's see if this works. So if there's no query string, it should still show everything. Cool. Actually, if you want, you can remove the pagination or the

Cool. Actually, if you want, you can remove the pagination or the Livewire pagination, and I believe that should work. So if I remove this and do this, yeah, the pagination works now. So we'll leave it at this for now, and then we'll fix that issue later. So one more time, all ideas filters work, and our selected status works as well. In the next video, we'll get the count working here for each

status works as well. In the next video, we'll get the count working here for each of the statuses. And I just noticed that there's no hover on the first Idea here. So let's add that status filters. Where's the hover here? Hover border blue. And that should be right before the if. So right here.

And that should be right before the if. So right here. Okay. And now there should be a hover on all of them. Okay. So, yeah, we can make a commit here. So what is this? Episode 24. So I'll git add episode 24. Let's say statusFilters.

So I'll get add episode 24. Let's say status filters.