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
29. Scoping orderable updates
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
One of the things you might have noticed about when you're creating cards within columns and when you're creating columns within boards is the order is always sequential even across different columns or across different boards. Now we can fix this very easily with the eloquent
00:17
sortable package. You can see here that we've got this column where we've got an order of one, two, three, and then we've got this column here where we've got an order of four, five, six, seven. Now this doesn't really matter because the order is always going to be correct, but you'll probably want one, two, three, and then one, two, three, four instead of this going across
00:38
different columns or boards. Now to solve this the first thing that we're going to do is get rid of all cards from all of our boards and head over and just give this a refresh. We could also potentially just get rid of some of the columns that we created as well just so we've got a nice fresh board to work with. Okay so to fix this up we're going to go over to our column model. We
01:01
will do this both on the column and on the card and we're going to add in a scoping for our sortable stuff in here. So let's go down here and create out a build sort query method and what this will allow us to do is modify the query and attach a where so it will always scope to the current board in the case of a column and then the card will scope that in the context of a column.
01:28
So let's go ahead and say query where board id and we'll match that to the board id that we're currently working with. So now whenever we use that eloquent sortable package it will use this to scope it to the board that we're currently working on and it will solve the issue that we have before. So let's do exactly the same thing for our cards. We'll create a bunch of columns and
01:53
a bunch of cards and sort them and we'll see this change. So let's go over to our card model and let's do exactly the same thing in here but of course this time we want this to match up to the column id. So let's do that in here and we should be good. Okay let's start with cards. So I'm going to go ahead and create one card here, two and three and let's do one more as well. Okay so if
02:21
we head over to the database sure enough over in our cards we've got one, two, three and four. Now let's say we move three and four over to a separate column that should now be one and two and this should be one and two as well. So let's move three over to column two and four over to column two and now behind the scenes what that will have done is ordered them but scoped it to
02:44
the current column that it is in. So now we've got one, two and one, two and this will just carry on for as many cards and columns that we create. So we can do the same thing for the columns as well. So at the moment if we just look at our columns we know that they're ordered as one, two and three but if we create a new board out. So let's go ahead and well just go over to our articles board
03:06
and create another column one, two and three. We don't need to sort them but we will already see in the database that these have now been scoped down to that particular board. So we didn't really need to do this but when we're looking at this at a database level it helps to have these localized to either the board or the column relationship that we're working with.
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!