refactor(entity-list): add num of rows preference feature

packages/core/app-extensions/src/notification/modules/modal/ModalDisplay/StyledComponents.js

@@ -1,11 +1,11 @@
 import styled, {createGlobalStyle} from 'styled-components'
-import {Button, scale, StyledScrollbar, StyledTether, theme} from 'tocco-ui'
+import {Button, scale, StyledScrollbar, StyledTether, themeSelector} from 'tocco-ui'
 
 export const basePadding = scale.space(0.5)
 
 export const StyledModalContent = styled.div`
   position: relative;
-  background-color: ${theme.color('paper')};
+  background-color: ${themeSelector.color('paper')};
   padding: ${basePadding};
   display: grid;
   grid-template-rows: [header] auto [body] 1fr;
@@ -77,7 +77,6 @@ export const StyledTitleWrapper = styled.div`
 export const StyledModalBody = styled.div`
   grid-row-start: body;
   overflow: hidden auto;
-  padding-right: ${scale.space(0)};
   ${StyledScrollbar}
 `
 

packages/core/entity-list/src/components/Table/NavigationCellHeader.js

@@ -1,25 +1,33 @@
 import PropTypes from 'prop-types'
 import {FormattedMessage} from 'react-intl'
-import {connect} from 'react-redux'
 import {BallMenu, MenuItem} from 'tocco-ui'
 
