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
18. Editing cards

Episodes

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

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.

Episode summary

In this episode, we're diving into editing our cards directly from the modal. We kick things off by setting up a basic form inside the modal with an input for the card title (we'll add more fields, like notes, later on). A little polish goes into the styling, like autofocus and some spacing tweaks, to give the modal a clean look.

After wiring up the input using Livewire's wire:model and handling validation, we move onto updating the card. When the 'Save' button is hit, we validate and update the card, then close out the modal—all pretty standard stuff by now.

But, there's a little gotcha: after updating, the main board doesn't automatically refresh to show our changes. Instead of reloading the entire board (which would be heavy-handed), we emit a custom event for the specific card that's been updated. Then, over in our card Livewire component, we listen for that event and only refresh the individual card component. This makes our UI efficient and responsive—just the way we like it!

By the end of this video, we've got smooth, real-time card editing that feels instant and keeps everything in sync without any janky refreshes.

Episode discussion

No comments, yet. Be the first!