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

2026-02-17 13:20:31 +00:00 · 2020-12-17 01:21:34 +02:00
parent ebe9ed108f e398b8c239
commit 897908c1ab
20 changed files with 242 additions and 313 deletions
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/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(
-    () => selectedRows.length > 0, 
-    [selectedRows]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
+    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
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          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>
-
+        <DashboardActionViewsList
+          resourceName={'manual-journals'}
+          views={manualJournalsViews}
+          onChange={handleTabChange}
+        />
        <NavbarDivider />

        <Button
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/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 />
--- a/client/src/containers/Accounting/ManualJournalsList.js
+++ b/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>
--- a/client/src/containers/Accounting/ManualJournalsViewTabs.js
+++ b/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 {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-} from '@blueprintjs/core';
+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 { 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(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/manual_journals/new');
-  };
+  const handleClickNewView = () => {};

  const handleTabChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/manual-journals/${toPath}`);
-    setTopbarEditView(viewId);
+    changeManualJournalCurrentView(viewId || -1);
+    addManualJournalsTableQueries({
+      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}
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/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>
--- a/client/src/containers/Accounts/withAccounts.js
+++ b/client/src/containers/Accounts/withAccounts.js
@@ -1,27 +1,30 @@
 import { connect } from 'react-redux';
 import {
-  getAccountsItems, getAccountsListFactory,
+  getAccountsItems,
+  getAccountsListFactory,
+  getAccountsTableQuery,
 } from 'store/accounts/accounts.selectors';
-import {
-  getResourceViews,
-} from 'store/customViews/customViews.selectors';
+import { 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,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
-  
+
  return connect(mapStateToProps);
 };
--- a/client/src/containers/Accounts/withAccountsTableActions.js
+++ b/client/src/containers/Accounts/withAccountsTableActions.js
@@ -1,24 +1,31 @@
 import { connect } from 'react-redux';
 import t from 'store/types';
-import {
-  fetchAccountsTable,
-} from 'store/accounts/accounts.actions';
+import { fetchAccountsTable } from 'store/accounts/accounts.actions';

 const mapActionsToProps = (dispatch) => ({
-  requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
-  changeAccountsCurrentView: (id) => dispatch({
-    type: t.ACCOUNTS_SET_CURRENT_VIEW,
-    currentViewId: parseInt(id, 10),
-  }),
-  setAccountsTableQuery: (key, value) => dispatch({
-    type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
-  }),
-  addAccountsTableQueries: (queries) => dispatch({
-    type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
-  }),
-  setSelectedRowsAccounts: (ids) => dispatch({
-    type: t.ACCOUNTS_SELECTED_ROWS_SET, payload: { ids },
-  }),
+  requestFetchAccountsTable: (query = {}) =>
+    dispatch(fetchAccountsTable({ query: { ...query } })),
+  changeAccountsCurrentView: (id) =>
+    dispatch({
+      type: t.ACCOUNTS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    }),
+  setAccountsTableQuery: (key, value) =>
+    dispatch({
+      type: t.ACCOUNTS_TABLE_QUERY_SET,
+      key,
+      value,
+    }),
+  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);
+export default connect(null, mapActionsToProps);
--- a/client/src/containers/Expenses/ExpenseActionsBar.js
+++ b/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
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          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>
+        <DashboardActionViewsList
+          resourceName={'expenses'}
+          views={expensesViews}
+          onChange={handleTabChange}
+        />
        <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} />}
          />
--- a/client/src/containers/Expenses/ExpenseViewTabs.js
+++ b/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(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/expenses-list/${toPath}`);
-    setTopbarEditView(viewId);
+  const handleTabChange = (viewId) => {
+    changeExpensesView(viewId || -1);
+    addExpensesTableQueries({
+      custom_view_id: viewId || null,
+    });
  };
-
  const tabs = expensesViews.map((view) => ({
    ...pick(view, ['name', 'id']),
  }));

  // Handle click a new view tab.
-  const handleClickNewView = () => {
-    setTopbarEditView(null);
-    history.push('/custom_views/expenses/new');
-  };
+  const handleClickNewView = () => {};

  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>
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/client/src/containers/Items/ItemsActionsBar.js
@@ -1,5 +1,5 @@
-import React, { useMemo, useCallback, useState } from 'react';
-import { useRouteMatch, useHistory } from 'react-router-dom';
+import React, { useMemo, useCallback, useState, useEffect } from 'react';
+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,
-
-  resourceName = 'items',
+  // #withResourceDetail
  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
-          content={<Menu>{viewsMenuItems}</Menu>}
-          minimal={true}
-          interactionKind={PopoverInteractionKind.HOVER}
-          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>
+        <DashboardActionViewsList
+          resourceName={'items'}
+          views={itemsViews}
+          onChange={handleTabChange}
+        />

        <NavbarDivider />

@@ -170,7 +149,6 @@ const withItemsActionsBar = connect(mapStateToProps);

 export default compose(
  withItemsActionsBar,
-  withDialogActions,
  withItems(({ itemsViews }) => ({
    itemsViews,
  })),
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/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 />
--- a/client/src/containers/Items/ItemsList.js
+++ b/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'} />}
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/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 {
-  Alignment,
-  Navbar,
-  NavbarGroup,
-  Tabs,
-  Tab,
-  Button,
-} from '@blueprintjs/core';
+import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import Icon from 'components/Icon';
-import { Link, withRouter } from 'react-router-dom';
+import { 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(
-    debounce((toUrl) => {
-      history.push(toUrl);
-    }, 250),
-  );
-
-  const handleTabsChange = (viewId) => {
-    const toPath = viewId ? `${viewId}/custom_view` : '';
-    debounceChangeHistory.current(`/items/${toPath}`);
-    setTopbarEditView(viewId);
-  };
+  const handleClickNewView = () => {};

  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={handleTabsChange}
+          onChange={handleTabChange}
        />
      </NavbarGroup>
    </Navbar>