feat: fix accounts issue.

client/src/containers/Accounts/AccountsActionsBar.js

@@ -64,6 +64,11 @@ function AccountsActionsBar({
 
   const filterDropdown = FilterDropdown({
     fields: resourceFields,
+    initialCondition: {
+      fieldKey: 'name',
+      compatator: 'contains',
+      value: '',
+    },
     onFilterChange: (filterConditions) => {
       setFilterCount(filterConditions.length || 0);
       addAccountsTableQueries({
@@ -125,7 +130,7 @@ function AccountsActionsBar({
               filterCount <= 0 ? (
                 <T id={'filter'} />
               ) : (
-                `${filterCount} filters applied`
+                <T id={'count_filters_applied'} values={{ count: filterCount }} />
               )
             }
             icon={<Icon icon="filter-16" iconSize={16} />}

client/src/containers/Accounts/AccountsChart.js

@@ -333,6 +333,7 @@ function AccountsChart({
             <AccountsViewsTabs onViewChanged={handleViewChanged} />
 
             <AccountsDataTable
+              loading={fetchAccountsHook.isFetching}
               onDeleteAccount={handleDeleteAccount}
               onInactiveAccount={handleInactiveAccount}
               onActivateAccount={handleActivateAccount}

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
 import {
   Button,
   Popover,
@@ -10,6 +10,7 @@ import {
   Tooltip,
   Intent,
 } from '@blueprintjs/core';
+import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
 import Icon from 'components/Icon';
@@ -24,6 +25,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withDialogActions from 'containers/Dialog/withDialogActions';
+import withCurrentView from 'containers/Views/withCurrentView';
 
 import { If } from 'components';
 
@@ -35,6 +37,8 @@ function AccountsDataTable({
   // #withDialog.
   openDialog,
 
+  currentViewId,
+
   // own properties
   loading,
   onFetchData,
@@ -43,14 +47,18 @@ function AccountsDataTable({
   onInactiveAccount,
   onActivateAccount,
 }) {
-  const [initialMount, setInitialMount] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const { formatMessage } = useIntl();
 
+  useEffect(() => {
+    setIsMounted(false);
+  }, [currentViewId]);
+
   useUpdateEffect(() => {
     if (!accountsLoading) {
-      setInitialMount(true);
+      setIsMounted(true);
     }
-  }, [accountsLoading, setInitialMount]);
+  }, [accountsLoading, setIsMounted]);
 
   const handleEditAccount = useCallback(
     (account) => () => {
@@ -132,21 +140,21 @@ function AccountsDataTable({
           );
         },
         className: 'account_name',
-        width: 300,
+        width: 220,
       },
       {
         id: 'code',
         Header: formatMessage({ id: 'code' }),
         accessor: 'code',
         className: 'code',
-        width: 100,
+        width: 125,
       },
       {
         id: 'type',
         Header: formatMessage({ id: 'type' }),
         accessor: 'type.name',
         className: 'type',
-        width: 120,
+        width: 140,
       },
       {
         id: 'normal',
@@ -168,7 +176,7 @@ function AccountsDataTable({
           );
         },
         className: 'normal',
-        width: 75,
+        width: 115,
       },
       {
         id: 'balance',
@@ -207,9 +215,9 @@ function AccountsDataTable({
 
   const selectionColumn = useMemo(
     () => ({
-      minWidth: 50,
-      width: 50,
-      maxWidth: 50,
+      minWidth: 40,
+      width: 40,
+      maxWidth: 40,
     }),
     [],
   );
@@ -227,7 +235,7 @@ function AccountsDataTable({
   );
 
   return (
-    <LoadingIndicator loading={loading} mount={false}>
+    <LoadingIndicator loading={loading && !isMounted} mount={false}>
       <DataTable
         noInitialFetch={true}
         columns={columns}
@@ -239,7 +247,7 @@ function AccountsDataTable({
         treeGraph={true}
         sticky={true}
         onSelectedRowsChange={handleSelectedRowsChange}
-        loading={accountsLoading && !initialMount}
+        loading={accountsLoading && !isMounted}
         spinnerProps={{ size: 30 }}
         rowContextMenu={rowContextMenu}
       />
@@ -248,6 +256,8 @@ function AccountsDataTable({
 }
 
 export default compose(
+  withRouter,
+  withCurrentView,
   withDialogActions,
   withDashboardActions,
   withAccountsActions,

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
 import {
@@ -7,14 +7,15 @@ import {
   NavbarGroup,
   Tabs,
   Tab,
-  Button
+  Button,
 } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
-import Icon from 'components/Icon';
 import { Link } from 'react-router-dom';
+import { pick, debounce } from 'lodash';
+import Icon from 'components/Icon';
 import { FormattedMessage as T } from 'react-intl';
-import {useUpdateEffect} from 'hooks';
-
+import { useUpdateEffect } from 'hooks';
+import { DashboardViewsTabs } from 'components';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
@@ -48,7 +49,7 @@ function AccountsViewsTabs({
   useEffect(() => {
     changeAccountsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
-    changePageSubtitle((customViewId && viewItem) ? viewItem.name : '');
+    changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
 
     addAccountsTableQueries({
       custom_view_id: customViewId,
@@ -57,7 +58,7 @@ function AccountsViewsTabs({
     return () => {
       setTopbarEditView(null);
       changePageSubtitle('');
-      changeAccountsCurrentView(null)
+      changeAccountsCurrentView(null);
     };
   }, [customViewId]);
 
@@ -71,52 +72,37 @@ function AccountsViewsTabs({
     history.push('/custom_views/accounts/new');
   };
 
-  // Handle view tab link click.
-  const handleViewLinkClick = () => {
-    setTopbarEditView(customViewId);
+  const tabs = accountsViews.map((view) => ({
+    ...pick(view, ['name', 'id']),
+  }));
+
+  const debounceChangeHistory = useRef(
+    debounce((toUrl) => {
+      history.push(toUrl);
+    }, 250),
+  );
+
+  const handleTabsChange = (viewId) => {
+    const toPath = viewId ? `${viewId}/custom_view` : '';
+    debounceChangeHistory.current(`/accounts/${toPath}`);
+    setTopbarEditView(viewId);
   };
 
-  const tabs = accountsViews.map((view) => {
-    const baseUrl = '/accounts';
-
-    const link = (
-      <Link
-        to={`${baseUrl}/${view.id}/custom_view`}
-        onClick={handleViewLinkClick}
-      >{ view.name }</Link>
-    );
-    return <Tab id={`custom_view_${view.id}`} title={link} />;
-  });
-
   return (
-    <Navbar className='navbar--dashboard-views'>
+    <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
-        <Tabs
-          id='navbar'
-          large={true}
-          selectedTabId={customViewId ? `custom_view_${customViewId}` : 'all'}
-          className='tabs--dashboard-views'
-        >
-          <Tab
-            id={'all'}
-            title={<Link to={`/accounts`}><T id={'all'}/></Link>}
-            onClick={handleViewLinkClick}
-          />
-          { tabs }
-          <Button
-            className='button--new-view'
-            icon={<Icon icon='plus' />}
-            onClick={handleClickNewView}
-            minimal={true}
-          />
-        </Tabs>
+        <DashboardViewsTabs
+          baseUrl={'/accounts'}
+          tabs={tabs}
+          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabsChange}
+        />
       </NavbarGroup>
     </Navbar>
   );
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  // Mapping view id from matched route params.
   viewId: ownProps.match.params.custom_view_id,
 });
 
@@ -130,5 +116,5 @@ export default compose(
     accountsViews,
   })),
   withAccountsTableActions,
-  withViewDetail
+  withViewDetail,
 )(AccountsViewsTabs);

client/src/containers/Accounts/withAccounts.js

@@ -10,8 +10,8 @@ import {
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
     const mapped = {
-      accountsViews: getResourceViews(state, 'accounts'),
-      accounts: getAccountsItems(state, state.accounts.currentViewId),
+      accountsViews: getResourceViews(state, props, 'accounts'),
+      accounts: getAccountsItems(state, props),
       accountsTypes: state.accounts.accountsTypes,
     
       accountsTableQuery: state.accounts.tableQuery,