feat: WIP advanced filter.

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

@@ -3,24 +3,25 @@ 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 DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
-import { If, DashboardActionViewsList } from 'components';
+import {
+  If,
+  DashboardActionViewsList,
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+} from 'components';
 
 import withBillsActions from './withBillsActions';
+import withBills from './withBills';
 import { useBillsListContext } from './BillsListProvider';
 import { useRefreshBills } from 'hooks/query/bills';
 import { compose } from 'utils';
@@ -31,6 +32,9 @@ import { compose } from 'utils';
 function BillActionsBar({
   // #withBillActions
   setBillsTableState,
+
+  // #withBills
+  billsConditionsRoles
 }) {
   const history = useHistory();
 
@@ -38,9 +42,7 @@ function BillActionsBar({
   const { refresh } = useRefreshBills();
 
   // Bills list context.
-  const { billsViews } = useBillsListContext();
-
-  const [filterCount] = useState(0);
+  const { billsViews, fields } = useBillsListContext();
 
   // Handle click a new bill.
   const handleClickNewBill = () => {
@@ -53,11 +55,8 @@ function BillActionsBar({
       customViewId: customView.id || null,
     });
   };
-
   // Handle click a refresh bills
-  const handleRefreshBtnClick = () => {
-    refresh();
-  };
+  const handleRefreshBtnClick = () => { refresh(); };
 
   return (
     <DashboardActionsBar>
@@ -74,24 +73,21 @@ function BillActionsBar({
           text={<T id={'new_bill'} />}
           onClick={handleClickNewBill}
         />
-        <Popover
-          minimal={true}
-          content={[]}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: billsConditionsRoles,
+            defaultFieldKey: 'bill_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setBillsTableState({ filterRoles: filterConditions });
+            },
+          }}
         >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              true ? (
-                <T id={'filter'} />
-              ) : (
-                `${filterCount} ${intl.get('filters_applied')}`
-              )
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={billsConditionsRoles.length}
           />
-        </Popover>
+        </AdvancedFilterPopover>
+
         <If condition={false}>
           <Button
             className={Classes.MINIMAL}
@@ -128,4 +124,9 @@ function BillActionsBar({
   );
 }
 
-export default compose(withBillsActions)(BillActionsBar);
+export default compose(
+  withBillsActions,
+  withBills(({ billsTableState }) => ({
+    billsConditionsRoles: billsTableState.filterRoles
+  }))
+)(BillActionsBar);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import 'style/pages/Bills/List.scss';
@@ -11,6 +11,7 @@ import BillsViewsTabs from './BillsViewsTabs';
 import BillsTable from './BillsTable';
 
 import withBills from './withBills';
+import withBillsActions from './withBillsActions';
 
 import { transformTableStateToQuery, compose } from 'utils';
 
@@ -20,7 +21,22 @@ import { transformTableStateToQuery, compose } from 'utils';
 function BillsList({
   // #withBills
   billsTableState,
+
+  // #withBillsActions
+  setBillsTableState
 }) {
+  // Resets the accounts table state once the page unmount.
+  useEffect(
+    () => () => {
+      setBillsTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setBillsTableState],
+  );
+
   return (
     <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
       <BillsActionsBar />
@@ -40,4 +56,5 @@ function BillsList({
 
 export default compose(
   withBills(({ billsTableState }) => ({ billsTableState })),
+  withBillsActions
 )(BillsList);

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

@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useBills } from 'hooks/query';
-import { isTableEmptyStatus }  from 'utils';
+import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
+import { getFieldsFromResourceMeta, isTableEmptyStatus } from 'utils';
 
 const BillsListContext = createContext();
 
@@ -10,15 +10,15 @@ const BillsListContext = createContext();
  */
 function BillsListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: billsViews, isLoading: isViewsLoading } = useResourceViews(
-    'bills',
-  );
+  const { data: billsViews, isLoading: isViewsLoading } =
+    useResourceViews('bills');
 
   // Fetch the accounts resource fields.
   const {
-    data: billsFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('bills');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('bills');
 
   // Fetch accounts list according to the given custom view id.
   const {
@@ -28,27 +28,33 @@ function BillsListProvider({ query, ...props }) {
   } = useBills(query, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: bills, pagination, filterMeta,
-  }) && !isBillsFetching;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: bills,
+      pagination,
+      filterMeta,
+    }) && !isBillsFetching;
 
   // Provider payload.
   const provider = {
     bills,
     pagination,
-    billsFields,
     billsViews,
 
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    isResourceLoading,
+    isResourceFetching,
+
     isBillsLoading,
     isBillsFetching,
-    isFieldsLoading,
     isViewsLoading,
-    isEmptyStatus
+    isEmptyStatus,
   };
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
       name={'bills'}
     >
       <BillsListContext.Provider value={provider} {...props} />