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
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
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!