feat: WIP advanced filter.

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiptsListProvider.js

@@ -2,10 +2,10 @@ import React, { createContext, useContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
-  useResourceFields,
+  useResourceMeta,
   usePaymentReceives,
 } from 'hooks/query';
-import { isTableEmptyStatus } from 'utils';
+import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
 
 const PaymentReceivesListContext = createContext();
 
@@ -21,9 +21,10 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
   // Fetch the payment receives resource fields.
   const {
-    data: paymentReceivesFields,
-    isFetching: isFieldsLoading,
-  } = useResourceFields('payment_receives');
+    data: resourceMeta,
+    isLoading: isResourceLoading,
+    isFetching: isResourceFetching,
+  } = useResourceMeta('payment_receives');
 
   // Fetch payment receives list according to the given custom view id.
   const {
@@ -44,19 +45,23 @@ function PaymentReceivesListProvider({ query, ...props }) {
   const state = {
     paymentReceives,
     pagination,
-    paymentReceivesFields,
+
+    resourceMeta,
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
+
     paymentReceivesViews,
 
     isPaymentReceivesLoading,
     isPaymentReceivesFetching,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
     isViewsLoading,
     isEmptyStatus,
   };
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
       name={'payment-receives-list'}
     >
       <PaymentReceivesListContext.Provider value={state} {...props} />

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js

@@ -3,18 +3,18 @@ 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 {
+  DashboardFilterButton,
+  AdvancedFilterPopover,
+  FormattedMessage as T,
+} from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
@@ -33,12 +33,15 @@ import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
 function PaymentReceiveActionsBar({
   // #withPaymentReceivesActions
   setPaymentReceivesTableState,
+
+  // #withPaymentReceives
+  paymentFilterConditions
 }) {
   // History context.
   const history = useHistory();
 
   // Payment receives list context.
-  const { paymentReceivesViews } = usePaymentReceivesListContext();
+  const { paymentReceivesViews, fields } = usePaymentReceivesListContext();
 
   // Handle new payment button click.
   const handleClickNewPaymentReceive = () => {
@@ -58,6 +61,8 @@ function PaymentReceiveActionsBar({
     refresh();
   };
 
+  console.log(fields, 'fields');
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -73,18 +78,21 @@ function PaymentReceiveActionsBar({
           text={<T id={'new_payment_receive'} />}
           onClick={handleClickNewPaymentReceive}
         />
-        <Popover
-          minimal={true}
-          // content={filterDropdown}
-          interactionKind={PopoverInteractionKind.CLICK}
-          position={Position.BOTTOM_LEFT}
+        <AdvancedFilterPopover
+          advancedFilterProps={{
+            conditions: paymentFilterConditions,
+            defaultFieldKey: 'payment_receive_no',
+            fields: fields,
+            onFilterChange: (filterConditions) => {
+              setPaymentReceivesTableState({ filterRoles: filterConditions });
+            },
+          }}
         >
-          <Button
-            className={classNames(Classes.MINIMAL)}
-            text={<T id={'filter'} />}
-            icon={<Icon icon={'filter-16'} iconSize={16} />}
+          <DashboardFilterButton
+            conditionsCount={paymentFilterConditions.length}
           />
-        </Popover>
+        </AdvancedFilterPopover>
+
         <If condition={false}>
           <Button
             className={Classes.MINIMAL}
@@ -125,5 +133,6 @@ export default compose(
   withPaymentReceivesActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
+    paymentFilterConditions: paymentReceivesTableState.filterRoles,
   })),
 )(PaymentReceiveActionsBar);

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js

@@ -10,6 +10,7 @@ import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
 import PaymentReceivesTable from './PaymentReceivesTable';
 
 import withPaymentReceives from './withPaymentReceives';
+import withPaymentReceivesActions from './withPaymentReceivesActions';
 
 import { compose, transformTableStateToQuery } from 'utils';
 
@@ -19,7 +20,22 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentReceiveList({
   // #withPaymentReceives
   paymentReceivesTableState,
+
+  // #withPaymentReceivesActions
+  setPaymentReceivesTableState
 }) {
+  // Resets the payment receives table state once the page unmount.
+  React.useEffect(
+    () => () => {
+      setPaymentReceivesTableState({
+        filterRoles: [],
+        viewSlug: '',
+        pageIndex: 0,
+      });
+    },
+    [setPaymentReceivesTableState],
+  );
+
   return (
     <PaymentReceivesListProvider
       query={transformTableStateToQuery(paymentReceivesTableState)}
@@ -43,4 +59,5 @@ export default compose(
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
   })),
+  withPaymentReceivesActions,
 )(PaymentReceiveList);

client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js

@@ -2,9 +2,10 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
-  useResourceFields,
+  useResourceMeta,
   usePaymentReceives,
 } from 'hooks/query';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const PaymentReceivesListContext = createContext();
 
@@ -20,9 +21,10 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
   // Fetch the accounts resource fields.
   const {
-    data: paymentReceivesFields,
-    isFetching: isFieldsLoading,
-  } = useResourceFields('payment_receives');
+    data: resourceMeta,
+    isFetching: isResourceFetching,
+    isLoading: isResourceLoading,
+  } = useResourceMeta('payment_receives');
 
   // Fetch accounts list according to the given custom view id.
   const {
@@ -35,18 +37,21 @@ function PaymentReceivesListProvider({ query, ...props }) {
   const provider = {
     paymentReceives,
     paymentReceivesViews,
-    paymentReceivesFields,
     pagination,
+    resourceMeta,
+
+    fields: getFieldsFromResourceMeta(resourceMeta.fields),
 
     isViewsLoading,
-    isFieldsLoading,
+    isResourceFetching,
+    isResourceLoading,
     isPaymentReceivesLoading,
     isPaymentReceivesFetching
   };
 
   return (
     <DashboardInsider
-      loading={isViewsLoading || isFieldsLoading}
+      loading={isViewsLoading || isResourceLoading}
       name={'payment_receives'}
     >
       <PaymentReceivesListContext.Provider value={provider} {...props} />