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} />

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js

@@ -3,26 +3,29 @@ 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 withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
+
 import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import { useRefreshPaymentMades } from 'hooks/query/paymentMades';
+
 import { compose } from 'utils';
 
 /**
@@ -31,11 +34,14 @@ import { compose } from 'utils';
 function PaymentMadeActionsBar({
   // #withPaymentMadesActions
   setPaymentMadesTableState,
+
+  // #withPaymentMades
+  paymentMadesFilterConditions
 }) {
   const history = useHistory();
 
   // Payment receives list context.
-  const { paymentMadesViews } = usePaymentMadesListContext();
+  const { paymentMadesViews, fields } = usePaymentMadesListContext();
 
   // Handle new payment made button click.
   const handleClickNewPaymentMade = () => {
@@ -69,20 +75,21 @@ function PaymentMadeActionsBar({
           text={<T id={'new_payment_made'} />}
           onClick={handleClickNewPaymentMade}
         />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentMadesFilterConditions,
+            defaultFieldKey: 'payment_number',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentMadesTableState({ filterRoles: filterConditions });
+            },
+          }}
         >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={
-              true ? <T id={'filter'} /> : `${0} ${intl.get('filters_applied')}`
-            }
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={paymentMadesFilterConditions.length}
           />
-        </Popover>
+        </AdvancedFilterPopover>
+
         <If condition={false}>
           <Button
             className={Classes.MINIMAL}
@@ -119,4 +126,9 @@ function PaymentMadeActionsBar({
   );
 }
 
-export default compose(withPaymentMadeActions)(PaymentMadeActionsBar);
+export default compose(
+  withPaymentMadeActions,
+  withPaymentMade(({ paymentMadesTableState }) => ({
+    paymentMadesFilterConditions: paymentMadesTableState.filterRoles,
+  })),
+)(PaymentMadeActionsBar);

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js

@@ -10,6 +10,7 @@ import { PaymentMadesListProvider } from './PaymentMadesListProvider';
 import PaymentMadeViewTabs from './PaymentMadeViewTabs';
 
 import withPaymentMades from './withPaymentMade';
+import withPaymentMadeActions from './withPaymentMadeActions';
 
 import { compose, transformTableStateToQuery } from 'utils';
 
@@ -19,7 +20,22 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentMadeList({
   // #withPaymentMades
   paymentMadesTableState,
+
+  // #withPaymentMadeActions
+  setPaymentMadesTableState
 }) {
+  // Resets the invoices table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setPaymentMadesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setPaymentMadesTableState],
+  );
+
   return (
     <PaymentMadesListProvider
       query={transformTableStateToQuery(paymentMadesTableState)}
@@ -43,4 +59,5 @@ export default compose(
   withPaymentMades(({ paymentMadesTableState }) => ({
     paymentMadesTableState,
   })),
+  withPaymentMadeActions
 )(PaymentMadeList);

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js

@@ -2,10 +2,10 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
-  useResourceFields,
   usePaymentMades,
+  useResourceMeta
 } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 
 const PaymentMadesListContext = createContext();
 
@@ -21,9 +21,10 @@ function PaymentMadesListProvider({ query, ...props }) {
 
   // Fetch the accounts resource fields.
   const {
-    data: paymentMadesFields,
-    isLoading: isFieldsLoading,
-  } = useResourceFields('bill_payments');
+    data: resourceMeta,
+    isLoading: isResourceMetaLoading,
+    isFetching: isResourceMetaFetching,
+  } = useResourceMeta('bill_payments');
 
   // Fetch accounts list according to the given custom view id.
   const {
@@ -45,19 +46,22 @@ function PaymentMadesListProvider({ query, ...props }) {
     paymentMades,
     pagination,
     filterMeta,
-    paymentMadesFields,
     paymentMadesViews,
 
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+    resourceMeta,
+    isResourceMetaLoading,
+    isResourceMetaFetching,
+
     isPaymentsLoading,
     isPaymentsFetching,
-    isFieldsLoading,
     isViewsLoading,
     isEmptyStatus
   };
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceMetaLoading}
       name={'payment-mades-list'}
     >
       <PaymentMadesListContext.Provider value={provider} {...props} />

client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMdesListProvider.js

@@ -9,20 +9,20 @@ const PaymentMadesContext = createContext();
  */
 function PaymentMadesProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: paymentsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: paymentsViews, isLoading: isViewsLoading } = useResourceViews(
     'bill_payments',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: paymentsFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('bill_payments');
 
   // Fetch accounts list according to the given custom view id.
   const {
     data: { paymentMades, pagination },
-    isFetching: isPaymentsLoading,
+    isLoading: isPaymentsLoading,
   } = usePaymentMades(query);
 
   // Provider payload.
@@ -39,7 +39,7 @@ function PaymentMadesProvider({ query, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isFieldsLoading || isPaymentsLoading}
       name={'payment_made'}
     >
       <PaymentMadesContext.Provider value={provider} {...props} />