00:00
(upbeat music)
00:02
Okay, so next let's get a sort option added
00:07
into our filter fields here as well.
00:08
So let's hide our browser back away.
00:09
Let's go ahead and move this method into a service
00:13
to clean up our index method here a little bit.
00:15
So if we dive into our services,
00:16
we already have a movie service.
00:18
So let's go ahead and give this query here a copy,
00:20
jump into our movie service.
00:22
Most of what we have within here, if not everything,
00:24
is from when we were reading individual files.
00:27
So we can go ahead and get rid of all of the methods
00:29
that we have in here as they're no longer in use.
00:31
And it looks like we can get rid
00:32
of all of the imports there as well.
00:34
So let's add in a static method
00:36
to this service called getFiltered.
00:38
We already know it's for our movies
00:39
because we're inside of the movie service.
00:41
So we'll leave movies out of the title.
00:42
Then for right now, all that we need to do
00:44
is accept in our filters.
00:45
This will be a type of record,
00:47
string as the key and any as the value.
00:50
And then let's go ahead and paste our query inside of here.
00:52
We're gonna leave async off of this method
00:54
and we're not going to await it inside of here.
00:57
Instead, we'll just directly return back
00:59
and what this will do is instead return back
01:01
from this method, a type of model query builder.
01:03
Right now we don't have that
01:04
because we have some red squigglies to take care of first,
01:07
but by returning back from model query builder,
01:09
rather than the executed query,
01:11
which we'd get by awaiting this query,
01:13
we're gonna give ourselves the exact same looking logic
01:16
within our controller,
01:17
but we'll also provide ourselves the option
01:19
to expand off of the query within our controller
01:21
if needed as well.
01:22
Okay, so let's go ahead and do a find and replace
01:24
for our QS because we've now called this our filters.
01:27
Replace that.
01:28
And then we need to import our movie model.
01:29
So we can click anywhere within there
01:31
and hit command dot to open up our quick fix options
01:33
and click on add import from models movie.
01:35
Give it a save and everything should be back to happy.
01:38
Let's go ahead and jump into our movies controller.
01:39
And now we can select up to just our movie query,
01:43
leaving the cost movies equals await.
01:44
And we can now do movie service
01:46
and import that from our services movie service.
01:49
Since we made this a static method,
01:50
we don't need to instantiate a new instance of the service.
01:52
So we can just directly call get filtered,
01:54
providing in our query string filters.
01:56
So now let's define our sort options.
01:58
So let's jump back into our movie service
02:00
and let's do a static property on here.
02:02
So static sort options equals an array.
02:06
And inside of this array, we'll define objects.
02:08
For each of these objects, we'll have an ID
02:10
just so that we can uniquely identify the individual option
02:13
to use the field in the sort direction for the option
02:15
within our get filtered query.
02:16
So for our ID, let's first say we want to sort
02:19
by title ascending.
02:20
So we can do title as ascending there.
02:22
Then we'll do a text of title asc,
02:25
field title, and dir as asc.
02:29
So as you can see, we're just kind of building out
02:30
a select option that contains the ID value for the option,
02:34
the text value for the option,
02:35
and then the underlying field and direction
02:37
that we would use inside of our query
02:39
to add in the order by clause.
02:41
Okay, let's next do ID title descending,
02:44
text title descending,
02:46
field will be title, and dir will be descending.
02:49
So let's first get these two working
02:51
and showing up on our form.
02:52
And then we'll take a look at adding others as well.
02:54
So we have our const movies, movie statuses.
02:56
Now we need our const movie sort options equals,
02:59
and we can just grab that directly off
03:01
of our movie service as sort options
03:04
and pass that in here.
03:05
So movie sort options.
03:07
Now that we're passing that into our page state,
03:08
we can jump into our index page.
03:10
Let's give this form input here a copy
03:12
where we have our select and paste just below it.
03:15
We'll switch the label here to sort.
03:17
We'll go ahead and have the name be sort as well.
03:19
For this one, it's gonna need to sort by something.
03:21
So we'll go ahead and remove the all
03:22
and we'll loop over our movie sort options.
03:25
And we'll just normalize this field name into just item.
03:28
So item, item, filters dot,
03:30
and we call this field name sort.
03:31
So that's what it will be within our filters.
03:33
So we'll call it sort there as well.
03:35
And then from status to item there too.
03:36
Okay, so if we give this a save, jump into our browser,
03:39
we should now see a second select for our sort.
03:42
Okay, we have undefined and undefined.
03:44
And that actually makes sense
03:45
because the options that we built don't have a name,
03:48
but rather a text property.
03:50
And let's jump back into our browser once more.
03:51
And there we go.
03:52
So now we have title ascending and title descending.
03:54
If we switch our sort to title descending and hit search,
03:57
we see it get added into our filter fields,
04:00
sort equals title underscore descending.
04:02
So now we just need to add it into our movie query
04:04
so that it's actually used and applied.
04:06
So let's jump back into our movie service
04:08
where we are now passing it into our filters
04:10
because this is grabbing just straight
04:11
from our query strings.
04:12
So let's do const sort equals,
04:15
and we're either going to want to grab the applied item
04:18
out of our sort options by its ID,
04:20
matching whatever we have within our filters.sort field,
04:23
or default to the first sort options item.
04:26
So here we can do this sort options.find option
04:30
where option.id equals our filters.sort.
04:35
Otherwise, we'll just default to this sort options
04:38
and the first item.
04:39
Give that a save.
04:40
It'll break that down into a new line.
04:41
Let's give ourselves another new line there
04:42
just to split the two and okay.
04:44
So now we either find an item within our sort options
04:46
that's applied via our filter sort value,
04:49
or we'll just default to the first item
04:50
within our sort options.
04:51
So we should always have a value here for our order by.
04:54
So we could do sort.field and then sort.dir
04:57
for our direction.
04:58
And once we get here,
04:59
we're going to see that sort.dir is not happy
05:01
within our order by because the order by
05:03
specifically has a type of ascending,
05:06
descending, or undefined.
05:07
And if we take a look at our sort type,
05:09
you can see all of the values here are of type string.
05:12
So we'll need to normalize our sort options into a type.
05:15
So up here at the top of our service file,
05:17
let's do type movie sort option equals object.
05:22
Our ID of type string, text of type string.
05:25
And then for our field,
05:26
we can hone in on the types a little bit
05:28
and just do key of our movie model.
05:31
And then we have dir and we'll just have this match
05:33
the same types needed for our order by clause.
05:35
So we'll do ascending or descending or undefined.
05:39
Okay, with that defined,
05:40
we just want to apply that to our sort option as an array
05:43
for the type.
05:44
So type movie sort option array there.
05:46
All of our current members
05:47
already fulfill that type requirement.
05:49
So we're a-okay there.
05:50
And if we scroll down now, so too is our actual order by.
05:54
So we should be able to give this a save.
05:55
Jump back into our browser.
05:56
Let's go ahead and give the page here a refresh.
05:58
And there we go.
05:59
So we are now looking at the inverse side of our titles
06:02
where we're starting with,
06:03
it looks like W's going in the V and then T.
06:06
And then if we switch this back to title ascending,
06:08
give it a search.
06:09
We're now right back to the original items
06:11
that we've been looking at all along.
06:13
If we go back to our one filter,
06:15
so just those containing something to the sort of a one,
06:17
we're looking at that in alphabetical order there.
06:19
Switch now to descending
06:20
and there they are in the descending order.
06:22
So let's add one more property here to our sort options.
06:25
So we'll do an object here with ID released at,
06:28
and we'll do ascending text, release date,
06:31
and ascending here just to note for ourselves.
06:34
Field released at enter is ascending.
06:37
All right, we'll do the flip side.
06:38
So ID released at descending text,
06:41
release date, descending field,
06:44
release that, enter is now descending.
06:47
So we can give that a save,
06:48
jump back into our browser, give our page a refresh.
06:49
And now we should be able to sort these
06:51
by the release date ascending, just like so,
06:53
and the release date descending.
06:55
If we apply that to just those that have already released,
06:58
now we're seeing a list of movies
06:59
with one somewhere in the title with a status of released
07:02
from the most recently released to the oldest released.
07:06
And then if we switch to the ascending,
07:07
we will then see the oldest released
07:09
to the most recently released.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!