More Cleanup

frontend/src/Indexer/Editor/Delete/DeleteMovieModal.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DeleteMovieModalContentConnector from './DeleteMovieModalContentConnector';
+
+function DeleteMovieModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <DeleteMovieModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+DeleteMovieModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default DeleteMovieModal;

frontend/src/Indexer/Editor/Delete/DeleteMovieModalContent.css

@@ -0,0 +1,13 @@
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.pathContainer {
+  margin-left: 5px;
+}
+
+.path {
+  margin-left: 5px;
+  color: $dangerColor;
+}

frontend/src/Indexer/Editor/Delete/DeleteMovieModalContent.js

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './DeleteMovieModalContent.css';
+
+class DeleteMovieModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      deleteFiles: false,
+      addImportExclusion: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDeleteFilesChange = ({ value }) => {
+    this.setState({ deleteFiles: value });
+  }
+
+  onAddImportExclusionChange = ({ value }) => {
+    this.setState({ addImportExclusion: value });
+  }
+
+  onDeleteMovieConfirmed = () => {
+    const deleteFiles = this.state.deleteFiles;
+    const addImportExclusion = this.state.addImportExclusion;
+
+    this.setState({ deleteFiles: false, addImportExclusion: false });
+    this.props.onDeleteSelectedPress(deleteFiles, addImportExclusion);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movies,
+      onModalClose
+    } = this.props;
+
+    const deleteFiles = this.state.deleteFiles;
+    const addImportExclusion = this.state.addImportExclusion;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Delete Selected Movie(s)
+        </ModalHeader>
+
+        <ModalBody>
+          <div>
+            <FormGroup>
+              <FormLabel>{`Delete Movie Folder${movies.length > 1 ? 's' : ''}`}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="deleteFiles"
+                value={deleteFiles}
+                helpText={`Delete Movie Folder${movies.length > 1 ? 's' : ''} and all contents`}
+                kind={kinds.DANGER}
+                onChange={this.onDeleteFilesChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('AddListExclusion')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="addImportExclusion"
+                value={addImportExclusion}
+                helpText={translate('AddImportExclusionHelpText')}
+                kind={kinds.DANGER}
+                onChange={this.onAddImportExclusionChange}
+              />
+            </FormGroup>
+          </div>
+
+          <div className={styles.message}>
+            {`Are you sure you want to delete ${movies.length} selected movie(s)${deleteFiles ? ' and all contents' : ''}?`}
+          </div>
+
+          <ul>
+            {
+              movies.map((s) => {
+                return (
+                  <li key={s.title}>
+                    <span>{s.title}</span>
+
+                    {
+                      deleteFiles &&
+                        <span className={styles.pathContainer}>
+                          -
+                          <span className={styles.path}>
+                            {s.path}
+                          </span>
+                        </span>
+                    }
+                  </li>
+                );
+              })
+            }
+          </ul>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            {translate('Cancel')}
+          </Button>
+
+          <Button
+            kind={kinds.DANGER}
+            onPress={this.onDeleteMovieConfirmed}
+          >
+            {translate('Delete')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+DeleteMovieModalContent.propTypes = {
+  movies: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onDeleteSelectedPress: PropTypes.func.isRequired
+};
+
+export default DeleteMovieModalContent;

frontend/src/Indexer/Editor/Delete/DeleteMovieModalContentConnector.js

@@ -0,0 +1,46 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { bulkDeleteMovie } from 'Store/Actions/movieIndexActions';
+import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import DeleteMovieModalContent from './DeleteMovieModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state, { movieIds }) => movieIds,
+    createAllMoviesSelector(),
+    (movieIds, allMovies) => {
+      const selectedMovie = _.intersectionWith(allMovies, movieIds, (s, id) => {
+        return s.id === id;
+      });
+
+      const sortedMovies = _.orderBy(selectedMovie, 'sortTitle');
+      const movies = _.map(sortedMovies, (s) => {
+        return {
+          title: s.title,
+          path: s.path
+        };
+      });
+
+      return {
+        movies
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onDeleteSelectedPress(deleteFiles, addImportExclusion) {
+      dispatch(bulkDeleteMovie({
+        movieIds: props.movieIds,
+        deleteFiles,
+        addImportExclusion
+      }));
+
+      props.onModalClose();
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(DeleteMovieModalContent);