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
18. Editing cards
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
So let's get to editing our card directly from this modal. And one thing that we're going to find is that when we do edit this and submit it,
00:08
our main board is not going to be refreshed. So let's bear that in mind for when we do update it and we'll emit an event to refresh the card that we're updating specifically.
00:20
OK, let's head over and just start to build this for now. So let's create out a really simple form. We'll just include the title that we're updating for now. And later on, we'll add in the notes.
00:30
And inside of here, we're going to have everything that we would normally expect. So we want an input label that's going to be for the title. We'll set a value of that to title, and then we'll hide that with screenreader only. Next up, we'll have an input.
00:44
And let's go ahead and set some classes on this. We'll set this to width full and we'll set an ID here of title. Of course, we will make this autofocus. So this focuses rather than the close button.
00:57
And we'll hook this up with wire model in just a second when we've built our form. OK, so last is the input error, which we'll leave for now. And let's just go and create our button down here. So we are going to have in here a primary button.
01:13
Which is going to submit this. So we'll just say save. And then next to this, we're going to have another button which will archive this. Let's just add this in here now and make this a secondary button.
01:23
And let's change this to archive. So we'll do that a little bit later, but we'll start up now. So we've got it. So let's say flex item center and again, justify between.
01:35
OK, let's go ahead and open this up. And yeah, that looks OK. We can just add some margin in here or some spacing to separate everything out. So on the form itself, let's do that.
01:45
We'll set a space on the Y23. OK, so obviously everything that's going to happen here will be on the edit card and modal. So to update the card, this is going to happen with a method in here.
01:59
And then we're going to have a form as well to edit our card. So let's go ahead and make one with live wire. So let's say live wire and form. And we're going to say edit card.
02:11
Let's go ahead and pull this in. So edit card from our forms. Again, it's the same name that we're keeping here. So we'll just have to put in the full full namespace
02:20
and we'll call this edit card form. OK, great. So when we update the card, sure enough, as we've done a bunch of times before, we're going to want to validate this. And over in this edit card form,
02:34
let's put in the title in here and we'll make sure we validate this as well. So let's just set this to required. OK, great. So next up, when this mounts,
02:46
we want to hydrate all of the items in the form. So here we can either go ahead and do these individually or because we're working with a form class now and it's really, really convenient, we can just fill this with a bunch of data
03:01
so we can grab the card that we currently have and we can say that we only want to fill in the title. And then later, if we want to add more, we can just add in another one. So we just add notes in here as well.
03:13
So now everything should be hooked up. Let's go over to our edit card template and let's hook these up with wire model. So we know this is edit card form and title. Let's put in our input messages as well, our error messages as well.
03:28
So let's say messages. And this is errors. Get an edit card form title. And let's try this out.
03:38
So let's open this up and we'll get rid of this. You can see that that's already populated. But when I hit save, sure enough, nothing happens because we haven't hooked it up yet.
03:46
But once we do, that should validate. So when we submit this, we want to update that card. Let's try that out again and get rid of that. Hit save. Yeah, there we go.
03:56
Sure enough, not looking great. We'd have a margin top of one on here like everywhere else, but we can deal with that. OK, so now we actually want to update the card. So over in our edit card model after we have validated.
04:11
Very, very simple. We just want to update it. So let's say this card update. And once again, because we're working with a form here,
04:18
we can just say edit card form only and title. And then we want to close the model off. So at the moment, what we've been doing over in our model wrapper, we've just been dispatching closed model, which is exactly the same thing
04:33
as doing this dispatch within Livewire. So here we can just say this dispatch closed model and I'll close the model for us. OK, let's try this out.
04:43
I'm going to update card five here. Just add an exclamation mark or something. Hit save. And yeah, sure enough, that looks like it worked.
04:49
But nothing's been refreshed yet until we manually refresh the page. Now, the reason for this is that we're working within a separate component and nothing on this board, either within the columns or the cards themselves or the entire thing is going to be updated.
05:05
Now, what we don't want to do is refresh the entire board because it's going to be completely unnecessary to reload all of that data in again. So if we want to pick an individual component just to refresh that individual component, this is pretty straightforward with an event and a listener.
05:22
So we're going to dispatch an event much like we've been doing before after something's been created or edited. But we're going to do this with a specific ID. So I'm going to say card X updated.
05:35
And of course, we're going to replace our X with the actual ID of the card that we've updated. So let's go ahead and grab the card ID, and then we can listen to this dynamically and only refresh the card where the ID matches.
05:50
So if we head over to our card live wire component over here, let's go and add in some listeners. So let's define out our listeners array. And in here, we want to match up card X updated.
06:06
And what do we want to do with that? Well, we want to just refresh this entire component. That's not going to be too bad because a card component on itself doesn't contain a lot of data.
06:16
It doesn't do much so we can get away with that. Now, how are we going to replace out this X with the actual ID of the card? Well, we can use curly braces and just say card ID and then whichever ID we're currently dealing with, we'll only listen on this.
06:30
So we'll just refresh the individual card that we've updated. Let's try this out. So I'm going to click on card five, get rid of the exclamation mark, hit save. And yeah, sure enough, our cards are now updatable.
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!