From 3fc390652df9532f6262d12f536e1dc3b1e853ef Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 4 Jul 2020 15:30:24 +0200 Subject: [PATCH] - feat: Highlight inactive accounts in data-table. - feat: Separate accounts list and table order. --- .../Accounting/MakeJournalEntriesTable.js | 8 +-- .../containers/Accounts/AccountsDataTable.js | 60 ++++++++++++++----- .../src/containers/Accounts/withAccounts.js | 7 ++- .../Dialogs/AccountFormDialog.container.js | 4 +- .../containers/Expenses/ExpenseFormHeader.js | 8 +-- .../src/containers/Expenses/ExpenseTable.js | 8 +-- .../GeneralLedger/GeneralLedgerHeader.js | 8 +-- client/src/lang/en/index.js | 1 + client/src/store/accounts/accounts.actions.js | 21 +++---- client/src/store/accounts/accounts.reducer.js | 6 ++ .../src/store/accounts/accounts.selectors.js | 11 ++++ client/src/store/accounts/accounts.types.js | 1 + client/src/style/pages/accounts-chart.scss | 22 ++++++- 13 files changed, 116 insertions(+), 49 deletions(-) diff --git a/client/src/containers/Accounting/MakeJournalEntriesTable.js b/client/src/containers/Accounting/MakeJournalEntriesTable.js index 41d0c6658..662c0000d 100644 --- a/client/src/containers/Accounting/MakeJournalEntriesTable.js +++ b/client/src/containers/Accounting/MakeJournalEntriesTable.js @@ -95,7 +95,7 @@ function MakeJournalEntriesTable({ customers, // #withAccounts - accounts, + accountsList, // #ownPorps onClickRemoveRow, @@ -251,7 +251,7 @@ function MakeJournalEntriesTable({ rowClassNames={rowClassNames} sticky={true} payload={{ - accounts, + accounts: accountsList, errors: errors.entries || [], updateData: handleUpdateData, removeRow: handleRemoveRow, @@ -286,8 +286,8 @@ function MakeJournalEntriesTable({ } export default compose( - withAccounts(({ accounts }) => ({ - accounts, + withAccounts(({ accountsList }) => ({ + accountsList, })), withCustomers(({ customersItems }) => ({ customers: customersItems, diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js index 9bac00b5f..bca718d49 100644 --- a/client/src/containers/Accounts/AccountsDataTable.js +++ b/client/src/containers/Accounts/AccountsDataTable.js @@ -12,11 +12,13 @@ import { } from '@blueprintjs/core'; import { withRouter } from 'react-router'; import { FormattedMessage as T, useIntl } from 'react-intl'; +import classnames from 'classnames'; import { Icon, DataTable, Money, If, + Choose, } from 'components'; import { compose } from 'utils'; import { useUpdateEffect } from 'hooks'; @@ -60,24 +62,54 @@ function BalanceCell({ cell }) { ); } -function AccountNameAccessor(row) { - return row.description ? ( +function InactiveSemafro() { + return ( - {row.name} + content={} + className={classnames( + Classes.TOOLTIP_INDICATOR, + 'bp3-popover-wrapper--inactive-semafro' + )} + position={Position.TOP} + hoverOpenDelay={250}> +
- ) : ( - row.name + ); +} + +function AccountNameAccessor(row) { + return ( + <> + + + + {row.name} + + + + + { row.name } + + + + + + + ); } function AccountsDataTable({ // #withDashboardActions - accounts, + accountsTable, accountsLoading, // #withDialog. @@ -256,7 +288,7 @@ function AccountsDataTable({ ({ + withAccounts(({ accountsLoading, accountsTable }) => ({ accountsLoading, - accounts, + accountsTable, })), )(AccountsDataTable); diff --git a/client/src/containers/Accounts/withAccounts.js b/client/src/containers/Accounts/withAccounts.js index 67a53c731..38186b3c1 100644 --- a/client/src/containers/Accounts/withAccounts.js +++ b/client/src/containers/Accounts/withAccounts.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import { - getAccountsItems, + getAccountsItems, getAccountsListFactory, } from 'store/accounts/accounts.selectors'; import { getResourceViews, @@ -8,10 +8,13 @@ import { export default (mapState) => { + const getAccountsList = getAccountsListFactory(); + const mapStateToProps = (state, props) => { const mapped = { accountsViews: getResourceViews(state, props, 'accounts'), - accounts: getAccountsItems(state, props), + accountsTable: getAccountsItems(state, props), + accountsList: getAccountsList(state, props), accountsTypes: state.accounts.accountsTypes, accountsTableQuery: state.accounts.tableQuery, diff --git a/client/src/containers/Dialogs/AccountFormDialog.container.js b/client/src/containers/Dialogs/AccountFormDialog.container.js index 3708a4c75..7356fe6b7 100644 --- a/client/src/containers/Dialogs/AccountFormDialog.container.js +++ b/client/src/containers/Dialogs/AccountFormDialog.container.js @@ -20,9 +20,9 @@ export default compose( AccountFormDialogConnect, withAccountsActions, withAccountDetail, - withAccounts(({ accountsTypes, accounts }) => ({ + withAccounts(({ accountsTypes, accountsList }) => ({ accountsTypes, - accounts, + accounts: accountsList, })), withDialogActions, ); diff --git a/client/src/containers/Expenses/ExpenseFormHeader.js b/client/src/containers/Expenses/ExpenseFormHeader.js index 9e015855a..a75675e28 100644 --- a/client/src/containers/Expenses/ExpenseFormHeader.js +++ b/client/src/containers/Expenses/ExpenseFormHeader.js @@ -26,7 +26,7 @@ import withAccounts from 'containers/Accounts/withAccounts'; function ExpenseFormHeader({ formik: { errors, touched, setFieldValue, getFieldProps, values }, currenciesList, - accounts, + accountsList, accountsTypes, }) { const [selectedItems, setSelectedItems] = useState({}); @@ -165,7 +165,7 @@ function ExpenseFormHeader({ } > } selectedAccountId={values.payment_account_id} @@ -252,8 +252,8 @@ function ExpenseFormHeader({ } export default compose( - withAccounts(({ accounts, accountsTypes }) => ({ - accounts, + withAccounts(({ accountsList, accountsTypes }) => ({ + accountsList, accountsTypes, })), withCurrencies(({ currenciesList }) => ({ diff --git a/client/src/containers/Expenses/ExpenseTable.js b/client/src/containers/Expenses/ExpenseTable.js index 51dee5071..5427b1d58 100644 --- a/client/src/containers/Expenses/ExpenseTable.js +++ b/client/src/containers/Expenses/ExpenseTable.js @@ -87,7 +87,7 @@ const TotalAmountCellRenderer = (chainedComponent, type) => (props) => { function ExpenseTable({ // #withAccounts - accounts, + accountsList, // #ownPorps onClickRemoveRow, @@ -228,7 +228,7 @@ function ExpenseTable({ rowClassNames={rowClassNames} sticky={true} payload={{ - accounts, + accounts: accountsList, errors: errors.categories || [], updateData: handleUpdateData, removeRow: handleRemoveRow, @@ -256,7 +256,7 @@ function ExpenseTable({ } export default compose( - withAccounts(({ accounts }) => ({ - accounts, + withAccounts(({ accountsList }) => ({ + accountsList, })), )(ExpenseTable); diff --git a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js index bd4aa0dba..99a34682d 100644 --- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js +++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js @@ -25,7 +25,7 @@ function GeneralLedgerHeader({ pageFilter, // #withAccounts - accounts, + accountsList, // #withGeneralLedgerActions refreshGeneralLedgerSheet, @@ -83,7 +83,7 @@ function GeneralLedgerHeader({ className={classNames('form-group--select-list', Classes.FILL)} > @@ -102,8 +102,8 @@ function GeneralLedgerHeader({ } export default compose( - withAccounts(({ accounts }) => ({ - accounts, + withAccounts(({ accountsList }) => ({ + accountsList, })), withGeneralLedger(({ generalLedgerSheetFilter, generalLedgerSheetRefresh }) => ({ generalLedgerSheetFilter, diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index ed97347c1..e18d6f72b 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -528,4 +528,5 @@ export default { 'A unique code/number for this account (limited to 10 characters)', logic_expression: 'logic expression', assign_to_customer: 'Assign to Customer', + inactive: 'Inactive', }; diff --git a/client/src/store/accounts/accounts.actions.js b/client/src/store/accounts/accounts.actions.js index 2c8778cf8..87565f9b9 100644 --- a/client/src/store/accounts/accounts.actions.js +++ b/client/src/store/accounts/accounts.actions.js @@ -19,32 +19,29 @@ export const fetchAccountTypes = () => { }); }; -export const fetchAccountsList = ({ query } = {}) => { +export const fetchAccountsList = () => { return (dispatch) => new Promise((resolve, reject) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_LOADING, - }); + const query = { column_sort_by: 'name', sort_order: 'asc' }; + ApiService.get('accounts', { params: query }) .then((response) => { - dispatch({ - type: t.ACCOUNTS_PAGE_SET, - accounts: response.data.accounts, - customViewId: response.data.customViewId, - }); dispatch({ type: t.ACCOUNTS_ITEMS_SET, accounts: response.data.accounts, }); + dispatch({ + type: t.ACCOUNTS_LIST_SET, + payload: { + accounts: response.data.accounts, + } + }) dispatch({ type: t.SET_DASHBOARD_REQUEST_COMPLETED, }); resolve(response); }) .catch((error) => { - dispatch({ - type: t.SET_DASHBOARD_REQUEST_COMPLETED, - }); reject(error); }); }); diff --git a/client/src/store/accounts/accounts.reducer.js b/client/src/store/accounts/accounts.reducer.js index 5c3608724..123cc43ac 100644 --- a/client/src/store/accounts/accounts.reducer.js +++ b/client/src/store/accounts/accounts.reducer.js @@ -5,6 +5,7 @@ import { createTableQueryReducers } from 'store/queryReducers'; const initialState = { items: {}, views: {}, + list: [], accountsTypes: [], accountsById: {}, tableQuery: { @@ -40,6 +41,11 @@ const accountsReducer = createReducer(initialState, { }; }, + [t.ACCOUNTS_LIST_SET]: (state, action) => { + const { accounts } = action.payload; + state.list = accounts.map(account => account.id); + }, + [t.ACCOUNT_TYPES_LIST_SET]: (state, action) => { state.accountsTypes = action.account_types; }, diff --git a/client/src/store/accounts/accounts.selectors.js b/client/src/store/accounts/accounts.selectors.js index 2b99ce2b7..7033a556e 100644 --- a/client/src/store/accounts/accounts.selectors.js +++ b/client/src/store/accounts/accounts.selectors.js @@ -6,6 +6,9 @@ const accountsDataSelector = (state) => state.accounts.items; const accountsCurrentViewSelector = (state) => state.accounts.currentViewId; const accountIdPropSelector = (state, props) => props.accountId; +const accountsListSelector = state => state.accounts.list; + + export const getAccountsItems = createSelector( accountsViewsSelector, accountsDataSelector, @@ -19,6 +22,14 @@ export const getAccountsItems = createSelector( }, ); +export const getAccountsListFactory = () => createSelector( + accountsListSelector, + accountsDataSelector, + (accounts, accountsItems) => { + return pickItemsFromIds(accountsItems, accounts); + }, +) + export const getAccountById = createSelector( accountsDataSelector, accountIdPropSelector, diff --git a/client/src/store/accounts/accounts.types.js b/client/src/store/accounts/accounts.types.js index 72df55cba..5132e5317 100644 --- a/client/src/store/accounts/accounts.types.js +++ b/client/src/store/accounts/accounts.types.js @@ -3,6 +3,7 @@ export default { ACCOUNT_TYPES_LIST_SET: 'ACCOUNT_TYPES_LIST_SET', ACCOUNTS_PAGE_SET: 'ACCOUNTS_PAGE_SET', + ACCOUNTS_LIST_SET: 'ACCOUNTS_LIST_SET', ACCOUNTS_ITEMS_SET: 'ACCOUNTS_ITEMS_SET', ACCOUNT_SET: 'ACCOUNT_SET', ACCOUNT_DELETE: 'ACCOUNT_DELETE', diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss index 37352cd08..151fefe6b 100644 --- a/client/src/style/pages/accounts-chart.scss +++ b/client/src/style/pages/accounts-chart.scss @@ -16,10 +16,26 @@ padding-bottom: 0.36rem; } .account_name{ + > div{ + width: 100%; + } - .bp3-tooltip-indicator{ - cursor: default; - border-bottom-color: #c6c6c6; + .bp3-popover-wrapper--inactive-semafro{ + margin-left: 8px; + margin-right: 6px; + float: right; + border: 0; + } + .bp3-popover-wrapper--account-desc{ + border-bottom-color: #BBB; + } + .inactive-semafro{ + height: 7px; + width: 7px; + background: #BBB; + display: inline-block; + border-radius: 8px; + } } .normal{