fix: View.

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

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