Filtering Our List by Movie Status

In This Lesson

We'll alter our form input component to allow selects. Then, we'll learn how to add a select-based filter to our movie list page so that we can see only movies containing a specific movie status.

Created by: @tomgobich
Published: 1 year ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

Our next filter, let's say that we want the ability to just view the ones that are published or just the ones in post production or just the ones being written, so on and so forth.
So we're gonna be querying by our movie status. So the first thing we're gonna need is a way to list out all of our movie statuses within our actual page as a filter option.
So let's go ahead and query those. Just add a const movie statuses equals, scroll up a little bit here,
await movie status, import our model by hitting tab.query. And let's go ahead and order by, I believe movie statuses are using a name, and we'll keep that ascending.
And then for the movie status, let's go ahead and select just the ID and the name column. Okay, give that a save, and let's provide that into our page state.
I'm gonna break this down a little bit so it's just nice and clean, and we'll do our movie statuses right there. All right, now for our actual index page, we just need to add that in. We'll add that in after our title search.
And it would be great to go ahead and be able to use the main functionality of our form input for selects as well. There's a few different ways we could go about that, but
if we dive into our form input by holding command and clicking the components tag, the main gist of what we wanna do is switch this to be able to be a select.
So we'll do @if the type that we provide in equals select, then we'll render out one thing. Else, let's go ahead and just render out our input tag. Okay, so we can end the if there.
Then we just need to add in our select tag, add in the name, name, or an empty string. And we'll allow us to define the options for the select outside of the component.
So we'll do three curly braces, await slots.main. Give that a save. Let's jump back into our index.edge page. And let's head in our @form.input.
We'll exclude the exclamation point here because we will need to add in the selects options. We'll have our label be status, and the name will be status as well.
We'll end that. We also need to add in the type so that it actually renders out our select. Select there, which leaves us with needing to loop over our statuses.
So we'll do status in movie statuses, end our each there, and do an option for each one.
So option value equals status.id, and for the display, we'll do status.name. Okay, we're also gonna need to select which one's actually active, but
we'll do that here momentarily. Let's just make sure that we have everything working okay at this point in time. That is not pretty, but there are our options. So everything does seem to be working okay.
We do need to add in an all option as well. So let's hide that away and add that in real quick. So we'll just add that in as the first option within our form.
So option value equals, we'll just have that be empty and have the text be all. While we're here, let's go ahead and dive into our resources CSS, app.css, and
let's add select into our input style. Give that a save and close that out, jump back into our browser. And okay, that's not quite one to one, but it's good enough to get us going.
So now we have our all within here as well. I believe casting was just selected because Firefox likes to hold on to select values. So if I do a hard refresh here, yeah, it defaulted to all. Okay, cool.
So the first thing that we're gonna wanna do is actually apply in our status query. And then we'll go about adding our active state into the status field itself. So let's hide this back away, jump back into our movies controller.
And we gave the input a field name of status. So that's what its key will be within our query string. So we'll just add in another if here.
So if query string.status, then we'll wanna apply a truthy query statement to it, relatively similar to what we're doing for our title search.
Except this one will be a specific where status ID equals our query string.status. So that we can confirm everything's actually correct as well.
Let's go ahead and preload our status onto these results as well. Jump into our component for our movie card and right down here.
Let's give our definition list up to our div here, a copy and a paste right above there. And just in that definition list out and we'll switch writer to status.
We won't need a href, so we'll get rid of that. And this will just be movie status name. We're not preloading that on all of our pages, so we will want to wrap that inside of if here as well.
So if show status and if and plop that inside. Okay, give that a save. Let's jump back into our index page, scroll down to where we're using that
component and add in a show status of true. Okie doke, so let's jump back into our browser. We now see our status. It's got quite a bit of spacing in between it, but that's okay for right now.
So we can see that it is released. So if we were to switch our status here from all to just released, submit this. Okay, cool, we still see 12 angry men because our title search is still
searching for angry and now our status is five. And remember, we haven't added that status default value into our field yet, so that's why status is showing all there.
If we get rid of the angry title search, switch this back to released and search once more, now we just have our status being applied. We still see 12 angry men and
all of the movies that we see back have a status of released. So cool, we know that that's being applied A-okay. For sanity's sake, let's switch this to something different.
So post-production, just have two in post-production, none in casting. And let's see about writing, we have three being written, which leaves us with just
needing to populate in the currently applied status filter to the status field. So let's hide that back away, scroll back up. Let's break this display value down to a separate line there.
And let's do double curly braces, html.attrs, which is an HTML helper that will provide in the key value pair that we add into the ATTRS as direct
attributes for the option. And we can provide a key value pair of, let's see, I think option uses selected.
So we'll do selected, where status ID equals, and we'll just do two equals here because our query string will come through as an actual string,
whereas our ID within our model is a number. And we'll do filters.status. Give that a save, jump back into our browser. Let me give this a hard refresh, and there we go.
So now we see it's being set to written. If we switch this to post-production, give that a search, it now populates automatically for that as well.
Since I'm in Firefox, I'm going to give this a hard refresh just for sanity's sake. There we go. And if we leave this at all, once more, sanity's check there by doing a hard refresh, and it's still all awesome.
So that's working A-OK there as well.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.