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
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!