-import {displayColumnModal, resetSorting, resetPreferences, resetColumns} from '../../modules/preferences/actions'
-
-const NavigationCellHeader = props =>
-  !props.disablePreferencesMenu ? (
+const NavigationCellHeader = ({
+  disablePreferencesMenu,
+  displayColumnModal,
+  resetColumns,
+  sortable,
+  resetSorting,
+  resetPreferences,
+  displayTableRowsModal
+}) =>
+  !disablePreferencesMenu ? (
     <BallMenu buttonProps={{icon: 'ellipsis-v'}}>
-      <MenuItem onClick={props.displayColumnModal}>
+      <MenuItem onClick={displayColumnModal}>
         <FormattedMessage id="client.entity-list.preferences.columns" />
       </MenuItem>
-      <MenuItem onClick={props.resetColumns}>
+      <MenuItem onClick={displayTableRowsModal}>
+        <FormattedMessage id="client.entity-list.preferences.numOfRows" />
+      </MenuItem>
+      <MenuItem onClick={resetColumns}>
         <FormattedMessage id="client.entity-list.preferences.columns.reset" />
       </MenuItem>
-      {props.sortable && (
-        <MenuItem onClick={props.resetSorting}>
+      {sortable && (
+        <MenuItem onClick={resetSorting}>
           <FormattedMessage id="client.entity-list.sorting.reset" />
         </MenuItem>
       )}
-      <MenuItem onClick={props.resetPreferences}>
+      <MenuItem onClick={resetPreferences}>
         <FormattedMessage id="client.entity-list.preferences.reset" />
       </MenuItem>
     </BallMenu>
@@ -31,19 +39,8 @@ NavigationCellHeader.propTypes = {
   resetPreferences: PropTypes.func.isRequired,
   resetColumns: PropTypes.func.isRequired,
   sortable: PropTypes.bool,
-  disablePreferencesMenu: PropTypes.bool
+  disablePreferencesMenu: PropTypes.bool,
+  displayTableRowsModal: PropTypes.func.isRequired
 }
 
-const mapActionCreators = {
-  displayColumnModal,
-  resetSorting,
-  resetPreferences,
-  resetColumns
-}
-
-const mapStateToProps = (state, props) => ({
-  sortable: state.input.sortable,
-  disablePreferencesMenu: state.list.disablePreferencesMenu
-})
-
-export default connect(mapStateToProps, mapActionCreators)(NavigationCellHeader)
+export default NavigationCellHeader

packages/core/entity-list/src/components/Table/NavigationCellHeaderContainer.js

@@ -0,0 +1,27 @@
+import {connect} from 'react-redux'
+
+import {
+  displayColumnModal,
+  resetSorting,
+  resetPreferences,
+  resetColumns,
+  displayTableRowsModal
+} from '../../modules/preferences/actions'
+import NavigationCellHeader from './NavigationCellHeader'
+
+const mapActionCreators = {
+  displayColumnModal,
+  resetSorting,
+  resetPreferences,
+  resetColumns,
+  displayTableRowsModal
+}
+
+const mapStateToProps = (state, props) => {
+  return {
+    sortable: state.list.sortable,
+    disablePreferencesMenu: state.list.disablePreferencesMenu
+  }
+}
+
+export default connect(mapStateToProps, mapActionCreators)(NavigationCellHeader)

packages/core/entity-list/src/components/Table/SelectRowNums.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import {useState} from 'react'
+import {injectIntl, FormattedMessage} from 'react-intl'
+import {EditableValue, Button} from 'tocco-ui'
+
+import {StyledButtonWrapper, StyledEditableValueWrapper} from './StyledComponents'
+
+const SelectNumRows = injectIntl(({intl, onOk, numOfRows}) => {
+  const msg = id => intl.formatMessage({id})
+  const options = [
+    {key: 25, display: '25'},
+    {key: 50, display: '50'},
+    {key: 100, display: '100'}
+  ]
+  const matchingValue = options.find(option => option.key === numOfRows)
+  const [value, setValue] = useState(matchingValue)
+
+  return (
+    <>
+      <StyledEditableValueWrapper>
+        <EditableValue
+          value={value}
+          type="single-select"
+          events={{onChange: setValue}}
+          options={{
+            options,
+            noResultsText: msg('client.entity-list.preferences.numOfRows.noResultsText'),
+            isLoading: false
+          }}
+        />
+      </StyledEditableValueWrapper>
+      <StyledButtonWrapper>
+        <Button onClick={() => onOk(value?.key)} look={'raised'}>
+          <FormattedMessage id="client.entity-list.preferences.numOfRows.okButton" />
+        </Button>
+      </StyledButtonWrapper>
+    </>
+  )
+})
+
+SelectNumRows.propTypes = {
+  intl: PropTypes.object.isRequired,
+  onOk: PropTypes.func.isRequired,
+  numOfRows: PropTypes.number
+}
+
+export default SelectNumRows

packages/core/entity-list/src/components/Table/StyledComponents.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {themeSelector, declareFont} from 'tocco-ui'
+import {themeSelector, declareFont, scale, StyledButton, colorizeBorder} from 'tocco-ui'
 
 export const StyledMarkingWrapper = styled.span`
   ${declareFont()}
@@ -13,3 +13,22 @@ export const StyledMarkingWrapper = styled.span`
   }
   ${({marked, theme}) => marked && `color: ${theme.colors.secondary};`}
 `
+
+export const StyledButtonWrapper = styled.div`
+  position: sticky;
+  bottom: 0;
+  padding-top: ${scale.space(0)};
+  background-color: ${themeSelector.color('paper')};
+  display: flex;
+  justify-content: flex-end;
+
+  ${StyledButton} {
+    margin-right: 0;
+  }
+`
+
+export const StyledEditableValueWrapper = styled.div`
+  border: 1px solid ${colorizeBorder.shade1};
+  padding-right: ${scale.space(-1)};
+  padding-left: ${scale.space(-1)};
+`

packages/core/entity-list/src/components/Table/navigationCell.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {Icon} from 'tocco-ui'
 
-import NavigationCellHeader from './NavigationCellHeader'
+import NavigationCellHeader from './NavigationCellHeaderContainer'
 
 const CellRenderer = ({showNavigation, rowData, navigationStrategy, parent}) =>
   showNavigation && navigationStrategy.DetailLinkRelative ? (

packages/core/entity-list/src/containers/TableContainer.js

@@ -6,6 +6,7 @@ import {changePage, refresh, initialize, onRowClick, setSortingInteractive} from
 import {changePosition, resetSorting, changeWidth} from '../modules/preferences/actions'
 import {onSelectChange, setSelection} from '../modules/selection/actions'
 import {getFormDefinition, getClickable, getDisablePreferencesMenu, getSelectable} from '../util/api/forms'
+import {getActualLimit} from '../util/preferences'
 import {getTableSelectionStyle} from '../util/selection'
 
 const mapActionCreators = {
@@ -25,7 +26,7 @@ const mapStateToProps = (state, props) => ({
   currentPage: state.list.currentPage,
   entities: state.list.entities,
   entityCount: state.list.entityCount,
-  limit: state.input.limit,
+  limit: getActualLimit(state),
   inProgress: state.list.inProgress,
   tableSelectionStyle: getTableSelectionStyle(state.input.selectionStyle, getSelectable(getFormDefinition(state))),
   clickable: getClickable(getFormDefinition(state)),

packages/core/entity-list/src/modules/list/sagas.js

@@ -16,6 +16,7 @@ import {
   getSorting,
   splitFormId
 } from '../../util/api/forms'
+import {getActualLimit} from '../../util/preferences'
 import * as preferencesActions from '../preferences/actions'
 import * as searchFormActions from '../searchForm/actions'
 import {getSearchFormValues} from '../searchForm/sagas'
@@ -287,7 +288,7 @@ export function* setLazyDataMarked(entityName, markings) {
 
 export function* fetchEntitiesAndAddToStore(page) {
   const state = yield select(stateSelector)
-  const {entityName, scope, limit} = state.input
+  const {entityName, scope} = state.input
   const {columns: columnPreferences} = state.preferences
   const {entityStore, sorting} = state.list
   if (!entityStore[page]) {
@@ -299,7 +300,7 @@ export function* fetchEntitiesAndAddToStore(page) {
       ...basicQuery,
       page,
       sorting,
-      limit,
+      limit: getActualLimit(state),
       paths
     }
 
@@ -339,7 +340,8 @@ export function* delayedPreloadNextPage(page) {
 }
 
 export function* preloadNextPage(currentPage) {
-  const {limit} = yield select(inputSelector)
+  const state = yield select(stateSelector)
+  const actualLimit = getActualLimit(state)
   const list = yield select(listSelector)
   const {entityStore} = list
   let {entityCount} = list
@@ -350,7 +352,7 @@ export function* preloadNextPage(currentPage) {
     entityCount = setCountAction.payload.entityCount
   }
 
-  if (currentPage * limit < entityCount && !entityStore[nextPage]) {
+  if (currentPage * actualLimit < entityCount && !entityStore[nextPage]) {
     yield call(fetchEntitiesAndAddToStore, nextPage)
   }
 }

packages/core/entity-list/src/modules/preferences/actions.js

@@ -9,6 +9,8 @@ export const RESET_COLUMNS = 'preferences/RESET_COLUMNS'
 export const RESET_PREFERENCES = 'preferences/RESET_PREFERENCES'
 export const DISPLAY_COLUMN_MODAL = 'preferences/DISPLAY_COLUMN_MODAL'
 export const SET_PREFERENCES_LOADED = 'preferences/SET_PREFERENCES_LOADED'
+export const SET_NUMBER_OF_TABLE_ROWS = 'preferences/SET_NUMBER_OF_TABLE_ROWS'
+export const DISPLAY_TABLE_ROWS_MODAL = 'preferences/DISPLAY_TABLE_ROWS_MODAL'
 
 export const loadPreferences = () => ({
   type: LOAD_PREFERENCES
@@ -78,3 +80,12 @@ export const resetColumns = () => ({
   type: RESET_COLUMNS,
   payload: {}
 })
+
+export const displayTableRowsModal = () => ({
+  type: DISPLAY_TABLE_ROWS_MODAL
+})
+
+export const setNumberOfTableRows = numOfRows => ({
+  type: SET_NUMBER_OF_TABLE_ROWS,
+  payload: {numOfRows}
+})

packages/core/entity-list/src/modules/preferences/reducer.js

@@ -25,7 +25,13 @@ const resetPreferences = state => ({
   ...state,
   positions: {},
   sorting: [],
-  columns: {}
+  columns: {},
+  numOfRows: undefined
+})
+
+const setNumberOfTableRows = (state, {payload: {numOfRows}}) => ({
+  ...state,
+  numOfRows
 })
 
 const ACTION_HANDLERS = {
@@ -36,14 +42,16 @@ const ACTION_HANDLERS = {
   [actions.SET_PREFERENCES_LOADED]: reducerUtil.singleTransferReducer('preferencesLoaded'),
   [actions.RESET_SORTING]: resetSorting,
   [actions.RESET_COLUMNS]: resetColumns,
-  [actions.RESET_PREFERENCES]: resetPreferences
+  [actions.RESET_PREFERENCES]: resetPreferences,
+  [actions.SET_NUMBER_OF_TABLE_ROWS]: setNumberOfTableRows
 }
 
 const initialState = {
   positions: {},
   sorting: [],
   columns: {},
   widths: {},
+  numOfRows: undefined,
   preferencesLoaded: false
 }