Tables: store visible columns and max rows

webapp/components/Table/Footer/Footer.js

@@ -1,15 +1,19 @@
 import React from 'react'
 import { useNavigate } from 'react-router'
+import { useDispatch } from 'react-redux'
+import PropTypes from 'prop-types'
 
 import { Objects } from '@openforis/arena-core'
 
 import { updateQuery } from '@webapp/components/Table/tableLink'
 
 import Paginator from './Paginator'
+import { TablesActions } from '@webapp/store/ui/tables'
 
 export const Footer = (props) => {
-  const { list, offset, limit, count } = props
+  const { count, limit, list, module, offset } = props
 
+  const dispatch = useDispatch()
   const navigate = useNavigate()
 
   return (
@@ -19,10 +23,21 @@ export const Footer = (props) => {
           offset={offset}
           limit={limit}
           count={count}
-          setLimit={(limitUpdated) => updateQuery(navigate)({ limit: limitUpdated })}
+          setLimit={(limitUpdated) => {
+            updateQuery(navigate)({ limit: limitUpdated })
+            dispatch(TablesActions.updateMaxRows({ module, maxRows: limitUpdated }))
+          }}
           setOffset={(offsetUpdated) => updateQuery(navigate)({ offset: offsetUpdated })}
         />
       )}
     </div>
   )
 }
+
+Footer.propTypes = {
+  count: PropTypes.number.isRequired,
+  limit: PropTypes.number.isRequired,
+  list: PropTypes.array,
+  module: PropTypes.string.isRequired,
+  offset: PropTypes.number.isRequired,
+}

webapp/components/Table/Footer/Paginator/Paginator.js

