[UI Work] Interactive Import, More Artist Detail

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -15,8 +15,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 SelectArtistModal from 'InteractiveImport/Series/SelectArtistModal';
-import SelectSeasonModal from 'InteractiveImport/Season/SelectSeasonModal';
+import SelectArtistModal from 'InteractiveImport/Artist/SelectArtistModal';
+import SelectAlbumModal from 'InteractiveImport/Album/SelectAlbumModal';
 import InteractiveImportRow from './InteractiveImportRow';
 import styles from './InteractiveImportModalContent.css';
 
@@ -28,19 +28,19 @@ const columns = [
     isVisible: true
   },
   {
-    name: 'series',
-    label: 'Series',
+    name: 'artist',
+    label: 'Artist',
     isSortable: true,
     isVisible: true
   },
   {
-    name: 'season',
-    label: 'Season',
+    name: 'album',
+    label: 'Album',
     isVisible: true
   },
   {
-    name: 'episodes',
-    label: 'Episode(s)',
+    name: 'tracks',
+    label: 'Track(s)',
     isVisible: true
   },
   {
@@ -79,7 +79,7 @@ class InteractiveImportModalContent extends Component {
       selectedState: {},
       invalidRowsSelected: [],
       isSelectArtistModalOpen: false,
-      isSelectSeasonModalOpen: false
+      isSelectAlbumModalOpen: false
     };
   }
 
@@ -131,16 +131,16 @@ class InteractiveImportModalContent extends Component {
     this.setState({ isSelectArtistModalOpen: true });
   }
 
