Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
16. Creating modals

Episodes

0%
Your progress
  • Total: 2h 27m
  • Played: 0m
  • Remaining: 2h 27m
Join or sign in to track your progress

Transcript

00:00
We're going to be using modals quite a bit, so let's spend some time on setting up some modal functionality. And when we go ahead and do something like click on a card,
00:07
we can show a modal to edit it. OK, so we're going to be using the wire elements modal package, which works really nicely. We're just going to get this installed, configured,
00:17
and it will come with Tailwind styles. We don't really need to do much else. OK, let's go down to the installation section, pull this in first of all, and then we'll
00:26
see what else we need to do here. So we need to register this directive over in our app layout. So let's go over to app.lay.php under Resources and Views.
00:37
And just at the very bottom here, let's go ahead and pull that directive in to register that. Now, we're using Tailwind CSS, so we don't need to change that.
00:45
Everything is absolutely fine. And we want to go ahead and make a modal now. So let's go and make out a component. We'll separate these out into a separate directory.
00:55
So let's say wire make, and let's say modals, and we will create an edit card modal. OK, so as soon as we've done that, let's go ahead and open up this edit card component.
01:07
And instead of extending the base component, we want this to extend the modal component. So let's go ahead and pull that in. Now that we've done this, we're pretty much done.
01:17
So I'm going to head over to the edit card modal and just put edit card just in here. And let's go ahead and trigger this modal to make it appear.
01:26
So of course, we're going to come over to the card itself. And when we click on this, we're going to go ahead and show that modal. So to do this, we need to dispatch an event.
01:35
And the event is open modal. Of course, we need to pass which modal, which component we want to show. But we can also pass a bunch of arguments
01:44
through to modals as well. So the component that we want to register is under modals, and it's edit card. And we want to pass through to this the card ID
01:55
so we can pick it up within the modal. So we can also provide a bunch of arguments here. And let's go ahead and call this just card. And then we'll output the current card ID within here.
02:07
Let's go ahead and see if this triggers. And then we'll look at actually picking the card up inside of the modal. So when I click on any of these, yeah, sure enough,
02:15
we get a nice modal shown. OK, so over inside the edit card modal, what we're going to do is pick up the card itself in here from our models. And that should be all that we need to actually get
02:32
an instance of this model. So now over in edit card, we should be able to output any of the information directly from that model.
02:43
So let's click on here. And yeah, you get card four, card five, and so on. So there we go. We have modals set up and working.

Episode summary

In this episode, we roll up our sleeves and get modal functionality working for our app. Since we'll need modals quite a bit—think editing a card after clicking on it—we start by installing the handy Wire Elements Modal package. This package plays nicely with Tailwind CSS, so styling isn't a hassle.

You'll see how to get the package installed, the directive registered in our main layout, and then we're off to the races. We make a new component for our modals (specifically, an Edit Card modal), set it up to extend the modal class, and then hook up our UI so that clicking a card fires an event to open the right modal.

We pass along the card's ID to the modal so we can load the right info to edit, and with just a few lines, we have a fully functional modal popping up with the card details. By the end, you'll see how easily we can show modals with dynamic data, making it nice and interactive for users to edit cards.

Episode discussion

No comments, yet. Be the first!