From 3b565d8bb1a56653c7ab1a721d8ba19f2e05f286 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Wed, 9 Jan 2019 18:57:18 -0800 Subject: [PATCH] New: Table options in page toolbar in addition to table header --- frontend/src/Activity/Blacklist/Blacklist.js | 15 +++- .../Activity/Blacklist/BlacklistConnector.js | 8 ++ frontend/src/Activity/History/History.js | 11 +++ .../Page/Header/SeriesSearchInput.js | 4 + frontend/src/Series/Index/SeriesIndex.js | 30 +++++-- .../src/Series/Index/SeriesIndexConnector.js | 80 +++++++++---------- .../Store/Actions/interactiveImportActions.js | 2 +- frontend/src/Store/Actions/systemActions.js | 17 ++-- frontend/src/System/Events/LogsTable.js | 12 +++ 9 files changed, 126 insertions(+), 53 deletions(-) diff --git a/frontend/src/Activity/Blacklist/Blacklist.js b/frontend/src/Activity/Blacklist/Blacklist.js index e3ecd2ff7..d93bec0bf 100644 --- a/frontend/src/Activity/Blacklist/Blacklist.js +++ b/frontend/src/Activity/Blacklist/Blacklist.js @@ -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} /> + + + + + + diff --git a/frontend/src/Activity/Blacklist/BlacklistConnector.js b/frontend/src/Activity/Blacklist/BlacklistConnector.js index 466cc40b7..b182e7bb2 100644 --- a/frontend/src/Activity/Blacklist/BlacklistConnector.js +++ b/frontend/src/Activity/Blacklist/BlacklistConnector.js @@ -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 diff --git a/frontend/src/Activity/History/History.js b/frontend/src/Activity/History/History.js index 75f504d22..d2243f221 100644 --- a/frontend/src/Activity/History/History.js +++ b/frontend/src/Activity/History/History.js @@ -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 { + + + + { diff --git a/frontend/src/Series/Index/SeriesIndex.js b/frontend/src/Series/Index/SeriesIndex.js index f1eae53c6..105e6cb88 100644 --- a/frontend/src/Series/Index/SeriesIndex.js +++ b/frontend/src/Series/Index/SeriesIndex.js @@ -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' ? + + + : + null + } { - view === 'posters' && + view === 'posters' ? + /> : + null } { - view === 'overview' && + view === 'overview' ? + /> : + 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, diff --git a/frontend/src/Series/Index/SeriesIndexConnector.js b/frontend/src/Series/Index/SeriesIndexConnector.js index 63a6288cc..ec0bd78c4 100644 --- a/frontend/src/Series/Index/SeriesIndexConnector.js +++ b/frontend/src/Series/Index/SeriesIndexConnector.js @@ -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 { ); } @@ -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' ); diff --git a/frontend/src/Store/Actions/interactiveImportActions.js b/frontend/src/Store/Actions/interactiveImportActions.js index 538790756..9dd003d3f 100644 --- a/frontend/src/Store/Actions/interactiveImportActions.js +++ b/frontend/src/Store/Actions/interactiveImportActions.js @@ -52,7 +52,7 @@ export const defaultState = { isPopulated: false, error: null, sortKey: 'episodeNumber', - sortDirection: sortDirections.DESCENDING, + sortDirection: sortDirections.ASCENDING, items: [] } }; diff --git a/frontend/src/Store/Actions/systemActions.js b/frontend/src/Store/Actions/systemActions.js index 1007399a0..a7c3119b7 100644 --- a/frontend/src/Store/Actions/systemActions.js +++ b/frontend/src/Store/Actions/systemActions.js @@ -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', diff --git a/frontend/src/System/Events/LogsTable.js b/frontend/src/System/Events/LogsTable.js index 1858d483a..ce6d0c995 100644 --- a/frontend/src/System/Events/LogsTable.js +++ b/frontend/src/System/Events/LogsTable.js @@ -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) { + + + +