New: Set release group during Manual Import

Closes #3811

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -25,6 +25,7 @@ import SelectLanguageModal from 'InteractiveImport/Language/SelectLanguageModal'
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectSeriesModal from 'InteractiveImport/Series/SelectSeriesModal';
 import SelectSeasonModal from 'InteractiveImport/Season/SelectSeasonModal';
+import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
 import InteractiveImportRow from './InteractiveImportRow';
 import styles from './InteractiveImportModalContent.css';
 
@@ -51,6 +52,11 @@ const columns = [
     label: 'Episode(s)',
     isVisible: true
   },
+  {
+    name: 'releaseGroup',
+    label: 'Release Group',
+    isVisible: true
+  },
   {
     name: 'quality',
     label: 'Quality',
@@ -94,8 +100,9 @@ const SELECT = 'select';
 const SERIES = 'series';
 const SEASON = 'season';
 const EPISODE = 'episode';
-const LANGUAGE = 'language';
+const RELEASE_GROUP = 'releaseGroup';
 const QUALITY = 'quality';
+const LANGUAGE = 'language';
 
 class InteractiveImportModalContent extends Component {
 
@@ -231,8 +238,9 @@ class InteractiveImportModalContent extends Component {
       { key: SELECT, value: 'Select...', disabled: true },
       { key: SEASON, value: 'Select Season' },
       { key: EPISODE, value: 'Select Episode(s)' },
-      { key: LANGUAGE, value: 'Select Language' },
-      { key: QUALITY, value: 'Select Quality' }
+      { key: QUALITY, value: 'Select Quality' },
+      { key: RELEASE_GROUP, value: 'Select Release Group' },
+      { key: LANGUAGE, value: 'Select Language' }
     ];
 
     if (allowSeriesChange) {
@@ -400,6 +408,13 @@ class InteractiveImportModalContent extends Component {
           onModalClose={this.onSelectModalClose}
         />
 
+        <SelectReleaseGroupModal
+          isOpen={selectModalOpen === RELEASE_GROUP}
+          ids={selectedIds}
+          releaseGroup=""
+          onModalClose={this.onSelectModalClose}
+        />
+
         <SelectLanguageModal
           isOpen={selectModalOpen === LANGUAGE}
           ids={selectedIds}

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -110,6 +110,7 @@ class InteractiveImportModalContentConnector extends Component {
           series,
           seasonNumber,
           episodes,
+          releaseGroup,
           quality,
           language
         } = item;
@@ -144,6 +145,7 @@ class InteractiveImportModalContentConnector extends Component {
           folderName: item.folderName,
           seriesId: series.id,
           episodeIds: episodes.map((e) => e.id),
+          releaseGroup,
           quality,
           language,
           downloadId: this.props.downloadId

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -16,6 +16,7 @@ import SelectSeriesModal from 'InteractiveImport/Series/SelectSeriesModal';
 import SelectSeasonModal from 'InteractiveImport/Season/SelectSeasonModal';
 import SelectEpisodeModal from 'InteractiveImport/Episode/SelectEpisodeModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
+import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
 import SelectLanguageModal from 'InteractiveImport/Language/SelectLanguageModal';
 import InteractiveImportRowCellPlaceholder from './InteractiveImportRowCellPlaceholder';
 import styles from './InteractiveImportRow.css';
@@ -32,6 +33,7 @@ class InteractiveImportRow extends Component {
       isSelectSeriesModalOpen: false,
       isSelectSeasonModalOpen: false,
       isSelectEpisodeModalOpen: false,
+      isSelectReleaseGroupModalOpen: false,
       isSelectQualityModalOpen: false,
       isSelectLanguageModalOpen: false
     };
@@ -125,6 +127,10 @@ class InteractiveImportRow extends Component {
     this.setState({ isSelectEpisodeModalOpen: true });
   }
 
+  onSelectReleaseGroupPress = () => {
+    this.setState({ isSelectReleaseGroupModalOpen: true });
+  }
+
   onSelectQualityPress = () => {
     this.setState({ isSelectQualityModalOpen: true });
   }
@@ -148,6 +154,11 @@ class InteractiveImportRow extends Component {
     this.selectRowAfterChange(changed);
   }
 
+  onSelectReleaseGroupModalClose = (changed) => {
+    this.setState({ isSelectReleaseGroupModalOpen: false });
+    this.selectRowAfterChange(changed);
+  }
+
   onSelectQualityModalClose = (changed) => {
     this.setState({ isSelectQualityModalOpen: false });
     this.selectRowAfterChange(changed);
@@ -171,6 +182,7 @@ class InteractiveImportRow extends Component {
       episodes,
       quality,
       language,
+      releaseGroup,
       size,
       rejections,
       isReprocessing,
@@ -182,6 +194,7 @@ class InteractiveImportRow extends Component {
       isSelectSeriesModalOpen,
       isSelectSeasonModalOpen,
       isSelectEpisodeModalOpen,
+      isSelectReleaseGroupModalOpen,
       isSelectQualityModalOpen,
       isSelectLanguageModalOpen
     } = this.state;
@@ -202,6 +215,7 @@ class InteractiveImportRow extends Component {
     const showSeriesPlaceholder = isSelected && !series;
     const showSeasonNumberPlaceholder = isSelected && !!series && isNaN(seasonNumber) && !isReprocessing;
     const showEpisodeNumbersPlaceholder = isSelected && Number.isInteger(seasonNumber) && !episodes.length;
+    const showReleaseGroupPlaceholder = isSelected && !releaseGroup;
     const showQualityPlaceholder = isSelected && !quality;
     const showLanguagePlaceholder = isSelected && !language;
 
@@ -246,7 +260,6 @@ class InteractiveImportRow extends Component {
 
               /> : null
           }
-
         </TableRowCellButton>
 
         <TableRowCellButton
@@ -259,6 +272,17 @@ class InteractiveImportRow extends Component {
           }
         </TableRowCellButton>
 
+        <TableRowCellButton
+          title="Click to change release group"
+          onPress={this.onSelectReleaseGroupPress}
+        >
+          {
+            showReleaseGroupPlaceholder ?
+              <InteractiveImportRowCellPlaceholder /> :
+              releaseGroup
+          }
+        </TableRowCellButton>
+
         <TableRowCellButton
           className={styles.quality}
           title="Click to change quality"
@@ -354,6 +378,13 @@ class InteractiveImportRow extends Component {
           onModalClose={this.onSelectEpisodeModalClose}
         />
 
+        <SelectReleaseGroupModal
+          isOpen={isSelectReleaseGroupModalOpen}
+          ids={[id]}
+          releaseGroup={releaseGroup ?? ''}
+          onModalClose={this.onSelectReleaseGroupModalClose}
+        />
+
         <SelectQualityModal
           isOpen={isSelectQualityModalOpen}
           ids={[id]}
@@ -382,6 +413,7 @@ InteractiveImportRow.propTypes = {
   series: PropTypes.object,
   seasonNumber: PropTypes.number,
   episodes: PropTypes.arrayOf(PropTypes.object).isRequired,
+  releaseGroup: PropTypes.string,
   quality: PropTypes.object,
   language: PropTypes.object,
   size: PropTypes.number.isRequired,

frontend/src/InteractiveImport/ReleaseGroup/SelectReleaseGroupModal.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import SelectReleaseGroupModalContentConnector from './SelectReleaseGroupModalContentConnector';
+
+class SelectReleaseGroupModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <SelectReleaseGroupModalContentConnector
+          {...otherProps}
+          onModalClose={onModalClose}
+        />
+      </Modal>
+    );
+  }
+}
+
+SelectReleaseGroupModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectReleaseGroupModal;

frontend/src/InteractiveImport/ReleaseGroup/SelectReleaseGroupModalContent.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+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';
+
+class SelectReleaseGroupModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    const {
+      releaseGroup
+    } = props;
+
+    this.state = {
+      releaseGroup
+    };
+  }
+
+  //
+  // Listeners
+
+  onReleaseGroupChange = ({ value }) => {
+    this.setState({ releaseGroup: value });
+  }
+
+  onReleaseGroupSelect = () => {
+    this.props.onReleaseGroupSelect(this.state);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      onModalClose
+    } = this.props;
+
+    const {
+      releaseGroup
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Manual Import - Set Release Group
+        </ModalHeader>
+
+        <ModalBody>
+          <Form>
+            <FormGroup>
+              <FormLabel>Release Group</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.TEXT}
+                name="releaseGroup"
+                value={releaseGroup}
+                onChange={this.onReleaseGroupChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.SUCCESS}
+            onPress={this.onReleaseGroupSelect}
+          >
+            Set Release Group
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+SelectReleaseGroupModalContent.propTypes = {
+  releaseGroup: PropTypes.string.isRequired,
+  onReleaseGroupSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default SelectReleaseGroupModalContent;

frontend/src/InteractiveImport/ReleaseGroup/SelectReleaseGroupModalContentConnector.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { updateInteractiveImportItems, reprocessInteractiveImportItems } from 'Store/Actions/interactiveImportActions';
+import SelectReleaseGroupModalContent from './SelectReleaseGroupModalContent';
+
+const mapDispatchToProps = {
+  dispatchUpdateInteractiveImportItems: updateInteractiveImportItems,
+  dispatchReprocessInteractiveImportItems: reprocessInteractiveImportItems
+};
+
+class SelectReleaseGroupModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onReleaseGroupSelect = ({ releaseGroup }) => {
+    const {
+      ids,
+      dispatchUpdateInteractiveImportItems,
+      dispatchReprocessInteractiveImportItems
+    } = this.props;
+
+    dispatchUpdateInteractiveImportItems({
+      ids,
+      releaseGroup
+    });
+
+    dispatchReprocessInteractiveImportItems({ ids });
+
+    this.props.onModalClose(true);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectReleaseGroupModalContent
+        {...this.props}
+        onReleaseGroupSelect={this.onReleaseGroupSelect}
+      />
+    );
+  }
+}
+
+SelectReleaseGroupModalContentConnector.propTypes = {
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
+  dispatchUpdateInteractiveImportItems: PropTypes.func.isRequired,
+  dispatchReprocessInteractiveImportItems: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(null, mapDispatchToProps)(SelectReleaseGroupModalContentConnector);