New: Added filter and sort options to Collections (#8731)

* New: Added filter and sort options to Collections

* Add AllMovieWithCollectionsTmdbIds method to MovieService and MovieRepository

frontend/src/Collection/CollectionItemConnector.js

@@ -2,17 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
 
 function createMapStateToProps() {
   return createSelector(
     createCollectionSelector(),
-    createAllMoviesSelector(),
-    (
-      collection,
-      allMovies
-    ) => {
+    (collection) => {
       // If a movie is deleted this selector may fire before the parent
       // selecors, which will result in an undefined movie, if that happens
       // we want to return early here and again in the render function to avoid
@@ -22,21 +17,11 @@ function createMapStateToProps() {
         return {};
       }
 
-      let allGenres = [];
-      let libraryMovies = 0;
-
-      collection.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-
-        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
-          libraryMovies++;
-        }
-      });
+      const allGenres = collection.movies.flatMap((movie) => movie.genres);
 
       return {
         ...collection,
-        genres: Array.from(new Set(allGenres)).slice(0, 3),
-        missingMovies: collection.movies.length - libraryMovies
+        genres: Array.from(new Set(allGenres)).slice(0, 3)
       };
     }
   );

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -28,6 +28,14 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+        <SortMenuItem
+          name="missingMovies"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Missing')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Store/Actions/movieCollectionActions.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { createAction } from 'redux-actions';
 import { batchActions } from 'redux-batched-actions';
-import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, sortDirections } from 'Helpers/Props';
+import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, filterTypes, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import sortByName from 'Utilities/Array/sortByName';
 import createAjaxRequest from 'Utilities/createAjaxRequest';
@@ -62,6 +62,28 @@ export const defaultState = {
       key: 'all',
       label: 'All',
       filters: []
+    },
+    {
+      key: 'missing',
+      label: 'Missing',
+      filters: [
+        {
+          key: 'missingMovies',
+          value: 0,
+          type: filterTypes.GREATER_THAN
+        }
+      ]
+    },
+    {
+      key: 'complete',
+      label: 'Complete',
+      filters: [
+        {
+          key: 'missingMovies',
+          value: 0,
+          type: filterTypes.EQUAL
+        }
+      ]
     }
   ],