Okay, let's go ahead and work on deleting ideas. So it's going to be similar to editing ideas, except we are deleting ideas instead. So let's first grab the modal, which we took from Tailwind UI, and it's a free component. So let's grab the HTML, copy it, and let's go ahead and make a Livewire component for deleting ideas. So php artisan livewire:make, let's call it DeleteIdea. Okay, and let's do the same thing we did for Edit. So let's add that in our show,

Okay, and let's do the same thing we did for edit. So let's add that in our show, and we can copy this, or just duplicate this. Actually, we'll work on auth later, so let me just delete that. And then we can do Livewire, delete Idea, and pass through the idea. Okay. So let me just paste in that modal code for now, and I am going to remove this. Okay, and let's just initialize the idea. So I'm going to grab the same code from editIdea, and let's just

Okay, and let's just initialize the Idea. So I'm going to grab the same code from editIdea, and let's just grab this. Actually, I just want to initialize the Idea, like I said. So let's go to deleteIdea, let's paste that in here, and we just want to initialize it. So we only need the Idea here, at least for now. Let's remove this, and this. Okay. And let's make sure to import Idea. Okay, let's see if anything renders in our browser. Okay, back here.

import Idea. Okay, let's see if anything renders in our browser. Okay, back here. And there is the modal. Okay, let's make a few changes here. So I do want to keep this icon here, so let's work on that first. So back to our deleteIdea. I think it's red. So I do want to keep bg-red-100, but we don't have that because we're not using the tailwind-red. And let's say text-red here, because we do have a default red color. See if that changes anything. And it does. And let's fix the confirm button here.

red color. See if that changes anything. And it does. And let's fix the confirm button here. So that would be this. Actually, let's change the title first. So this is delete idea. Let's change the description here. Let's say are you sure you want to delete this idea? This action cannot be undone. Okay. Let's change the confirm text to delete. Let's change the wire:click. Actually, we don't have that yet.

confirm text to delete. Let's change the wire:click. Actually, we don't have that yet. Let's just put it in. Say wire:click. And this is the method we're going to call on the Livewire component to delete the actual Idea. Let's call it deleteIdea, and we'll add that in a second. And change this bg-red-600 to just bg-red. And let's see how that looks. Okay. So I actually want to use the blue primary color we have in our site instead of red, so let's change that. So it's just blue. And let's change the hover.

So all we need now is our red 100 here, which I do want to keep. So I'm just going to grab that color from the default color scale from Tailwind. Let's look for red here. And I'll just grab the 100 here. Okay. And let's manually add that to our Tailwind config. Say red 100 underneath red. So let's just duplicate this. Paste that in. Say red 100. And let's make sure to npm run dev. Okay.

And let's make sure to npm run dev. Okay. So let's try that again. And now the red is rendering. I thought I made this blue. Let me hard refresh. I guess I didn't. Back here. I think I just forgot to save it, so let's save it. Hard refresh. And now it's blue. Okay. Looks good. So now let's work on toggling the visibility of this model when we click on the menu item. So we can basically just copy what we have from editIdea.

But let's change it anyways or leave it. Idea was deleted. Okay. And now let's go back to edit Idea. The next thing we need is this. So this is the container for the model. And we want an opacity transition on that whenever it's open. Okay. So that would be this one, I believe. So let's add that. Let me just reformat this and add it here. Okay. And one more. And that's the next div here. And for our edit model, we had a transition that came in from the bottom.

let me just reformat this. Or it might go in the next div. I'm not sure. Let's give it a try anyways. And let's get rid of these. Origin, bottom. We don't need. We just want the opacity transition. So let's just say x-show transition opacity. Okay. And let's try that out. Okay. So let's refresh. Okay. It's gone now. Actually, we have to dispatch the event from this menu here. So this deleteIdea. So that would be an Idea show. And it should be down here somewhere. Let's look for the canUpdate. There it is.

So that would be an Idea show. And it should be down here somewhere. Let's look for the canUpdate. There it is. So let's just grab this and do the same thing for delete. And we'll add the authorization later on. So let me just remove that for now. And this is called customDelete or showDeleteModel. And I believe I changed that as well. And this should be deleteIdea. Okay. See if this works. If I did everything correctly, deleteIdea. And it does toggle.

