Okay, let's work on setting the status of an Idea. So we already have this dialog here, so let's go ahead and work on it. So only admins should be able to do this. So let's start with that. If you need a full-fledged package to help you do this, I highly recommend the spatie package you can see here. However, for our use case, we just want to check if a User is an admin. So we'll just add something to our User model. So let's do that first. User model.

So let's do that first. User model. Let's create a new method that checks if we're an admin. So let's say isAdmin. And we can do something like returning if a User, given their email, is in this array. So here we can just specify a list of users that are supposed to be admins. So I'm just going to add Jeffrey because he's going to be the admin if this app goes into production. And I'll add myself, too, for testing purposes. Okay, so I added myself and Adrian as well, so you can take a look over it.

And I'll add myself, too, for testing purposes. Okay, so I added myself and Adrian as well, so you can take a look over it. And now we want to conditionally show this button as well as the dialog only when an admin is logged in. So let's do that. So I believe this is in the idea-show-livewire component, and it's called setStatus. So here it is. So I'm going to move this into its own Livewire component. So this whole button, along with the dialog, just so it's separated out from this IdeaShow component.

So this whole button, along with the dialog, just so it's separated out from this idea-show component. So idea-show, if you don't remember, is what's responsible for mostly the voting functionality and showing this. And if we add too much functionality to it, then it could feel like it's doing too much. So let's go ahead and make a new component, php artisan livewire:make set-status. And let's move all of this markup in idea-show. So this, grab all of this. And let's say livewire:set-status, okay?

So this, grab all of this. And let's say livewire set-status, okay? And we have to pass in an Idea as well. So let's do that, okay? And let's go to set-status, let's paste this in, okay? And let's accept that in the component. So set-status, let's say public $idea, and let's make a mount method here to accept it. So say mount, accept the idea, and set it here, okay? Let's make sure to import Idea, and let's see if it still renders correctly. And it does, cool.

Let's make sure to import Idea, and let's see if it still renders correctly. And it does, cool. So first, let's only show this if the User is an admin. So we can do that in the idea-show component. So we can use that isAdmin method that we just made, but we also have to check if the User is logged in. So let's start with that. We can use the auth directive. So right now, it should not show because I'm not logged in, okay? And now let's check the condition to check if the User is an admin.

So right now, it should not show because I'm not logged in, okay? And now let's check the condition to check if the user is an admin. So let's go here. Let's say if auth user is admin, so that method we just made, then show it, okay? If you just want one conditional, you can get rid of this auth directive and say auth-check here and do an and like this, but I'm okay with using the auth directive, okay? So now let me log in as someone who is not an admin. So let me just grab a user from here. So let's try this user here. Let me copy this.

So it does work. Okay. So next, we can make this dynamic. So right now, all of the statuses are hard-coded. So if you take a look at setStatus, you'll see that all of these statuses are coded in here, which is fine. But if you want to make it more dynamic, we already have this in the database. So we can pass in all the statuses from our setStatus Livewire component here, do something like $statuses equals Status::all(), or something like that, but I'm not going to do that. I'll show you why.

Again, it's a very small feature, and only admins can see it, but I kind of like it. So we need to take that into account if we use a foreach. So for example, for foreach status, they are different here. So we have text-gray-600 for the first status, text-purple, text-yellow, and so on text-green. So if we were to make it dynamic and use a foreach, then we'd have to grab these classes as well. So we can do something similar to what we did before in the statuses and have another column here, say classes admin, and then put it in there, and that would work. Or we could just leave it hard coded in here for each status, and that would work as well. So I'm just going to leave it the way it is now, since it's already in here.

five is closed. Okay. So now we want to keep track of when the User selects a new status. So we can put a wire:model on these inputs. So wherever there is an input type equals radio, we can add a wire:model. Okay. So I'm going to add it here right after the input wire:model equals let's call it status or statusId status is fine. Okay. And let's make sure to add that on our component as well.

