From 431a6be37739d05a2b7457c19f9a2f2075e56fbf Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 24 Nov 2020 11:34:28 +0200 Subject: [PATCH] feat: move accounts data-table component to components file. --- .../src/containers/Accounting/components.js | 2 +- .../containers/Accounts/AccountsDataTable.js | 85 ++----------------- .../containers/Accounts/AccountsViewsTabs.js | 7 +- client/src/static/json/icons.js | 6 ++ client/src/store/accounts/accounts.reducer.js | 11 +++ .../src/store/dashboard/dashboard.reducer.js | 16 +++- 6 files changed, 42 insertions(+), 85 deletions(-) diff --git a/client/src/containers/Accounting/components.js b/client/src/containers/Accounting/components.js index 207a4167f..4cdf2c31c 100644 --- a/client/src/containers/Accounting/components.js +++ b/client/src/containers/Accounting/components.js @@ -31,7 +31,7 @@ const AmountPopoverContentLineRender = ({ -
+
D. USD -{' '} {account.name} ({account.code})
diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js index 24b72eca7..520723077 100644 --- a/client/src/containers/Accounts/AccountsDataTable.js +++ b/client/src/containers/Accounts/AccountsDataTable.js @@ -6,18 +6,21 @@ import { MenuItem, MenuDivider, Position, - Classes, - Tooltip, Intent, } 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 { Icon, DataTable, If } from 'components'; import { compose } from 'utils'; import { useUpdateEffect } from 'hooks'; import { CLASSES } from 'common/classes'; +import { + NormalCell, + BalanceCell, + AccountNameAccessor +} from './components'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withAccountsActions from 'containers/Accounts/withAccountsActions'; @@ -26,82 +29,6 @@ import withDialogActions from 'containers/Dialog/withDialogActions'; import withCurrentView from 'containers/Views/withCurrentView'; - -function NormalCell({ cell }) { - const { formatMessage } = useIntl(); - - const account = cell.row.original; - const normal = account?.type?.normal || ''; - const arrowDirection = normal === 'credit' ? 'down' : 'up'; - - return ( - - - - ); -} - -function BalanceCell({ cell }) { - const account = cell.row.original; - - return account.amount ? ( - - - - ) : ( - — - ); -} - -function InactiveSemafro() { - return ( - } - className={classNames( - Classes.TOOLTIP_INDICATOR, - 'bp3-popover-wrapper--inactive-semafro', - )} - position={Position.TOP} - hoverOpenDelay={250} - > -
- - ); -} - -function AccountNameAccessor(row) { - return ( - <> - - - - {row.name} - - - - {row.name} - - - - - - - ); -} - function AccountsDataTable({ // #withDashboardActions accountsTable, diff --git a/client/src/containers/Accounts/AccountsViewsTabs.js b/client/src/containers/Accounts/AccountsViewsTabs.js index a7f931659..048725e49 100644 --- a/client/src/containers/Accounts/AccountsViewsTabs.js +++ b/client/src/containers/Accounts/AccountsViewsTabs.js @@ -1,12 +1,12 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import { useHistory } from 'react-router'; import { connect } from 'react-redux'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { useParams, withRouter } from 'react-router-dom'; -import { pick, debounce } from 'lodash'; +import { pick } from 'lodash'; import { useUpdateEffect } from 'hooks'; -import { DashboardViewsTabs, Icon } from 'components'; +import { DashboardViewsTabs } from 'components'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withAccounts from 'containers/Accounts/withAccounts'; import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions'; @@ -34,7 +34,6 @@ function AccountsViewsTabs({ customViewChanged, onViewChanged, }) { - const history = useHistory(); const { custom_view_id: customViewId = null } = useParams(); diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js index 903f415c0..cdf481df8 100644 --- a/client/src/static/json/icons.js +++ b/client/src/static/json/icons.js @@ -292,5 +292,11 @@ export default { 'M13 12h7v1.5h-7zm0-2.5h7V11h-7zm0 5h7V16h-7zM21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 15h-9V6h9v13z', ], viewBox: '0 0 24 24', + }, + 'library-add-18': { + path: [ + 'M16 9h-2.55V6h-2.9v3H8l4 4zm3-6H4.99C3.88 3 3 3.9 3 5v14c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5v-3h3.56c.69 1.19 1.97 2 3.45 2s2.75-.81 3.45-2H19v3zm0-5h-4.99c0 1.1-.9 2-2 2s-2-.9-2-2H5l-.01-9H19v9z', + ], + viewBox: '0 0 24 24' } }; diff --git a/client/src/store/accounts/accounts.reducer.js b/client/src/store/accounts/accounts.reducer.js index e0e75d336..e385a1fa9 100644 --- a/client/src/store/accounts/accounts.reducer.js +++ b/client/src/store/accounts/accounts.reducer.js @@ -1,11 +1,13 @@ import t from 'store/types'; import { createReducer} from '@reduxjs/toolkit'; import { createTableQueryReducers } from 'store/queryReducers'; +import { listToTree } from 'utils'; const initialState = { items: {}, views: {}, list: [], + listTree: [], accountsTypes: [], accountsById: {}, tableQuery: { @@ -44,6 +46,15 @@ const accountsReducer = createReducer(initialState, { [t.ACCOUNTS_LIST_SET]: (state, action) => { const { accounts } = action.payload; state.list = accounts.map(account => account.id); + state.listTree = listToTree(accounts, { + parentFieldKey: 'parent_account_id', + idFieldKey: 'id', + nodeMapper: (item) => ({ + id: item.id, + parent_account_id: item.parent_account_id, + children: [], + }), + }); }, [t.ACCOUNT_TYPES_LIST_SET]: (state, action) => { diff --git a/client/src/store/dashboard/dashboard.reducer.js b/client/src/store/dashboard/dashboard.reducer.js index 376931218..717ce53d1 100644 --- a/client/src/store/dashboard/dashboard.reducer.js +++ b/client/src/store/dashboard/dashboard.reducer.js @@ -1,5 +1,7 @@ import t from 'store/types'; import { createReducer } from '@reduxjs/toolkit'; +import { persistReducer } from 'redux-persist' +import storage from 'redux-persist/lib/storage' // defaults to localStorage for web const initialState = { pageTitle: '', @@ -12,7 +14,7 @@ const initialState = { requestsLoading: 0, }; -export default createReducer(initialState, { +const reducerInstance = createReducer(initialState, { [t.CHANGE_DASHBOARD_PAGE_TITLE]: (state, action) => { state.pageTitle = action.pageTitle; }, @@ -65,6 +67,18 @@ export default createReducer(initialState, { } }); +export default persistReducer({ + key: 'bigcapital:dashboard', + blacklist: [ + 'pageTitle', + 'pageSubtitle', + 'pageHint', + 'preferencesPageTitle', + 'topbarEditViewId' + ], + storage, +}, reducerInstance); + export const getDialogPayload = (state, dialogName) => { return typeof state.dashboard.dialogs[dialogName] !== 'undefined' ? state.dashboard.dialogs[dialogName].payload : {};