Okay. See if this works. If I did everything correctly, delete idea. And it does toggle the visibility. And I see the transition working as well. Okay. So I think I have to add the cancel button here. You can see the focus works as well. Okay. So let's do that. So let's grab the close or all we have to do is this. So let's add this to delete idea for the cancel button. So we can just do addClick is false. Okay. Actually, is there a hover on the cancel? It says right here there is.

If you close the model, you'll see a flash here. So let's just add a duration on this as well. Or we can get rid of this one. And it will use the default one. But let's just add one that's greater than or equal to 300. So we'll leave it the same, and that should get rid of that flash. Delete. And it does. Cool. Okay. So one more small accessibility thing that I want to add is focusing the delete button when we open this model. So let me use the keyboard to navigate. Again, it's not fully accessible, but it does work. And we open the delete idea. You'll see

to happen for the edit Idea as well. So I want this one to focus. So we can easily do this with refs in Alpine. So let's go ahead and do that. So let's add a ref on the delete button. Where is it? Right here. So let's just say x-ref equals. Let's call it confirmButton. confirmButton. Okay. And then in our code up here. So this is a code that gets executed once we receive that event from the menu item when it's clicked. So let's add some code

is a code that gets executed once we receive that event from the menu item when it's clicked. So let's add some code in here. So let's just focus that element. So we can refer to that element using refs or $refs. The name of that. So it's confirmButton. And we can call the focus method. So let's see if that works. So let me hard refresh here. deleteIdea. And it doesn't seem to focus it. And I think that's because the transition is still happening. So if you wrap this in a nextTick function.

focus it. And I think that's because the transition is still happening. So if you wrap this in a nextTick function. So we can do $nextTick and pass in a callback like this. Let's close that out. See if this works. So let's refresh. Delete Idea. And now it's focused. So let's try that with the keyboard. So let's just open this up again. It's not fully accessible but it does work. So delete Idea. And delete is focused. Actually you saw the page jump up there.

but it does work. So delete Idea. And delete isFocused. Actually you saw the page jump up there when we used the keyboard to navigate. I think I don't have Yeah the prevent has to go on this here. So prevent. So this one too here. Okay. prevent. And now it shouldn't jump up. Okay cool. So let's add the same thing for the edit. I just want it to focus this once we open the editIdea modal. So same thing. EditIdea. Let's look for the title.

open the edit Idea modal. So same thing. Edit Idea. Let's look for the title. So let's say xref equals title. Okay. And we can do the same thing. So let's just grab that code here. Okay. Edit Idea. Let's go up here. And let's add that right here. So refs.title.focus. So let's see if it focuses now. And it does.

title dot focus. So let's see if it focuses now. And it does. Cool. Okay now let's work on actually deleting the Idea. So we want to delete the Idea when we click this button. And I already have the delete method set up in our component here. So deleteIdea. I believe I set up the wire:click somewhere. So yeah it's looking for a method called deleteIdea. So let's add that method here. deleteIdea. Okay. And we'll do some

So let's add that method here. Delete idea. Okay. And we'll do some authorization in a second. But let's go ahead and delete the idea. So we can do idea::destroy. And we have the idea being passed in. So we can pass in the id. So this idea id. And that should delete the idea. And I just want to redirect back to the index page. So return redirect()->route('idea.index'); Okay. So let's see if this

to the route named idea.index. Okay. So let's see if this works. Actually let me go back to the index page here. And let's try deleting this idea. So say delete idea. Let's delete it. And you can see we're getting this database integrity constraint violation. That's because we're trying to delete an idea. But it's still being referenced on another table. And that other table is the votes table. So if you remember we have this votes table to keep track of our votes. And we're trying to delete an idea but it still exists.

