New: Select Multiple Languages on Manual Import

frontend/src/MovieFile/Language/SelectLanguageModalContent.js

@@ -1,87 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { inputTypes } from 'Helpers/Props';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalFooter from 'Components/Modal/ModalFooter';
-
-function SelectLanguageModalContent(props) {
-  const {
-    languageId,
-    isFetching,
-    isPopulated,
-    error,
-    items,
-    onModalClose,
-    onLanguageSelect
-  } = props;
-
-  const languageOptions = items.map(( language ) => {
-    return {
-      key: language.id,
-      value: language.name
-    };
-  });
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        Manual Import - Select Language
-      </ModalHeader>
-
-      <ModalBody>
-        {
-          isFetching &&
-            <LoadingIndicator />
-        }
-
-        {
-          !isFetching && !!error &&
-            <div>Unable to load languages</div>
-        }
-
-        {
-          isPopulated && !error &&
-            <Form>
-              <FormGroup>
-                <FormLabel>Language</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.SELECT}
-                  name="language"
-                  value={languageId}
-                  values={languageOptions}
-                  onChange={onLanguageSelect}
-                />
-              </FormGroup>
-            </Form>
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <Button onPress={onModalClose}>
-          Cancel
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-SelectLanguageModalContent.propTypes = {
-  languageId: PropTypes.number.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onLanguageSelect: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default SelectLanguageModalContent;

frontend/src/MovieFile/Language/SelectLanguageModalContentConnector.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchLanguages } from 'Store/Actions/settingsActions';
 import { updateMovieFiles } from 'Store/Actions/movieFileActions';
-import SelectLanguageModalContent from './SelectLanguageModalContent';
+import SelectLanguageModalContent from 'InteractiveImport/Language/SelectLanguageModalContent';
 
 function createMapStateToProps() {
   return createSelector(
@@ -47,15 +47,20 @@ class SelectLanguageModalContentConnector extends Component {
   //
   // Listeners
 
-  onLanguageSelect = ({ value }) => {
-    const languageId = parseInt(value);
+  onLanguageSelect = ({ languageIds }) => {
+    const languages = [];
 
-    const language = _.find(this.props.items,
-      (item) => item.id === languageId);
-    const languages = [language];
-    const movieFileIds = this.props.ids;
+    languageIds.forEach((languageId) => {
+      const language = _.find(this.props.items,
+        (item) => item.id === parseInt(languageId));
 
-    this.props.dispatchupdateMovieFiles({ movieFileIds, languages });
+      languages.push(language);
+    });
+
+    this.props.dispatchupdateMovieFiles({
+      movieFileIds: this.props.ids,
+      languages
+    });
 
     this.props.onModalClose(true);
   }