- feat: Update react-query package to V 2.1.1.

- feat: Favicon setup.
- feat: Fix accounts inactivate/activate 1 account.
- feat: Seed accounts, expenses and manual journals resource fields.
- feat: Validate make journal receivable/payable without contact.
- feat: Validate make journal contact without receivable or payable.
- feat: More components abstractions.
- feat: Use reselect.js to memorize components properties.
- fix: Journal type of manual journal.
- fix: Sidebar style optimization.
- fix: Data-table check-box style optimization.
- fix: Data-table spinner style dimensions.
- fix: Submit journal with contact_id and contact_type.

client/src/containers/Accounting/ManualJournalsViewTabs.js

@@ -1,115 +1,98 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useHistory } from 'react-router';
 import {
   Alignment,
   Navbar,
   NavbarGroup,
-  Tabs,
-  Tab,
-  Button,
 } from '@blueprintjs/core';
 import { useParams, withRouter } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { FormattedMessage as T } from 'react-intl';
+import { pick, debounce } from 'lodash';
 
 import { useUpdateEffect } from 'hooks';
-import Icon from 'components/Icon';
+import { DashboardViewsTabs, Icon } from 'components';
 
 import withManualJournals from './withManualJournals';
 import withManualJournalsActions from './withManualJournalsActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetail from 'containers/Views/withViewDetails';
 
 import { compose } from 'utils';
 
 function ManualJournalsViewTabs({
+  // #withViewDetail
+  viewId,
+  viewItem,
+
   // #withManualJournals
   manualJournalsViews,
-  
+
   // #withManualJournalsActions
   addManualJournalsTableQueries,
+  changeManualJournalCurrentView,
 
   // #withDashboardActions
   setTopbarEditView,
+  changePageSubtitle,
 
   // #ownProps
-  customViewChanged,
   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 handleViewLinkClick = () => {
-    setTopbarEditView(customViewId);
+
+  const handleTabChange = (viewId) => {
+    const toPath = viewId ? `${viewId}/custom_view` : '';
+    debounceChangeHistory.current(`/manual-journals/${toPath}`);
+    setTopbarEditView(viewId);
   };
 
-  useUpdateEffect(() => {
-    customViewChanged && customViewChanged(customViewId);
-
-    addManualJournalsTableQueries({
-      custom_view_id: customViewId || null,
-    });
-    onViewChanged && onViewChanged(customViewId);
-  }, [customViewId]);
-
-  useEffect(() => {
-    addManualJournalsTableQueries({
-      custom_view_id: customViewId,
-    });
-  }, [customViewId,addManualJournalsTableQueries]);
-
-  const tabs = manualJournalsViews.map((view) => {
-    const baseUrl = '/manual-journals';
-    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={`custom_view_${customViewId}`}
-          className='tabs--dashboard-views'
-        >
-          <Tab
-            id='all'
-            title={
-              <Link to={`/dashboard/accounting/manual-journals`}>
-                <T id={'all'} />
-              </Link>
-            }
-          />
-
-          { tabs }
-
-          <Button
-            className='button--new-view'
-            icon={<Icon icon='plus' />}
-            onClick={handleClickNewView}
-            minimal={true}
-          />
-        </Tabs>
+        <DashboardViewsTabs
+          initialViewId={customViewId}
+          baseUrl={'/manual-journals'}
+          tabs={tabs}
+          onChange={handleTabChange}
+          onNewViewTabClick={handleClickNewView}
+        />
       </NavbarGroup>
     </Navbar>
   );
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  // Mapping view id from matched route params.
-  viewId: ownProps.match.params.custom_view_id,
+  viewId: parseInt(ownProps.match.params.custom_view_id, 10),
 });
 
 const withManualJournalsViewTabs = connect(mapStateToProps);
@@ -121,5 +104,6 @@ export default compose(
     manualJournalsViews,
   })),
   withManualJournalsActions,
-  withDashboardActions 
+  withDashboardActions,
+  withViewDetail(),
 )(ManualJournalsViewTabs);