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
21. Archiving columns

Episodes

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

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.

Episode summary

In this episode, we're adding the ability to archive whole columns on our board, similar to how we previously archived cards. We start by making some changes in the database: we create a migration to add an archived_at timestamp column to our columns table, just like we did before for cards.

Then we update our Column model to support archiving, by copying over the necessary casts and scopes from the Card model. This allows us to filter out archived columns when displaying the list.

Next, we focus on the UI. We create a new DropdownButton component (instead of a link) for our dropdown menu, so users can click to archive a column. We hook this button up using Livewire by adding a method to handle the archive action. When you click it, the column gets archived by setting its archived_at value.

After someone archives a column, we want the board to update and hide that column. To keep things simple for now, we trigger a full board refresh by dispatching a board updated event and listening for that in the parent component, even though it's not the most efficient solution.

By the end, you can click a button in the column's dropdown to archive it, and it will immediately disappear from the board view!

Episode discussion

No comments, yet. Be the first!