In this lesson, we'll learn how we can create a paginated movie table for our administrators. We'll list the movies and some of their relationship data, like the number of crew and cast members associated with the movie.
Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.
Adocasts
Burlington, KY
🕰️ Chapters
00:00 - Creating Our Admin Movies Route
01:40 - Querying Our Paginated Movie List
03:40 - Creating Our Admin Movie Index Page
05:00 - Inspecting Our Initial Table
05:38 - Displaying Our Cast & Crew Counts
06:26 - Extracting A Pagination Component
09:58 - Adding Our Pagination Component To Our Table
10:24 - Styling Our Table
📃 Resources
Flowbite Table Styling
[MUSIC]
Next, let's add in a paginated list of our movies for
our admin so that they're able to manage them,
put actions within that table.
Let's hide that pack away.
Within our routes file, let's scroll down to
where we have our admin section at.
I believe that's down near the bottom.
Yep, right here. Let's add in router.get/movies,
and let's add in an admin movies controller.
We don't have that created quite yet,
but we'll create that here in a second with
an index method as movies.index.
Remember that we have this route group
prefixed with the name of admin.
So this will really be admin.movies.index.
So it won't collide with our existing movies.index.
I'm going to jump into my terminal now,
stop our server, clear that out.
Node.asemakecontroller admin/movies,
and we'll do hyphen R to create that as a resource.
Cool. So this created our controller at
appcontrollers admin movies controller.ts.
Let's go and clear that out and boot our server back up.
So npm run dev.
Let's hide that back away.
Now you get a sense of why we're prefixing
these admin controllers with the word admin,
because we already have a movies controller imported right here.
We can go and give that a copy as a starting point.
Paste it in here, prefix the name with admin,
jump down to the actual import path,
and prefix that with admin/ as well.
Again, by nesting our controllers inside of subfolders,
we're able to give them a purpose and
also keep the names simplified as well.
Cool. So we can give that a save.
Let's scroll all the way back down because that's
where we'll be needing to pick back up here within this file.
Let's go and jump into our new movies controller or our admin.
Again, by creating this as a resource,
we're stubbed with the resourceful methods that we get.
So index, create, store, show, edit, update, and destroy.
You may have some ESLint warnings and errors for unused properties,
but that's okay. We'll take care of that as we fill this out.
All right. So let's start by getting our movies.
So const movies equals await.
We can import our movie model.query.
For the admin section, we're going to want to get back all of our movies.
You could add filtering in using the same approach that we
did with our watch list and movies pages.
Since we've already covered how you can go about that,
we're going to skip that here for this page.
So let's just order this by the updated at and descending order.
So we'll get them by most recently updated to the oldest updated.
Let's add paginate to the end of that.
This is where we'll want to grab the page and the per page counts.
So we can grab our request.
While we're in here, we'll also grab our view out of our HTTP context.
We can do const page equals request input page and default that to one.
If it's not provided, we'll provide that in there.
Per page, maybe we'll do 30.
Then we need to define our base URL.
So movies.baseURL, and we can import our router to make URL,
or our admin movies index page.
Since we're not worrying about filtering for this particular page,
we're not going to have additional query strings to worry about
depending onto these generated pagination URLs.
But if you did, as we previously covered,
you have movies.queryString at your disposal that you can provide
a key value record pair into to add query strings into your generated URLs.
So let's go ahead and return view.renderPages/.
Rather than putting this inside of our movies directory,
we're going to keep this scoped inside of our admin directory,
and we'll create another movies index page inside of there,
and provide our movies in.
If we wanted to list out some additional details,
we can go ahead and preload that onto our query as well.
So we could say preload the director and preload the writer.
Of course, there's aggregates and counts that we could do as well.
So we could do with count,
and we could say count our cast members and count crew members as well.
Let's also go ahead and preload our status into,
I forgot about that relationship status, and there we go.
So now we should have everything preloaded onto our movies that we'll need.
Let's go ahead and scroll on down and create our page.
So we'll scroll down to,
let's see, our pages admin section.
Right-click that folder, new file,
create a new movies directory with an index.edge page inside of it.
We have our app, we want to apply our layout.adminlayout and end that.
Now, we'll apply an h1 in here that says movies,
and then let's just do a simple table.
So we'll do a table with a T head and a table row with a table heading,
showing the movie title,
then maybe another one with the status,
then maybe writer director,
and maybe counts,
and then we'll do an empty one for actions.
For our T body,
go ahead and scroll down a little bit.
We're going to want to loop over each of our movies and apply them in as a row.
So we'll do @each movie in movies,
end our each, add in our table row,
table data, movie title,
TD, movie status, name,
another TD where we can do our movie.writer.fullname/moviedirector.fullname.
We'll have a TD for our counts and a TD for our actions.
So let's pause there for now and let's jump into
our admin layout and add an additional link for this new page.
So we have an href equals routes,
admin, movies, index, and we'll just call that movies.
Go ahead and close that out,
jump back into our browser and let's see what we get.
So let's jump into our new movies page.
It's not pretty, but it is there and it is working.
You can see our movie title,
the movie status, the writer, and director,
and it will take care of our counts and action here momentarily.
But first, I think we're going to need to make the text small,
maybe even extra small just to fit within our table here.
So let's jump up to our table class,
text extra small to try and squeeze everything in here real quick.
It'd probably also be good to go ahead and break these down on
separate lines and annotate which is which here.
So let's wrap this one here in a div and do writer,
colon, and then paste that back in.
Then let's do the same thing here,
director, colon, and paste their name back in there.
Now, let's take care of our counts.
So we'll do something similar for this.
So we'll split them up one per line.
We'll have our cast members as movie.
For this, we'll want to reach inside of the movies extras object as
counts aggregates and the like are not direct model properties.
So they're going to be plopped inside of our extras object.
I believe this should be called cast members_count.
Give that a copy because all that we need to do is switch cast to
crew and we'll have our crew members count there as well.
Give that a save and let's see if we got that right.
So let's jump back into our browser.
Okay. So now we have I'm your boogeyman,
post-production, writer, director,
cast members of four,
crew members of three.
It looks like everything there is working A-okay for our movies here so far.
So we'll worry about adding the actions in and subsequent lessons.
For now though, we need to get the pagination rigged up.
Now, on our movies page,
we've already added this in via our buttons right down here.
So we can replicate this into a component so that we can reuse it on our movies page,
as well as our watch list page,
and now our admin movies page as well.
So let's hide this back away and we want to jump into
either our movies or watch list index page.
We have it defined in both of them.
So we can scroll down to where we have,
let's see our pagination looks to start right here.
So we'll place our cursor right there.
I'm just going to go ahead and collapse this down and
jump down and select the end div there.
We can cut this out,
scroll up to our components.
Let's right-click that, new file, pagination,
and let's create an index.edge file within there.
Paste that in and there we go.
So everything within here should mostly rely on
our pagination methods and properties.
I'm going to just scroll through here real quick just to
verify that that is actually the case.
We have a pagination array right there that we'll want to
make sure that we're instantiating inside of this component as well.
But apart from that, everything does seem to be coming directly from the paginator.
Let's jump back into our pages movies and
see if we can find where that pagination is coming from.
Doesn't look like it's coming from our edge file.
So let's jump up into our movies controller
because it must be coming from here then.
Scroll down and sure enough, there is our pagination.
This can easily be refactored and moved down into our pagination components.
So I'm going to go ahead and get rid of that,
and we can remove that out of the page state there too.
Hit "Command P" and jump back into our new pagination components.
Scroll up to the top, give ourselves a couple of lines and we can paste that in.
It's not going to be formatted quite yet,
but what we're going to want to do is at let,
we can create the range min,
same as we were within our controller, just like so.
We want to do the exact same thing for our range max.
So at let, there we go,
as well as our pagination.
So at let there too.
What we want to do next is normalize all of our movies properties,
which is our movies paginator,
into a nonspecific name.
So I think the most appropriate name for that is probably going to be paginator,
as it controls all of our pagination logic by providing us our properties and methods.
So we'll go ahead and do a replace all there,
and everything should still be a okay with how we had it.
So we'll scroll through here,
make sure there's no red squigglies, looks okay.
Let's go and give this a save,
jump back into our movies page at exclamation point,
pagination, since this will be self-closing,
and provide in our paginator is our movies.
Let's give that a save, jump back into our browser,
and let's jump into our movies page to test it out.
Looks like I got a missing token.
Yeah, I never ended the let there for that one.
So let's go ahead and take care of that,
jump to our pagination component,
and there we go.
That looks better. Give that a save,
jump back into our browser,
give this a refresh once more.
Let's go and scroll on down and make sure everything's working here.
So page two, three, four, next goes to two,
and last goes to 28, first goes to one.
Awesome. So everything there does seem to be working a-okay.
Next, what we want to do is apply
the exact same paginator component into our watchlist page.
So let's hide our browser back away,
jump on down to our watchlist page,
which seems to be right here
off the root of our pages directory.
Scroll down to where we should have our pagination starting,
go ahead and hit the caret to collapse that down,
and we just need to get rid of everything there.
And this should be the exact same.
So at exclamation point, pagination, paginator,
and I believe we called it movies here as well.
Then we'll jump into our watchlist controller,
and we can get rid of the range min,
range max, and pagination there,
and get rid of it out of the page state there too.
All right, give that a save.
Let's make sure everything's working there before we move on.
Jump into our watchlist page, scroll on down.
We only have one page,
but everything should be working very okay
since it's using the exact same component.
Awesome. Last thing to do is apply that
into our admin movies page.
So let's go ahead and collapse that back down.
We've already done all of the work needed
for this inside of our controller.
So we can scroll on down into our admin movies index page,
go down outside of our table,
and do @ exclamation point pagination.
Hide in our paginator as our movies.
Give that a save, jump back into our browser,
and let's see if everything worked.
So scroll on down, and there we go.
So if we jump over to two,
looks like that's working A-okay.
And if we jump down to the last page,
looks like that's working A-okay too.
Awesome. So before we round out this lesson,
let's go ahead and clean up our table here a little bit,
because it's really hard to look at.
So let's go ahead and jump into,
I have flow by open here, but you can use whatever.
All we're looking for here is a TailwindCSS table component.
You can even style this relatively easily yourself.
Just going to go ahead and give the whole thing here a copy,
close that out, hide our browser.
And I'm going to scroll up above our existing table
and give it a paste on it.
And the first thing you might notice
is that they use an indent of four
while I use an indent of two.
If you ever have that use case,
go ahead and just select everything
that needs re-indenting, hit command shift P,
and type in re-indent.
And you can either do lines as a whole,
which will do the whole file or selected lines.
Awesome. Give that one indent there
so it's not right off the edge of our page.
And then another thing to fix is we are using slate
rather than gray.
So we'll just give gray there a highlight
and do a finder replace all gray with slate instead
and replace all of those.
All right, cool.
So now this table should match what we're doing.
So what we need to do now
is give the wrapper elements here a copy,
scroll down to our table right here,
paste their wrapper elements in
and get rid of our starting elements there.
And it looks like we'll want to indent everything
of ours one time as well
and add in an extra div underneath our table
to match their structure.
Okay, scroll on up.
Looks like they had some specific TH classes.
So we'll just give those classes,
oh, they had a scope on it too.
We can go ahead and give that whole block there a copy.
Go down to our THs, option command down arrow
to do some multi cursors and paste that in.
All right, let's scroll on up
and take care of our T body next.
We can simplify theirs by taking theirs
down to just a single row.
Looks like they had three total, so we'll get rid of two.
Scroll on up, give that TR class there a copy.
And then it looks like we're not gonna worry
about the specific TH right there,
but the rest of the TDs have a PX6, PY4 on it.
So we can add that in relatively easily.
So on our TR here, we'll give their class,
put that a copy and then class PX6, PY4,
give that a copy and we can paste it
into each of our TDs here, just like so.
All right, we should be done with their table.
So we can go ahead and nuke it out of our file,
just like so.
And let's give it a save and see how it looks.
Nope, it's picking up dark mode
and the padding is quite a bit
for what they were using here as well.
So first let's go ahead and add our text extra small back in,
switch everything from PX6 to maybe PX2
and everything from PY3 to I think PY maybe 1.5.
And then we're also going to want to get rid
of all of the dark mode stuff here too,
as we're not worrying about that.
And I guess I have my computer set to prefer dark mode.
Okay, it looks like there was only three classes
for dark mode there, so that's not too bad.
All right, give that a save,
jump back into our browser now,
and yeah, that's looking a lot better.
Okay, cool, awesome.
So now we have our movies table in place
and ready to go for us to add in our actions next.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!