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
11. Moving cards between columns

Episodes

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

Transcript

00:00
To sort cards within our columns, we could take the same approach as we took with the column functionality.
00:07
We could define these as sortable when we iterate through them and then attach the handler and ID to each one. Now, unfortunately, it's not quite going to work like this because we also want these cards to be movable between columns. What we're going to need to do is set up a sortable group for these particular items so we can move them across columns and then we're going to need to do a little bit more work to update the cards,
00:34
but also sort the cards as well. OK, let's take a look at how this works by defining out a group, first of all. So let's say wire sortable and group and let's give a new method. So this is going to be a completely new method within our live wire component, which handles when a card is moved.
00:52
I'm just going to call this moved for now, but I might think of a better name later. OK, so let's go over to our board show and we're going to create out a new moved method in here. Remember that moving cards between columns is going to need different functionality because we're going to need to update the ID of the column that the card is in. OK, so let's head over to our column and let's see what we need to do around each of these cards.
01:20
To start with, let's go ahead and just pull all of this down so we can start to add these in. And we want to use wire sortable group and we want the group item group to be a column ID. So if we think of it this way, each of our columns is a group and we want to be able to move these items inside of here between each of the groups. Now, what we need to do is a similar thing to what we did with our columns and wrap this in a container which has the handler directly on this div.
01:54
So once again, we're going to set the wire key in here so live wire can update everything. And this is just going to be the card ID. And let's just make sure we specify that properly that we missed out before that hydration error. OK, so inside each of these now we're going to have wire sortable and the group.
02:12
But the item now is going to be the card ID. So basically, this means that we can move the item here with an ID of one to whatever the card is inside of the sortable group. This is the group. This is the group item.
02:28
And as we saw over on board show, when something has moved between groups, we invoke this move method. OK, so we're going to go over to our board show and let's bring in the array of items that we're going to get in here. And let's just die dump on them items and see what happens. OK, so I'm going to grab one of these.
02:48
And as you can see at the moment, I can't actually grab one of the cards. The reason for this is that over in our card, we need to specifically set a handler here. So let's say wire sortable group and handle. And that will mean that this thing can now be moved between each ones.
03:07
And it won't try and move the entire group when we are using this handler. OK, let's go back over and try this out. And now, as you can see, I can start to move these. I can still move the columns, but I can also move these cards.
03:18
And now because we've set this up as a group, you can see that it can be dropped into another column. OK, let's go ahead and just sort the cards within this column, first of all, and then we'll look at moving them between columns. So I'm going to move this one up to the top. And as you can see, that method is called.
03:35
But this is now the handle or the move method. And you can see that we've got the group here and then inside we've got each of these items. So a nice structure. We just can need to manipulate this a little bit to find out where things need to fit in.
03:50
So as you can see, we've got one, three and two. That makes sense. That's been ordered properly. One moving to the top means one, three and two, which we saw there.
04:00
Now, if I move card one, which is an ID of one over to column two, which is an ID of two. Let's take a look. So we've got now only two cards in here. See both of them.
04:11
Two now has an additional item and that's one. Great. So everything is working and we're getting the data we need to actually sort this. Now all that's left to do is implement the moved method.

Episode summary

In this episode, we take our Trello-style board up a notch by adding the ability to move cards not just within a column, but also between columns. First, we talk through the limitations of simply making the cards within a column sortable—because we want to drag them across columns, not just rearrange them locally.

To tackle this, we switch over to using sortable groups. This lets us treat each column as a group and allows our cards to be moved between them. We go step by step, setting up the wire:sortable-group in our template and making sure each card and column has the right handlers and IDs in place.

There’s a bit of back-and-forth as we realize we need to specifically assign handlers to cards to allow them to be draggable without accidentally moving entire columns. Once that’s sorted, we try things out and see that we can now drag cards both within a column for reordering, and between columns for bigger moves. We inspect the resulting data to verify everything is in order.

By the end of the video, the groundwork for moving cards anywhere on our board is done, and all that's left is implementing the backend method to finish up the logic.

Episode discussion

No comments, yet. Be the first!