feat: WIP advanced filter.

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

@@ -1,21 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Icon from 'components/Icon';
 import {
   Button,
   Classes,
-  Popover,
   NavbarDivider,
   NavbarGroup,
-  PopoverInteractionKind,
-  Position,
   Intent,
   Alignment,
 } from '@blueprintjs/core';
-
-import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
-import intl from 'react-intl-universal';
+import {
+  FormattedMessage as T,
+  AdvancedFilterPopover,
+  DashboardFilterButton,
+} from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -23,7 +21,9 @@ import { If, DashboardActionViewsList } from 'components';
 
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
+
 import withInvoiceActions from './withInvoiceActions';
+import withInvoices from './withInvoices';
 
 import { compose } from 'utils';
 
@@ -33,13 +33,14 @@ import { compose } from 'utils';
 function InvoiceActionsBar({
   // #withInvoiceActions
   setInvoicesTableState,
+
+  // #withInvoices
+  invoicesFilterRoles,
 }) {
   const history = useHistory();
 
-  const [filterCount, setFilterCount] = useState(0);
-
   // Sale invoices list context.
-  const { invoicesViews } = useInvoicesListContext();
+  const { invoicesViews, invoicesFields } = useInvoicesListContext();
 
   // Handle new invoice button click.
   const handleClickNewInvoice = () => {
@@ -74,31 +75,27 @@ function InvoiceActionsBar({
           text={<T id={'new_invoice'} />}
           onClick={handleClickNewInvoice}
         />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: invoicesFilterRoles,
+            defaultFieldKey: 'invoice_no',
+            fields: invoicesFields,
+            onFilterChange: (filterConditions) => {
+              setInvoicesTableState({ filterRoles: filterConditions });
+            },
+          }}
         >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              filterCount <= 0 ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
-          />
-        </Popover>
+          <DashboardFilterButton conditionsCount={invoicesFilterRoles.length} />
+        </AdvancedFilterPopover>
+
+        <NavbarDivider />
+
         <If condition={false}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon={'trash-16'} iconSize={16} />}
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
-            // onClick={handleBulkDelete}
           />
         </If>
         <Button
@@ -128,4 +125,9 @@ function InvoiceActionsBar({
   );
 }
 
-export default compose(withInvoiceActions)(InvoiceActionsBar);
+export default compose(
+  withInvoiceActions,
+  withInvoices(({ invoicesTableState }) => ({
+    invoicesFilterRoles: invoicesTableState.filterRoles,
+  })),
+)(InvoiceActionsBar);

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

@@ -11,6 +11,7 @@ import InvoicesDataTable from './InvoicesDataTable';
 import InvoicesAlerts from '../InvoicesAlerts';
 
 import withInvoices from './withInvoices';
+import withInvoiceActions from './withInvoiceActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { transformTableStateToQuery, compose } from 'utils';
@@ -21,7 +22,22 @@ import { transformTableStateToQuery, compose } from 'utils';
 function InvoicesList({
   // #withInvoice
   invoicesTableState,
+
+  // #withInvoicesActions
+  setInvoicesTableState
 }) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setInvoicesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setInvoicesTableState],
+  );
+
   return (
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
@@ -43,5 +59,6 @@ function InvoicesList({
 
 export default compose(
   withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoiceActions,
   withAlertsActions,
 )(InvoicesList);

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

@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useInvoices } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 
 const InvoicesListContext = createContext();
 
@@ -10,15 +10,15 @@ const InvoicesListContext = createContext();
  */
 function InvoicesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: invoicesViews, isLoading: isViewsLoading } = useResourceViews(
-    'sale_invoices',
-  );
+  const { data: invoicesViews, isLoading: isViewsLoading } =
+    useResourceViews('sale_invoices');
 
   // Fetch the accounts resource fields.
   const {
-    data: invoicesFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('sale_invoices');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('sale_invoices');
 
   // Fetch accounts list according to the given custom view id.
   const {
@@ -39,20 +39,22 @@ function InvoicesListProvider({ query, ...props }) {
   const provider = {
     invoices,
     pagination,
-    invoicesFields,
+
+    invoicesFields: getFieldsFromResourceMeta(resourceMeta.fields),
     invoicesViews,
 
     isInvoicesLoading,
     isInvoicesFetching,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
     isViewsLoading,
 
-    isEmptyStatus
+    isEmptyStatus,
   };
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
       name={'sales-invoices-list'}
     >
       <InvoicesListContext.Provider value={provider} {...props} />