Add sorting to import list exclusion table

4 months ago · 4edb44e084
parent 8478aa0a4d
commit 4edb44e084
4 changed files with 59 additions and 26 deletions
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.js
@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
@ -65,9 +64,9 @@ class ImportListExclusion extends Component {
        <TableRowCell>{title}</TableRowCell>
        <TableRowCell>{tvdbId}</TableRowCell>

-        <TableRowCellButton className={styles.actions} onPress={this.onEditImportListExclusionPress}>
-          <Icon name={icons.EDIT} />
-        </TableRowCellButton>
+        <TableRowCell className={styles.actions}>
+          <IconButton name={icons.EDIT} onPress={this.onEditImportListExclusionPress} />
+        </TableRowCell>

        <EditImportListExclusionModalConnector
          id={id}
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusions.js
@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
-import Link from 'Components/Link/Link';
+import IconButton from 'Components/Link/IconButton';
 import PageSectionContent from 'Components/Page/PageSectionContent';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TablePager from 'Components/Table/TablePager';
+import TableRow from 'Components/Table/TableRow';
 import { icons } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import EditImportListExclusionModalConnector from './EditImportListExclusionModalConnector';
@ -17,16 +18,19 @@ const COLUMNS = [
  {
    name: 'title',
    label: () => translate('Title'),
-    isVisible: true
+    isVisible: true,
+    isSortable: true
  },
  {
    name: 'tvdbid',
    label: () => translate('TvdbId'),
-    isVisible: true
+    isVisible: true,
+    isSortable: true
  },
  {
    name: 'actions',
-    isVisible: true
+    isVisible: true,
+    isSortable: false
  }
 ];

@ -64,17 +68,21 @@ class ImportListExclusions extends Component {
      onConfirmDeleteImportListExclusion,
      totalRecords,
      onFirstPagePress,
+      isPopulated,
      ...otherProps
    } = this.props;
-
+    const isFetchingOrHasFetched = isFetching && !isPopulated;
    return (
      <FieldSet legend={translate('ImportListExclusions')}>
        <PageSectionContent
          errorMessage={translate('ImportListExclusionsLoadError')}
-          isFetching={isFetching}
+          isFetching={isFetchingOrHasFetched}
+          isPopulated={isPopulated}
          {...otherProps}
        >
-          <Table columns={COLUMNS} canModifyColumns={false}>
+          <Table columns={COLUMNS} canModifyColumns={false}
+            {...otherProps}
+          >
            <TableBody>
              {
                items.map((item, index) => {
@ -89,18 +97,18 @@ class ImportListExclusions extends Component {
                  );
                })
              }
+
+              <TableRow >
+                <TableRowCell />
+                <TableRowCell />
+
+                <TableRowCell className={styles.actions}>
+                  <IconButton name={icons.ADD} onPress={this.onAddImportListExclusionPress} />
+                </TableRowCell>
+              </TableRow>
            </TableBody>
          </Table>

-          <div className={styles.addImportListExclusion}>
-            <Link
-              className={styles.addButton}
-              onPress={this.onAddImportListExclusionPress}
-            >
-              <Icon name={icons.ADD} />
-            </Link>
-          </div>
-
          <TablePager
            totalRecords={totalRecords}
            isFetching={isFetching}
@ -120,11 +128,14 @@ class ImportListExclusions extends Component {

 ImportListExclusions.propTypes = {
  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
  totalRecords: PropTypes.number,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
  onConfirmDeleteImportListExclusion: PropTypes.func.isRequired,
-  onFirstPagePress: PropTypes.func.isRequired
+  onFirstPagePress: PropTypes.func.isRequired,
+  onSortPress: PropTypes.func.isRequired
+
 };

 export default ImportListExclusions;
--- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusionsConnector.js
+++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusionsConnector.js
@ -81,6 +81,18 @@ class ImportListExclusionsConnector extends Component {
    this.props.gotoImportListExclusionPage({ page });
  };

+  onSortPress = (sortKey) => {
+    this.props.setImportListExclusionSort({ sortKey });
+  };
+
+  onTableOptionChange = (payload) => {
+    this.props.setImportListExclusionTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoImportListExclusionFirstPage();
+    }
+  };
+
  //
  // Render

@ -95,6 +107,8 @@ class ImportListExclusionsConnector extends Component {
        onLastPagePress={this.onLastPagePress}
        onPageSelect={this.onPageSelect}
        onConfirmDeleteImportListExclusion={this.onConfirmDeleteImportListExclusion}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
      />
    );
  }
@ -108,7 +122,9 @@ ImportListExclusionsConnector.propTypes = {
  gotoImportListExclusionNextPage: PropTypes.func.isRequired,
  gotoImportListExclusionLastPage: PropTypes.func.isRequired,
  gotoImportListExclusionPage: PropTypes.func.isRequired,
-  deleteImportListExclusion: PropTypes.func.isRequired
+  deleteImportListExclusion: PropTypes.func.isRequired,
+  setImportListExclusionSort: PropTypes.func.isRequired,
+  setImportListExclusionTableOption: PropTypes.func.isRequired
 };

 export default connect(createMapStateToProps, mapDispatchToProps)(ImportListExclusionsConnector);
--- a/frontend/src/Store/Actions/Settings/importListExclusions.js
+++ b/frontend/src/Store/Actions/Settings/importListExclusions.js
@ -5,6 +5,7 @@ import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/create
 import { createThunk, handleThunks } from 'Store/thunks';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 import createServerSideCollectionHandlers from '../Creators/createServerSideCollectionHandlers';
+import createSetTableOptionReducer from '../Creators/Reducers/createSetTableOptionReducer';

 //
 // Variables
@ -20,6 +21,8 @@ export const GOTO_PREVIOUS_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExcl
 export const GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionNextPage';
 export const GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionLastPage';
 export const GOTO_IMPORT_LIST_EXCLUSION_PAGE = 'settings/importListExclusions/gotoImportListExclusionPage';
+export const SET_IMPORT_LIST_EXCLUSION_SORT = 'settings/importListExclusions/setImportListExclusionSort';
+export const SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION = 'settings/importListExclusions/setImportListExclusionTableOption';
 export const SAVE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/saveImportListExclusion';
 export const DELETE_IMPORT_LIST_EXCLUSION = 'settings/importListExclusions/deleteImportListExclusion';
 export const SET_IMPORT_LIST_EXCLUSION_VALUE = 'settings/importListExclusions/setImportListExclusionValue';
@ -33,9 +36,11 @@ export const gotoImportListExclusionPreviousPage = createThunk(GOTO_PREVIOUS_IMP
 export const gotoImportListExclusionNextPage = createThunk(GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE);
 export const gotoImportListExclusionLastPage = createThunk(GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE);
 export const gotoImportListExclusionPage = createThunk(GOTO_IMPORT_LIST_EXCLUSION_PAGE);
+export const setImportListExclusionSort = createThunk(SET_IMPORT_LIST_EXCLUSION_SORT);
 export const saveImportListExclusion = createThunk(SAVE_IMPORT_LIST_EXCLUSION);
 export const deleteImportListExclusion = createThunk(DELETE_IMPORT_LIST_EXCLUSION);

+export const setImportListExclusionTableOption = createAction(SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION);
 export const setImportListExclusionValue = createAction(SET_IMPORT_LIST_EXCLUSION_VALUE, (payload) => {
  return {
    section,
@ -76,7 +81,8 @@ export default {
        [serverSideCollectionHandlers.PREVIOUS_PAGE]: GOTO_PREVIOUS_IMPORT_LIST_EXCLUSION_PAGE,
        [serverSideCollectionHandlers.NEXT_PAGE]: GOTO_NEXT_IMPORT_LIST_EXCLUSION_PAGE,
        [serverSideCollectionHandlers.LAST_PAGE]: GOTO_LAST_IMPORT_LIST_EXCLUSION_PAGE,
-        [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_IMPORT_LIST_EXCLUSION_PAGE
+        [serverSideCollectionHandlers.EXACT_PAGE]: GOTO_IMPORT_LIST_EXCLUSION_PAGE,
+        [serverSideCollectionHandlers.SORT]: SET_IMPORT_LIST_EXCLUSION_SORT
      }
    ),
    [SAVE_IMPORT_LIST_EXCLUSION]: createSaveProviderHandler(section, '/importlistexclusion'),
@ -87,7 +93,8 @@ export default {
  // Reducers

  reducers: {
-    [SET_IMPORT_LIST_EXCLUSION_VALUE]: createSetSettingValueReducer(section)
+    [SET_IMPORT_LIST_EXCLUSION_VALUE]: createSetSettingValueReducer(section),
+    [SET_IMPORT_LIST_EXCLUSION_TABLE_OPTION]: createSetTableOptionReducer(section)
  }

 };