feat: move accounts data-table component to components file.

client/src/containers/Accounting/components.js

@@ -31,7 +31,7 @@ const AmountPopoverContentLineRender = ({
       </Choose.When>
 
       <Choose.When condition={isCredit}>
-        <div class={'ml1'}>
+        <div>
           D. <Money amount={journalEntry.credit} currency={'USD'} /> USD -{' '}
           {account.name} <If condition={account.code}>({account.code})</If>
         </div>

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 (
-    <Tooltip
-      className={Classes.TOOLTIP_INDICATOR}
-      content={formatMessage({ id: normal })}
-      position={Position.RIGHT}
-      hoverOpenDelay={100}
-    >
-      <Icon icon={`arrow-${arrowDirection}`} />
-    </Tooltip>
-  );
-}
-
-function BalanceCell({ cell }) {
-  const account = cell.row.original;
-
-  return account.amount ? (
-    <span>
-      <Money amount={account.amount} currency={'USD'} />
-    </span>
-  ) : (
-    <span class="placeholder">—</span>
-  );
-}
-
-function InactiveSemafro() {
-  return (
-    <Tooltip
-      content={<T id="inactive" />}
-      className={classNames(
-        Classes.TOOLTIP_INDICATOR,
-        'bp3-popover-wrapper--inactive-semafro',
-      )}
-      position={Position.TOP}
-      hoverOpenDelay={250}
-    >
-      <div className="inactive-semafro"></div>
-    </Tooltip>
-  );
-}
-
-function AccountNameAccessor(row) {
-  return (
-    <>
-      <Choose>
-        <Choose.When condition={!!row.description}>
-          <Tooltip
-            className={classNames(
-              Classes.TOOLTIP_INDICATOR,
-              'bp3-popover-wrapper--account-desc',
-            )}
-            content={row.description}
-            position={Position.RIGHT_TOP}
-            hoverOpenDelay={500}
-          >
-            {row.name}
-          </Tooltip>
-        </Choose.When>
-
-        <Choose.Otherwise>{row.name}</Choose.Otherwise>
-      </Choose>
-
-      <If condition={!row.active}>
-        <InactiveSemafro />
-      </If>
-    </>
-  );
-}
-
 function AccountsDataTable({
   // #withDashboardActions
   accountsTable,

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();
 

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'
   }
 };

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) => {

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 : {};