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/Overview/MovieIndexOverview.css

@@ -17,6 +17,13 @@ $hoverScale: 1.05;
   position: relative;
 }
 
+.editorSelect {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  z-index: 3;
+}
+
 .posterContainer {
   position: relative;
 }

frontend/src/Movie/Index/Overview/MovieIndexOverview.js

@@ -7,6 +7,7 @@ import fonts from 'Styles/Variables/fonts';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import CheckInput from 'Components/Form/CheckInput';
 import MoviePoster from 'Movie/MoviePoster';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -65,6 +66,15 @@ class MovieIndexOverview extends Component {
     this.setState({ isDeleteMovieModalOpen: false });
   }
 
+  onChange = ({ value, shiftKey }) => {
+    const {
+      id,
+      onSelectedChange
+    } = this.props;
+
+    onSelectedChange({ id, value, shiftKey });
+  }
+
   //
   // Render
 
@@ -94,6 +104,9 @@ class MovieIndexOverview extends Component {
       isSearchingMovie,
       onRefreshMoviePress,
       onSearchPress,
+      isMovieEditorActive,
+      isSelected,
+      onSelectedChange,
       ...otherProps
     } = this.props;
 
@@ -118,11 +131,15 @@ class MovieIndexOverview extends Component {
           <div className={styles.poster}>
             <div className={styles.posterContainer}>
               {
-                status === 'ended' &&
-                <div
-                  className={styles.ended}
-                  title="Ended"
-                />
+                isMovieEditorActive &&
+                  <div className={styles.editorSelect}>
+                    <CheckInput
+                      className={styles.checkInput}
+                      name={id.toString()}
+                      value={isSelected}
+                      onChange={this.onChange}
+                    />
+                  </div>
               }
 
               <Link
@@ -253,7 +270,10 @@ MovieIndexOverview.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
 };
 
 export default MovieIndexOverview;

frontend/src/Movie/Index/Overview/MovieIndexOverviews.js

@@ -169,7 +169,10 @@ class MovieIndexOverviews extends Component {
       shortDateFormat,
       longDateFormat,
       timeFormat,
-      isSmallScreen
+      isSmallScreen,
+      selectedState,
+      isMovieEditorActive,
+      onSelectedChange
     } = this.props;
 
     const {
@@ -201,6 +204,9 @@ class MovieIndexOverviews extends Component {
         style={style}
         movieId={movie.id}
         qualityProfileId={movie.qualityProfileId}
+        isSelected={selectedState[movie.id]}
+        onSelectedChange={onSelectedChange}
+        isMovieEditorActive={isMovieEditorActive}
       />
     );
   }
@@ -227,7 +233,8 @@ class MovieIndexOverviews extends Component {
       items,
       scrollTop,
       isSmallScreen,
-      onScroll
+      onScroll,
+      selectedState
     } = this.props;
 
     const {
@@ -257,6 +264,7 @@ class MovieIndexOverviews extends Component {
                 overscanRowCount={2}
                 cellRenderer={this.cellRenderer}
                 onSectionRendered={this.onSectionRendered}
+                selectedState={selectedState}
               />
             );
           }
@@ -282,7 +290,10 @@ MovieIndexOverviews.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   onRender: PropTypes.func.isRequired,
-  onScroll: PropTypes.func.isRequired
+  onScroll: PropTypes.func.isRequired,
+  selectedState: PropTypes.object.isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  isMovieEditorActive: PropTypes.bool.isRequired
 };
 
 export default MovieIndexOverviews;