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.
- Author
- Tom Gobich
- Published
- May 01
- Duration
- 5m 47s
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
Transcript
Filtering Our List by Movie Status
-
[MUSIC]
-
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.
-
Introduction
-
Fundamentals
-
2.0Routes and How To Create Them5m 23s
-
2.1Rendering a View for a Route6m 29s
-
2.2Linking Between Routes7m 51s
-
2.3Loading A Movie Using Route Parameters9m 17s
-
2.4Validating Route Parameters6m 6s
-
2.5Vite and Our Assets6m 38s
-
2.6Setting Up Tailwind CSS9m 5s
-
2.7Reading and Supporting Markdown Content4m 32s
-
2.8Listing Movies from their Markdown Files8m 51s
-
2.9Extracting Reusable Code with Services7m 4s
-
2.10Cleaning Up Routes with Controllers4m 52s
-
2.11Defining A Structure for our Movie using Models9m 38s
-
2.12Singleton Services and the Idea of Caching6m 11s
-
2.13Environment Variables and their Validation4m 16s
-
2.14Improved Caching with Redis10m 44s
-
2.15Deleting Items and Flushing our Redis Cache6m 46s
-
2.16Quick Start Apps with Custom Starter Kits6m 28s
-
2.17Easy Imports with NodeJS Subpath Imports8m 40s
-
-
Building Views with EdgeJS
-
3.0EdgeJS Templating Basics8m 49s
-
3.1HTML Attribute and Class Utilities6m 9s
-
3.2Making A Reusable Movie Card Component10m 24s
-
3.3Component Tags, State, and Props4m 53s
-
3.4Use Slots To Make A Button Component6m 56s
-
3.5Extracting A Layout Component5m 13s
-
3.6State vs Share Data Flow2m 59s
-
3.7Share vs Global Data Flow6m 7s
-
3.8Form Basics and CSRF Protection6m 13s
-
3.9HTTP Method Spoofing HTML Forms3m 3s
-
3.10Easy SVG Icons with Edge Iconify7m 57s
-
-
Database and Lucid ORM Basics
-
4.0Configuring Lucid and our Database Connection4m 3s
-
4.1Understanding our Database Schema9m 35s
-
4.2Introducing and Defining Database Migrations18m 35s
-
4.3The Flow of Migrations8m 28s
-
4.4Introducing Lucid Models5m 43s
-
4.5Defining Our Models6m 49s
-
4.6The Basics of CRUD11m 56s
-
4.7Defining Required Data with Seeders11m 11s
-
4.8Stubbing Fake Data with Model Factories13m 48s
-
4.9Querying Our Movies with the Query Builder15m 30s
-
4.10Unmapped and Computed Model Properties3m 24s
-
4.11Altering Tables with Migrations7m 6s
-
4.12Adding A Profile Model, Migration, Factory, and Controller2m 57s
-
4.13SQL Parameters and Injection Protection9m 19s
-
4.14Reusable Query Statements with Model Query Scopes8m 11s
-
4.15Tapping into Model Factory States9m 15s
-
4.16Querying Recently Released and Coming Soon Movies4m 59s
-
4.17Generating A Unique Movie Slug With Model Hooks7m 59s
-
-
Lucid ORM Relationships
-
5.0Defining One to One Relationships Within Lucid Models5m 49s
-
5.1Model Factory Relationships2m 54s
-
5.2Querying Relationships and Eager Vs Lazy Loading5m 17s
-
5.3Cascading and Deleting Model Relationships5m 16s
-
5.4Defining One to Many Relationships with Lucid Models6m 56s
-
5.5Seeding Movies with One to Many Model Factory Relationships5m 24s
-
5.6Listing A Director's Movies with Relationship Existence Queries8m 41s
-
5.7Listing and Counting a Writer's Movies8m 41s
-
5.8Using Eager and Lazy Loading to Load A Movie's Writer and Director5m 18s
-
5.9Defining Many-To-Many Relationships and Pivot Columns9m 48s
-
5.10Many-To-Many Model Factory Relationships4m 50s
-
5.11A Deep Dive Into Relationship CRUD with Models18m 5s
-
5.12How To Create Factory Relationships from a Pool of Data13m 55s
-
5.13How To Query, Sort, and Filter by Pivot Table Data9m 47s
-
-
Working With Forms
-
6.0Accepting Form Data12m 15s
-
6.1Validating Form Data with VineJS9m 29s
-
6.2Displaying Validation Errors and Validating from our Request7m 16s
-
6.3Reusing Old Form Values After A Validation Error2m 3s
-
6.4Creating An EdgeJS Form Input Component5m 28s
-
6.5Creating A Login Form and Validator5m 1s
-
6.6How To Create A Custom VineJS Validation Rule9m 7s
-
-
Authentication & Middleware
-
7.0The Flow of Middleware7m 49s
-
7.1Authenticating A Newly Registered User4m 14s
-
7.2Checking For and Populating an Authenticated User2m 10s
-
7.3Logging Out An Authenticated User2m 24s
-
7.4Logging In An Existing User6m 54s
-
7.5Remembering A User's Authenticated Session6m 55s
-
7.6Protecting Routes with Auth, Guest, and Admin Middleware5m 36s
-
-
Filtering and Paginating Queries
-
8.0Creating A Movie List Page3m 43s
-
8.1Filtering A Query By Pattern Likeness7m 9s
-
8.2Filtering Our List by Movie Status5m 47s
-
8.3How To Apply A Dynamic Sort Filter To Your Query7m 12s
-
8.4Joining SQL Tables To Order By A Related Column4m 49s
-
Validating Query String Filter Values7m 23s
-
How To Paginate Filtered Query Results9m 15s
-
Pagination First, Last, Next, and Previous Buttons4m 2s
-
-
User Watchlist
-
An Alternative Approach to Many-To-Many Relationships4m 56s
-
Toggling A Movie in an Authenticated User's Watchlist9m 56s
-
Listing and Filtering User Watchlist Items7m 34s
-
Allowing Users To Toggle A Movie As Watched4m 44s
-
Filtering By User's Watched Status6m 7s
-
Defining A Composite Unique Constraint4m 46s
-
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!