Merge remote-tracking branch 'origin/Fix/View'

client/src/components/Dashboard/DashboardActionViewsList.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
 import {
   Button,
@@ -15,15 +15,21 @@ import { Icon } from 'components';
 
 export default function DashboardActionViewsList({
   resourceName,
-  views
+  views,
+  onChange,
 }) {
   const history = useHistory();
 
   const handleClickViewItem = (view) => {
-    history.push(view ? `/${resourceName}/${view.id}/custom_view` : '/accounts');
+    history.push(
+      view ? `/${resourceName}/${view.id}/custom_view` : '/accounts',
+    );
+    onChange && onChange(view);
   };
   const viewsMenuItems = views.map((view) => {
-    return <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />;
+    return (
+      <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
+    );
   });
 
   return (

client/src/containers/Accounting/ManualJournalActionsBar.js

@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -29,9 +29,11 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose } from 'utils';
 
+/**
+ * Manual journal actions bar.
+ */
 function ManualJournalActionsBar({
   // #withResourceDetail
-  resourceName = 'manual_journals',
   resourceFields,
 
   // #withManualJournals
@@ -39,21 +41,15 @@ function ManualJournalActionsBar({
 
   // #withManualJournalsActions
   addManualJournalsTableQueries,
+  changeManualJournalCurrentView,
 
   onFilterChanged,
   selectedRows = [],
   onBulkDelete,
 }) {
-  const { path } = useRouteMatch();
   const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
 
-  const viewsMenuItems = manualJournalsViews.map((view) => {
-    return (
-      <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-    );
-  });
-
   const onClickNewManualJournal = useCallback(() => {
     history.push('/make-journal-entry');
   }, [history]);
@@ -73,32 +69,30 @@ function ManualJournalActionsBar({
       onFilterChanged && onFilterChanged(filterConditions);
     },
   });
-  const hasSelectedRows = useMemo(
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
-    () => selectedRows.length > 0, 
+    selectedRows,
-    [selectedRows]);
+  ]);
 
   // Handle delete button click.
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeManualJournalCurrentView(viewId.id || -1);
+    addManualJournalsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
+        <DashboardActionViewsList
-          content={<Menu>{viewsMenuItems}</Menu>}
+          resourceName={'manual-journals'}
-          minimal={true}
+          views={manualJournalsViews}
-          interactionKind={PopoverInteractionKind.HOVER}
+          onChange={handleTabChange}
-          position={Position.BOTTOM_LEFT}
+        />
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
-
         <NavbarDivider />
 
         <Button

client/src/containers/Accounting/ManualJournalsDataTable.js

@@ -26,7 +26,11 @@ import { CLASSES } from 'common/classes';
 import { useIsValuePassed } from 'hooks';
 
 import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
-import { AmountPopoverContent, NoteAccessor, StatusAccessor } from './components';
+import {
+  AmountPopoverContent,
+  NoteAccessor,
+  StatusAccessor,
+} from './components';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -34,8 +38,6 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 import { compose, saveInvoke } from 'utils';
 
-
-
 function ManualJournalsDataTable({
   // #withManualJournals
   manualJournalsCurrentPage,
@@ -52,6 +54,7 @@ function ManualJournalsDataTable({
   onDeleteJournal,
   onPublishJournal,
   onSelectedRowsChange,
+  manualJournalViewLoading,
 }) {
   const { custom_view_id: customViewId } = useParams();
   const { formatMessage } = useIntl();
@@ -230,7 +233,11 @@ function ManualJournalsDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
+      <LoadingIndicator
+        loading={
+          (manualJournalsLoading && !isLoadedBefore) || manualJournalViewLoading
+        }
+      >
         <Choose>
           <Choose.When condition={showEmptyStatus}>
             <ManualJournalsEmptyStatus />

client/src/containers/Accounting/ManualJournalsList.js

@@ -151,7 +151,7 @@ function ManualJournalsTable({
   );
 
   // Handle filter change to re-fetch data-table.
-  const handleFilterChanged = useCallback(() => {}, [fetchManualJournals]);
+  const handleFilterChanged = useCallback(() => {}, []);
 
   // Handle view change to re-fetch data table.
   // const handleViewChanged = useCallback(() => {
@@ -243,6 +243,7 @@ function ManualJournalsTable({
               onEditJournal={handleEditJournal}
               onPublishJournal={handlePublishMaunalJournal}
               onSelectedRowsChange={handleSelectedRowsChange}
+              manualJournalViewLoading={fetchManualJournals.isFetching}
             />
           </Route>
         </Switch>

client/src/containers/Accounting/ManualJournalsViewTabs.js

@@ -1,15 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from 'react-router';
-import {
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-  Alignment,
-  Navbar,
-  NavbarGroup,
-} from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
-import { useUpdateEffect } from 'hooks';
 import { DashboardViewsTabs, Icon } from 'components';
 
 import withManualJournals from './withManualJournals';
@@ -19,6 +14,9 @@ import withViewDetail from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Manual journal views tabs.
+ */
 function ManualJournalsViewTabs({
   // #withViewDetail
   viewId,
@@ -38,50 +36,32 @@ function ManualJournalsViewTabs({
   // #ownProps
   onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId } = useParams();
 
   useEffect(() => {
-    changeManualJournalCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addManualJournalsTableQueries({
-      custom_view_id: customViewId,
-    });
-  }, [customViewId, addManualJournalsTableQueries]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
   const tabs = manualJournalsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  const debounceChangeHistory = useRef(
+  const handleClickNewView = () => {};
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/manual_journals/new');
-  };
 
   const handleTabChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
+    changeManualJournalCurrentView(viewId || -1);
-    debounceChangeHistory.current(`/manual-journals/${toPath}`);
+    addManualJournalsTableQueries({
-    setTopbarEditView(viewId);
+      custom_view_id: viewId || null,
+    });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
+          resourceName={'manual-journals'}
           initialViewId={customViewId}
-          baseUrl={'/manual-journals'}
           tabs={tabs}
           onChange={handleTabChange}
           onNewViewTabClick={handleClickNewView}

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -38,23 +38,8 @@ function AccountsViewsTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeAccountsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addAccountsTableQueries({
-      custom_view_id: customViewId,
-    });
-
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeAccountsCurrentView(null);
-    };
-  }, [customViewId]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
   // Handle click a new view tab.
@@ -63,6 +48,13 @@ function AccountsViewsTabs({
     history.push('/custom_views/accounts/new');
   };
 
+  const handleTabChange = (viewId) => {
+    changeAccountsCurrentView(viewId || -1);
+    // addAccountsTableQueries({
+    //   custom_view_id: viewId || null,
+    // });
+  };
+
   const tabs = accountsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
@@ -72,6 +64,7 @@ function AccountsViewsTabs({
         <DashboardViewsTabs
           initialViewId={customViewId}
           resourceName={'accounts'}
+          onChange={handleTabChange}
           tabs={tabs}
         />
       </NavbarGroup>

client/src/containers/Accounts/withAccounts.js

@@ -1,21 +1,24 @@
 import { connect } from 'react-redux';
 import {
-  getAccountsItems, getAccountsListFactory,
+  getAccountsItems,
+  getAccountsListFactory,
+  getAccountsTableQuery,
 } from 'store/accounts/accounts.selectors';
-import {
+import { getResourceViews } from 'store/customViews/customViews.selectors';
-  getResourceViews,
-} from 'store/customViews/customViews.selectors';
 
 export default (mapState) => {
   const getAccountsList = getAccountsListFactory();
 
   const mapStateToProps = (state, props) => {
+    const query = getAccountsTableQuery(state, props);
+
     const mapped = {
       accountsViews: getResourceViews(state, props, 'accounts'),
       accountsTable: getAccountsItems(state, props),
       accountsList: getAccountsList(state, props),
       accountsTypes: state.accounts.accountsTypes,
 
+      // accountsTableQuery: query,
       accountsTableQuery: state.accounts.tableQuery,
       accountsLoading: state.accounts.loading,
       accountErrors: state.accounts.errors,

client/src/containers/Accounts/withAccountsTableActions.js

@@ -1,24 +1,31 @@
 import { connect } from 'react-redux';
 import t from 'store/types';
-import {
+import { fetchAccountsTable } from 'store/accounts/accounts.actions';
-  fetchAccountsTable,
-} from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
+  requestFetchAccountsTable: (query = {}) =>
-  changeAccountsCurrentView: (id) => dispatch({
+    dispatch(fetchAccountsTable({ query: { ...query } })),
-    type: t.ACCOUNTS_SET_CURRENT_VIEW,
+  changeAccountsCurrentView: (id) =>
-    currentViewId: parseInt(id, 10),
+    dispatch({
-  }),
+      type: t.ACCOUNTS_SET_CURRENT_VIEW,
-  setAccountsTableQuery: (key, value) => dispatch({
+      currentViewId: parseInt(id, 10),
-    type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
+    }),
-  }),
+  setAccountsTableQuery: (key, value) =>
-  addAccountsTableQueries: (queries) => dispatch({
+    dispatch({
-    type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
+      type: t.ACCOUNTS_TABLE_QUERY_SET,
-  }),
+      key,
-  setSelectedRowsAccounts: (ids) => dispatch({
+      value,
-    type: t.ACCOUNTS_SELECTED_ROWS_SET, payload: { ids },
+    }),
-  }),
+  addAccountsTableQueries: (queries) =>
+    dispatch({
+      type: t.ACCOUNTS_TABLE_QUERIES_ADD,
+      queries,
+    }),
+  setSelectedRowsAccounts: (ids) =>
+    dispatch({
+      type: t.ACCOUNTS_SELECTED_ROWS_SET,
+      payload: { ids },
+    }),
 });
 
 export default connect(null, mapActionsToProps);

client/src/containers/Expenses/ExpenseActionsBar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useState } from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withExpenses from 'containers/Expenses/withExpenses';
@@ -29,6 +29,9 @@ import withExpensesActions from 'containers/Expenses/withExpensesActions';
 
 import { compose } from 'utils';
 
+/**
+ * Expenses actions bar.
+ */
 function ExpensesActionsBar({
   // #withResourceDetail
   resourceFields,
@@ -38,18 +41,15 @@ function ExpensesActionsBar({
 
   //#withExpensesActions
   addExpensesTableQueries,
+  changeExpensesView,
 
   onFilterChanged,
   selectedRows,
   onBulkDelete,
 }) {
-  const { path } = useRouteMatch();
+  const [filterCount, setFilterCount] = useState(0);
   const history = useHistory();
 
-  const viewsMenuItems = expensesViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
-
   const onClickNewExpense = useCallback(() => {
     history.push('/expenses/new');
   }, [history]);
@@ -78,22 +78,20 @@ function ExpensesActionsBar({
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId.id || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
+        <DashboardActionViewsList
-          content={<Menu>{viewsMenuItems}</Menu>}
+          resourceName={'expenses'}
-          minimal={true}
+          views={expensesViews}
-          interactionKind={PopoverInteractionKind.HOVER}
+          onChange={handleTabChange}
-          position={Position.BOTTOM_LEFT}
+        />
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
         <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
@@ -108,7 +106,9 @@ function ExpensesActionsBar({
           position={Position.BOTTOM_LEFT}
         >
           <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
+            className={classNames(Classes.MINIMAL, 'button--filter', {
+              'has-active-filters': filterCount > 0,
+            })}
             text="Filter"
             icon={<Icon icon="filter-16" iconSize={16} />}
           />

client/src/containers/Expenses/ExpenseViewTabs.js

@@ -3,10 +3,9 @@ import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
-import { useUpdateEffect } from 'hooks';
 
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -15,6 +14,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
+/**
+ * Expesne views tabs.
+ */
 function ExpenseViewTabs({
   // #withExpenses
   expensesViews,
@@ -38,55 +40,32 @@ function ExpenseViewTabs({
   const { custom_view_id: customViewId = null } = useParams();
 
   useEffect(() => {
-    changeExpensesView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addExpensesTableQueries({
-      custom_view_id: customViewId,
-    });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-      changeExpensesView(null);
-    };
-  }, [customViewId, addExpensesTableQueries, changeExpensesView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
+  const handleTabChange = (viewId) => {
-    debounce((toUrl) => {
+    changeExpensesView(viewId || -1);
-      history.push(toUrl);
+    addExpensesTableQueries({
-    }, 250),
+      custom_view_id: viewId || null,
-  );
+    });
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/expenses-list/${toPath}`);
-    setTopbarEditView(viewId);
   };
-
   const tabs = expensesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
   // Handle click a new view tab.
-  const handleClickNewView = () => {
+  const handleClickNewView = () => {};
-    setTopbarEditView(null);
-    history.push('/custom_views/expenses/new');
-  };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/expenses-list'}
+          resourceName={'expenses'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}
-          onChange={handleTabsChange}
+          onChange={handleTabChange}
         />
       </NavbarGroup>
     </Navbar>

client/src/containers/Items/ItemsActionsBar.js

@@ -1,5 +1,5 @@
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import { useRouteMatch, useHistory, useParams } from 'react-router-dom';
 import classNames from 'classnames';
 import {
   MenuItem,
@@ -14,13 +14,11 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
-import { If } from 'components';
+import { If, DashboardActionViewsList } from 'components';
 
-import withDialogActions from 'containers/Dialog/withDialogActions';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
@@ -29,9 +27,7 @@ import { compose } from 'utils';
 import { connect } from 'react-redux';
 
 const ItemsActionsBar = ({
-  openDialog,
+  // #withResourceDetail
-
-  resourceName = 'items',
   resourceFields,
 
   // #withItems
@@ -39,18 +35,15 @@ const ItemsActionsBar = ({
 
   //#withItemActions
   addItemsTableQueries,
+  changeItemsCurrentView,
 
   onFilterChanged,
   selectedRows = [],
   onBulkDelete,
 }) => {
-  const { path } = useRouteMatch();
+  const { formatMessage } = useIntl();
   const history = useHistory();
   const [filterCount, setFilterCount] = useState(0);
-  const { formatMessage } = useIntl();
-  const viewsMenuItems = itemsViews.map((view) => (
-    <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
-  ));
 
   const onClickNewItem = useCallback(() => {
     history.push('/items/new');
@@ -60,22 +53,13 @@ const ItemsActionsBar = ({
     selectedRows,
   ]);
 
-  // name
-  // const filterDropdown = FilterDropdown({
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     setFilterCount(filterConditions.length);
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
-
   const filterDropdown = FilterDropdown({
+    fields: resourceFields,
     initialCondition: {
       fieldKey: 'name',
       compatator: 'contains',
       value: '',
     },
-    fields: resourceFields,
     onFilterChange: (filterConditions) => {
       addItemsTableQueries({
         filter_roles: filterConditions || '',
@@ -84,30 +68,25 @@ const ItemsActionsBar = ({
     },
   });
 
-  // const onClickNewCategory = useCallback(() => {
-  //   openDialog('item-form', {});
-  // }, [openDialog]);
-
   const handleBulkDelete = useCallback(() => {
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId.id || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
-        <Popover
+        <DashboardActionViewsList
-          content={<Menu>{viewsMenuItems}</Menu>}
+          resourceName={'items'}
-          minimal={true}
+          views={itemsViews}
-          interactionKind={PopoverInteractionKind.HOVER}
+          onChange={handleTabChange}
-          position={Position.BOTTOM_LEFT}
+        />
-        >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--table-views')}
-            icon={<Icon icon="table-16" iconSize={16} />}
-            text={<T id={'table_views'} />}
-            rightIcon={'caret-down'}
-          />
-        </Popover>
 
         <NavbarDivider />
 
@@ -170,7 +149,6 @@ const withItemsActionsBar = connect(mapStateToProps);
 
 export default compose(
   withItemsActionsBar,
-  withDialogActions,
   withItems(({ itemsViews }) => ({
     itemsViews,
   })),

client/src/containers/Items/ItemsDataTable.js

@@ -46,6 +46,7 @@ function ItemsDataTable({
   onInactiveItem,
   onActivateItem,
   onSelectedRowsChange,
+  itemsViewLoading,
 }) {
   const { formatMessage } = useIntl();
   const isLoadedBefore = useIsValuePassed(itemsTableLoading, false);
@@ -238,7 +239,9 @@ function ItemsDataTable({
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
+      <LoadingIndicator
+        loading={(itemsTableLoading && !isLoadedBefore) || itemsViewLoading}
+      >
         <Choose>
           <Choose.When condition={showEmptyStatus}>
             <ItemsEmptyStatus />

client/src/containers/Items/ItemsList.js

@@ -261,6 +261,7 @@ function ItemsList({
               onInactiveItem={handleInactiveItem}
               onActivateItem={handleActivateItem}
               onSelectedRowsChange={handleSelectedRowsChange}
+              itemsViewLoading={fetchItems.isFetching}
             />
             <Alert
               cancelButtonText={<T id={'cancel'} />}

client/src/containers/Items/ItemsViewsTabs.js

@@ -1,29 +1,21 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
-import {
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Tabs,
-  Tab,
-  Button,
-} from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import Icon from 'components/Icon';
+import { withRouter } from 'react-router-dom';
-import { Link, withRouter } from 'react-router-dom';
 import { compose } from 'utils';
-import { useUpdateEffect } from 'hooks';
 import { DashboardViewsTabs } from 'components';
-import { pick, debounce } from 'lodash';
+import { pick } from 'lodash';
 
 import withItemsActions from 'containers/Items/withItemsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withViewDetail from 'containers/Views/withViewDetails';
 import withItems from 'containers/Items/withItems';
 
-import { FormattedMessage as T } from 'react-intl';
+/**
-
+ * Items views tabs.
+ */
 function ItemsViewsTabs({
   // #withViewDetail
   viewId,
@@ -43,62 +35,34 @@ function ItemsViewsTabs({
   // #props
   onViewChanged,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();
 
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/items/new');
-  };
-
-  const handleViewLinkClick = () => {
-    setTopbarEditView(customViewId);
-  };
-
   useEffect(() => {
-    changeItemsCurrentView(customViewId || -1);
     setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-
-    addItemsTableQueries({
-      custom_view_id: customViewId || null,
-    });
-
-    return () => {
-      setTopbarEditView(null);
-      changeItemsCurrentView(-1);
-      changePageSubtitle('');
-    };
-  }, [customViewId, addItemsTableQueries, changeItemsCurrentView]);
-
-  useUpdateEffect(() => {
-    onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-  const debounceChangeHistory = useRef(
+  const handleClickNewView = () => {};
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/items/${toPath}`);
-    setTopbarEditView(viewId);
-  };
 
   const tabs = itemsViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
+
+  const handleTabChange = (viewId) => {
+    changeItemsCurrentView(viewId || -1);
+    addItemsTableQueries({
+      custom_view_id: viewId || null,
+    });
+  };
+
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           initialViewId={customViewId}
-          baseUrl={'/items'}
+          resourceName={'items'}
           tabs={tabs}
-          onNewViewTabClick={handleClickNewView}
+          onChange={handleTabChange}
-          onChange={handleTabsChange}
         />
       </NavbarGroup>
     </Navbar>

client/src/store/accounts/accounts.selectors.js

@@ -1,6 +1,10 @@
 import { createSelector } from 'reselect';
 import { repeat } from 'lodash';
-import { pickItemsFromIds, getItemById } from 'store/selectors';
+import {
+  pickItemsFromIds,
+  getItemById,
+  paginationLocationQuery,
+} from 'store/selectors';
 import { flatToNestedArray, treeToList } from 'utils';
 
 const accountsViewsSelector = (state) => state.accounts.views;
@@ -8,6 +12,16 @@ const accountsDataSelector = (state) => state.accounts.items;
 const accountsCurrentViewSelector = (state) => state.accounts.currentViewId;
 const accountIdPropSelector = (state, props) => props.accountId;
 const accountsListSelector = (state) => state.accounts.listTree;
+const accountsTableQuery = (state, props) => state.accounts.tableQuery;
+
+export const getAccountsTableQuery = createSelector(
+  accountsTableQuery,
+  (tableQuery) => {
+    return {
+      ...tableQuery,
+    };
+  },
+);
 
 export const getAccountsItems = createSelector(
   accountsViewsSelector,
@@ -42,12 +56,13 @@ export const getAccountsListFactory = () =>
 
           return {
             ...account,
-            htmlName: (depth > 1)
+            htmlName:
-              ? (`${repeat(spaceChar, (depth - 1) * 2)}${account.name}`) :
+              depth > 1
-                account.name,
+                ? `${repeat(spaceChar, (depth - 1) * 2)}${account.name}`
+                : account.name,
             depth,
           };
-        }
+        },
       });
     },
   );

client/src/store/accounts/accounts.types.js

@@ -14,8 +14,10 @@ export default {
 
   ACCOUNTS_SET_CURRENT_VIEW: 'ACCOUNTS_SET_CURRENT_VIEW',
   
-  ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS_TABLE_QUERY_SET',
+  ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS/TABLE_QUERY_SET',
-  ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS_TABLE_QUERIES_SET',
+  ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS/TABLE_QUERIES_SET',
+  ACCOUNTS_TABLE_QUERIES_ADD:'ACCOUNTS/TABLE_QUERIES_ADD',
+
 
   ACCOUNTS_TABLE_LOADING: 'ACCOUNTS_TABLE_LOADING',
 

client/src/store/expenses/expenses.actions.js

@@ -20,21 +20,23 @@ export const fetchExpensesTable = ({ query } = {}) => {
             payload: {
               expenses: response.data.expenses,
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
+              customViewId:
+                response.data?.filter_meta?.view?.custom_view_id || -1,
             },
           });
           dispatch({
             type: t.EXPENSES_ITEMS_SET,
             payload: {
               expenses: response.data.expenses,
-            }
+            },
           });
           dispatch({
             type: t.EXPENSES_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
+              customViewId:
-            }
+                response.data?.filter_meta?.view?.custom_view_id || -1,
+            },
           });
           dispatch({
             type: t.EXPENSES_TABLE_LOADING,
@@ -54,7 +56,7 @@ export const fetchExpense = ({ id }) => {
   return (dispatch) =>
     new Promise((resolve, reject) => {
       ApiService.get(`expenses/${id}`)
-      .then((response) => {
+        .then((response) => {
           dispatch({
             type: t.EXPENSE_SET,
             payload: {

client/src/store/items/items.actions.js

@@ -12,12 +12,13 @@ export const editItem = ({ id, form }) => {
 export const fetchItems = ({ query }) => {
   return (dispatch, getState) =>
     new Promise((resolve, reject) => {
-      const pageQuery = getState().items.tableQuery;
+      let pageQuery = getState().items.tableQuery;
 
       dispatch({
         type: t.ITEMS_TABLE_LOADING,
         payload: { loading: true },
       });
+      
       ApiService.get(`items`, { params: { ...pageQuery, ...query } })
         .then((response) => {
           dispatch({
@@ -27,16 +28,18 @@ export const fetchItems = ({ query }) => {
           dispatch({
             type: t.ITEMS_PAGE_SET,
             items: response.data.items,
-            customViewId: response.data?.filter_meta?.view?.custom_view_id,
+            customViewId:
+              response.data?.filter_meta?.view?.custom_view_id || -1,
             paginationMeta: response.data.pagination,
           });
           dispatch({
             type: t.ITEMS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
-              customViewId: response.data.customViewId || -1,
+              customViewId:
-            }
+                response.data?.filter_meta?.view?.custom_view_id || -1,
-          })
+            },
+          });
           dispatch({
             type: t.ITEMS_TABLE_LOADING,
             payload: { loading: false },
@@ -44,9 +47,6 @@ export const fetchItems = ({ query }) => {
           resolve(response);
         })
         .catch((error) => {
-          dispatch({
-            type: t.SET_DASHBOARD_REQUEST_COMPLETED,
-          });
           reject(error);
         });
     });

client/src/store/items/items.selectors.js

@@ -1,9 +1,6 @@
-import { paginationLocationQuery } from "store/selectors";
+import { paginationLocationQuery } from 'store/selectors';
 import { createSelector } from 'reselect';
-import {
+import { pickItemsFromIds, defaultPaginationMeta } from 'store/selectors';
-  pickItemsFromIds,
-  defaultPaginationMeta,
-} from 'store/selectors';
 
 const itemsTableQuerySelector = (state) => state.items.tableQuery;
 
@@ -20,8 +17,9 @@ const itemsPaginationSelector = (state, props) => {
   const viewId = state.items.currentViewId;
   return state.items.views?.[viewId]?.paginationMeta;
 };
-const customersCurrentViewIdSelector = (state) => state.customers.currentViewId;
+const itemsCurrentViewIdSelector = (state) => {
-
+  return state.items.currentViewId;
+};
 // Get items table query marged with location query.
 export const getItemsTableQueryFactory = () =>
   createSelector(
@@ -31,7 +29,7 @@ export const getItemsTableQueryFactory = () =>
       return {
         ...locationQuery,
         ...tableQuery,
-      }
+      };
     },
   );
 
@@ -42,28 +40,22 @@ export const getItemsCurrentPageFactory = () =>
     itemsCurrentPageSelector,
     (items, itemsIdsCurrentPage) => {
       return typeof itemsIdsCurrentPage === 'object'
-      ? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
+        ? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
-      : [];
+        : [];
     },
   );
 
 // Retrieve items pagination meta.
 export const getItemsPaginationMetaFactory = () =>
-  createSelector(
+  createSelector(itemsPaginationSelector, (itemsPagination) => {
-    itemsPaginationSelector,
+    return {
-    (itemsPagination) => {
+      ...defaultPaginationMeta(),
-      return {
+      ...itemsPagination,
-        ...defaultPaginationMeta(),
+    };
-        ...itemsPagination,
+  });
-      };
-    }
-  );
 
 // Retrieve items current view id.
 export const getItemsCurrentViewIdFactory = () =>
-  createSelector(
+  createSelector(itemsCurrentViewIdSelector, (currentViewId) => {
-    customersCurrentViewIdSelector,
+    return currentViewId;
-    (currentViewId) => {
+  });
-      return currentViewId;
-    }
-  );

client/src/store/manualJournals/manualJournals.actions.js

@@ -129,7 +129,7 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
             payload: {
               manualJournals: response.data.manual_journals,
               customViewId:
-                response.data.manual_journals?.viewMeta?.customViewId || -1,
+              response.data?.filter_meta?.view?.custom_view_id || -1,
               pagination: response.data.pagination,
             },
           });
@@ -140,23 +140,25 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
                 ...manualJournal,
                 entries: manualJournal.entries.map((entry) => ({
                   ...omit(entry, ['account']),
-                }))
+                })),
               })),
-            ]
+            ],
           });
           dispatch({
             type: t.MANUAL_JOURNALS_PAGINATION_SET,
             payload: {
               pagination: response.data.pagination,
               customViewId:
-                response.data.manual_journals?.viewMeta?.customViewId || -1,
+                response.data?.filter_meta?.view?.custom_view_id || -1,
             },
           });
           dispatch({
             type: t.ACCOUNTS_ITEMS_SET,
-            accounts: flatten(response.data.manual_journals?.map(
+            accounts: flatten(
-              journal => journal?.entries.map(entry => entry.account),
+              response.data.manual_journals?.map((journal) =>
-            )),
+                journal?.entries.map((entry) => entry.account),
+              ),
+            ),
           });
           dispatch({
             type: t.MANUAL_JOURNALS_TABLE_LOADING,