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
21. Archiving columns
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
So remember from a little while back, we created this little menu here where we had some drop down content. Well, what we're going to do here is have the ability to click to archive an entire column. Okay.
00:11
So there's a few things that we need to do here. The first thing is we need to make columns archivable with a column. So let's go and create this out in the database. Let's make a migration and we'll add archive to the columns table.
00:26
Like I said, very soon, we're going to move this over to a trait so we don't have to keep track of these same scopes and things for both of the models. Okay. So let's open up the add archive to columns table and do exactly the same thing as we did
00:39
before by creating out a timestamp with archived at, and of course, making this nullable. When we've migrated this, let's head straight over to the model. So we can even open up the card model and we'll grab the casts from here. We'll put them in the columns model, and then we want the same scope as well.
01:03
So if we head over to our card, let's grab the same scope here and apply that to the column as well. So now if we archive a column, we want to update the board show to not include that. So down here where we're outputting our columns, let's say ordered and not archived. And then as soon as we archive this and appropriately refresh everything, we shouldn't see it.
01:30
Okay. Everything looks good. Let's implement this button here to click and actually archive a column. Now over on the column itself, let's go down to where we have that drop down content.
01:42
And in here, if we have a look at what Breeze gives us, it gives us a drop down link, but we don't need a link. We need a button. So we're going to go and create our new component in here called drop down button. And we'll put this in here and basically just switch this over to a button with the same styles and the content inside of it being the title.
02:08
So now we can pull in X drop down button and we can say archive, and then we can attach a click handler to this to archive it. Okay. When I click on this, there we go. We've got our button.
02:20
Let's go ahead and hook it up. Okay. Let's go ahead and add a wire click to this to archive a column. And we'll go ahead and add this method over in our column live wire class.
02:32
So let's go ahead and say archive column, and let's just die down just to make sure that this is hooked up. So let's try and archive this and yeah, works nicely. So we just want to do the same thing. We just want to take the column that we have here and we want to go ahead and update it.
02:48
We want to set archived at to the current day and time. We don't need to close any modals because we're doing this directly within here, but this should now work. Let's archive column to give the page a refresh and yeah, sure enough is now gone. Now, once again, things aren't getting updated.
03:07
What is the most root parent to the columns? Well, it's the overall board. So although it's not ideal, unfortunately we just need to refresh the entire board in order to get back all of the columns minus the ones that have been archived. So we're going to go ahead and dispatch in here.
03:24
We don't need to specify this by ID. We're just going to say board updated. Now we can head over to board show and we can add a listener in here just to refresh the whole thing. Again, not the most ideal thing, but really without getting into any too many complex hydration issues is probably the best idea.
03:44
So let's add in our listeners here and let's say board updated. And of course, once again, we're just going to refresh everything. Let's go over and try this out by archiving another one. And there we go.
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!