Okay. And let's make sure to add that on our component as well. So set status, add a new one for status. And initially, we want to set this to be whatever the status of the current Idea is. So we can do that in here. So say this status equals idea status id. Actually, let's set it to this idea here. Okay. Now, if I did that right, the correct status should be selected here whenever we go to this page.

Now, if I did that right, the correct status should be selected here whenever we go to this page. So right now it should be open. Let's try a different Idea. Let's go back. Let's try one that's not open. So inProgress. So it's inProgress and it is selected. So it does work. Let's try one more implemented and it is selected.

So it does work. Let's try one more implemented and it is selected. Okay. So now let's work on changing the status of the actual Idea. So let's put a listener on the submit event. So let's go here. setStatus. Let's look for the form here. And let's do wire:submit and let's prevent the default action. And let's call a setStatus method.

And let's do wire:submit and let's prevent the default action. And let's call a setStatus method. So let's go to that. And let's make that method here, setStatus. So first, let's make sure to add the permissions here. So we have to be an admin to access this method. So we can do an if. Let's check if we are an admin. So if auth user is admin or if is not an admin, okay, then we can use the abort helper and

Let's check if we are an admin. So if auth user is admin or if is not an admin, okay, then we can use the abort helper and let's say response()->HTTPForbidden(). Okay. And let's make sure to import response. Okay. Actually, I think we also have to check if the user is logged in as well. So we have to add one more condition here. If not, auth()->check() and then we can do an or here. Okay.

If not, auth check and then we can do an or here. Okay. So now let's update the status of the Idea. So here, remember, we have wire:model and that's updating every time the user changes the status here and that's bound to this variable here. So we can just do this idea->status_id equals this status. Okay. And let's make sure to save the idea. So this idea->save() and let's see if that works. So let's go here.

So this Idea save and let's see if that works. So let's go here. I'm going to go back to the first Idea. So this one here, it's on open right now. Let's change it to considering update. Okay. So the UI didn't change, but let's see if it actually changed in the database. So let's go to ideas. Let's go to this one. And you see the status_id is 2.

Okay. So why is the UI not updating? So as we change this, we want this to update. So it's not updating because this part of the UI lives on the parent component. So it is changing in here, which is a child component, but we need to notify the parent component that something has changed. So let's go ahead and make an event to do this. So after we save it, let's do this, emit, and let's emit a statusWasUpdated event. And in the parents. So that would be IdeaShow.

And in the parents. So that would be Idea show. Let's listen for that event. So let's put it here. Let's say protected listeners and listen for that event. So status was updated. So let's grab this. Let's make a method and put it right here. And all we want to do, actually, it should be a method. Okay.

And all we want to do, actually, it should be a method. Okay. So all we want to do is update the Idea. So we can do this idea, refresh. Okay. So let's see if it actually updates the status now, or the UI for the status. So let me refresh in progress. Let's change it to implemented, update. And it does work. Cool.

And it does work. Cool. So now it's closed. And the UI is updating now. Okay. So we also want to hide this dialogue after the status changes. So we can actually listen for the event in the front end as well. So let's do that. So let's go to our setStatus. And up here, where it's responsible for showing and hiding the dialogue.

So let's go to our set status. And up here, where it's responsible for showing and hiding the dialogue. Let's listen for that event. So we can do x-init and add some JavaScript here. So let's do window.livewire.on and just listen for the event. So status was updated. Actually, let me put single quotes here. And let's do a callback. And we can just set isOpen to false. And that should close it after the status is changed.

This is just a simple explanation with no code.

For example, after we add an Idea or after we say, delete a Post or mark a Post as spam. So yeah, I think we'll call it on this video. In the next video, we'll test it as always. And after that, we'll work on this notify all voters feature. And for this Comment, we'll work on that once we have Comments working for the Ideas. So let's go ahead and make a commit. This is episode 32. git add, git commit, episode 32, admin, set status.