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