New: Bulk select language and quality in Manual Import

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -16,24 +16,21 @@
 }
 
 .leftButtons,
-.centerButtons,
 .rightButtons {
   display: flex;
-  flex: 1 0 33%;
+  flex: 1 0 50%;
   flex-wrap: wrap;
 }
 
-.centerButtons {
-  justify-content: center;
-}
-
 .rightButtons {
   justify-content: flex-end;
 }
 
-.importMode {
+.importMode,
+.bulkSelect {
   composes: select from 'Components/Form/SelectInput.css';
 
+  margin-right: 10px;
   width: auto;
 }
 
@@ -44,7 +41,6 @@
 @media only screen and (max-width: $breakpointSmall) {
   .footer {
     .leftButtons,
-    .centerButtons,
     .rightButtons {
       flex-direction: column;
     }
@@ -53,10 +49,6 @@
       align-items: flex-start;
     }
 
-    .centerButtons {
-      align-items: center;
-    }
-
     .rightButtons {
       align-items: flex-end;
     }

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -20,6 +20,8 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+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 InteractiveImportRow from './InteractiveImportRow';
@@ -80,6 +82,17 @@ const filterExistingFilesOptions = {
   NEW: 'new'
 };
 
+const importModeOptions = [
+  { key: 'move', value: 'Move Files' },
+  { key: 'copy', value: 'Copy Files' }
+];
+
+const SELECT = 'select';
+const SERIES = 'series';
+const SEASON = 'season';
+const LANGUAGE = 'language';
+const QUALITY = 'quality';
+
 class InteractiveImportModalContent extends Component {
 
   //
@@ -94,8 +107,7 @@ class InteractiveImportModalContent extends Component {
       lastToggled: null,
       selectedState: {},
       invalidRowsSelected: [],
-      isSelectSeriesModalOpen: false,
-      isSelectSeasonModalOpen: false
+      selectModalOpen: null
     };
   }
 
@@ -155,20 +167,12 @@ class InteractiveImportModalContent extends Component {
     this.props.onImportModeChange(value);
   }
 
-  onSelectSeriesPress = () => {
-    this.setState({ isSelectSeriesModalOpen: true });
+  onSelectModalSelect = ({ value }) => {
+    this.setState({ selectModalOpen: value });
   }
 
-  onSelectSeasonPress = () => {
-    this.setState({ isSelectSeasonModalOpen: true });
-  }
-
-  onSelectSeriesModalClose = () => {
-    this.setState({ isSelectSeriesModalOpen: false });
-  }
-
-  onSelectSeasonModalClose = () => {
-    this.setState({ isSelectSeasonModalOpen: false });
+  onSelectModalClose = () => {
+    this.setState({ selectModalOpen: null });
   }
 
   //
@@ -200,19 +204,27 @@ class InteractiveImportModalContent extends Component {
       allUnselected,
       selectedState,
       invalidRowsSelected,
-      isSelectSeriesModalOpen,
-      isSelectSeasonModalOpen
+      selectModalOpen
     } = this.state;
 
     const selectedIds = this.getSelectedIds();
     const selectedItem = selectedIds.length ? _.find(items, { id: selectedIds[0] }) : null;
     const errorMessage = getErrorMessage(error, 'Unable to load manual import items');
 
-    const importModeOptions = [
-      { key: 'move', value: 'Move Files' },
-      { key: 'copy', value: 'Copy Files' }
+    const bulkSelectOptions = [
+      { key: SELECT, value: 'Select...', disabled: true },
+      { key: SEASON, value: 'Select Season' },
+      { key: LANGUAGE, value: 'Select Language' },
+      { key: QUALITY, value: 'Select Qualty' }
     ];
 
+    if (allowSeriesChange) {
+      bulkSelectOptions.splice(1, 0, {
+        key: SERIES,
+        value: 'Select Series'
+      });
+    }
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
@@ -308,28 +320,25 @@ class InteractiveImportModalContent extends Component {
         <ModalFooter className={styles.footer}>
           <div className={styles.leftButtons}>
             {
-              !downloadId && showImportMode &&
+              !downloadId && showImportMode ?
                 <SelectInput
                   className={styles.importMode}
                   name="importMode"
                   value={importMode}
                   values={importModeOptions}
                   onChange={this.onImportModeChange}
-                />
-            }
-          </div>
-
-          <div className={styles.centerButtons}>
-            {
-              allowSeriesChange &&
-                <Button onPress={this.onSelectSeriesPress}>
-                  Select Series
-                </Button>
+                /> :
+                null
             }
 
-            <Button onPress={this.onSelectSeasonPress}>
-              Select Season
-            </Button>
+            <SelectInput
+              className={styles.bulkSelect}
+              name="select"
+              value={SELECT}
+              values={bulkSelectOptions}
+              isDisabled={!selectedIds.length}
+              onChange={this.onSelectModalSelect}
+            />
           </div>
 
           <div className={styles.rightButtons}>
@@ -353,16 +362,32 @@ class InteractiveImportModalContent extends Component {
         </ModalFooter>
 
         <SelectSeriesModal
-          isOpen={isSelectSeriesModalOpen}
+          isOpen={selectModalOpen === SERIES}
           ids={selectedIds}
-          onModalClose={this.onSelectSeriesModalClose}
+          onModalClose={this.onSelectModalClose}
         />
 
         <SelectSeasonModal
-          isOpen={isSelectSeasonModalOpen}
+          isOpen={selectModalOpen === SEASON}
           ids={selectedIds}
           seriesId={selectedItem && selectedItem.series && selectedItem.series.id}
-          onModalClose={this.onSelectSeasonModalClose}
+          onModalClose={this.onSelectModalClose}
+        />
+
+        <SelectLanguageModal
+          isOpen={selectModalOpen === LANGUAGE}
+          ids={selectedIds}
+          languageId={0}
+          onModalClose={this.onSelectModalClose}
+        />
+
+        <SelectQualityModal
+          isOpen={selectModalOpen === QUALITY}
+          ids={selectedIds}
+          qualityId={0}
+          proper={false}
+          real={false}
+          onModalClose={this.onSelectModalClose}
         />
       </ModalContent>
     );

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -328,7 +328,7 @@ class InteractiveImportRow extends Component {
 
         <SelectQualityModal
           isOpen={isSelectQualityModalOpen}
-          id={id}
+          ids={[id]}
           qualityId={quality ? quality.quality.id : 0}
           proper={quality ? quality.revision.version > 1 : false}
           real={quality ? quality.revision.real > 0 : false}
@@ -337,7 +337,7 @@ class InteractiveImportRow extends Component {
 
         <SelectLanguageModal
           isOpen={isSelectLanguageModalOpen}
-          id={id}
+          ids={[id]}
           languageId={language ? language.id : 0}
           onModalClose={this.onSelectLanguageModalClose}
         />