@@ -29,11 +29,10 @@ const Paginator = (props) => {
           itemLabel={A.identity}
           selection={limit}
           onChange={(limitUpdated) => {
-            if (TableConstants.itemsPerPageValues.includes(Number(limitUpdated))) {
-              setLimit(limitUpdated)
-            } else {
-              setLimit(TableConstants.itemsPerPageDefault)
-            }
+            const limitNext = TableConstants.itemsPerPageValues.includes(Number(limitUpdated))
+              ? limitUpdated
+              : TableConstants.itemsPerPageDefault
+            setLimit(limitNext)
           }}
         />
       </div>

webapp/components/Table/Header/Header.js

@@ -11,13 +11,18 @@ const Header = (props) => {
     onVisibleColumnsChange,
     totalCount,
     visibleColumnsSelectionEnabled,
+    visibleColumnKeys,
   } = props
 
   return (
     <div className="table__header">
       {React.createElement(headerLeftComponent, { ...props, ...headerProps })}
       {visibleColumnsSelectionEnabled && totalCount > 0 && (
-        <VisibleColumnsMenu columns={columns} onSelectionChange={onVisibleColumnsChange} />
+        <VisibleColumnsMenu
+          columns={columns}
+          onSelectionChange={onVisibleColumnsChange}
+          selectedColumnKeys={visibleColumnKeys}
+        />
       )}
     </div>
   )
@@ -34,6 +39,7 @@ Header.propTypes = {
   onVisibleColumnsChange: PropTypes.func.isRequired,
   totalCount: PropTypes.number.isRequired,
   visibleColumnsSelectionEnabled: PropTypes.bool,
+  visibleColumnKeys: PropTypes.array.isRequired,
 }
 
 Header.defaultProps = {

webapp/components/Table/Header/VisibleColumnsMenu/VisibleColumnsMenu.js

@@ -1,6 +1,6 @@
 import './VisibleColumnsMenu.scss'
 
-import React, { useCallback, useState } from 'react'
+import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 
 import { Objects } from '@openforis/arena-core'
@@ -11,16 +11,13 @@ import { ButtonMenu } from '@webapp/components'
 import { Checkbox } from '@webapp/components/form'
 
 export const VisibleColumnsMenu = (props) => {
-  const { columns, onSelectionChange } = props
+  const { columns, onSelectionChange, selectedColumnKeys } = props
 
   const availableColumns = columns.filter((column) => !Objects.isEmpty(column.header) && column.header !== '#')
 
-  const [selectedColumnKeys, setSelectedColumnKeys] = useState(columns.map((col) => col.key))
-
   const onColummSelectionChange = useCallback(
     (key) => () => {
       const selectedColumnKeysNext = ArrayUtils.addOrRemoveItem({ item: key })(selectedColumnKeys)
-      setSelectedColumnKeys(selectedColumnKeysNext)
       onSelectionChange(selectedColumnKeysNext)
     },
     [onSelectionChange, selectedColumnKeys]
@@ -55,4 +52,5 @@ export const VisibleColumnsMenu = (props) => {
 VisibleColumnsMenu.propTypes = {
   columns: PropTypes.array.isRequired,
   onSelectionChange: PropTypes.func.isRequired,
+  selectedColumnKeys: PropTypes.array,
 }

webapp/components/Table/Table.js

@@ -53,6 +53,7 @@ const Table = (props) => {
     onRowClick,
     onVisibleColumnsChange,
     selectedItems,
+    visibleColumnKeys,
     visibleColumns,
   } = useTable({
     columns,
@@ -84,6 +85,7 @@ const Table = (props) => {
         onVisibleColumnsChange={onVisibleColumnsChange}
         selectedItems={selectedItems}
         visibleColumnsSelectionEnabled={visibleColumnsSelectionEnabled}
+        visibleColumnKeys={visibleColumnKeys}
       />
 
       <Content
@@ -114,7 +116,7 @@ const Table = (props) => {
         handleSortBy={handleSortBy}
         selectedItems={selectedItems}
       />
-      <Footer offset={offset} list={list} limit={limit} count={count} />
+      <Footer count={count} limit={limit} list={list} module={module} offset={offset} />
     </div>
   )
 }

webapp/components/Table/constants.js

@@ -1,4 +1,4 @@
 export const TableConstants = {
   itemsPerPageDefault: 30,
-  itemsPerPageValues: [15, 30, 50],
+  itemsPerPageValues: [15, 30, 50, 100],
 }

webapp/components/Table/useTable.js

@@ -1,10 +1,13 @@
-import { useEffect, useCallback, useState } from 'react'
+import { useEffect, useCallback, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router'
+import { useDispatch } from 'react-redux'
+
+import { ArrayUtils } from '@core/arrayUtils'
 
 import { useSurveyId } from '@webapp/store/survey'
 import { useAsyncGetRequest, useOnUpdate } from '@webapp/components/hooks'
 import { getLimit, getOffset, getSearch, getSort, updateQuery } from '@webapp/components/Table/tableLink'
-import { ArrayUtils } from '@core/arrayUtils'
+import { TablesActions, useTableMaxRows, useTableVisibleColumns } from '@webapp/store/ui/tables'
 
 export const useTable = ({
   columns,
@@ -15,15 +18,28 @@ export const useTable = ({
   onRowClick: onRowClickProp,
   selectable,
 }) => {
+  const dispatch = useDispatch()
+
   const [totalCount, setTotalCount] = useState(0)
-  const [visibleColumns, setVisibleColumns] = useState(columns)
+
+  const visibleColumnKeysInStore = useTableVisibleColumns(module)
+  const visibleColumnKeys = useMemo(
+    () => visibleColumnKeysInStore ?? columns?.map((column) => column.key) ?? [],
+    [columns, visibleColumnKeysInStore]
+  )
+  const visibleColumns = useMemo(
+    () => columns?.filter((column) => visibleColumnKeys.includes(column.key)) ?? [],
+    [columns, visibleColumnKeys]
+  )
+  const limitInState = useTableMaxRows(module)
+  const limitInLink = getLimit()
+  const limit = limitInState ?? limitInLink
 
   const navigate = useNavigate()
   const surveyId = useSurveyId()
   const apiUri = moduleApiUri || `/api/survey/${surveyId}/${module}`
 
   const offset = getOffset()
-  const limit = getLimit()
   const sort = getSort()
   const search = getSearch()
 
@@ -117,10 +133,10 @@ export const useTable = ({
   )
 
   const onVisibleColumnsChange = useCallback(
-    (visibleColumnKeys) => {
-      setVisibleColumns(columns.filter((column) => visibleColumnKeys.includes(column.key)))
+    (visibleColumnKeysUpdated) => {
+      dispatch(TablesActions.updateVisibleColumns({ module, visibleColumns: visibleColumnKeysUpdated }))
     },
-    [columns]
+    [module]
   )
 
   return {
@@ -139,6 +155,7 @@ export const useTable = ({
     onRowClick,
     onVisibleColumnsChange,
     selectedItems,
+    visibleColumnKeys,
     visibleColumns,
   }
 }

webapp/store/ui/reducer.js

@@ -6,6 +6,7 @@ import { LoaderReducer, LoaderState } from './loader'
 import { DialogConfirmReducer, DialogConfirmState } from './dialogConfirm'
 import { RecordReducer, RecordState } from './record'
 import { SurveyFormReducer, SurveyFormState } from './surveyForm'
+import { TablesReducer, TablesState } from './tables'
 import { ChainReducer } from './chain'
 
 export default combineReducers({
@@ -15,5 +16,6 @@ export default combineReducers({
   [DialogConfirmState.stateKey]: DialogConfirmReducer,
   [RecordState.stateKey]: RecordReducer,
   [SurveyFormState.stateKey]: SurveyFormReducer,
+  [TablesState.stateKey]: TablesReducer,
   chain: ChainReducer,
 })

webapp/store/ui/tables/actions.js

@@ -0,0 +1,12 @@
+export const tableVisibleColumnsUpdate = 'tables/visibleColumnsUpdate'
+export const tableMaxRowsUpdate = 'tables/maxRowsUpdate'
+
+export const updateVisibleColumns =
+  ({ module, visibleColumns }) =>
+  (dispatch) =>
+    dispatch({ type: tableVisibleColumnsUpdate, module, visibleColumns })
+
+export const updateMaxRows =
+  ({ module, maxRows }) =>
+  (dispatch) =>
+    dispatch({ type: tableMaxRowsUpdate, module, maxRows })

webapp/store/ui/tables/hooks.js

@@ -0,0 +1,6 @@
+import { useSelector } from 'react-redux'
+import * as TablesState from './state'
+
+export const useTableMaxRows = (module) => useSelector(TablesState.getMaxRows(module))
+
+export const useTableVisibleColumns = (module) => useSelector(TablesState.getVisibleColumns(module))

webapp/store/ui/tables/index.js

@@ -0,0 +1,6 @@
+import * as TablesActions from './actions'
+import TablesReducer from './reducer'
+import * as TablesState from './state'
+
+export { TablesActions, TablesReducer, TablesState }
+export { useTableMaxRows, useTableVisibleColumns } from './hooks'

webapp/store/ui/tables/reducer.js

@@ -0,0 +1,20 @@
+import { exportReducer } from '@webapp/utils/reduxUtils'
+
+import { SystemActions } from '@webapp/store/system'
+
+import * as TablesActions from './actions'
+import * as TablesState from './state'
+
+const actionHandlers = {
+  // Reset form
+  [SystemActions.SYSTEM_RESET]: () => ({}),
+
+  // Tables
+  [TablesActions.tableVisibleColumnsUpdate]: (state, { module, visibleColumns }) =>
+    TablesState.assocVisibleColumns({ module, visibleColumns })(state),
+
+  [TablesActions.tableMaxRowsUpdate]: (state, { module, maxRows }) =>
+    TablesState.assocMaxRows({ module, maxRows })(state),
+}
+
+export default exportReducer(actionHandlers)

webapp/store/ui/tables/state.js

@@ -0,0 +1,27 @@
+import * as A from '@core/arena'
+
+import * as UiState from '../state'
+import { Objects } from '@openforis/arena-core'
+
+export const stateKey = 'tables'
+
+const getState = A.pipe(UiState.getState, A.propOr({}, stateKey))
+
+const keys = {
+  visibleColumnKeysByModule: 'visibleColumnKeysByModule',
+  maxRowsByModule: 'maxRowsByModule',
+}
+
+export const getVisibleColumns = (module) => A.pipe(getState, Objects.path([keys.visibleColumnKeysByModule, module]))
+
+export const getMaxRows = (module) => A.pipe(getState, Objects.path([keys.maxRowsByModule, module]))
+
+export const assocVisibleColumns =
+  ({ module, visibleColumns }) =>
+  (state) =>
+    Objects.assocPath({ obj: state, path: [keys.visibleColumnKeysByModule, module], value: visibleColumns })
+
+export const assocMaxRows =
+  ({ module, maxRows }) =>
+  (state) =>
+    Objects.assocPath({ obj: state, path: [keys.maxRowsByModule, module], value: maxRows })