New: Bulk select language and quality in Manual Import

frontend/src/Activity/History/Details/HistoryDetails.css

@@ -1,5 +1,5 @@
 .description {
-  composes: title from 'Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: description from 'Components/DescriptionList/DescriptionListItemDescription.css';
 
   overflow-wrap: break-word;
 }

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,
+      selectModalOpen: null
-      isSelectSeasonModalOpen: false
     };
   }
 
@@ -155,20 +167,12 @@ class InteractiveImportModalContent extends Component {
     this.props.onImportModeChange(value);
   }
 
-  onSelectSeriesPress = () => {
+  onSelectModalSelect = ({ value }) => {
-    this.setState({ isSelectSeriesModalOpen: true });
+    this.setState({ selectModalOpen: value });
   }
 
-  onSelectSeasonPress = () => {
+  onSelectModalClose = () => {
-    this.setState({ isSelectSeasonModalOpen: true });
+    this.setState({ selectModalOpen: null });
-  }
-
-  onSelectSeriesModalClose = () => {
-    this.setState({ isSelectSeriesModalOpen: false });
-  }
-
-  onSelectSeasonModalClose = () => {
-    this.setState({ isSelectSeasonModalOpen: false });
   }
 
   //
@@ -200,19 +204,27 @@ class InteractiveImportModalContent extends Component {
       allUnselected,
       selectedState,
       invalidRowsSelected,
-      isSelectSeriesModalOpen,
+      selectModalOpen
-      isSelectSeasonModalOpen
     } = 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 = [
+    const bulkSelectOptions = [
-      { key: 'move', value: 'Move Files' },
+      { key: SELECT, value: 'Select...', disabled: true },
-      { key: 'copy', value: 'Copy Files' }
+      { 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}
+                /> :
+                null
+            }
+
+            <SelectInput
+              className={styles.bulkSelect}
+              name="select"
+              value={SELECT}
+              values={bulkSelectOptions}
+              isDisabled={!selectedIds.length}
+              onChange={this.onSelectModalSelect}
             />
-            }
-          </div>
-
-          <div className={styles.centerButtons}>
-            {
-              allowSeriesChange &&
-                <Button onPress={this.onSelectSeriesPress}>
-                  Select Series
-                </Button>
-            }
-
-            <Button onPress={this.onSelectSeasonPress}>
-              Select Season
-            </Button>
           </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}
         />

frontend/src/InteractiveImport/Language/SelectLanguageModalContentConnector.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchLanguageProfileSchema } from 'Store/Actions/settingsActions';
-import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import { updateInteractiveImportItems } from 'Store/Actions/interactiveImportActions';
 import SelectLanguageModalContent from './SelectLanguageModalContent';
 
 function createMapStateToProps() {
@@ -29,8 +29,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchLanguageProfileSchema,
+  dispatchFetchLanguageProfileSchema: fetchLanguageProfileSchema,
-  updateInteractiveImportItem
+  dispatchUpdateInteractiveImportItems: updateInteractiveImportItems
 };
 
 class SelectLanguageModalContentConnector extends Component {
@@ -40,7 +40,7 @@ class SelectLanguageModalContentConnector extends Component {
 
   componentDidMount = () => {
     if (!this.props.isPopulated) {
-      this.props.fetchLanguageProfileSchema();
+      this.props.dispatchFetchLanguageProfileSchema();
     }
   }
 
@@ -52,8 +52,8 @@ class SelectLanguageModalContentConnector extends Component {
     const language = _.find(this.props.items,
       (item) => item.language.id === languageId).language;
 
-    this.props.updateInteractiveImportItem({
+    this.props.dispatchUpdateInteractiveImportItems({
-      id: this.props.id,
+      ids: this.props.ids,
       language
     });
 
@@ -74,13 +74,13 @@ class SelectLanguageModalContentConnector extends Component {
 }
 
 SelectLanguageModalContentConnector.propTypes = {
-  id: PropTypes.number.isRequired,
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  fetchLanguageProfileSchema: PropTypes.func.isRequired,
+  dispatchFetchLanguageProfileSchema: PropTypes.func.isRequired,
-  updateInteractiveImportItem: PropTypes.func.isRequired,
+  dispatchUpdateInteractiveImportItems: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/InteractiveImport/Quality/SelectQualityModalContentConnector.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import getQualities from 'Utilities/Quality/getQualities';
 import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
-import { updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import { updateInteractiveImportItems } from 'Store/Actions/interactiveImportActions';
 import SelectQualityModalContent from './SelectQualityModalContent';
 
 function createMapStateToProps() {
@@ -30,8 +30,8 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchQualityProfileSchema,
+  dispatchFetchQualityProfileSchema: fetchQualityProfileSchema,
-  updateInteractiveImportItem
+  dispatchUpdateInteractiveImportItems: updateInteractiveImportItems
 };
 
 class SelectQualityModalContentConnector extends Component {
@@ -41,7 +41,7 @@ class SelectQualityModalContentConnector extends Component {
 
   componentDidMount = () => {
     if (!this.props.isPopulated) {
-      this.props.fetchQualityProfileSchema();
+      this.props.dispatchFetchQualityProfileSchema();
     }
   }
 
@@ -57,8 +57,8 @@ class SelectQualityModalContentConnector extends Component {
       real: real ? 1 : 0
     };
 
-    this.props.updateInteractiveImportItem({
+    this.props.dispatchUpdateInteractiveImportItems({
-      id: this.props.id,
+      ids: this.props.ids,
       quality: {
         quality,
         revision
@@ -82,13 +82,13 @@ class SelectQualityModalContentConnector extends Component {
 }
 
 SelectQualityModalContentConnector.propTypes = {
-  id: PropTypes.number.isRequired,
+  ids: PropTypes.arrayOf(PropTypes.number).isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  fetchQualityProfileSchema: PropTypes.func.isRequired,
+  dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
-  updateInteractiveImportItem: PropTypes.func.isRequired,
+  dispatchUpdateInteractiveImportItems: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Store/Actions/interactiveImportActions.js

@@ -68,6 +68,7 @@ export const persistState = [
 export const FETCH_INTERACTIVE_IMPORT_ITEMS = 'interactiveImport/fetchInteractiveImportItems';
 export const SET_INTERACTIVE_IMPORT_SORT = 'interactiveImport/setInteractiveImportSort';
 export const UPDATE_INTERACTIVE_IMPORT_ITEM = 'interactiveImport/updateInteractiveImportItem';
+export const UPDATE_INTERACTIVE_IMPORT_ITEMS = 'interactiveImport/updateInteractiveImportItems';
 export const CLEAR_INTERACTIVE_IMPORT = 'interactiveImport/clearInteractiveImport';
 export const ADD_RECENT_FOLDER = 'interactiveImport/addRecentFolder';
 export const REMOVE_RECENT_FOLDER = 'interactiveImport/removeRecentFolder';
@@ -83,6 +84,7 @@ export const CLEAR_INTERACTIVE_IMPORT_EPISODES = 'interactiveImport/clearInterac
 export const fetchInteractiveImportItems = createThunk(FETCH_INTERACTIVE_IMPORT_ITEMS);
 export const setInteractiveImportSort = createAction(SET_INTERACTIVE_IMPORT_SORT);
 export const updateInteractiveImportItem = createAction(UPDATE_INTERACTIVE_IMPORT_ITEM);
+export const updateInteractiveImportItems = createAction(UPDATE_INTERACTIVE_IMPORT_ITEMS);
 export const clearInteractiveImport = createAction(CLEAR_INTERACTIVE_IMPORT);
 export const addRecentFolder = createAction(ADD_RECENT_FOLDER);
 export const removeRecentFolder = createAction(REMOVE_RECENT_FOLDER);
@@ -152,6 +154,23 @@ export const reducers = createHandleActions({
     return newState;
   },
 
+  [UPDATE_INTERACTIVE_IMPORT_ITEMS]: (state, { payload }) => {
+    const ids = payload.ids;
+    const newState = Object.assign({}, state);
+    const items = [...newState.items];
+
+    ids.forEach((id) => {
+      const index = items.findIndex((item) => item.id === id);
+      const item = Object.assign({}, items[index], payload);
+
+      items.splice(index, 1, item);
+    });
+
+    newState.items = items;
+
+    return newState;
+  },
+
   [ADD_RECENT_FOLDER]: function(state, { payload }) {
     const folder = payload.folder;
     const recentFolder = { folder, lastUsed: moment().toISOString() };