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