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

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}
             />
           </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
         </PageToolbar>
 
         <PageContentBodyConnector>

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
 

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 {
           </PageToolbarSection>
 
           <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
             <FilterMenu
               alignMenu={align.RIGHT}
               selectedFilterKey={selectedFilterKey}

frontend/src/Components/Page/Header/SeriesSearchInput.js

@@ -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 = () => {

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' ?
+                <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,

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 = {
+function createMapDispatchToProps(dispatch, props) {
-  fetchSeries,
+  return {
-  setSeriesSort,
+    dispatchFetchSeries() {
-  setSeriesFilter,
+      dispatch(fetchSeries);
-  setSeriesView,
+    },
-  executeCommand
+
-};
+    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,
+  dispatchFetchSeries: PropTypes.func.isRequired
-  setSeriesSort: PropTypes.func.isRequired,
-  setSeriesFilter: PropTypes.func.isRequired,
-  setSeriesView: PropTypes.func.isRequired,
-  executeCommand: PropTypes.func.isRequired
 };
 
 export default withScrollPosition(
-  connect(createMapStateToProps, mapDispatchToProps)(SeriesIndexConnector),
+  connect(createMapStateToProps, createMapDispatchToProps)(SeriesIndexConnector),
   'seriesIndex'
 );

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: []
   }
 };

frontend/src/Store/Actions/systemActions.js

@@ -80,25 +80,30 @@ export const defaultState = {
     columns: [
       {
         name: 'level',
-        isSortable: true,
+        columnLabel: 'Level',
-        isVisible: true
+        isSortable: false,
+        isVisible: true,
+        isModifiable: false
       },
       {
         name: 'logger',
         label: 'Component',
-        isSortable: true,
+        isSortable: false,
-        isVisible: true
+        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',

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) {
         </PageToolbarSection>
 
         <PageToolbarSection alignContent={align.RIGHT}>
+          <TableOptionsModalWrapper
+            {...otherProps}
+            columns={columns}
+            canModifyColumns={false}
+          >
+            <PageToolbarButton
+              label="Options"
+              iconName={icons.TABLE}
+            />
+          </TableOptionsModalWrapper>
+
           <FilterMenu
             alignMenu={align.RIGHT}
             selectedFilterKey={selectedFilterKey}