fix: tables with custom views.

client/src/components/Dashboard/DashboardActionViewsList.js

@@ -24,17 +24,15 @@ export default function DashboardActionViewsList({
     onChange && onChange(view);
   };
 
-  const viewsMenuItems = views.map((view) => {
+  const viewsMenuItems = views.map((view) => (
-    return (
+    <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
-      <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
+  ));
-    );
-  });
 
   return (
     <Popover
       content={<Menu>{viewsMenuItems}</Menu>}
       minimal={true}
-      interactionKind={PopoverInteractionKind.HOVER}
+      interactionKind={PopoverInteractionKind.CLICK}
       position={Position.BOTTOM_LEFT}
     >
       <Button

client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -47,10 +47,8 @@ function ManualJournalActionsBar({
   };
 
   // Handle tab change.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (customView) => {
-    setManualJournalsTableState({
+    setManualJournalsTableState({ customViewId: customView.id || null });
-      customViewid: viewId.id || null,
-    });
   };
 
   return (

client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js

@@ -43,7 +43,7 @@ function ManualJournalsViewTabs({
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
           resourceName={'manual-journals'}
-          customViewId={journalsTableState.customViewId}
+          currentViewId={journalsTableState.customViewId}
           tabs={tabs}
           onChange={handleTabChange}
           onNewViewTabClick={handleClickNewView}

client/src/containers/Accounts/AccountsActionsBar.js

@@ -69,8 +69,8 @@ function AccountsActionsBar({
   };
 
   // Handle tab changing.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (customView) => {
-    setAccountsTableState({ customViewId: viewId.id || null });
+    setAccountsTableState({ customViewId: customView.id || null });
   };
 
   return (

client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js

@@ -34,16 +34,14 @@ function CustomersViewsTabs({
 
   // Handle tabs change.
   const handleTabsChange = (viewId) => {
-    setCustomersTableState({
+    setCustomersTableState({ customViewId: viewId || null });
-      customViewId: viewId || null,
-    });
   };
 
   return (
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={customersTableState.customViewId}
+          currentViewId={customersTableState.customViewId}
           resourceName={'customers'}
           tabs={tabs}
           onChange={handleTabsChange}

client/src/containers/Items/withItemsActions.js

@@ -3,11 +3,6 @@ import { setItemsTableState }from 'store/items/items.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
   setItemsTableState: (queries) => dispatch(setItemsTableState(queries)),
-  // setSelectedRowsItems: (selectedRows) =>
-  //   dispatch({
-  //     type: t.ITEM_SELECTED_ROWS_SET,
-  //     payload: { selectedRows },
-  //   }),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Purchases/Bills/BillsLanding/BillsViewsTabs.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { useParams } from 'react-router-dom';
 import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
 import { useBillsListContext } from './BillsListProvider';
 import withBillActions from './withBillsActions';
+import withBills from './withBills';
 
 import { compose } from 'utils';
 
@@ -15,11 +15,12 @@ import { compose } from 'utils';
  * Bills view tabs.
  */
 function BillViewTabs({
-  //#withBillActions
+  // #withBillActions
   setBillsTableState,
-}) {
-  const { custom_view_id: customViewId = null } = useParams();
 
+  // #withBills
+  billsTableState
+}) {
   // Bills list context.
   const { billsViews } = useBillsListContext();
 
@@ -38,7 +39,7 @@ function BillViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          currentViewId={billsTableState.customViewId}
           resourceName={'bills'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -48,4 +49,7 @@ function BillViewTabs({
   );
 }
 
-export default compose(withBillActions)(BillViewTabs);
+export default compose(
+  withBillActions,
+  withBills(({ billsTableState }) => ({ billsTableState }))
+)(BillViewTabs);

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -42,6 +42,7 @@ function EstimateActionsBar({
     history.push('/estimates/new');
   };
 
+  // Handle tab change.
   const handleTabChange = (customView) => {
     setEstimatesTableState({
       customViewId: customView.id || null,

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js

@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
-import { CLASSES } from 'common/classes';
 import { compose } from 'utils';
 
 import { DataTable } from 'components';

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesViewTabs.js

@@ -23,21 +23,21 @@ function EstimateViewTabs({
   // Estimates list context.
   const { estimatesViews } = useEstimatesListContext();
  
+  // Estimates views.
   const tabs = estimatesViews.map((view) => ({
     ...pick(view, ['name', 'id']),
   }));
 
-  const handleTabsChange = (viewId) => {
+  // Handle tab change.
-    setEstimatesTableState({
+  const handleTabsChange = (customViewId) => {
-      customViewId: viewId || null,
+    setEstimatesTableState({ customViewId: customViewId || null });
-    });
   };
 
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={estimatesTableState.customViewId}
+          currentViewId={estimatesTableState.customViewId}
           resourceName={'estimates'}
           tabs={tabs}
           onChange={handleTabsChange}

client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js

@@ -31,9 +31,9 @@ function InvoiceViewTabs({
   }));
 
   // Handle tab change.
-  const handleTabsChange = (customView) => {    
+  const handleTabsChange = (customViewId) => {    
     setInvoicesTableState({
-      customViewId: customView.id || null,
+      customViewId: customViewId || null,
     });
   };
 
@@ -46,7 +46,7 @@ function InvoiceViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={invoicesTableState.customViewId}
+          currentViewId={invoicesTableState.customViewId}
           resourceName={'invoices'}
           tabs={tabs}
           onNewViewTabClick={handleClickNewView}

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -46,9 +46,7 @@ function InvoiceActionsBar({
 
   // Handle views tab change.
   const handleTabChange = (customView) => {
-    setInvoicesTableState({
+    setInvoicesTableState({ customViewId: customView.id || null });
-      customViewId: customView.id || null,
-    });
   };
 
   return (

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js

@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
 
 import InvoicesEmptyStatus from './InvoicesEmptyStatus';
-import { CLASSES } from 'common/classes';
 
 import { compose } from 'utils';
 import { DataTable } from 'components';

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js

@@ -3,7 +3,7 @@ import React from 'react';
 import 'style/pages/SaleInvoice/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
-import InvoiceActionsBar from './InvoiceActionsBar';
+import InvoicesActionsBar from './InvoicesActionsBar';
 import { InvoicesListProvider } from './InvoicesListProvider';
 
 import InvoiceViewTabs from './InvoiceViewTabs';
@@ -26,7 +26,7 @@ function InvoicesList({
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
     >
-      <InvoiceActionsBar />
+      <InvoicesActionsBar />
 
       <DashboardPageContent>
         <InvoiceViewTabs />

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js

@@ -8,7 +8,7 @@ const InvoicesListContext = createContext();
 /**
  * Accounts chart data provider.
  */
-function InvoicesListProvider({ accountsTableQuery, ...props }) {
+function InvoicesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: invoicesViews, isFetching: isViewsLoading } = useResourceViews(
     'sale_invoices',
@@ -25,7 +25,7 @@ function InvoicesListProvider({ accountsTableQuery, ...props }) {
     data: { invoices, pagination, filterMeta },
     isFetching: isInvoicesFetching,
     isLoading: isInvoicesLoading,
-  } = useInvoices(accountsTableQuery, { keepPreviousData: true });
+  } = useInvoices(query, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =

client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js

@@ -4,7 +4,7 @@ import {
 } from 'store/Invoice/invoices.actions';
 
 const mapDipatchToProps = (dispatch) => ({
-  setInvoicesTableState: (query) => setInvoicesTableState(query),
+  setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
 });
 
 export default connect(null, mapDipatchToProps);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js

@@ -44,9 +44,9 @@ function ReceiptActionsBar({
   };
 
   // Handle the active tab change.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (customView) => {
     setReceiptsTableState({
-      csutomViewId: viewId.id || null,
+      customViewId: customView.id || null,
     });
   };
 

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptViewTabs.js

@@ -27,9 +27,9 @@ function ReceiptViewTabs({
   }));
 
   // Handles the active tab chaning.
-  const handleTabsChange = (customView) => {
+  const handleTabsChange = (customViewId) => {
     setReceiptsTableState({
-      customViewId: customView.id || null,
+      customViewId: customViewId || null,
     });
   };
 
@@ -37,7 +37,7 @@ function ReceiptViewTabs({
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={receiptTableState.customViewId}
+          currentViewId={receiptTableState.customViewId}
           tabs={tabs}
           resourceName={'receipts'}
           onChange={handleTabsChange}

client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -42,10 +42,8 @@ function VendorActionsBar({
   };
 
   // Handle the active tab change.
-  const handleTabChange = (viewId) => {
+  const handleTabChange = (customView) => {
-    setVendorsTableState({
+    setVendorsTableState({ customViewId: customView.id || null });
-      customViewId: viewId.id || null,
-    });
   };
   
   return (

client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js

@@ -40,7 +40,7 @@ function VendorViewsTabs({
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          customViewId={vendorsTableState.customViewId}
+          currentViewId={vendorsTableState.customViewId}
           resourceName={'vendors'}
           tabs={tabs}
           onChange={handleTabsChange}