Showing archived items: Build a Trello Clone With Livewire

00:07

So let's create our modal that lists both our cards and our columns that we've archived. We'll start out with the cards and then we'll just copy and paste everything over to do the same. OK, let's go ahead and make out a component with Livewire, and this is just going to be a standard component.

00:25

We are going to put this in Modals and let's call this CardArchive, and we're going to head over to that CardArchive component, and before we do anything, we're going to extend the modal component that we get through with that package.

00:42

OK, so we can pretty much steal everything from our EditCard component here, and let's just take this and put this into our CardArchive, and we'll say CardArchive, and then we can just get rid of this form. OK, so CardArchive, let's go ahead and trigger this from somewhere.

01:01

So we need some sort of dropdown here, like a global board dropdown, which allows us to do this. OK, so we're going to come over to anywhere that we've used this before. So let's go over to our column and let's look for our dropdown just here,

01:16

and let's get rid of this, pull it over, and we're going to put it over in our board show. So let's pull this up to the top where we have our header. To do this, again, let's just wrap this, add some flex styles. So we'll say flex item center and justify between,

01:34

and then we can just put that dropdown in there, and we just add some more items to it. So we'll have the same trigger, and this is going to be archived cards. While we're here, let's keep the copy the same.

01:48

So let's go over to our CardArchive, and we'll call this archived cards. OK, great. So let's get rid of this wire click, because that's not what we want to do. And we should now have a new menu that we can access our archived cards for.

02:01

So within here, let's go ahead and add a wire click to dispatch showing a modal. So that's an open modal, I think it was. And let's go ahead and give the component in here that we want to render. And that is going to be modals and our card archive.

02:21

OK, let's go over and see if this works. So let's trigger this. And it doesn't. I have a feeling that we can't do this from inside of this component.

02:31

So let's go ahead and change this over to an X on click. And let's say live wire dispatch. Just because we have this slot content directly inside of here, I don't think that's going to trigger properly.

02:44

So let's go over to archive cards. And yeah, there we go. Great. So now we can just start to over in our card archive,

02:52

list through all of the archived items and style them out and then copy this over to columns. So what do we want to grab here? Well, we want to access the board, which we don't have at the moment, which we can pull in. And we're going to say cards.

03:07

We'll create another archived specific scope for this. And then we will say get what we also want to do. Let's just add a reminder here. We want to order these by when they were archived.

03:21

Really important. So the most the most recently archived can be at the top. That's the whole reason we included that archived at column. OK, so let's go over and make sure that we actually have our board accessible within here.

03:34

So we're going to pass through as our arguments. The board and we'll just grab the board ID. There we go. And we should now have that available in our card archive.

03:49

So let's pull that in into here. And then just before we run this, let's go over and make sure that we apply this archived trait to our cards. We'll be refactoring this, like I said, to a trait.

04:02

So we don't need to keep these two separate things completely duplicated. Duplicated. OK, let's go over to our card model and let's add in a scope called archived. And that's going to be where not null archived at.

04:22

OK, let's try this out. So let's go over this. And yes, a board cards doesn't exist. Yeah, we didn't add that in.

04:30

Let's go over to our board model and let's add in. Our cards relationship, this is a bit different because as we know from our database, our cards don't have a board ID, but they do have a column. So what we can do is we can use a has many through relationship so we can say has many

04:48

through. And what does a board have many through? Well, it has many cards through columns and Laravel will work this out for us as long as we're using the correct column names and we should be good.

05:00

So let's go ahead and open this up. And yeah, archived at. OK, yeah. So what's happening here is because we're using a has many through relationship, the

05:10

archived at column for the column is included and the archived at for the card is also included. So this might be a little bit confusing at first, but we really need to do for each of these is just tie this down to the particular table that we're working with, or we could exclude columns.

05:28

It's probably a lot easier to just add them into here. Let's try this out again. And there we go. Great.

05:33

Now we don't see any cards at the moment because we're not outputting them, but that's pretty much all that we've got left to do. So in here, let's create out a wrapper. We're going to add a max height on this to just any value that kind of makes sense.

05:46

And we'll set an overflow y to scroll because we're working within a modal. That makes sense. We'll do a space y two on everything that we output in here. And let's go ahead and add in a four else to iterate through our cards.

05:59

So with a four else, we are going to have an empty state if we don't have any archived items. So if we don't have any archived items, let's just create out a paragraph in here that just says you have no archived cards.

06:14

And for the four else, we just want to iterate through each of the cards. So let's do that now. In here, we'll create out a container for each of these. For now, let's just output the card title and that should be enough to see them.

06:27

So let's open this up and yeah, let's try that again. There we go. Card four, card five, and ABC. OK, we can do a better job of styling these.

06:36

So let's do this quickly. We'll copy all of this functionality over to our columns and then we are done. OK, so we're going to set a border on each of these to say gray 200. Make this rounded large.

06:47

Give it some padding on the x and y axis. Flex items of center because we're going to have a button to put this back on top of the side. So let's set this round div.

07:00

Let's say justify between so they sit away from each other. And that should be just about it. So let's just check this out and see what we've got. And yeah, looks a lot better.

07:08

Let's go ahead and just style up the put back button and then we'll copy everything over. OK, so we'll make this text small and text gray 500. And to be honest, that should be just about it. OK, let's open up our archive cards.

07:20

And there we go. We can see all of these. If we had a bunch of these, we'd have a scrollable container. Because we set that max height and we'll probably see that a bit later.

07:29

OK, so now that we're done, feel free to implement everything that we've just done on your own, but just for columns. But otherwise, I'm going to run through adding another option in here to show our archived columns.

07:40

OK, let's close everything off and we'll start from the beginning. So we want to go ahead and make out a component in here called column archive. Let's create that out. And we want to open up our card archive and pretty much just copy everything over within

07:56

this template over to the column archive. So let's paste all that in. Let's change all this around now because we sort of know what it's going to be. So it'll be columns as column.

08:09

And then we'll have the column title in there and we'll have the put back link that will work and we'll just change the copy around there. And that should just about be it. Let's change the title and now we'll go over to our card archive class and we'll do exactly

08:26

the same thing here. So we'll take the board as well, come over to our column archive and just basically paste all this in. And of course, we want to change over the view.

08:40

So let's just grab that from there. And pop that in there. Okay, so we need to sort out this ordering stuff, which we will do, but let's go ahead and say this board columns a lot easier now because it's a direct relationship and we

08:55

should be good. So let's go ahead and trigger this directly from our board show. So we want to take this drop down button, do exactly the same thing for our archived columns, but we want to dispatch this with card or column archive and we want the board

09:12

ID in there in exactly the same way and we should be good. Let's just try this out and see what we get. So archive columns and yeah, we didn't implement the base component on our column archive. So let's do that now.

09:24

So let's say modal component and let's try this out. And yeah, we also forgot to include the archive functionality over on our model. Once this is a trait, it's going to be a lot easier, but let's open up our card model and grab our archived scope and we will go ahead and put that over on our column model.

09:47

Let's pop that down there. Not forgetting to change this over. So remember that we had an issue with the uniqueness of this archived app before. So let's change that to columns archived app.

09:57

Let's try this one more time. And yeah, just one more thing. We need to make sure that over in our column archive, we're actually passing this down as columns.

10:08

Okay, let's try this out. There we go. There are our archived columns. Perfect.

Sign up to access "Build a Trello Clone With Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion