Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New: Table options in page toolbar in addition to table header

This commit is contained in:
Mark McDowall 2019-01-09 18:57:18 -08:00
parent 21a92b62fd
commit 3b565d8bb1
9 changed files with 126 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/Activity/Blacklist/Blacklist.js
View File

@ -1,9 +1,10 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { icons } from 'Helpers/Props';
import { align, icons } from 'Helpers/Props';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import TablePager from 'Components/Table/TablePager';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@ -41,6 +42,18 @@ class Blacklist extends Component {
onPress={onClearBlacklistPress}
/>
</PageToolbarSection>
<PageToolbarSection alignContent={align.RIGHT}>
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
>
<PageToolbarButton
label="Options"
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper>
</PageToolbarSection>
</PageToolbar>
<PageContentBodyConnector>

8
frontend/src/Activity/Blacklist/BlacklistConnector.js
View File

@ -105,6 +105,14 @@ class BlacklistConnector extends Component {
this.props.executeCommand({ name: commandNames.CLEAR_BLACKLIST });
}
onTableOptionChange = (payload) => {
this.props.setBlacklistTableOption(payload);
if (payload.pageSize) {
this.props.gotoBlacklistFirstPage();
}
}
//
// Render

11
frontend/src/Activity/History/History.js
View File

@ -5,6 +5,7 @@ import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import TablePager from 'Components/Table/TablePager';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@ -75,6 +76,16 @@ class History extends Component {
</PageToolbarSection>
<PageToolbarSection alignContent={align.RIGHT}>
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
>
<PageToolbarButton
label="Options"
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper>
<FilterMenu
alignMenu={align.RIGHT}
selectedFilterKey={selectedFilterKey}

4
frontend/src/Components/Page/Header/SeriesSearchInput.js
View File

@ -117,6 +117,7 @@ class SeriesSearchInput extends Component {
if (!suggestions.length || highlightedSectionIndex) {
this.props.onGoToAddNewSeries(value);
this._autosuggest.input.blur();
this.reset();
return;
}
@ -129,6 +130,9 @@ class SeriesSearchInput extends Component {
} else {
this.goToSeries(suggestions[highlightedSuggestionIndex]);
}
this._autosuggest.input.blur();
this.reset();
}
onBlur = () => {

30
frontend/src/Series/Index/SeriesIndex.js
View File

@ -7,20 +7,22 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
import PageJumpBar from 'Components/Page/PageJumpBar';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
import NoSeries from 'Series/NoSeries';
import SeriesIndexTableConnector from './Table/SeriesIndexTableConnector';
import SeriesIndexTableOptionsConnector from './Table/SeriesIndexTableOptionsConnector';
import SeriesIndexPosterOptionsModal from './Posters/Options/SeriesIndexPosterOptionsModal';
import SeriesIndexPostersConnector from './Posters/SeriesIndexPostersConnector';
import SeriesIndexOverviewOptionsModal from './Overview/Options/SeriesIndexOverviewOptionsModal';
import SeriesIndexOverviewsConnector from './Overview/SeriesIndexOverviewsConnector';
import SeriesIndexFooter from './SeriesIndexFooter';
import SeriesIndexFilterMenu from './Menus/SeriesIndexFilterMenu';
import SeriesIndexSortMenu from './Menus/SeriesIndexSortMenu';
import SeriesIndexViewMenu from './Menus/SeriesIndexViewMenu';
import SeriesIndexFooter from './SeriesIndexFooter';
import styles from './SeriesIndex.css';
function getViewComponent(view) {
@ -172,6 +174,7 @@ class SeriesIndex extends Component {
error,
totalItems,
items,
columns,
selectedFilterKey,
filters,
customFilters,
@ -229,25 +232,41 @@ class SeriesIndex extends Component {
alignContent={align.RIGHT}
collapseButtons={false}
>
{
view === 'table' ?
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
optionsComponent={SeriesIndexTableOptionsConnector}
>
<PageToolbarButton
label="Options"
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper> :
null
}
{
view === 'posters' &&
view === 'posters' ?
<PageToolbarButton
label="Options"
iconName={icons.POSTER}
isDisabled={hasNoSeries}
onPress={this.onPosterOptionsPress}
/>
/> :
null
}
{
view === 'overview' &&
view === 'overview' ?
<PageToolbarButton
label="Options"
iconName={icons.OVERVIEW}
isDisabled={hasNoSeries}
onPress={this.onOverviewOptionsPress}
/>
/> :
null
}
{
@ -348,6 +367,7 @@ SeriesIndex.propTypes = {
error: PropTypes.object,
totalItems: PropTypes.number.isRequired,
items: PropTypes.arrayOf(PropTypes.object).isRequired,
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
filters: PropTypes.arrayOf(PropTypes.object).isRequired,
customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,

80
frontend/src/Series/Index/SeriesIndexConnector.js
View File

@ -8,7 +8,7 @@ import createCommandExecutingSelector from 'Store/Selectors/createCommandExecuti
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import { fetchSeries } from 'Store/Actions/seriesActions';
import scrollPositions from 'Store/scrollPositions';
import { setSeriesSort, setSeriesFilter, setSeriesView } from 'Store/Actions/seriesIndexActions';
import { setSeriesSort, setSeriesFilter, setSeriesView, setSeriesTableOption } from 'Store/Actions/seriesIndexActions';
import { executeCommand } from 'Store/Actions/commandActions';
import * as commandNames from 'Commands/commandNames';
import withScrollPosition from 'Components/withScrollPosition';
@ -59,13 +59,41 @@ function createMapStateToProps() {
);
}
const mapDispatchToProps = {
fetchSeries,
setSeriesSort,
setSeriesFilter,
setSeriesView,
executeCommand
};
function createMapDispatchToProps(dispatch, props) {
return {
dispatchFetchSeries() {
dispatch(fetchSeries);
},
onTableOptionChange(payload) {
dispatch(setSeriesTableOption(payload));
},
onSortSelect(sortKey) {
dispatch(setSeriesSort({ sortKey }));
},
onFilterSelect(selectedFilterKey) {
dispatch(setSeriesFilter({ selectedFilterKey }));
},
dispatchSetSeriesView(view) {
dispatch(setSeriesView({ view }));
},
onRefreshSeriesPress() {
dispatch(executeCommand({
name: commandNames.REFRESH_SERIES
}));
},
onRssSyncPress() {
dispatch(executeCommand({
name: commandNames.RSS_SYNC
}));
}
};
}
class SeriesIndexConnector extends Component {
@ -87,24 +115,16 @@ class SeriesIndexConnector extends Component {
}
componentDidMount() {
this.props.fetchSeries();
this.props.dispatchFetchSeries();
}
//
// Listeners
onSortSelect = (sortKey) => {
this.props.setSeriesSort({ sortKey });
}
onFilterSelect = (selectedFilterKey) => {
this.props.setSeriesFilter({ selectedFilterKey });
}
onViewSelect = (view) => {
// Reset the scroll position before changing the view
this.setState({ scrollTop: 0 }, () => {
this.props.setSeriesView({ view });
this.props.dispatchSetSeriesView({ view });
});
}
@ -116,18 +136,6 @@ class SeriesIndexConnector extends Component {
});
}
onRefreshSeriesPress = () => {
this.props.executeCommand({
name: commandNames.REFRESH_SERIES
});
}
onRssSyncPress = () => {
this.props.executeCommand({
name: commandNames.RSS_SYNC
});
}
//
// Render
@ -136,12 +144,8 @@ class SeriesIndexConnector extends Component {
<SeriesIndex
{...this.props}
scrollTop={this.state.scrollTop}
onSortSelect={this.onSortSelect}
onFilterSelect={this.onFilterSelect}
onViewSelect={this.onViewSelect}
onScroll={this.onScroll}
onRefreshSeriesPress={this.onRefreshSeriesPress}
onRssSyncPress={this.onRssSyncPress}
/>
);
}
@ -151,14 +155,10 @@ SeriesIndexConnector.propTypes = {
isSmallScreen: PropTypes.bool.isRequired,
view: PropTypes.string.isRequired,
scrollTop: PropTypes.number.isRequired,
fetchSeries: PropTypes.func.isRequired,
setSeriesSort: PropTypes.func.isRequired,
setSeriesFilter: PropTypes.func.isRequired,
setSeriesView: PropTypes.func.isRequired,
executeCommand: PropTypes.func.isRequired
dispatchFetchSeries: PropTypes.func.isRequired
};
export default withScrollPosition(
connect(createMapStateToProps, mapDispatchToProps)(SeriesIndexConnector),
connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexConnector),
'seriesIndex'
);

2
frontend/src/Store/Actions/interactiveImportActions.js
View File

@ -52,7 +52,7 @@ export const defaultState = {
isPopulated: false,
error: null,
sortKey: 'episodeNumber',
sortDirection: sortDirections.DESCENDING,
sortDirection: sortDirections.ASCENDING,
items: []
}
};

17
frontend/src/Store/Actions/systemActions.js
View File

@ -80,25 +80,30 @@ export const defaultState = {
columns: [
{
name: 'level',
isSortable: true,
isVisible: true
columnLabel: 'Level',
isSortable: false,
isVisible: true,
isModifiable: false
},
{
name: 'logger',
label: 'Component',
isSortable: true,
isVisible: true
isSortable: false,
isVisible: true,
isModifiable: false
},
{
name: 'message',
label: 'Message',
isVisible: true
isVisible: true,
isModifiable: false
},
{
name: 'time',
label: 'Time',
isSortable: true,
isVisible: true
isVisible: true,
isModifiable: false
},
{
name: 'actions',

12
frontend/src/System/Events/LogsTable.js
View File

@ -4,6 +4,7 @@ import { align, icons } from 'Helpers/Props';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
import TablePager from 'Components/Table/TablePager';
import PageContent from 'Components/Page/PageContent';
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
@ -51,6 +52,17 @@ function LogsTable(props) {
</PageToolbarSection>
<PageToolbarSection alignContent={align.RIGHT}>
<TableOptionsModalWrapper
{...otherProps}
columns={columns}
canModifyColumns={false}
>
<PageToolbarButton
label="Options"
iconName={icons.TABLE}
/>
</TableOptionsModalWrapper>
<FilterMenu
alignMenu={align.RIGHT}
selectedFilterKey={selectedFilterKey}