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
14. Editing column titles

Episodes

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

Transcript

00:00
Let's do more or less what we just did for creating a column, but this time updating a column.
00:04
The only thing that we can really update for a column at the moment is the title that we toggled earlier. Okay, so you'll notice that the first issue is that we don't actually get the title in here that we're actually clicking on because we don't have that available yet. So we're going to head over to our column template and let's find where we were
00:25
doing this. So let's just get rid of this one and pull this one out and we know that we've got the editing state just here with the text input. Let's go over to our column component
00:39
and let's create out that form to edit the column. So let's say php artisan live wire form and we will call this edit column. Let's go ahead and pull that directly into here edit column. And of course we're going to call that edit column form and if we open this up, we know that this needs a title.
00:59
The first job is to set this title when this mounts. So let's create this out. First of all, we have the title of the column and in here we want to validate this and that's required. Okay, so when our column mounts we want to set the title within that form so it matches.
01:20
So when this mounts we are going to access the edit column form and we're going to set the title to the column title that we get passed into this component. That's as easy as it is. Now over in our column when we
01:38
hook this up with wire model we're going to say edit column form dot title and that should now match. So now when I click on this it matches for every column. Okay, so when we go ahead and submit this form we're going to call a method called update column maybe
01:54
and we can go ahead and add this in now. So let's go over here, create this out to update our column and once again, we want to validate this. So this edit column form and validate. We're not going to be showing any validation errors here because it's pretty obvious and it obviously won't get through once we've validated it
02:13
but you can figure out a way to show a message if you want to. Okay, so all that's left to do is take the column that we're currently dealing with here and of course go ahead and update it using just the data that we need from the edit column form. So we're just going to say only title because that's the only thing we're dealing with and we should be good.
02:31
Okay, let's see what happens when we do update this now. So I'm just going to say column two updated. I'm going to hit enter to submit that form. Of course, we're not resetting the state just yet but let's click outside of here and give this a refresh. Everything works. Okay, let's go ahead and emit an event once again to
02:50
listen with Alpine to close this off. So we're going to go ahead and dispatch an event once again and this event is just going to be column updated. We can now come over to our column and listen for that in exactly the same way as we did before. So we'll say exon
03:05
column updated and we'll go ahead and set editing back to false. Now bear in mind that by doing this we're creating a global event that we're picking up which is going to set editing back to false. That's going to be true for every single column.
03:18
So if we click on one column and we somehow don't have that click outside functionality this is going to be picked up by every single column. Now, that's not too much of trouble. A little bit later we're going to go ahead and specifically target the columns that have been updated by their id so we can only refresh what we need to. Let's try this out though.
03:37
So I'm going to say column 2, get rid of the updated, hit enter and there we go. We have an updated column and everything looks like it's working. So we'll come back to this a little bit later when we are doing some more advanced stuff like unarchiving columns or cards that have been put into columns, but for now we can now edit the column title.

Episode summary

In this episode, we're focusing on how to let users edit the titles of columns in our app.

We kick things off by talking through why this feature is important and what exactly needs to change. Basically, the only thing users should be able to update right now is the column title, so that's what we'll focus on.

We jump into the code and start tweaking our component templates. We set up an edit form for column titles and make sure the form gets pre-filled with the current title when the user clicks to edit. This way, the user sees the correct title instantly and can start editing right away.

Next, we wire up the form so it updates the column when submitted, and include some basic validation to make sure users can’t save an empty title. We also talk through how we might handle validation errors if you want to take it further.

After successfully making title edits work, we go over how to emit and listen for events (using Alpine) so we can reset the editing state and close the form once an update is complete. We do mention that this is currently a global event, affecting all columns, but we'll refine it later to be more targeted.

By the end, you'll have a fully working feature that lets users quickly edit column titles, and a solid foundation for future improvements like unarchiving columns or more advanced updates!

Episode discussion

No comments, yet. Be the first!