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,
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!