votes table. So if you remember we have this votes table to keep track of our votes. And we're trying to delete an Idea but it still exists in this table. So before we delete we have to make sure to delete all the votes first. So let's do that. Actually to show you that it works with an Idea without votes, let's try that out first. And that should work. So let's go back here. Let's try deleting this one. And it should work because it has no votes. So say delete. And you can see we now have 99 Ideas. So that did work. And we should have some success message here. But like I said before, we'll work on that in the next chapter.

have 99 ideas. So that did work. And we should have some success message here. But like I said before, we'll work on that in the next chapter. So let's work on deleting an Idea with votes. So we just have to go through that table and delete any votes that reference this Idea we're about to delete. So we just want to grab all the Ideas that have this Idea and delete them. So for example every Idea with the ID of 2. If we want to delete this one, and then delete every one of these rows here. So let's do that. Let me just go to spec. So let's just do

rows here. So let's do that. Let me just go to spec. So let's just do vote where the ideaID is this ideaID and we can delete all of them. So let's do that. delete. Okay. And let's make sure to import vote. And that should do it. So now we can try deleting an Idea with votes. And this should work. Okay. So let's take note of how many votes we have. We have 1000 altogether.

should work. Okay. So let's take note of how many votes we have. We have 1000 altogether. And if I delete them, it should go down by 20. Because there are 20 votes here. Okay. So let's try deleting it. Okay. We have 98 ideas. So that worked. Let's check our votes table. It should have deleted all of those with that idea. And we have 980 now. So that did work. Okay. Now let's add some authorization like we did for our editIdea. Pretty straightforward. Let's go to our IdeaPolicy here.

authorization like we did for our editIdea. Pretty straightforward. Let's go to our IdeaPolicy here. And there should be a method for deleting. And it's almost the same as this. Except we don't need this constraint for that one hour rule that we have. So let's just do this. Okay. And this should work. And if you remember in editIdea, we are using it like this. So we can do the same thing here. So let's grab this. Let's go to deleteIdea. Let's add it right here. And

here. So let's grab this. Let's go to deleteIdea. Let's add it right here. And let's change this to delete. And it's import Response. Okay. And this should work. So right now, this is not I am logged in, but this is not my idea. And we'll add it to the menu here in a second. But if I try to delete it, I should get an error. And we do. Cool. Actually, I'm going to add a rule that lets admins delete. Because later on

try to delete it, I should get a error. And we do. Cool. Actually, I'm going to add a rule that lets admins delete. Because later on I want to clear spam if there is spam detected. So as an admin, I want to do that straight from the UI here. So let's just add that one rule here in the policy. So we can say user is admin. Okay. And now since I am logged in as my admin account, let me hard refresh. This should work. Delete. And it does work. Okay. So I'm going to log out of my admin account and log in as a

Delete. And it does work. Okay. So I'm going to log out of my admin account and log in as a regular User. So we can test out the authorization for the menu. So let me just grab a User here. So let's say this person right here. Let's grab this. And let's log in as this User over here. Okay. And let's add that authorization to the menu here. So that should be in ideaShow. So pretty much the same as editIdea. Let's just

be in Idea show. So pretty much the same as edit Idea. Let's just wrap this in a can directive, but for delete. So this is delete. Let's change this to delete. Let's end the can here. And now assuming this is not my idea, and I think it's not, this should no longer show. Actually, let me add it to the actual rendering of the component as well. So we can pretty much just copy this. And say delete here. Okay.

So we can pretty much just copy this. And say delete here. Okay. And can. And this should work. So I think this is not my Idea, so it should not show. And it doesn't. Cool. But now let's look for an Idea that does belong to me. My ideas. Here we go. Let's delete this one. And this should work. And everything is working correctly. So yeah, deleting ideas should now work for whoever created the Idea or for admins as well. So one more time. I did not

So yeah, deleting Ideas should now work for whoever created the Idea or for admins as well. So one more time. I did not create this Idea, so it doesn't show up here. But if I go to an Idea that I did create, or if I'm an admin, then it should work. Delete this one here. This has votes. It should delete these votes as well. Delete Idea. And everything is working correctly. So as always, let's make a commit here. git status. git add. What is this? Episode 41. Delete Idea.

git status. git add. What is this? Episode 41. Delete idea. git commit -m. Episode 41. Delete idea.