-  onSelectSeasonPress = () => {
-    this.setState({ isSelectSeasonModalOpen: true });
+  onSelectAlbumPress = () => {
+    this.setState({ isSelectAlbumModalOpen: true });
   }
 
   onSelectArtistModalClose = () => {
     this.setState({ isSelectArtistModalOpen: false });
   }
 
-  onSelectSeasonModalClose = () => {
-    this.setState({ isSelectSeasonModalOpen: false });
+  onSelectAlbumModalClose = () => {
+    this.setState({ isSelectAlbumModalOpen: false });
   }
 
   //
@@ -169,7 +169,7 @@ class InteractiveImportModalContent extends Component {
       selectedState,
       invalidRowsSelected,
       isSelectArtistModalOpen,
-      isSelectSeasonModalOpen
+      isSelectAlbumModalOpen
     } = this.state;
 
     const selectedIds = this.getSelectedIds();
@@ -250,11 +250,11 @@ class InteractiveImportModalContent extends Component {
 
           <div className={downloadId ? styles.leftButtons : styles.centerButtons}>
             <Button onPress={this.onSelectArtistPress}>
-              Select Series
+              Select Artist
             </Button>
 
-            <Button onPress={this.onSelectSeasonPress}>
-              Select Season
+            <Button onPress={this.onSelectAlbumPress}>
+              Select Album
             </Button>
           </div>
 
@@ -284,11 +284,11 @@ class InteractiveImportModalContent extends Component {
           onModalClose={this.onSelectArtistModalClose}
         />
 
-        <SelectSeasonModal
-          isOpen={isSelectSeasonModalOpen}
+        <SelectAlbumModal
+          isOpen={isSelectAlbumModalOpen}
           ids={selectedIds}
           artistId={selectedItem && selectedItem.series && selectedItem.series.id}
-          onModalClose={this.onSelectSeasonModalClose}
+          onModalClose={this.onSelectAlbumModalClose}
         />
       </ModalContent>
     );

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -71,31 +71,32 @@ class InteractiveImportModalContentConnector extends Component {
 
       if (isSelected) {
         const {
-          series,
-          seasonNumber,
-          episodes,
+          artist,
+          album,
+          tracks,
           quality
         } = item;
 
-        if (!series) {
-          this.setState({ interactiveImportErrorMessage: 'Series must be chosen for each selected file' });
+        if (!artist) {
+          this.setState({ interactiveImportErrorMessage: 'Artist must be chosen for each selected file' });
           return false;
         }
 
-        if (isNaN(seasonNumber)) {
-          this.setState({ interactiveImportErrorMessage: 'Season must be chosen for each selected file' });
+        if (!album) {
+          this.setState({ interactiveImportErrorMessage: 'Album must be chosen for each selected file' });
           return false;
         }
 
-        if (!episodes || !episodes.length) {
-          this.setState({ interactiveImportErrorMessage: 'One or more episodes must be chosen for each selected file' });
+        if (!tracks || !tracks.length) {
+          this.setState({ interactiveImportErrorMessage: 'One or more tracks must be chosen for each selected file' });
           return false;
         }
 
         files.push({
           path: item.path,
-          artistId: series.id,
-          episodeIds: _.map(episodes, 'id'),
+          artistId: artist.id,
+          albumId: album.id,
+          trackIds: _.map(tracks, 'id'),
           quality,
           downloadId: this.props.downloadId
         });

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -9,9 +9,9 @@ import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Popover from 'Components/Tooltip/Popover';
 import EpisodeQuality from 'Episode/EpisodeQuality';
-import SelectArtistModal from 'InteractiveImport/Series/SelectArtistModal';
-import SelectSeasonModal from 'InteractiveImport/Season/SelectSeasonModal';
-import SelectEpisodeModal from 'InteractiveImport/Episode/SelectEpisodeModal';
+import SelectArtistModal from 'InteractiveImport/Artist/SelectArtistModal';
+import SelectAlbumModal from 'InteractiveImport/Album/SelectAlbumModal';
+import SelectTrackModal from 'InteractiveImport/Track/SelectTrackModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import InteractiveImportRowCellPlaceholder from './InteractiveImportRowCellPlaceholder';
 import styles from './InteractiveImportRow.css';
@@ -26,8 +26,8 @@ class InteractiveImportRow extends Component {
 
     this.state = {
       isSelectArtistModalOpen: false,
-      isSelectSeasonModalOpen: false,
-      isSelectEpisodeModalOpen: false,
+      isSelectAlbumModalOpen: false,
+      isSelectTrackModalOpen: false,
       isSelectQualityModalOpen: false
     };
   }
@@ -35,13 +35,13 @@ class InteractiveImportRow extends Component {
   componentDidMount() {
     const {
       id,
-      series,
-      seasonNumber,
-      episodes,
+      artist,
+      album,
+      tracks,
       quality
     } = this.props;
 
-    if (series && seasonNumber !== undefined && episodes.length && quality) {
+    if (artist && album !== undefined && tracks.length && quality) {
       this.props.onSelectedChange({ id, value: true });
     }
   }
@@ -49,9 +49,9 @@ class InteractiveImportRow extends Component {
   componentDidUpdate(prevProps) {
     const {
       id,
-      series,
-      seasonNumber,
-      episodes,
+      artist,
+      album,
+      tracks,
       quality,
       isSelected,
       onValidRowChange
@@ -61,7 +61,7 @@ class InteractiveImportRow extends Component {
       return;
     }
 
-    const isValid = !!(series && seasonNumber != null && episodes.length && quality);
+    const isValid = !!(artist && album != null && tracks.length && quality);
 
     if (isSelected && !isValid) {
       onValidRowChange(id, false);
@@ -91,12 +91,12 @@ class InteractiveImportRow extends Component {
     this.setState({ isSelectArtistModalOpen: true });
   }
 
-  onSelectSeasonPress = () => {
-    this.setState({ isSelectSeasonModalOpen: true });
+  onSelectAlbumPress = () => {
+    this.setState({ isSelectAlbumModalOpen: true });
   }
 
-  onSelectEpisodePress = () => {
-    this.setState({ isSelectEpisodeModalOpen: true });
+  onSelectTrackPress = () => {
+    this.setState({ isSelectTrackModalOpen: true });
   }
 
   onSelectQualityPress = () => {
@@ -108,13 +108,13 @@ class InteractiveImportRow extends Component {
     this.selectRowAfterChange(changed);
   }
 
-  onSelectSeasonModalClose = (changed) => {
-    this.setState({ isSelectSeasonModalOpen: false });
+  onSelectAlbumModalClose = (changed) => {
+    this.setState({ isSelectAlbumModalOpen: false });
     this.selectRowAfterChange(changed);
   }
 
-  onSelectEpisodeModalClose = (changed) => {
-    this.setState({ isSelectEpisodeModalOpen: false });
+  onSelectTrackModalClose = (changed) => {
+    this.setState({ isSelectTrackModalOpen: false });
     this.selectRowAfterChange(changed);
   }
 
@@ -130,9 +130,9 @@ class InteractiveImportRow extends Component {
     const {
       id,
       relativePath,
-      series,
-      seasonNumber,
-      episodes,
+      artist,
+      album,
+      tracks,
       quality,
       size,
       rejections,
@@ -142,18 +142,19 @@ class InteractiveImportRow extends Component {
 
     const {
       isSelectArtistModalOpen,
-      isSelectSeasonModalOpen,
-      isSelectEpisodeModalOpen,
+      isSelectAlbumModalOpen,
+      isSelectTrackModalOpen,
       isSelectQualityModalOpen
     } = this.state;
 
-    const seriesTitle = series ? series.title : '';
-    const episodeNumbers = episodes.map((episode) => episode.episodeNumber)
+    const seriesTitle = artist ? artist.artistName : '';
+    const albumTitle = album ? album.title : '';
+    const trackNumbers = tracks.map((episode) => episode.trackNumber)
                                    .join(', ');
 
-    const showSeriesPlaceholder = isSelected && !series;
-    const showSeasonNumberPlaceholder = isSelected && !!series && isNaN(seasonNumber);
-    const showEpisodeNumbersPlaceholder = isSelected && Number.isInteger(seasonNumber) && !episodes.length;
+    const showSeriesPlaceholder = isSelected && !artist;
+    const showSeasonNumberPlaceholder = isSelected && !!artist && !album;
+    const showEpisodeNumbersPlaceholder = isSelected && !!album && !tracks.length;
 
     return (
       <TableRow>
@@ -179,20 +180,20 @@ class InteractiveImportRow extends Component {
         </TableRowCellButton>
 
         <TableRowCellButton
-          isDisabled={!series}
-          onPress={this.onSelectSeasonPress}
+          isDisabled={!artist}
+          onPress={this.onSelectAlbumPress}
         >
           {
-            showSeasonNumberPlaceholder ? <InteractiveImportRowCellPlaceholder /> : seasonNumber
+            showSeasonNumberPlaceholder ? <InteractiveImportRowCellPlaceholder /> : albumTitle
           }
         </TableRowCellButton>
 
         <TableRowCellButton
-          isDisabled={!series || isNaN(seasonNumber)}
-          onPress={this.onSelectEpisodePress}
+          isDisabled={!artist || !album}
+          onPress={this.onSelectTrackPress}
         >
           {
-            showEpisodeNumbersPlaceholder ? <InteractiveImportRowCellPlaceholder /> : episodeNumbers
+            showEpisodeNumbersPlaceholder ? <InteractiveImportRowCellPlaceholder /> : trackNumbers
           }
         </TableRowCellButton>
 
@@ -244,19 +245,19 @@ class InteractiveImportRow extends Component {
           onModalClose={this.onSelectArtistModalClose}
         />
 
-        <SelectSeasonModal
-          isOpen={isSelectSeasonModalOpen}
+        <SelectAlbumModal
+          isOpen={isSelectAlbumModalOpen}
           ids={[id]}
-          artistId={series && series.id}
-          onModalClose={this.onSelectSeasonModalClose}
+          artistId={artist && artist.id}
+          onModalClose={this.onSelectAlbumModalClose}
         />
 
-        <SelectEpisodeModal
-          isOpen={isSelectEpisodeModalOpen}
+        <SelectTrackModal
+          isOpen={isSelectTrackModalOpen}
           id={id}
-          artistId={series && series.id}
-          seasonNumber={seasonNumber}
-          onModalClose={this.onSelectEpisodeModalClose}
+          artistId={artist && artist.id}
+          albumId={album && album.id}
+          onModalClose={this.onSelectTrackModalClose}
         />
 
         <SelectQualityModal
@@ -276,9 +277,9 @@ class InteractiveImportRow extends Component {
 InteractiveImportRow.propTypes = {
   id: PropTypes.number.isRequired,
   relativePath: PropTypes.string.isRequired,
-  series: PropTypes.object,
-  seasonNumber: PropTypes.number,
-  episodes: PropTypes.arrayOf(PropTypes.object).isRequired,
+  artist: PropTypes.object,
+  album: PropTypes.object,
+  tracks: PropTypes.arrayOf(PropTypes.object).isRequired,
   quality: PropTypes.object,
   size: PropTypes.number.isRequired,
   rejections: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -288,7 +289,7 @@ InteractiveImportRow.propTypes = {
 };
 
 InteractiveImportRow.defaultProps = {
-  episodes: []
+  tracks: []
 };
 
 export default InteractiveImportRow;