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
08. Showing cards in columns
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
Let's do exactly the same thing that we just did for our columns for each of the cards within the column. And then in the next few episodes, we're going to look at the
00:08
ability to order everything. Okay. So let's of course, start out with a model here. So let's make out a card model.
00:17
Again, we're going to have the same issue because we've named our live wire component card, but not too much trouble. Okay. Let's open up the create cards table migration and let's think
00:28
about what we need to add. Now, once again, we're going to have a foreign ID in here, which attaches directly to the user ID. So let's add that in first.
00:37
And we'll do the same thing for the column that this card belongs to. Next up is again, the metadata. So for us, we just want a title in here and we're going to go ahead and add in some text in here, which is going to be the notes
00:54
for this particular card. So you can add anything else in here that you want and just make sure to make anything nullable that you don't want filled by default. Okay.
01:03
So again, each of our cards is ordered. So let's pull in an unsigned integer for the order and we are just about done. So let's migrate what we've got here. Let's head straight over to the column model and let's have the relationship
01:19
for each of the cards inside of here. Okay. So let's say that this has many, and of course we're dealing with a card here, again, the model, and we should now be able to iterate through each of our cards.
01:32
So over in the database, let's add some fake cards. We're just going to add these all to the first column, and then we'll look at moving them across columns and ordering them and all that good stuff. So the column we'll just set to the first column for the title, let's say
01:46
card one, and we'll leave the notes as a null, let's fill in these. And let's just add in two more cards. So card two, card three, and let's update the order of these for later. Okay.
02:04
Let's just go ahead and output all of the cards within each of the columns now. Okay. So again, we are going to need to come over to our column component. And in here, we want to pass the cards down directly from that column.
02:19
Let's say this column cards, and then over in our column, we can just switch this out for cards. And in here, remember, we're going to give our wire key. So everything gets hydrated properly, and that's going to be the card ID.
02:35
And once again, we're going to pass the card down into this component. So if we open up this component, let's make sure we pull in the card in here and call that card. And then inside of the card itself, we can now output the actual card title.
02:53
So just nesting everything down. Okay. Let's go over and there we go. We've now got cards inside of our column.
03:01
Obviously, if we change these over to a different column in the database, that's going to be reflected, but really we want to focus on ordering this stuff now. And to start with, we're going to look at ordering our columns themselves. I'm just going to switch this back to column one and let's work on some ordering.
31 episodes•2 hrs 27 mins•1 year 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!