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/Movie/Index/Table/MovieIndexHeader.js

@@ -4,6 +4,7 @@ import { icons } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
 import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
 import TableOptionsModal from 'Components/Table/TableOptions/TableOptionsModal';
 import MovieIndexTableOptionsConnector from './MovieIndexTableOptionsConnector';
 import styles from './MovieIndexHeader.css';
@@ -39,6 +40,10 @@ class MovieIndexHeader extends Component {
     const {
       columns,
       onTableOptionChange,
+      allSelected,
+      allUnselected,
+      onSelectAllChange,
+      isMovieEditorActive,
       ...otherProps
     } = this.props;
 
@@ -57,6 +62,17 @@ class MovieIndexHeader extends Component {
               return null;
             }
 
+            if (isMovieEditorActive && name === 'select') {
+              return (
+                <VirtualTableSelectAllHeaderCell
+                  key={name}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  onSelectAllChange={onSelectAllChange}
+                />
+              );
+            }
+
             if (name === 'actions') {
               return (
                 <VirtualTableHeaderCell
@@ -102,7 +118,11 @@ class MovieIndexHeader extends Component {
 
 MovieIndexHeader.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onTableOptionChange: PropTypes.func.isRequired
+  onTableOptionChange: PropTypes.func.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired
 };
 
 export default MovieIndexHeader;

frontend/src/Movie/Index/Table/MovieIndexRow.js

@@ -15,6 +15,7 @@ import MovieTitleLink from 'Movie/MovieTitleLink';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import MovieStatusCell from './MovieStatusCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import styles from './MovieIndexRow.css';
 
 class MovieIndexRow extends Component {
@@ -80,8 +81,11 @@ class MovieIndexRow extends Component {
       columns,
       isRefreshingMovie,
       isSearchingMovie,
+      isMovieEditorActive,
+      isSelected,
       onRefreshMoviePress,
-      onSearchPress
+      onSearchPress,
+      onSelectedChange
     } = this.props;
 
     const {
@@ -102,6 +106,19 @@ class MovieIndexRow extends Component {
               return null;
             }
 
+            if (isMovieEditorActive && name === 'select') {
+              return (
+                <VirtualTableSelectCell
+                  inputClassName={styles.checkInput}
+                  id={id}
+                  key={name}
+                  isSelected={isSelected}
+                  isDisabled={false}
+                  onSelectedChange={onSelectedChange}
+                />
+              );
+            }
+
             if (name === 'status') {
               return (
                 <MovieStatusCell
@@ -322,7 +339,10 @@ MovieIndexRow.propTypes = {
   isRefreshingMovie: PropTypes.bool.isRequired,
   isSearchingMovie: PropTypes.bool.isRequired,
   onRefreshMoviePress: PropTypes.func.isRequired,
-  onSearchPress: PropTypes.func.isRequired
+  onSearchPress: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  onSelectedChange: PropTypes.func.isRequired
 };
 
 MovieIndexRow.defaultProps = {

frontend/src/Movie/Index/Table/MovieIndexTable.js

@@ -22,10 +22,13 @@ class MovieIndexTable extends Component {
   }
 
   componentDidUpdate(prevProps) {
+    const {
+      items
+    } = this.props;
+
     const jumpToCharacter = this.props.jumpToCharacter;
 
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const items = this.props.items;
 
       const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
 
@@ -43,7 +46,10 @@ class MovieIndexTable extends Component {
   rowRenderer = ({ key, rowIndex, style }) => {
     const {
       items,
-      columns
+      columns,
+      selectedState,
+      onSelectedChange,
+      isMovieEditorActive
     } = this.props;
 
     const movie = items[rowIndex];
@@ -56,6 +62,9 @@ class MovieIndexTable extends Component {
         columns={columns}
         movieId={movie.id}
         qualityProfileId={movie.qualityProfileId}
+        isSelected={selectedState[movie.id]}
+        onSelectedChange={onSelectedChange}
+        isMovieEditorActive={isMovieEditorActive}
       />
     );
   }
@@ -75,7 +84,12 @@ class MovieIndexTable extends Component {
       contentBody,
       onSortPress,
       onRender,
-      onScroll
+      onScroll,
+      allSelected,
+      allUnselected,
+      onSelectAllChange,
+      isMovieEditorActive,
+      selectedState
     } = this.props;
 
     return (
@@ -95,8 +109,13 @@ class MovieIndexTable extends Component {
             sortKey={sortKey}
             sortDirection={sortDirection}
             onSortPress={onSortPress}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+            isMovieEditorActive={isMovieEditorActive}
           />
         }
+        selectedState={selectedState}
         columns={columns}
         filters={filters}
         sortKey={sortKey}
@@ -120,7 +139,13 @@ MovieIndexTable.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired,
   onSortPress: PropTypes.func.isRequired,
   onRender: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  onScroll: PropTypes.func.isRequired,
+  allSelected: PropTypes.bool.isRequired,
+  allUnselected: PropTypes.bool.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onSelectAllChange: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired
 };
 
 export default MovieIndexTable;

frontend/src/Movie/Index/Table/MovieStatusCell.js

@@ -27,7 +27,7 @@ function MovieStatusCell(props) {
 
       <Icon
         className={styles.statusIcon}
-        name={status === 'released' ? icons.SERIES_ENDED : icons.SERIES_CONTINUING}
+        name={status === 'released' ? icons.SERIES_ENDED : icons.MOVIE_CONTINUING}
         title={status === 'ended' ? 'Ended' : 'Continuing'}
 
       />