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
07. Showing columns
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
Our board is looking pretty good. Let's go ahead and now focus on actually creating some column records in the database and of course, showing them on our board. Okay.
00:10
So to start with, let's go and create our model in here and we will of course call this column. And let's head straight over to the create columns table migration and fill this in.
00:23
Once again, pretty straightforward. We know that this needs to be attached to a user and there's a very good reason why we are attaching this to a user rather than just attaching it to a board. First of all, it makes it really simple to see who owns what columns.
00:38
So our queries are a little bit simpler rather than having to define a has many through relationship in Laravel. But also when we do sort stuff with the package that we're going to be using a little bit later.
00:49
We want to constrain this to the particular user who's currently authenticated. So we'll see that a little bit later and we'll talk about why this is important. Really importantly, we need to relate this to a board. So let's do exactly the same thing here.
01:05
Okay. So now it's just the metadata about this board. We're just going to, or this column, we're just going to keep this really simple and once again, have a title.
01:13
And equally as important, we want in here an unsigned integer for the order that this should display at. So this is going to be like one, two, three. And of course that will relate to what position that is on the page.
01:28
Okay. Now we've done that. Let's go ahead and migrate. We'll create some manual records out in the database and
01:35
we'll see them on the board. Okay. Let's go ahead and relate this to user ID one board one. Let's say card one.
01:42
We're going to keep these sequentially named so we can actually see the order properly when we start to order cards and for the order, we're going to set these now, but when we start to create cards, this order is going to be filled in for us. Okay.
01:56
Let's go ahead and just pull these out. And of course these are columns, not cards. So let's do that. And let's duplicate this down and create column two.
02:06
And why don't we add one more in here as well? So column three. Okay. Let's adjust the order here and let's get them out on the page.
02:15
So let's go over to our board show component. And we want to pass down all of the columns for this board. So the columns here are going to of course, be directly from that board model. Let's open this up and find the relationship in here.
02:34
So let's go and create out a columns relationship again, super simple relationships here. This is just going to be a has many, and this has many columns. Remember we've named these two things in exactly the same way.
02:47
So just be careful that you're not putting in the live wire component instead of the model. Okay. Now we've done that.
02:54
We can go back over to board show and we can access the board and we can grab all of them columns. We'll be changing this later when we get to actually ordering stuff, because we need these in the correct order.
03:07
But for now we should have these on the page and we can just start to iterate over them properly. So over in our board index or board show, we can go up to our column section here and actually iterate over the columns that we now have now, because
03:24
we are iterating here and we're not working with dummy data. We want to give these a key. So whenever anything is reordered, we want this to be in exactly the same order. So let's set this key to the column ID, and we're going to want to pass the
03:38
column down into this so we can access the cards from that column. And of course the column title. Let's go over and yeah, sure enough, we've got three columns now and a bunch of fake cards.
03:51
Okay. So let's go over to our column component. Let's accept this column into here. And again, remember that the namespaces are the same.
04:00
We probably should have changed that, but let's pull in this manually just inside of here and call this column. And that's pretty much it. We've got this available now.
04:10
So if we head over to our column template, we can update the title in here to actually represent the column title. So that's just going to be column title. And there we go.
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!