diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css index 2a7c4da4c..d50f3a261 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css +++ b/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; } diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js index c93a41c24..066da0966 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js +++ b/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 ( @@ -429,41 +430,25 @@ class InteractiveImportModalContent extends Component {
{ - !downloadId && showImportMode && + !downloadId && showImportMode ? - } -
- -
- { - allowArtistChange && - + /> : + null } - - - + onChange={this.onSelectModalSelect} + /> { showClearTracks ? ( @@ -505,23 +490,32 @@ class InteractiveImportModalContent extends Component { 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} + /> + + 1 : false} real={quality ? quality.revision.real > 0 : false} diff --git a/frontend/src/InteractiveImport/Quality/SelectQualityModalContentConnector.js b/frontend/src/InteractiveImport/Quality/SelectQualityModalContentConnector.js index 20a49c768..1cf55cde6 100644 --- a/frontend/src/InteractiveImport/Quality/SelectQualityModalContentConnector.js +++ b/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 }; diff --git a/frontend/src/Store/Actions/interactiveImportActions.js b/frontend/src/Store/Actions/interactiveImportActions.js index bd64baf28..2980088d1 100644 --- a/frontend/src/Store/Actions/interactiveImportActions.js +++ b/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() };