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
20. Archiving cards

Episodes

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

Transcript

00:00
In this section, we're going to work on archiving things and restoring things. The first thing that we want to do is add an archive that column to our cards table. And then we want to be able to click on this just to update that value. Once again, we're going to see issues with things not quite
00:14
refreshing the way we want to. So when we archive a card, we want to target the column that the card was in, and then go ahead and refresh stuff. Let's start with the migration just to get started.
00:26
So let's make a migration out. We're going to add a archive column to both the cards and columns table, but let's just start with the cards table. Okay.
00:35
So let's open up that add archive to cards table migration, and let's add in a timestamp or a date time. It doesn't really matter. Let's just say timestamp and we will say archived.
00:48
Act great. Now this can be nullable super important because we don't always have things archived and let's migrate. Great.
00:58
Okay. So we're going to come over to our card model and we'll set up our. Casts in here. And we want to cast the archived at column to a date time.
01:11
Okay, great. So we're just about done. What we now want to do is when we click on this button, we want to archive it. So let's say why a click and we will say archive card and let's take this
01:24
and add this to our edit card modal. So let's create this up here. Archive card. What do we want to do?
01:32
Very simple. We just want to take the card, update it. And we want to set the archived at column to the current date and time. Then of course we want to close the modal so we can do the same
01:46
thing and dispatch this modal. Now, even if we did archive the card right now, it's still not going to, it's still going to show in our list of cards because we don't have any way to stop the showing.
02:00
So what we're going to do is over in both our board, because remember we can archive columns as well, both our board and our columns. We're going to add in a scope. So we're going to reduce these down a little bit later to a single trait, just
02:14
to keep things a little bit tidier, but let's first of all go over to our column and add in a scope in here. So to do this, we're going to add a scope here called not archived, because what we want to do is fetch all of the cards within a column that are not
02:30
archived into here, we get in a builder. So let's go ahead and pull in our query here. And we're just going to say query where not null archived at, and we can use this scope now anywhere we need to.
02:47
And I think, yeah, this is going to be where null isn't it? Because we want to see where things are not archived. Okay. So let's go ahead and archive a card, see if that's all working, and
02:56
then we can go ahead and remove them. Let's archive card five. That worked, but when we refresh, of course we still see it. Over in the database, we will see that filled.
03:08
So it is archived, but we can still see that on the page. So that's where our scope comes in. So over in our column where we are grabbing our cards, let's go over to live wire column down here, we just want to say not archived and that should
03:25
get rid of any archived cards. And yeah, we seem to have put this in the wrong place. So we want this to relate to cards. So let's go over to our column and move this over.
03:34
Like I said, we're going to be building out a trait later. So it's a little bit easier for us to see everything. Let's open up our card here, card model, and let's add this scope into here. Okay.
03:46
That should work now. And there we go. Card has disappeared. Now that's all well and good, but I've just refreshed the page.
03:53
If I want to archive card four, you can see that it works, but I have to refresh the page to see it now disappear. Thanks to that not archived scope. So once again, what we're going to do over when we actually archive this, we're
04:10
going to do a very similar thing to this, but of course we want this to apply to the column because the column needs to refresh to show the fact that there's one less card, so let's do this and say column and the column ID that's been updated. So let's say this card column ID.
04:29
And also let's just make sure we actually have that relationship in here, which we don't, so let's pull that in and that's going to be column and this belong to a column that we now can access the column via the card and then say that that column has been updated.
04:45
Now we need to do is head over to our column and we need to add in our listeners like we did for our card. So again, very simple. We are going to take out an array of listeners.
04:57
We're going to say column, something updated, and we're just going to refresh this component. So in here we just need to say column ID. Okay.
05:09
Let's try this out. So let's add a new card in here and let's go ahead and archive it. And yeah, there we go. Our column gets updated and because our card is archived, it disappears.

Episode summary

In this episode, we're tackling archiving for cards (and eventually columns) in our board app. First, we add an archived_at column to our cards table, so each card can track if and when it got archived. We use a migration to set this up, allowing the value to be nullable so not every card is archived right away.

Next, we update the card model to handle casting archived_at as a datetime, making it easy to work with. We then add a button in the card UI so users can archive a card. When archived, the card's archived_at field gets set to the current timestamp, and the modal closes.

At this point, even though cards are archived in the database, they still show up on the board. This is because we need a way to fetch only the non-archived cards. We solve this by adding a notArchived scope to the Eloquent model, so fetching cards ignores anything that's archived.

There's a bit of back and forth as we decide where this scope should go (card or column model), but ultimately it gets sorted out. Once in place, archived cards no longer appear on the board after a refresh.

But users want instant feedback! So we also update our Livewire components to immediately update the UI when a card is archived—no manual refresh needed. Events are emitted and listened for, ensuring the right columns update as soon as something is archived.

By the end of the episode, archiving a card hides it from view smoothly, both in the backend and on the page, making the feature feel polished and responsive.

Episode discussion

No comments, yet. Be the first!