feat: WIP advanced filter.

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

@@ -1,23 +1,24 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   NavbarGroup,
   NavbarDivider,
   Button,
   Classes,
   Intent,
-  Popover,
-  Position,
-  PopoverInteractionKind,
   Switch,
   Alignment,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { If, Icon, DashboardActionViewsList } from 'components';
+import {
+  If,
+  Icon,
+  DashboardActionViewsList,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';
 
 import { useCustomersListContext } from './CustomersListProvider';
 import { useRefreshCustomers } from 'hooks/query/customers';
@@ -34,6 +35,7 @@ import { compose } from 'utils';
 function CustomerActionsBar({
   // #withCustomers
   customersSelectedRows = [],
+  customersFilterConditions,
 
   // #withCustomersActions
   setCustomersTableState,
@@ -46,7 +48,7 @@ function CustomerActionsBar({
   const history = useHistory();
 
   // Customers list context.
-  const { customersViews } = useCustomersListContext();
+  const { customersViews, fields } = useCustomersListContext();
 
   // Customers refresh action.
   const { refresh } = useRefreshCustomers();
@@ -72,9 +74,7 @@ function CustomerActionsBar({
   };
 
   // Handle click a refresh customers
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };
 
   return (
     <DashboardActionsBar>
@@ -93,17 +93,21 @@ function CustomerActionsBar({
           onClick={onClickNewCustomer}
         />
         <NavbarDivider />
-        <Popover
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: customersFilterConditions,
+            defaultFieldKey: 'display_name',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setCustomersTableState({ filterRoles: filterConditions });
+            },
+          }}
         >
-          <Button
-            className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${intl.get('filter')}`}
-            icon={<Icon icon="filter-16" iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={customersFilterConditions.length}
           />
-        </Popover>
+        </AdvancedFilterPopover>
 
         <If condition={customersSelectedRows.length}>
           <Button
@@ -146,6 +150,7 @@ export default compose(
   withCustomers(({ customersSelectedRows, customersTableState }) => ({
     customersSelectedRows,
     accountsInactiveMode: customersTableState.inactiveMode,
+    customersFilterConditions: customersTableState.filterRoles,
   })),
   withAlertActions,
 )(CustomerActionsBar);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import 'style/pages/Customers/List.scss';
 
@@ -11,6 +11,8 @@ import CustomersAlerts from 'containers/Customers/CustomersAlerts';
 import { CustomersListProvider } from './CustomersListProvider';
 
 import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
+
 import { compose } from 'utils';
 
 /**
@@ -19,7 +21,22 @@ import { compose } from 'utils';
 function CustomersList({
   // #withCustomers
   customersTableState,
+
+  // #withCustomersActions
+  setCustomersTableState
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setCustomersTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setCustomersTableState],
+  );
+
   return (
     <CustomersListProvider tableState={customersTableState}>
       <CustomersActionsBar />
@@ -38,4 +55,5 @@ function CustomersList({
 
 export default compose(
   withCustomers(({ customersTableState }) => ({ customersTableState })),
+  withCustomersActions
 )(CustomersList);

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

@@ -1,8 +1,8 @@
 import React, { createContext } from 'react';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useCustomers } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceMeta, useResourceViews, useCustomers } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 import { transformCustomersStateToQuery } from './utils';
 
 const CustomersListContext = createContext();
@@ -12,10 +12,15 @@ function CustomersListProvider({ tableState, ...props }) {
   const tableQuery = transformCustomersStateToQuery(tableState);
 
   // Fetch customers resource views and fields.
+  const { data: customersViews, isLoading: isViewsLoading } =
+    useResourceViews('customers');
+
+  // Fetch the customers resource fields.
   const {
-    data: customersViews,
-    isLoading: isCustomersViewsLoading,
-  } = useResourceViews('customers');
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('customers');
 
   // Fetches customers data with pagination meta.
   const {
@@ -25,16 +30,26 @@ function CustomersListProvider({ tableState, ...props }) {
   } = useCustomers(tableQuery, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: customers, pagination, filterMeta,
-  }) && !isCustomersFetching && !tableState.inactiveMode;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: customers,
+      pagination,
+      filterMeta,
+    }) &&
+    !isCustomersFetching &&
+    !tableState.inactiveMode;
 
   const state = {
     customersViews,
     customers,
     pagination,
 
-    isCustomersViewsLoading,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
+    isViewsLoading,
     isCustomersLoading,
     isCustomersFetching,
 
@@ -42,7 +57,10 @@ function CustomersListProvider({ tableState, ...props }) {
   };
 
   return (
-    <DashboardInsider loading={isCustomersViewsLoading} name={'customers-list'}>
+    <DashboardInsider
+      loading={isViewsLoading || isResourceMetaLoading || isCustomersLoading}
+      name={'customers-list'}
+    >
       <CustomersListContext.Provider value={state} {...props} />
     </DashboardInsider>
   );