New: Movie Editor in Movie Index (#3606)

* Fixed: Movie Editor in Movie Index

* Fixed: CSS Style Issues

* Fixed: Ensure only items shown are selected

* Fixed: Cleanup and Rename from Editor

frontend/src/Store/Actions/importMovieActions.js

@@ -190,8 +190,8 @@ export const actionHandlers = handleThunks({
       const item = _.find(items, { id });
       const selectedMovie = item.selectedMovie;
 
-      // Make sure we have a selected series and
-      // the same series hasn't been added yet.
+      // Make sure we have a selected movie and
+      // the same movie hasn't been added yet.
       if (selectedMovie && !_.some(acc, { tmdbId: selectedMovie.tmdbId })) {
         const newMovie = getNewMovie(_.cloneDeep(selectedMovie), item);
         newMovie.path = item.path;

frontend/src/Store/Actions/index.js

@@ -17,7 +17,6 @@ import * as queue from './queueActions';
 import * as releases from './releaseActions';
 import * as rootFolders from './rootFolderActions';
 import * as movies from './movieActions';
-import * as movieEditor from './movieEditorActions';
 import * as movieHistory from './movieHistoryActions';
 import * as movieIndex from './movieIndexActions';
 import * as settings from './settingsActions';
@@ -44,7 +43,6 @@ export default [
   releases,
   rootFolders,
   movies,
-  movieEditor,
   movieHistory,
   movieIndex,
   settings,

frontend/src/Store/Actions/movieEditorActions.js

@@ -1,179 +0,0 @@
-import { createAction } from 'redux-actions';
-import { batchActions } from 'redux-batched-actions';
-import createAjaxRequest from 'Utilities/createAjaxRequest';
-import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
-import { createThunk, handleThunks } from 'Store/thunks';
-import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
-import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
-import createHandleActions from './Creators/createHandleActions';
-import { set, updateItem } from './baseActions';
-import { filters, filterPredicates, sortPredicates } from './movieActions';
-
-//
-// Variables
-
-export const section = 'movieEditor';
-
-//
-// State
-
-export const defaultState = {
-  isSaving: false,
-  saveError: null,
-  isDeleting: false,
-  deleteError: null,
-  sortKey: 'sortTitle',
-  sortDirection: sortDirections.ASCENDING,
-  secondarySortKey: 'sortTitle',
-  secondarySortDirection: sortDirections.ASCENDING,
-  selectedFilterKey: 'all',
-  filters,
-  filterPredicates,
-
-  filterBuilderProps: [
-    {
-      name: 'monitored',
-      label: 'Monitored',
-      type: filterBuilderTypes.EXACT,
-      valueType: filterBuilderValueTypes.BOOL
-    },
-    {
-      name: 'status',
-      label: 'Status',
-      type: filterBuilderTypes.EXACT,
-      valueType: filterBuilderValueTypes.SERIES_STATUS
-    },
-    {
-      name: 'qualityProfileId',
-      label: 'Quality Profile',
-      type: filterBuilderTypes.EXACT,
-      valueType: filterBuilderValueTypes.QUALITY_PROFILE
-    },
-    {
-      name: 'path',
-      label: 'Path',
-      type: filterBuilderTypes.STRING
-    },
-    {
-      name: 'rootFolderPath',
-      label: 'Root Folder Path',
-      type: filterBuilderTypes.EXACT
-    },
-    {
-      name: 'tags',
-      label: 'Tags',
-      type: filterBuilderTypes.ARRAY,
-      valueType: filterBuilderValueTypes.TAG
-    }
-  ],
-
-  sortPredicates
-};
-
-export const persistState = [
-  'movieEditor.sortKey',
-  'movieEditor.sortDirection',
-  'movieEditor.selectedFilterKey',
-  'movieEditor.customFilters'
-];
-
-//
-// Actions Types
-
-export const SET_MOVIE_EDITOR_SORT = 'movieEditor/setMovieEditorSort';
-export const SET_MOVIE_EDITOR_FILTER = 'movieEditor/setMovieEditorFilter';
-export const SAVE_MOVIE_EDITOR = 'movieEditor/saveMovieEditor';
-export const BULK_DELETE_MOVIE = 'movieEditor/bulkDeleteMovie';
-//
-// Action Creators
-
-export const setMovieEditorSort = createAction(SET_MOVIE_EDITOR_SORT);
-export const setMovieEditorFilter = createAction(SET_MOVIE_EDITOR_FILTER);
-export const saveMovieEditor = createThunk(SAVE_MOVIE_EDITOR);
-export const bulkDeleteMovie = createThunk(BULK_DELETE_MOVIE);
-//
-// Action Handlers
-
-export const actionHandlers = handleThunks({
-  [SAVE_MOVIE_EDITOR]: function(getState, payload, dispatch) {
-    dispatch(set({
-      section,
-      isSaving: true
-    }));
-
-    const promise = createAjaxRequest({
-      url: '/movie/editor',
-      method: 'PUT',
-      data: JSON.stringify(payload),
-      dataType: 'json'
-    }).request;
-
-    promise.done((data) => {
-      dispatch(batchActions([
-        ...data.map((movie) => {
-          return updateItem({
-            id: movie.id,
-            section: 'movies',
-            ...movie
-          });
-        }),
-
-        set({
-          section,
-          isSaving: false,
-          saveError: null
-        })
-      ]));
-    });
-
-    promise.fail((xhr) => {
-      dispatch(set({
-        section,
-        isSaving: false,
-        saveError: xhr
-      }));
-    });
-  },
-
-  [BULK_DELETE_MOVIE]: function(getState, payload, dispatch) {
-    dispatch(set({
-      section,
-      isDeleting: true
-    }));
-
-    const promise = createAjaxRequest({
-      url: '/movie/editor',
-      method: 'DELETE',
-      data: JSON.stringify(payload),
-      dataType: 'json'
-    }).request;
-
-    promise.done(() => {
-      // SignaR will take care of removing the series from the collection
-
-      dispatch(set({
-        section,
-        isDeleting: false,
-        deleteError: null
-      }));
-    });
-
-    promise.fail((xhr) => {
-      dispatch(set({
-        section,
-        isDeleting: false,
-        deleteError: xhr
-      }));
-    });
-  }
-});
-
-//
-// Reducers
-
-export const reducers = createHandleActions({
-
-  [SET_MOVIE_EDITOR_SORT]: createSetClientSideCollectionSortReducer(section),
-  [SET_MOVIE_EDITOR_FILTER]: createSetClientSideCollectionFilterReducer(section)
-
-}, defaultState, section);

frontend/src/Store/Actions/movieIndexActions.js

@@ -1,10 +1,14 @@
 import { createAction } from 'redux-actions';
+import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import sortByName from 'Utilities/Array/sortByName';
 import { filterBuilderTypes, filterBuilderValueTypes, sortDirections } from 'Helpers/Props';
 import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptionReducer';
 import createSetClientSideCollectionSortReducer from './Creators/Reducers/createSetClientSideCollectionSortReducer';
 import createSetClientSideCollectionFilterReducer from './Creators/Reducers/createSetClientSideCollectionFilterReducer';
+import { createThunk, handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
+import { set, updateItem } from './baseActions';
 import { filters, filterPredicates, sortPredicates } from './movieActions';
 //
 // Variables
@@ -15,6 +19,10 @@ export const section = 'movieIndex';
 // State
 
 export const defaultState = {
+  isSaving: false,
+  saveError: null,
+  isDeleting: false,
+  deleteError: null,
   sortKey: 'sortTitle',
   sortDirection: sortDirections.ASCENDING,
   secondarySortKey: 'sortTitle',
@@ -47,6 +55,13 @@ export const defaultState = {
   },
 
   columns: [
+    {
+      name: 'select',
+      columnLabel: 'select',
+      isSortable: false,
+      isVisible: true,
+      isModifiable: false
+    },
     {
       name: 'status',
       columnLabel: 'Status',
@@ -214,8 +229,8 @@ export const defaultState = {
       label: 'Genres',
       type: filterBuilderTypes.ARRAY,
       optionsSelector: function(items) {
-        const tagList = items.reduce((acc, series) => {
-          series.genres.forEach((genre) => {
+        const tagList = items.reduce((acc, movie) => {
+          movie.genres.forEach((genre) => {
             acc.push({
               id: genre,
               name: genre
@@ -268,6 +283,8 @@ export const SET_MOVIE_VIEW = 'movieIndex/setMovieView';
 export const SET_MOVIE_TABLE_OPTION = 'movieIndex/setMovieTableOption';
 export const SET_MOVIE_POSTER_OPTION = 'movieIndex/setMoviePosterOption';
 export const SET_MOVIE_OVERVIEW_OPTION = 'movieIndex/setMovieOverviewOption';
+export const SAVE_MOVIE_EDITOR = 'movieIndex/saveMovieEditor';
+export const BULK_DELETE_MOVIE = 'movieIndex/bulkDeleteMovie';
 
 //
 // Action Creators
@@ -278,6 +295,85 @@ export const setMovieView = createAction(SET_MOVIE_VIEW);
 export const setMovieTableOption = createAction(SET_MOVIE_TABLE_OPTION);
 export const setMoviePosterOption = createAction(SET_MOVIE_POSTER_OPTION);
 export const setMovieOverviewOption = createAction(SET_MOVIE_OVERVIEW_OPTION);
+export const saveMovieEditor = createThunk(SAVE_MOVIE_EDITOR);
+export const bulkDeleteMovie = createThunk(BULK_DELETE_MOVIE);
+
+//
+// Action Handlers
+
+export const actionHandlers = handleThunks({
+  [SAVE_MOVIE_EDITOR]: function(getState, payload, dispatch) {
+    dispatch(set({
+      section,
+      isSaving: true
+    }));
+
+    const promise = createAjaxRequest({
+      url: '/movie/editor',
+      method: 'PUT',
+      data: JSON.stringify(payload),
+      dataType: 'json'
+    }).request;
+
+    promise.done((data) => {
+      dispatch(batchActions([
+        ...data.map((movie) => {
+          return updateItem({
+            id: movie.id,
+            section: 'movies',
+            ...movie
+          });
+        }),
+
+        set({
+          section,
+          isSaving: false,
+          saveError: null
+        })
+      ]));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isSaving: false,
+        saveError: xhr
+      }));
+    });
+  },
+
+  [BULK_DELETE_MOVIE]: function(getState, payload, dispatch) {
+    dispatch(set({
+      section,
+      isDeleting: true
+    }));
+
+    const promise = createAjaxRequest({
+      url: '/movie/editor',
+      method: 'DELETE',
+      data: JSON.stringify(payload),
+      dataType: 'json'
+    }).request;
+
+    promise.done(() => {
+      // SignaR will take care of removing the movie from the collection
+
+      dispatch(set({
+        section,
+        isDeleting: false,
+        deleteError: null
+      }));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(set({
+        section,
+        isDeleting: false,
+        deleteError: xhr
+      }));
+    });
+  }
+});
 
 //
 // Reducers

frontend/src/Store/Selectors/createImportMovieItemSelector.js

@@ -8,10 +8,10 @@ function createImportMovieItemSelector() {
     (state) => state.addMovie,
     (state) => state.importMovie,
     createAllMoviesSelector(),
-    (id, addMovie, importMovie, series) => {
+    (id, addMovie, importMovie, movies) => {
       const item = _.find(importMovie.items, { id }) || {};
       const selectedMovie = item && item.selectedMovie;
-      const isExistingMovie = !!selectedMovie && _.some(series, { tvdbId: selectedMovie.tvdbId });
+      const isExistingMovie = !!selectedMovie && _.some(movies, { tmdbId: selectedMovie.tmdbId });
 
       return {
         defaultMonitor: addMovie.defaults.monitor,