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
09. Sortable Eloquent models
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
The eloquent sourceful package is going to allow us to do a couple of things. First of all, actually order our columns and our cards in the order that we gave these in the database, which might seem pretty straightforward because we can already do that with Laravel, but where this package really
00:15
helps is it will allow us to pass in a list of IDs, and we're going to get that list of IDs when we start to drag and drop any of our columns, it will give us the order of IDs that these sit in, same with our cards as well. What we can do with that is then we can pass these IDs back to eloquent
00:35
sortable, and that will adjust for us in the database, the order that these should be in, so it's incredibly powerful, works really, really nicely and works really nicely with drag and drop sorting. Okay, let's go ahead and get this installed.
00:48
And then as we go through to add in our drag and drop functionality, we'll see everything start to update. So let's pull in eloquent sortable and we can optionally publish the config file. We'll do that anyway, but we're going to be configuring each of
01:02
our models on a case by case basis. So what we can do is inside of any of our models, we can define this style of config, for example, sort when creating, which we want to do, we can also set the order column name, which is an order column by default.
01:18
So let's go and set up the rest of this, and then we'll add some of this config that we can see here. So the first thing that we need to do is pull in the sortable trait within the models that need to be sortable.
01:29
So we know that we've got our column model, which needs to implement the sortable interface. And we also need to pull in this sortable trait as well. So let's go ahead and use that sortable trait just up there, pull
01:42
the namespace in and we're good. This now has sortable functionality. So we're going to define the config here as well. So let's just pull this in at the top.
01:50
And we know that our column name is order. We changed this around and we're going to explicitly set sort when creating to true, because when we create new columns and cards, we want the order to be sorted and updated.
02:02
Okay. We're going to do exactly the same thing for our cards now. And then we will actually be able to output them in the right order. So let's go over to our card model.
02:11
Once again, we're going to implement the sortable interface. We're going to use the sortable trait, and we're going to go ahead and define that config with order as the column name. So let's change around the order of some of the things that we have in here.
02:25
So we've got one, two, and three. If we head over to the database, let's just reverse this. So let's say one, two, and three, and let's just check this out. You can see it just stays exactly the same.
02:35
That's kind of obvious. What we can do is come over to our board index or board show, and we can grab the columns that we want. Use the ordered functionality that comes with this package.
02:49
And that will order it by the column that we've set in the database. So we don't have to do that manually. Okay. So for our columns, they're already in the right order, but if we try and do
02:57
this same thing for our cards within our columns, so if we just open up our column live by a component, we'll do exactly the same thing. So let's say ordered and get, and let's try this out. There we go.
03:13
Three, two, and one. So everything is nicely ordered now. And after we've completed our drag and drop functionality, we'll see how we can put these orders back into the database using this package.
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!