New: Bulk Select Quality Interactive Import

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -16,25 +16,21 @@
 }
 
 .leftButtons,
-.centerButtons,
 .rightButtons {
   display: flex;
-  flex: 1 2 20%;
+  flex: 1 0 50%;
   flex-wrap: wrap;
 }
 
-.centerButtons {
-  justify-content: center;
-  flex: 2 1 60%;
-}
-
 .rightButtons {
   justify-content: flex-end;
 }
 
-.importMode {
+.importMode,
+.bulkSelect {
   composes: select from '~Components/Form/SelectInput.css';
 
+  margin-right: 10px;
   width: auto;
 }
 
@@ -45,7 +41,6 @@
 @media only screen and (max-width: $breakpointSmall) {
   .footer {
     .leftButtons,
-    .centerButtons,
     .rightButtons {
       flex-direction: column;
     }
@@ -54,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,7 @@ 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 SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectArtistModal from 'InteractiveImport/Artist/SelectArtistModal';
 import SelectAlbumModal from 'InteractiveImport/Album/SelectAlbumModal';
 import SelectAlbumReleaseModal from 'InteractiveImport/AlbumRelease/SelectAlbumReleaseModal';
@@ -76,6 +77,17 @@ const filterExistingFilesOptions = {
   NEW: 'new'
 };
 
+const importModeOptions = [
+  { key: 'move', value: 'Move Files' },
+  { key: 'copy', value: 'Copy Files' }
+];
+
+const SELECT = 'select';
+const ARTIST = 'artist';
+const ALBUM = 'album';
+const ALBUM_RELEASE = 'albumRelease';
+const QUALITY = 'quality';
+
 const replaceExistingFilesOptions = {
   COMBINE: 'combine',
   DELETE: 'delete'
@@ -95,9 +107,7 @@ class InteractiveImportModalContent extends Component {
       lastToggled: null,
       selectedState: {},
       invalidRowsSelected: [],
-      isSelectArtistModalOpen: false,
-      isSelectAlbumModalOpen: false,
-      isSelectAlbumReleaseModalOpen: false,
+      selectModalOpen: null,
       albumsImported: [],
       isConfirmImportModalOpen: false,
       showClearTracks: false,
@@ -204,16 +214,8 @@ class InteractiveImportModalContent extends Component {
     this.props.onImportModeChange(value);
   }
 
-  onSelectArtistPress = () => {
-    this.setState({ isSelectArtistModalOpen: true });
-  }
-
-  onSelectAlbumPress = () => {
-    this.setState({ isSelectAlbumModalOpen: true });
-  }
-
-  onSelectAlbumReleasePress = () => {
-    this.setState({ isSelectAlbumReleaseModalOpen: true });
+  onSelectModalSelect = ({ value }) => {
+    this.setState({ selectModalOpen: value });
   }
 
   onClearTrackMappingPress = () => {
@@ -232,16 +234,8 @@ class InteractiveImportModalContent extends Component {
     this.props.saveInteractiveImportItem({ id: this.getSelectedIds() });
   }
 
-  onSelectArtistModalClose = () => {
-    this.setState({ isSelectArtistModalOpen: false });
-  }
-
-  onSelectAlbumModalClose = () => {
-    this.setState({ isSelectAlbumModalOpen: false });
-  }
-
-  onSelectAlbumReleaseModalClose = () => {
-    this.setState({ isSelectAlbumReleaseModalOpen: false });
+  onSelectModalClose = () => {
+    this.setState({ selectModalOpen: null });
   }
 
   onConfirmImportModalClose = () => {
@@ -280,9 +274,7 @@ class InteractiveImportModalContent extends Component {
       allUnselected,
       selectedState,
       invalidRowsSelected,
-      isSelectArtistModalOpen,
-      isSelectAlbumModalOpen,
-      isSelectAlbumReleaseModalOpen,
+      selectModalOpen,
       albumsImported,
       isConfirmImportModalOpen,
       showClearTracks,
@@ -293,11 +285,20 @@ class InteractiveImportModalContent extends Component {
     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: ALBUM, value: 'Select Album' },
+      { key: ALBUM_RELEASE, value: 'Select Album Release' },
+      { key: QUALITY, value: 'Select Quality' }
     ];
 
+    if (allowArtistChange) {
+      bulkSelectOptions.splice(1, 0, {
+        key: ARTIST,
+        value: 'Select Artist'
+      });
+    }
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
@@ -429,41 +430,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}>
-            {
-              allowArtistChange &&
-                <Button
-                  onPress={this.onSelectArtistPress}
-                  isDisabled={!selectedIds.length}
-                >
-                  Select Artist
-                </Button>
+                /> :
+                null
             }
 
-            <Button
-              onPress={this.onSelectAlbumPress}
+            <SelectInput
+              className={styles.bulkSelect}
+              name="select"
+              value={SELECT}
+              values={bulkSelectOptions}
               isDisabled={!selectedIds.length}
-            >
-              Select Album
-            </Button>
-
-            <Button
-              onPress={this.onSelectAlbumReleasePress}
-              isDisabled={!selectedIds.length}
-            >
-              Select Release
-            </Button>
+              onChange={this.onSelectModalSelect}
+            />
 
             {
               showClearTracks ? (
@@ -505,23 +490,32 @@ class InteractiveImportModalContent extends Component {
         </ModalFooter>
 
         <SelectArtistModal
-          isOpen={isSelectArtistModalOpen}
+          isOpen={selectModalOpen === ARTIST}
           ids={selectedIds}
-          onModalClose={this.onSelectArtistModalClose}
+          onModalClose={this.onSelectModalClose}
         />
 
         <SelectAlbumModal
-          isOpen={isSelectAlbumModalOpen}
+          isOpen={selectModalOpen === ALBUM}
           ids={selectedIds}
           artistId={selectedItem && selectedItem.artist && selectedItem.artist.id}
-          onModalClose={this.onSelectAlbumModalClose}
+          onModalClose={this.onSelectModalClose}
         />
 
         <SelectAlbumReleaseModal
-          isOpen={isSelectAlbumReleaseModalOpen}
+          isOpen={selectModalOpen === ALBUM_RELEASE}
           importIdsByAlbum={_.chain(items).filter((x) => x.album).groupBy((x) => x.album.id).mapValues((x) => x.map((y) => y.id)).value()}
           albums={_.chain(items).filter((x) => x.album).keyBy((x) => x.album.id).mapValues((x) => ({ matchedReleaseId: x.albumReleaseId, album: x.album })).values().value()}
-          onModalClose={this.onSelectAlbumReleaseModalClose}
+          onModalClose={this.onSelectModalClose}
+        />
+
+        <SelectQualityModal
+          isOpen={selectModalOpen === QUALITY}
+          ids={selectedIds}
+          qualityId={0}
+          proper={false}
+          real={false}
+          onModalClose={this.onSelectModalClose}
         />
 
         <ConfirmImportModal

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -331,7 +331,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}

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,
-  updateInteractiveImportItem
+  dispatchFetchQualityProfileSchema: fetchQualityProfileSchema,
+  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({
-      id: this.props.id,
+    this.props.dispatchUpdateInteractiveImportItems({
+      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,
-  updateInteractiveImportItem: PropTypes.func.isRequired,
+  dispatchFetchQualityProfileSchema: PropTypes.func.isRequired,
+  dispatchUpdateInteractiveImportItems: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

frontend/src/Store/Actions/interactiveImportActions.js

@@ -78,21 +78,22 @@ export const persistState = [
 //
 // Actions Types
 
-export const FETCH_INTERACTIVE_IMPORT_ITEMS = 'FETCH_INTERACTIVE_IMPORT_ITEMS';
-export const UPDATE_INTERACTIVE_IMPORT_ITEM = 'UPDATE_INTERACTIVE_IMPORT_ITEM';
-export const SAVE_INTERACTIVE_IMPORT_ITEM = 'SAVE_INTERACTIVE_IMPORT_ITEM';
-export const SET_INTERACTIVE_IMPORT_SORT = 'SET_INTERACTIVE_IMPORT_SORT';
-export const CLEAR_INTERACTIVE_IMPORT = 'CLEAR_INTERACTIVE_IMPORT';
-export const ADD_RECENT_FOLDER = 'ADD_RECENT_FOLDER';
-export const REMOVE_RECENT_FOLDER = 'REMOVE_RECENT_FOLDER';
-export const SET_INTERACTIVE_IMPORT_MODE = 'SET_INTERACTIVE_IMPORT_MODE';
+export const FETCH_INTERACTIVE_IMPORT_ITEMS = 'interactiveImport/fetchInteractiveImportItems';
+export const SAVE_INTERACTIVE_IMPORT_ITEM = 'interactiveImport/saveInteractiveImportItem';
+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';
+export const SET_INTERACTIVE_IMPORT_MODE = 'interactiveImport/setInteractiveImportMode';
 
-export const FETCH_INTERACTIVE_IMPORT_ALBUMS = 'FETCH_INTERACTIVE_IMPORT_ALBUMS';
-export const SET_INTERACTIVE_IMPORT_ALBUMS_SORT = 'SET_INTERACTIVE_IMPORT_ALBUMS_SORT';
-export const CLEAR_INTERACTIVE_IMPORT_ALBUMS = 'CLEAR_INTERACTIVE_IMPORT_ALBUMS';
+export const FETCH_INTERACTIVE_IMPORT_ALBUMS = 'interactiveImport/fetchInteractiveImportAlbums';
+export const SET_INTERACTIVE_IMPORT_ALBUMS_SORT = 'interactiveImport/clearInteractiveImportAlbumsSort';
+export const CLEAR_INTERACTIVE_IMPORT_ALBUMS = 'interactiveImport/clearInteractiveImportAlbums';
 
-export const FETCH_INTERACTIVE_IMPORT_TRACKFILES = 'FETCH_INTERACTIVE_IMPORT_TRACKFILES';
-export const CLEAR_INTERACTIVE_IMPORT_TRACKFILES = 'CLEAR_INTERACTIVE_IMPORT_TRACKFILES';
+export const FETCH_INTERACTIVE_IMPORT_TRACKFILES = 'interactiveImport/fetchInteractiveImportTrackFiles';
+export const CLEAR_INTERACTIVE_IMPORT_TRACKFILES = 'interactiveImport/clearInteractiveImportTrackFiles';
 
 //
 // Action Creators
@@ -100,6 +101,7 @@ export const CLEAR_INTERACTIVE_IMPORT_TRACKFILES = 'CLEAR_INTERACTIVE_IMPORT_TRA
 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 saveInteractiveImportItem = createThunk(SAVE_INTERACTIVE_IMPORT_ITEM);
 export const clearInteractiveImport = createAction(CLEAR_INTERACTIVE_IMPORT);
 export const addRecentFolder = createAction(ADD_RECENT_FOLDER);
@@ -177,6 +179,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() };