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
12. Handling moved cards
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
So by the end of this episode, we will be able to sort cards
00:03
within their own columns, but we will also be able to update any cards when they move columns. So just two things to do here. Now let's again, talk about the structure of this data.
00:14
We have got a nested array here. So when I move this, we've just got a plain old array. Now, in order to work a little bit more effectively with this, we want to collect these up and create a recursive collection.
00:29
Now to do that, we're going to go ahead and pull in the Laravel collection macros package, which adds a bunch of helpful macros to Laravel collections. Let's go ahead and pull this in and then we'll go ahead and swap this items out for a recursive array.
00:44
Or a recursive collection. Okay. Once that's pulled in, let's go ahead and collect up these items. And let's go ahead and use that new recursive functionality on there.
00:58
And let's just die dump on that just to see what we get. Okay. Let's go ahead and move one of these. And as you can see, we've now got a collection with all of them items in, but
01:07
then the items themselves are also a collection now. So it's a little bit more natural when you're working in Laravel to work with a collection. So this is going to be much easier.
01:17
Okay. Let's think about what we need to do in here before we start writing any code. We want to go over each of the columns. Remember each of these items here, these three things are columns.
01:29
We want to go over the columns and do a couple of things. So go over columns or iterate over columns. The first thing that we want to do is get the order of the cards inside that column so we can update them.
01:44
What we also want to do is find all cards that have switched columns and update them. So just two things to do here, going over columns, isn't too much trouble because we now have a Laravel collection here. So we can just say each and we'll just create a closure in here so we
02:02
can start to do these two things. Let's work on the easiest one first, which is updating the order of the cards inside of that column. And I'm actually going to do that now.
02:12
Inside of that column. And I'm actually going to do this last after we've updated and checked if things have switched over. Okay.
02:20
So let's do exactly what we did before. Remember the reason that we're iterating now is because we're working with multiple columns where potentially cards have moved. We want to do exactly the same thing as we've done here.
02:31
So let's go ahead and grab out the order here, but this is a little bit different. We need to get the actual column itself, which we get in this iteration. And we want to grab the items out of that column. So let's say column, get items.
02:47
And again, we'll pluck the value out because that's the ID that we can update and we'll set the new order. Okay. Let's die dump on this order just so we can see this working.
02:56
And while we're testing this, we're just going to do it within one column. So I'm going to put one up to the top, which will mean one, three, and two. And yeah, sure enough, we've now got the correct column. Okay.
03:07
So we're going to go ahead and update these now. And again, we'll reference the card model. We'll set a new order. We'll do everything that we did before.
03:15
So we'll set an order. We'll choose the starting order, choose the column that needs to be referenced with the order that we've passed in. And again, we'll bring in our builder in here so we can
03:26
scope this to the current user. So we'll just say where user ID is the current auth ID. We could also say where belongs to. So we could say where belongs to, and if you had the relationship set up on this,
03:41
you could just say auth and user, but we'll just set this to where user ID for now. Okay. So now that we've done this, we should be able to reorder the cards within the same column.
03:52
Let's move this one to the top and give the page a refresh. And there we go. So now we can successfully sort cards in an individual column. The only problem is when we move one of these, it's just not going to work
04:04
because we're not updating anything else about when this is moved. So let's now find all cards that have switched columns and update them. So again, we're going to pull in our card model here, and we're going to say where the user ID matches the currently authenticated users ID, or again, we
04:22
could use where belongs to, if you preferred that, what we want to do is find all of the cards in that list. So we just want to pluck them out of the database like this. Let's go ahead and just assign this to a variable just so we can log it out.
04:40
So let's use our logger here to log out the cards inside of each of these columns. And let's go over to our Laravel log and just clear this out. Okay. So if we go over now and I'm going to move card one to column two, let's jump
04:57
over to our log and see what we've got. So we've got card two, card three, and card one. Now, what we want to do now that card one has left column one, we want to only find the cards where the column doesn't match.
05:12
So let's say where the column ID doesn't equal the column ID that we're currently working with. Now the column ID is stored within here. So we can just say column get, remember we're working with the collection and value.
05:26
Okay. Let's go ahead and log this out again and see what we get this time. So let's move card one here and let's head over to our log and yeah, sure enough, now we've only got card one.
05:37
So we'll ignore this for now. Card one is the one that needs to be updated now, because we're checking where the column doesn't match the current column that we're iterating through. So this is the kind of odd one out.
05:49
So what we can do with this is we can go through each of these, because at some point we might have multiple ones updated and we can either pass a closure in here. We could use a higher order function to just update each of these cards that has moved.
06:06
So let's update the column ID back to the column value. And actually, if we just pull this up to a variable here, that'd be a little bit more convenient to reference both of these, we're going to update the column ID. So basically when a card moves, where the column doesn't equal the column that we're
06:24
currently iterating through, we're going to go ahead and update each of them IDs. Okay. Let's try this out and see what we get. And I'm going to get rid of this as well, because we don't need to dump that anymore.
06:34
Okay. I'm going to move card one to here and yeah, we've got a mass assignment exception on our card. So that's probably the only thing left to do.
06:43
Let's just go ahead and set guarded here to either an empty array or just the ID if you want to protect that. And let's try again. Okay.
06:51
I'm going to move that, give it a refresh. There we go. So we successfully got the card that didn't quite match into the column. We were iterating through from the sortable JS data that got passed through to us.
07:04
And because that was the odd one out, we updated it with the new column that it had moved to. So now we should just be able to move these around anywhere we want. And we can sort them within columns as well, because remember that same
07:16
functionality handles sorting these within columns. So there we go. We have successfully given the ability to not only sort cards, but also move them between columns as well.
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!