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
23. Restoring archived items

Episodes

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

Transcript

00:00
Putting archived items back onto the board, whether that's cards or columns,
00:04
isn't as difficult as you might think. Really, all we need to do here, once we open up the cards list or the columns list and we hit put back, is set the archived at date to null, and then we need to just refresh depending on what we're putting back. So let's start with cards, and we will come over to our card archive, and we'll add a method in
00:28
here to put something back to the board. So let's call this unarchive card, and we'll accept the ID that we want to unarchive, because remember we've got a list of things. Okay, let's just die dump on that ID to make sure we're hooking this up properly, and let's go over to our card archive to hook this button up. So let's say wire click unarchive card,
00:52
and of course we want to pass through into here the card ID, and that doesn't need to be in single quotes, so let's say card ID. Okay, we should now be able to open this up and click put back, and yeah, we see the ID that we want to put back. So inside of card archive, what do we need to do? Well, we're going to find the card first of all, rather than authorize this directly in here,
01:13
because anyone could pass an ID into here that doesn't belong to them, we're instead going to pluck this out of the board under the cards and find that by the ID. That's effectively authorizing this because we know that we own the board, so we're just finding the card under that board. So let's find that first of all, and then we will go ahead and update this. So we'll update this to set
01:39
archived at back to null, which will effectively unarchive here, and this is going to work, but it won't update the board. Let's just try it out first of all. So if we go ahead and put card four back, sure enough that goes from the list because it's now unarchived, but you can't see it go back into the board until we refresh the page. Now I've got a feeling that was in an archived
02:02
column, so let's head over to the database and just unarchive everything in the database so we can start fresh. So let's go over to our columns section and let's unarchive these two as well manually. Let's head over and there we go. Okay, so we're going to archive column four and or card four. Let's go over to our archive cards and put it back. That works, but it doesn't refresh. Now we
02:26
already know that we've got an event over on our column which will allow us to refresh that column. That's exactly what we want to do again. So let's dispatch another event called column and then the id of the column that needs to be updated that that card belongs in and updated. So we just need to replace this out now and we should see everything refresh. So we want to grab from the card
02:52
the column id. Okay, let's try this out. So I'm going to go and archive card four and I'm going to go over to the card archive and put it back and there we go. You can see that that's been put back behind the scenes and you can close the modal off if you want to, but it helps to keep it open in case we need to unarchive many items. Let's do exactly the same thing for columns now. So I'm going to go
03:15
ahead and archive column three, four and abc and let's try this out. So we want to do exactly the same thing over on our column archive. We want a method in here to do the same thing. So I guess we could come over here and just copy this entire thing because it's going to be a very very similar flow. So let's grab this entire method, put this over in our column archive and of course this is
03:37
going to be unarchive column. It will work by the id but this time we need to access the columns within the board. We want to update that column so let's just rename these variables and what do we want to refresh when a column gets put back? Well we want to refresh the entire board. So we're going to call our or dispatch our board updated which will go ahead and just refresh the entire board.
04:02
Okay, now that we've done this we can come over to our column archive and we can hook this up to this button. So wire click and we want to unarchive a column. That column is going to be the column we are currently iterating through. Let's see what happens when we go over here and put these back and yeah sure enough they go straight back onto the board.

Episode summary

In this episode, we dive into restoring archived items—both cards and columns—back onto your project board. We start by showing you how unarchiving actually works under the hood: it's as simple as setting the archived_at field to null and triggering a refresh so the board updates instantly.

First, we build out the logic to unarchive cards, wiring up the "Put back" button so it works seamlessly. We make sure we’re safely finding the right card in the context of the board, not letting users unarchive things they shouldn’t have access to. Once it works, you’ll notice the card pops off the archive list, but you’ll need that board refresh so it appears in the right place in real time—so we trigger a column refresh using an event.

Next, we repeat the same process but for columns, using almost identical logic. Instead of just updating a column, this time we go ahead and refresh the whole board to make sure everything’s up to date. We also connect up the unarchive button for columns so the process feels natural and responsive.

By the end of this episode, you’ll have the ability to easily restore any archived cards or columns straight from the UI, with everything updating as you’d expect without any page reloads. Great for cleaning up mistakes or bringing things back into focus!

Episode discussion

No comments, yet. Be the first!