diff --git a/frontend/src/AlbumStudio/AlbumStudio.js b/frontend/src/AlbumStudio/AlbumStudio.js index bae55799b..b80ddf891 100644 --- a/frontend/src/AlbumStudio/AlbumStudio.js +++ b/frontend/src/AlbumStudio/AlbumStudio.js @@ -25,10 +25,6 @@ import AlbumStudioFooter from './AlbumStudioFooter'; import styles from './AlbumStudio.css'; const columns = [ - { - name: 'monitored', - isVisible: true - }, { name: 'status', isVisible: true @@ -94,15 +90,15 @@ class AlbumStudio extends Component { // nasty hack to fix react-virtualized jumping incorrectly // due to variable row heights - if (scrollIndex != null) { + if (scrollIndex != null && scrollIndex > 0) { if (jumpCount === 0) { this.setState({ - scrollIndex: scrollIndex + 1, + scrollIndex: scrollIndex - 1, jumpCount: 1 }); } else if (jumpCount === 1) { this.setState({ - scrollIndex: scrollIndex - 1, + scrollIndex: scrollIndex + 1, jumpCount: 2 }); } else { diff --git a/frontend/src/AlbumStudio/AlbumStudioRow.css b/frontend/src/AlbumStudio/AlbumStudioRow.css index d998d68c0..d8def1d50 100644 --- a/frontend/src/AlbumStudio/AlbumStudioRow.css +++ b/frontend/src/AlbumStudio/AlbumStudioRow.css @@ -12,18 +12,13 @@ align-items: center; } -.status, -.monitored { +.status { composes: cell from '~Components/Table/Cells/TableRowCell.css'; - padding: 0; display: flex; align-items: center; - width: 20px; -} - -.statusIcon { - width: 20px !important; + padding: 0; + min-width: 60px; } .title { diff --git a/frontend/src/AlbumStudio/AlbumStudioRow.js b/frontend/src/AlbumStudio/AlbumStudioRow.js index 23e8a8204..87de5ab93 100644 --- a/frontend/src/AlbumStudio/AlbumStudioRow.js +++ b/frontend/src/AlbumStudio/AlbumStudioRow.js @@ -1,10 +1,8 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { icons } from 'Helpers/Props'; -import Icon from 'Components/Icon'; -import MonitorToggleButton from 'Components/MonitorToggleButton'; import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell'; import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell'; +import ArtistStatusCell from 'Artist/Index/Table/ArtistStatusCell'; import ArtistNameLink from 'Artist/ArtistNameLink'; import AlbumStudioAlbum from './AlbumStudioAlbum'; import styles from './AlbumStudioRow.css'; @@ -20,6 +18,7 @@ class AlbumStudioRow extends Component { status, foreignArtistId, artistName, + artistType, monitored, albums, isSaving, @@ -39,22 +38,15 @@ class AlbumStudioRow extends Component { isDisabled={false} /> - - - - - - - + diff --git a/frontend/src/Artist/Editor/ArtistEditorRow.js b/frontend/src/Artist/Editor/ArtistEditorRow.js index cfead73be..cdb84e49a 100644 --- a/frontend/src/Artist/Editor/ArtistEditorRow.js +++ b/frontend/src/Artist/Editor/ArtistEditorRow.js @@ -37,7 +37,9 @@ class ArtistEditorRow extends Component { path, tags, columns, + isSaving, isSelected, + onArtistMonitoredPress, onSelectedChange } = this.props; @@ -53,6 +55,8 @@ class ArtistEditorRow extends Component { artistType={artistType} monitored={monitored} status={status} + isSaving={isSaving} + onMonitoredPress={onArtistMonitoredPress} /> @@ -109,7 +113,9 @@ ArtistEditorRow.propTypes = { path: PropTypes.string.isRequired, tags: PropTypes.arrayOf(PropTypes.number).isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired, + isSaving: PropTypes.bool.isRequired, isSelected: PropTypes.bool, + onArtistMonitoredPress: PropTypes.func.isRequired, onSelectedChange: PropTypes.func.isRequired }; diff --git a/frontend/src/Artist/Editor/ArtistEditorRowConnector.js b/frontend/src/Artist/Editor/ArtistEditorRowConnector.js index 32694a6b9..ba5d9c56d 100644 --- a/frontend/src/Artist/Editor/ArtistEditorRowConnector.js +++ b/frontend/src/Artist/Editor/ArtistEditorRowConnector.js @@ -1,9 +1,10 @@ import PropTypes from 'prop-types'; -import React from 'react'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import createMetadataProfileSelector from 'Store/Selectors/createMetadataProfileSelector'; import createQualityProfileSelector from 'Store/Selectors/createQualityProfileSelector'; +import { toggleArtistMonitored } from 'Store/Actions/artistActions'; import ArtistEditorRow from './ArtistEditorRow'; function createMapStateToProps() { @@ -19,16 +20,42 @@ function createMapStateToProps() { ); } -function ArtistEditorRowConnector(props) { - return ( - - ); +const mapDispatchToProps = { + toggleArtistMonitored +}; + +class ArtistEditorRowConnector extends Component { + + // + // Listeners + + onArtistMonitoredPress = () => { + const { + id, + monitored + } = this.props; + + this.props.toggleArtistMonitored({ + artistId: id, + monitored: !monitored + }); + } + + render() { + return ( + + ); + } } ArtistEditorRowConnector.propTypes = { - qualityProfileId: PropTypes.number.isRequired + id: PropTypes.number.isRequired, + monitored: PropTypes.bool.isRequired, + qualityProfileId: PropTypes.number.isRequired, + toggleArtistMonitored: PropTypes.func.isRequired }; -export default connect(createMapStateToProps)(ArtistEditorRowConnector); +export default connect(createMapStateToProps, mapDispatchToProps)(ArtistEditorRowConnector); diff --git a/frontend/src/Artist/Index/ArtistIndexItemConnector.js b/frontend/src/Artist/Index/ArtistIndexItemConnector.js index aef6a8e5e..9815e468c 100644 --- a/frontend/src/Artist/Index/ArtistIndexItemConnector.js +++ b/frontend/src/Artist/Index/ArtistIndexItemConnector.js @@ -8,6 +8,7 @@ import createArtistSelector from 'Store/Selectors/createArtistSelector'; import createExecutingCommandsSelector from 'Store/Selectors/createExecutingCommandsSelector'; import createArtistQualityProfileSelector from 'Store/Selectors/createArtistQualityProfileSelector'; import createArtistMetadataProfileSelector from 'Store/Selectors/createArtistMetadataProfileSelector'; +import { toggleArtistMonitored } from 'Store/Actions/artistActions'; import { executeCommand } from 'Store/Actions/commandActions'; import * as commandNames from 'Commands/commandNames'; @@ -85,7 +86,8 @@ function createMapStateToProps() { } const mapDispatchToProps = { - dispatchExecuteCommand: executeCommand + dispatchExecuteCommand: executeCommand, + toggleArtistMonitored }; class ArtistIndexItemConnector extends Component { @@ -107,6 +109,13 @@ class ArtistIndexItemConnector extends Component { }); } + onMonitoredPress = () => { + this.props.toggleArtistMonitored({ + artistId: this.props.id, + monitored: !this.props.monitored + }); + } + // // Render @@ -127,6 +136,7 @@ class ArtistIndexItemConnector extends Component { id={id} onRefreshArtistPress={this.onRefreshArtistPress} onSearchPress={this.onSearchPress} + onMonitoredPress={this.onMonitoredPress} /> ); } @@ -134,8 +144,10 @@ class ArtistIndexItemConnector extends Component { ArtistIndexItemConnector.propTypes = { id: PropTypes.number, + monitored: PropTypes.bool.isRequired, component: PropTypes.elementType.isRequired, - dispatchExecuteCommand: PropTypes.func.isRequired + dispatchExecuteCommand: PropTypes.func.isRequired, + toggleArtistMonitored: PropTypes.func.isRequired }; export default connect(createMapStateToProps, mapDispatchToProps)(ArtistIndexItemConnector); diff --git a/frontend/src/Artist/Index/Table/ArtistIndexRow.js b/frontend/src/Artist/Index/Table/ArtistIndexRow.js index 6acf8a5b9..a589b5603 100644 --- a/frontend/src/Artist/Index/Table/ArtistIndexRow.js +++ b/frontend/src/Artist/Index/Table/ArtistIndexRow.js @@ -94,13 +94,15 @@ class ArtistIndexRow extends Component { path, tags, images, + isSaving, showBanners, showSearchAction, columns, isRefreshingArtist, isSearchingArtist, onRefreshArtistPress, - onSearchPress + onSearchPress, + onMonitoredPress } = this.props; const { @@ -138,6 +140,8 @@ class ArtistIndexRow extends Component { artistType={artistType} monitored={monitored} status={status} + isSaving={isSaving} + onMonitoredPress={onMonitoredPress} component={VirtualTableRowCell} /> ); @@ -457,13 +461,15 @@ ArtistIndexRow.propTypes = { ratings: PropTypes.object.isRequired, tags: PropTypes.arrayOf(PropTypes.number).isRequired, images: PropTypes.arrayOf(PropTypes.object).isRequired, + isSaving: PropTypes.bool.isRequired, showBanners: PropTypes.bool.isRequired, showSearchAction: PropTypes.bool.isRequired, columns: PropTypes.arrayOf(PropTypes.object).isRequired, isRefreshingArtist: PropTypes.bool.isRequired, isSearchingArtist: PropTypes.bool.isRequired, onRefreshArtistPress: PropTypes.func.isRequired, - onSearchPress: PropTypes.func.isRequired + onSearchPress: PropTypes.func.isRequired, + onMonitoredPress: PropTypes.func.isRequired }; ArtistIndexRow.defaultProps = { diff --git a/frontend/src/Artist/Index/Table/ArtistIndexTable.js b/frontend/src/Artist/Index/Table/ArtistIndexTable.js index 43d9f3638..56a8d4ce4 100644 --- a/frontend/src/Artist/Index/Table/ArtistIndexTable.js +++ b/frontend/src/Artist/Index/Table/ArtistIndexTable.js @@ -47,7 +47,8 @@ class ArtistIndexTable extends Component { const { items, columns, - showBanners + showBanners, + isSaving } = this.props; const artist = items[rowIndex]; @@ -66,6 +67,7 @@ class ArtistIndexTable extends Component { qualityProfileId={artist.qualityProfileId} metadataProfileId={artist.metadataProfileId} showBanners={showBanners} + isSaving={isSaving} /> ); @@ -121,6 +123,7 @@ ArtistIndexTable.propTypes = { sortKey: PropTypes.string, sortDirection: PropTypes.oneOf(sortDirections.all), showBanners: PropTypes.bool.isRequired, + isSaving: PropTypes.bool.isRequired, jumpToCharacter: PropTypes.string, scrollTop: PropTypes.number, scroller: PropTypes.instanceOf(Element).isRequired, diff --git a/frontend/src/Artist/Index/Table/ArtistStatusCell.css b/frontend/src/Artist/Index/Table/ArtistStatusCell.css index fbcd5eee9..a2d440998 100644 --- a/frontend/src/Artist/Index/Table/ArtistStatusCell.css +++ b/frontend/src/Artist/Index/Table/ArtistStatusCell.css @@ -4,6 +4,13 @@ width: 60px; } +.monitorToggle { + composes: toggleButton from '~Components/MonitorToggleButton.css'; + + margin: 0; + width: 20px !important; +} + .statusIcon { width: 20px !important; } diff --git a/frontend/src/Artist/Index/Table/ArtistStatusCell.js b/frontend/src/Artist/Index/Table/ArtistStatusCell.js index 26fde0e12..7991d0806 100644 --- a/frontend/src/Artist/Index/Table/ArtistStatusCell.js +++ b/frontend/src/Artist/Index/Table/ArtistStatusCell.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { icons } from 'Helpers/Props'; import Icon from 'Components/Icon'; +import MonitorToggleButton from 'Components/MonitorToggleButton'; import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell'; import styles from './ArtistStatusCell.css'; @@ -11,6 +12,8 @@ function ArtistStatusCell(props) { artistType, monitored, status, + isSaving, + onMonitoredPress, component: Component, ...otherProps } = props; @@ -22,10 +25,12 @@ function ArtistStatusCell(props) { className={className} {...otherProps} > -