-
Next for our watch list, let's give our users the ability to filter by all their watch list movies, just their watch list movies that they have watched
-
and those that they have not watched. So let's hide our browser away, head into our watch list page, scroll on up to where we have our filters
-
and let's put this in between our status and our sort. Paste that right in there, it'll be another select. The label for this, maybe we'll do something like watched
-
and then for the name, we'll just do watched as well. We'll leave our all option in and we'll go ahead and just put some manual options in here as well. So option, value, and we'll do watched
-
with a label of watched and we'll do an option value of unwatched with a label of not watched. Give that a save. And now we need to account for this new property
-
within a validator. So we'll scroll up to our movie validators. We're gonna wanna leave our movie filter validator as is, but we can reuse the schema that's inside of here.
-
So if we cut out our whole object here and instead put it inside of a variable say like shared movie filter schema equals and then paste it in, give that a save
-
to fix whatever formatting issues we have and then take the shared movie filter schema, scroll down to our movie filter validator. We can now paste that in, making our vine compile
-
for our movie filter validator happy. And it also allows us to define an additional validator to make use of those same schema properties. So we can do watch list filter validator
-
equals vine.compile, define a new schema, define a new vine.object and then we can spread in our shared movie filter schema properties
-
by doing dot get properties and calling that. And that will spread in to this particular object, all of the properties that we have defined
-
within our shared movie filter schema vine object here. So we've already applied our search status and sort within our watch list filter validator,
-
leaving us with just needing to define our watched filter. And we can say, this is vine dot and you know what? Let's use enum because we have some very specific properties here.
-
And we can say that it should only be, let's rename all to just all rather than an empty string, watched or unwatched. So now we're gonna ensure that it's one of those three.
-
Give it a save. Let's quickly jump back into our watch list page and give all a literal name of all there. And let's scroll back up and jump into our watch list controller next.
-
Scroll up to the top where we have our filters. And first we're going to wanna swap out our validator. So now we'll use our watch list filter validator and import that,
-
which will leave us with an unused movie filter validator import that we can now get rid of. And let's go ahead and pluck out of our filters,
-
our watched filter, and then we can spread the rest as the filters variable, which will leave our get filtered method to apply the filters that we have shared.
-
And we can just apply the watched filter specifically in this one use case that we're actually going to use it. So we're gonna want to break our where has down for this. So I'm gonna move that into a new line
-
and break that down a little bit more. And we're gonna want to apply our watched filter specifically on the watch list where has.
-
So if our watched filter equals watched, then we're gonna want to take our query. And since we're already using query, we need to call this something else.
-
So we'll call this our watch list. So watch list dot. And since we're filtering to those that have been watched,
-
but want to do a where not null watched at. So we wanna get our movies where it has a watch list
-
specifically where the watched at is not null, meaning that the movie has been watched. Otherwise, if watched equals unwatched,
-
then we'll wanna take our watch list query and we'll wanna apply a where null check for watched at. So if the filter is for watched,
-
then we'll limit our movies to where the watch list has a watched at value. Otherwise, if we're filtering by the unwatched movies, then we wanna get where the watched at is specifically null,
-
meaning that it doesn't have a value and hence has not been watched. If it's all, then we don't wanna do either of these and we can just leave the where has as is. So let's give that a save,
-
jump back into our browser and let's give it a test. So let's switch our watched filter to just those that have been watched. Give it a search. All right, we have three here.
-
All of our buttons are marked as unwatched. So that seems to be working. Let's switch it to not watched. We also need to populate in the default value there, but switch it to not watched here.
-
And now all of these are marked as watched. If we marked one of these as watched, it's now gone whenever we get back our filtered results. Awesome.
-
So let's go populate in our watch default value real quick. Jump back into our watchlist page and we'll do HTML, ATT, RS here.
-
Apply selected when our filters dot, oh, you know what? We plucked it out of filters. Let's go back into our watchlist controller. Right here, we're splitting them apart from our filtered and our watched.
-
Let's go ahead and just leave those together after all. Switch this to filters.watched and our get filtered call can just ignore it. All right, let's scroll back down to our watchlist page
-
and we'll do filtered dot watched equals all. Then we'll have that selected. Give this section here a copy and paste it in for these two here as well.
-
And just switch this to watched and unwatched. I'm gonna break these down here to clean it up a little bit. And there we go. One more thing real quick is we'll jump into our movies
-
and we'll make this enum here optional because all will be the default. Awesome. So with that in play, let's go ahead and test everything out once more. So we'll switch this to all, search.
-
There we go. We get back all. Switch this to watched. And there we go. We get back just our watched. I'm gonna move one of these to unwatched. Let's move cabaret back to unwatched. And, oh, look at that.
-
It got rid of our query string. So let's fix that real quick too. Jump back into our watchlist controller where we have our toggle. I'll let's say this specifically the watch toggle
-
and we'll redirect back with the same query strings that we already have applied. So we'll keep the query strings using the with query string method. Jump back into our browser here. All right, let's reapply a query.
-
So we'll go back to, how's about not watched? Jump back into here, switch cabaret back to being watched. And there we go. So now we got redirected back and we kept our query string,
-
meaning that we kept all of our nice filters here. Switch back to watched, search, get rid of cabaret, mark that as unwatched. There we go. And we keep all of our filters still. So awesome.
-
Everything seems to be working A-okay. So we should have our watchlist fully implemented now.
