diff --git a/client/src/components/AccountsSuggestField.js b/client/src/components/AccountsSuggestField.js index f43cdb2f4..a47cb0703 100644 --- a/client/src/components/AccountsSuggestField.js +++ b/client/src/components/AccountsSuggestField.js @@ -15,7 +15,7 @@ export default function AccountsSuggestField({ defaultSelectText = 'Select account', onAccountSelected, - filterByRootTypes = [], + filterByParentTypes = [], filterByTypes = [], filterByNormal, popoverFill = false, @@ -26,24 +26,23 @@ export default function AccountsSuggestField({ const filteredAccounts = useMemo(() => { let filteredAccounts = [...accounts]; - if (!isEmpty(filterByRootTypes)) { + if (!isEmpty(filterByParentTypes)) { filteredAccounts = filteredAccounts.filter( - (account) => filterByRootTypes.indexOf(account.type.root_type) !== -1, + (account) => filterByParentTypes.indexOf(account.account_parent_type) !== -1, ); } if (!isEmpty(filterByTypes)) { filteredAccounts = filteredAccounts.filter( - (account) => filterByTypes.indexOf(account.type.key) !== -1, + (account) => filterByTypes.indexOf(account.account_type) !== -1, ); } if (!isEmpty(filterByNormal)) { filteredAccounts = filteredAccounts.filter( - (account) => - filterByTypes.indexOf(account.type.normal) === filterByNormal, + (account) => filterByTypes.indexOf(account.account_normal) === filterByNormal, ); } return filteredAccounts; - }, [accounts, filterByRootTypes, filterByTypes, filterByNormal]); + }, [accounts, filterByParentTypes, filterByTypes, filterByNormal]); // Find initial account object to set it as default account in initial render. const initialAccount = useMemo( diff --git a/client/src/components/DataTableCells/AccountsListFieldCell.js b/client/src/components/DataTableCells/AccountsListFieldCell.js index c5c2a6dcc..58fac50c1 100644 --- a/client/src/components/DataTableCells/AccountsListFieldCell.js +++ b/client/src/components/DataTableCells/AccountsListFieldCell.js @@ -1,11 +1,14 @@ -import React, { useCallback, useMemo } from 'react'; -import AccountsSuggestField from 'components/AccountsSuggestField'; -// import AccountsSelectList from 'components/AccountsSelectList'; +import React, { useRef, useCallback, useMemo } from 'react'; import classNames from 'classnames'; +import { useCellAutoFocus } from 'hooks'; + +import AccountsSuggestField from 'components/AccountsSuggestField'; + +// import AccountsSelectList from 'components/AccountsSelectList'; import { FormGroup, Classes, Intent } from '@blueprintjs/core'; // Account cell renderer. -const AccountCellRenderer = ({ +export default function AccountCellRenderer({ column: { id, accountsDataProp, @@ -18,9 +21,14 @@ const AccountCellRenderer = ({ accounts: defaultAccounts, updateData, errors, + autoFocus, ...restPayloadProps }, -}) => { +}) { + const accountRef = useRef(); + + useCellAutoFocus(accountRef, autoFocus, id, index); + const handleAccountSelected = useCallback( (account) => { updateData(index, id, account.id); @@ -49,9 +57,12 @@ const AccountCellRenderer = ({ selectedAccountId={initialValue} filterByRootTypes={filterAccountsByRootType} filterByTypes={filterAccountsByTypes} + inputProps={{ + inputRef: (ref) => (accountRef.current = ref), + }} + openOnKeyDown={true} + blurOnSelectClose={false} /> ); -}; - -export default AccountCellRenderer; +} diff --git a/client/src/components/DataTableCells/ItemsListCell.js b/client/src/components/DataTableCells/ItemsListCell.js index ba77db9c3..77e3970fc 100644 --- a/client/src/components/DataTableCells/ItemsListCell.js +++ b/client/src/components/DataTableCells/ItemsListCell.js @@ -1,15 +1,23 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useRef } from 'react'; // import ItemsListField from 'components/ItemsListField'; import ItemsSuggestField from 'components/ItemsSuggestField'; import classNames from 'classnames'; + import { FormGroup, Classes, Intent } from '@blueprintjs/core'; +import { useCellAutoFocus } from 'hooks'; + export default function ItemsListCell({ column: { id, filterSellable, filterPurchasable }, row: { index }, cell: { value: initialValue }, - payload: { items, updateData, errors }, + payload: { items, updateData, errors, autoFocus }, }) { + const fieldRef = useRef(); + + // Auto-focus the items list input field. + useCellAutoFocus(fieldRef, autoFocus, id, index); + const handleItemSelected = useCallback( (item) => { updateData(index, id, item.id); @@ -30,6 +38,11 @@ export default function ItemsListCell({ selectedItemId={initialValue} sellable={filterSellable} purchasable={filterPurchasable} + inputProps={{ + inputRef: (ref) => (fieldRef.current = ref), + }} + openOnKeyDown={true} + blurOnSelectClose={false} /> ); diff --git a/client/src/components/Datatable/TableCell.js b/client/src/components/Datatable/TableCell.js index d8122a5c1..2636e5074 100644 --- a/client/src/components/Datatable/TableCell.js +++ b/client/src/components/Datatable/TableCell.js @@ -29,7 +29,7 @@ export default function TableCell({
+ + + + + + +
+ {column.render('Header')} + + + + +
+ + {column.canResize && ( +
+
+
+ )} +
+ ); +} + +function TableHeaderGroup({ headerGroup }) { return (
{headerGroup.headers.map((column, index) => ( -
- - - - - - -
- {column.render('Header')} - - - - -
- - {column.canResize && ( -
-
-
- )} -
+ ))}
); diff --git a/client/src/containers/Accounting/MakeJournalEntriesTable.js b/client/src/containers/Accounting/MakeJournalEntriesTable.js index f522a8f2a..d9ecba07c 100644 --- a/client/src/containers/Accounting/MakeJournalEntriesTable.js +++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js @@ -2,11 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback } from 'react'; import { Button } from '@blueprintjs/core'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { omit } from 'lodash'; -import classNames from 'classnames'; - -import { CLASSES } from 'common/classes'; -import DataTable from 'components/DataTable'; -import { compose, transformUpdatedRows, saveInvoke } from 'utils'; +import { compose, saveInvoke } from 'utils'; import { AccountsListFieldCell, MoneyFieldCell, @@ -21,9 +17,12 @@ import { NoteCellRenderer, } from './components'; import { DataTableEditable } from 'components'; + import withAccounts from 'containers/Accounts/withAccounts'; import withCustomers from 'containers/Customers/withCustomers'; +import { updateDataReducer } from './utils'; + /** * Make journal entries table component. */ @@ -126,8 +125,9 @@ function MakeJournalEntriesTable({ }; // Handles update datatable data. - const handleUpdateData = (rowIndex, columnIdOrObj, value) => { - const newRows = transformUpdatedRows(rows, rowIndex, columnIdOrObj, value); + const handleUpdateData = (rowIndex, columnId, value) => { + const newRows = updateDataReducer(rows, rowIndex, columnId, value); + saveInvoke( onChange, newRows @@ -185,6 +185,7 @@ function MakeJournalEntriesTable({ contact_type: 'customer', })), ], + autoFocus: ['account_id', 0], }} actions={ <> diff --git a/client/src/containers/Accounting/MakeJournalFormFloatingActions.js b/client/src/containers/Accounting/MakeJournalFormFloatingActions.js index 2be8dfa2a..4df73ae9e 100644 --- a/client/src/containers/Accounting/MakeJournalFormFloatingActions.js +++ b/client/src/containers/Accounting/MakeJournalFormFloatingActions.js @@ -91,7 +91,6 @@ export default function MakeJournalFloatingAction({