fix: customer view.

client/src/containers/Customers/CustomerActionsBar.js

@@ -20,17 +20,20 @@ import FilterDropdown from 'components/FilterDropdown';
 import { If, DashboardActionViewsList } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import addCustomersTableQueries from 'containers/Customers/withCustomersActions';
-import { compose } from 'utils';
+import withCustomers from 'containers/Customers/withCustomers';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
+import { compose } from 'utils';
 
 const CustomerActionsBar = ({
   // #withResourceDetail
   resourceFields,
 
+  // #withCustomers
+  customersViews,
+
   //#withCustomersActions
   addCustomersTableQueries,
+  changeCustomerView,
 
   // #ownProps
   selectedRows = [],
@@ -45,16 +48,6 @@ const CustomerActionsBar = ({
     history.push('/customers/new');
   }, [history]);
 
-  // const filterDropdown = FilterDropdown({
-  //   fields: resourceFields,
-  //   onFilterChange: (filterConditions) => {
-  //     setFilterCount(filterConditions.length || 0);
-  //     addCustomersTableQueries({
-  //       filter_roles: filterConditions || '',
-  //     });
-  //     onFilterChanged && onFilterChanged(filterConditions);
-  //   },
-  // });
 
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
@@ -64,12 +57,20 @@ const CustomerActionsBar = ({
     onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
   }, [onBulkDelete, selectedRows]);
 
+  const handleTabChange = (viewId) => {
+    changeCustomerView(viewId.id || -1);
+    addCustomersTableQueries({
+      custom_view_id: viewId.id || null,
+    });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
         <DashboardActionViewsList
           resourceName={'customers'}
-          views={[]}
+          views={customersViews}
+          onChange={handleTabChange}
         />
         <NavbarDivider />
 
@@ -133,4 +134,7 @@ export default compose(
   withResourceDetail(({ resourceFields }) => ({
     resourceFields,
   })),
+  withCustomers(({ customersViews }) => ({
+    customersViews,
+  })),
 )(CustomerActionsBar);

client/src/containers/Customers/CustomersList.js

@@ -55,13 +55,14 @@ function CustomersList({
   }, [changePageTitle, formatMessage]);
 
   // Fetch customers resource views and fields.
-  // const fetchResourceViews = useQuery(['resource-views', 'customers'],
-  //   () => requestFetchResourceViews('customers')
-  // );
-
+  const fetchResourceViews = useQuery(
+    ['resource-views', 'customers'],
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
+ 
   const fetchCustomers = useQuery(
     ['customers-table', customersTableQuery],
-    () => requestFetchCustomers(),
+    (key, query) => requestFetchCustomers({ ...query }),
   );
 
   const handleEditCustomer = useCallback(
@@ -84,7 +85,7 @@ function CustomersList({
     setDeleteCustomer(false);
   }, [setDeleteCustomer]);
 
-   const transformErrors = (errors) => {
+  const transformErrors = (errors) => {
     if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
       AppToaster.show({
         message: formatMessage({
@@ -132,16 +133,6 @@ function CustomersList({
     selectedRows,
   ]);
 
-  // Handle filter change to re-fetch the items.
-  const handleFilterChanged = useCallback(
-    (filterConditions) => {
-      // addCustomersTableQueries({
-      //   filter_roles: filterConditions || '',
-      // });
-    },
-    [addCustomersTableQueries],
-  );
-
   // Handle Customers bulk delete button click.,
   const handleBulkDelete = useCallback(
     (customersIds) => {
@@ -173,10 +164,12 @@ function CustomersList({
   }, [requestDeleteBulkCustomers, bulkDelete, formatMessage]);
 
   return (
-    <DashboardInsider name={'customers-list'}>
+    <DashboardInsider
+      loading={fetchResourceViews.isFetching}
+      name={'customers-list'}
+    >
       <CustomerActionsBar
         selectedRows={selectedRows}
-        onFilterChanged={handleFilterChanged}
         onBulkDelete={handleBulkDelete}
       />
 
@@ -188,7 +181,6 @@ function CustomersList({
           >
             <CustomersViewsTabs />
             <CustomersTable
-              loading={fetchCustomers.isFetching}
               onDeleteCustomer={handleDeleteCustomer}
               onEditCustomer={handleEditCustomer}
               onSelectedRowsChange={handleSelectedRowsChange}

client/src/containers/Customers/CustomersViewsTabs.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
 import { compose } from 'redux';
-import { useParams, withRouter, useHistory } from 'react-router-dom';
+import { useParams, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 import { DashboardViewsTabs } from 'components';
@@ -9,6 +9,7 @@ import { DashboardViewsTabs } from 'components';
 import withCustomers from 'containers/Customers/withCustomers';
 import withCustomersActions from 'containers/Customers/withCustomersActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withViewDetail from 'containers/Views/withViewDetails';
 import { pick } from 'lodash';
 
 /**
@@ -24,29 +25,35 @@ function CustomersViewsTabs({
 
   // #withCustomersActions
   addCustomersTableQueries,
+  changeCustomerView,
 
   // #withDashboardActions
   setTopbarEditView,
   changePageSubtitle,
 }) {
-  const history = useHistory();
   const { custom_view_id: customViewId = null } = useParams();
 
-  const tabs = useMemo(() => customersViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }), [customersViews]));
-
   useEffect(() => {
-    setTopbarEditView(customViewId);
     changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
-    // addCustomersTableQueries({
-    //   custom_view_id: customViewId,
-    // });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-    };
+    setTopbarEditView(customViewId);
   }, [customViewId]);
+  
+  const tabs = useMemo(() =>
+    customersViews.map(
+      (view) => ({
+        ...pick(view, ['name', 'id']),
+      }),
+      [customersViews],
+    ),
+  );
+
+  const handleTabsChange = (viewId) => {
+    changeCustomerView(viewId || -1);
+    addCustomersTableQueries({
+      custom_view_id: viewId || null,
+    });
+    setTopbarEditView(viewId);
+  };
 
   return (
     <Navbar className="navbar--dashboard-views">
@@ -55,6 +62,7 @@ function CustomersViewsTabs({
           initialViewId={customViewId}
           resourceName={'customers'}
           tabs={tabs}
+          onChange={handleTabsChange}
         />
       </NavbarGroup>
     </Navbar>
@@ -72,7 +80,8 @@ export default compose(
   withDashboardActions,
   withCustomersViewsTabs,
   withCustomersActions,
+  withViewDetail(),
   withCustomers(({ customersViews }) => ({
     customersViews,
   })),
-)(CustomersViewsTabs);
+)(CustomersViewsTabs);

client/src/containers/Customers/withCustomersActions.js

@@ -19,8 +19,14 @@ export const mapDispatchToProps = (dispatch) => ({
   addCustomersTableQueries: (queries) =>
     dispatch({
       type: t.CUSTOMERS_TABLE_QUERIES_ADD,
-      payload: { queries }
+      payload: { queries },
     }),
+  changeCustomerView: (id) => {
+    dispatch({
+      type: t.CUSTOMERS_SET_CURRENT_VIEW,
+      currentViewId: parseInt(id, 10),
+    });
+  },
 });
 
 export default connect(null, mapDispatchToProps);