feat: style read-only drawers.

fix: empty state in resources tables.

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

@@ -21,9 +21,10 @@ import { transformTableStateToQuery, compose } from 'utils';
 function BillsList({
   // #withBills
   billsTableState,
+  billsTableStateChanged,
 
   // #withBillsActions
-  setBillsTableState
+  setBillsTableState,
 }) {
   // Resets the accounts table state once the page unmount.
   useEffect(
@@ -38,7 +39,10 @@ function BillsList({
   );
 
   return (
-    <BillsListProvider query={transformTableStateToQuery(billsTableState)}>
+    <BillsListProvider
+      query={transformTableStateToQuery(billsTableState)}
+      tableStateChanged={billsTableStateChanged}
+    >
       <BillsActionsBar />
 
       <DashboardPageContent>
@@ -55,6 +59,9 @@ function BillsList({
 }
 
 export default compose(
-  withBills(({ billsTableState }) => ({ billsTableState })),
-  withBillsActions
+  withBills(({ billsTableState, billsTableStateChanged }) => ({
+    billsTableState,
+    billsTableStateChanged,
+  })),
+  withBillsActions,
 )(BillsList);

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

@@ -1,14 +1,17 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
-import { getFieldsFromResourceMeta, isTableEmptyStatus } from 'utils';
+
+import { getFieldsFromResourceMeta } from 'utils';
 
 const BillsListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function BillsListProvider({ query, ...props }) {
+function BillsListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: billsViews, isLoading: isViewsLoading } =
     useResourceViews('bills');
@@ -29,11 +32,7 @@ function BillsListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: bills,
-      pagination,
-      filterMeta,
-    }) && !isBillsFetching;
+    isEmpty(bills) && !isBillsLoading && !tableStateChanged;
 
   // Provider payload.
   const provider = {

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

@@ -1,12 +1,17 @@
 import { connect } from 'react-redux';
-import { getBillsTableStateFactory } from 'store/Bills/bills.selectors';
+import {
+  getBillsTableStateFactory,
+  billsTableStateChangedFactory,
+} from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
   const getBillsTableState = getBillsTableStateFactory();
+  const billsTableStateChanged = billsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       billsTableState: getBillsTableState(state, props),
+      billsTableStateChanged: billsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,8 +1,12 @@
 import { connect } from 'react-redux';
-import { setBillsTableState } from 'store/Bills/bills.actions';
+import {
+  setBillsTableState,
+  resetBillsTableState,
+} from 'store/Bills/bills.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+  resetBillsTableState: () => dispatch(resetBillsTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

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

@@ -43,17 +43,17 @@ function PaymentMadeActionsBar({
   // Payment receives list context.
   const { paymentMadesViews, fields } = usePaymentMadesListContext();
 
+  // Payment receive refresh action.
+  const { refresh } = useRefreshPaymentMades();
+
   // Handle new payment made button click.
   const handleClickNewPaymentMade = () => {
     history.push('/payment-mades/new');
   };
 
-  // Payment receive refresh action.
-  const { refresh } = useRefreshPaymentMades();
-
   // Handle tab changing.
-  const handleTabChange = (customView) => {
-    setPaymentMadesTableState({ customViewId: customView.id || null });
+  const handleTabChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
   };
 
   // Handle click a refresh payment receives.

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

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentMadeList({
   // #withPaymentMades
   paymentMadesTableState,
+  paymentsTableStateChanged,
 
   // #withPaymentMadeActions
-  setPaymentMadesTableState
+  resetPaymentMadesTableState,
 }) {
   // Resets the invoices table state once the page unmount.
   React.useEffect(
     () => () => {
-      setPaymentMadesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetPaymentMadesTableState();
     },
-    [setPaymentMadesTableState],
+    [resetPaymentMadesTableState],
   );
 
   return (
     <PaymentMadesListProvider
       query={transformTableStateToQuery(paymentMadesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
     >
       <PaymentMadeActionsBar />
 
@@ -56,8 +54,9 @@ function PaymentMadeList({
 }
 
 export default compose(
-  withPaymentMades(({ paymentMadesTableState }) => ({
+  withPaymentMades(({ paymentMadesTableState, paymentsTableStateChanged }) => ({
     paymentMadesTableState,
+    paymentsTableStateChanged,
   })),
-  withPaymentMadeActions
+  withPaymentMadeActions,
 )(PaymentMadeList);

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory } from 'react-router';
 import { FormattedMessage as T } from 'components';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
@@ -10,6 +9,8 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
 import withPaymentMadeActions from './withPaymentMadeActions';
 
 import { compose } from 'utils';
+import { transformPaymentViewsToTabs } from './utils';
+
 import withPaymentMade from './withPaymentMade';
 
 /**
@@ -28,15 +29,14 @@ function PaymentMadeViewTabs({
   const { paymentMadesViews } = usePaymentMadesListContext();
 
   // Handle the active tab changning.
-  const handleTabsChange = (customView) => {
-    setPaymentMadesTableState({
-      customViewId: customView.id || null,
-    });
+  const handleTabsChange = (viewSlug) => {
+    setPaymentMadesTableState({ viewSlug });
   };
-
-  const tabs = paymentMadesViews.map((view) => ({
-    ...pick(view, ['name', 'id']),
-  }));
+  // Transformes payment views to tabs.
+  const tabs = React.useMemo(
+    () => transformPaymentViewsToTabs(paymentMadesViews),
+    [paymentMadesViews],
+  );
 
   const handleClickNewView = () => {
     history.push('/custom_views/payment-mades/new');
@@ -59,5 +59,5 @@ function PaymentMadeViewTabs({
 
 export default compose(
   withPaymentMadeActions,
-  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState }))
+  withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
 )(PaymentMadeViewTabs);

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

@@ -1,23 +1,23 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
   usePaymentMades,
-  useResourceMeta
+  useResourceMeta,
 } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const PaymentMadesListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function PaymentMadesListProvider({ query, ...props }) {
+function PaymentMadesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
-  const {
-    data: paymentMadesViews,
-    isLoading: isViewsLoading,
-  } = useResourceViews('bill_payments');
+  const { data: paymentMadesViews, isLoading: isViewsLoading } =
+    useResourceViews('bill_payments');
 
   // Fetch the accounts resource fields.
   const {
@@ -35,11 +35,7 @@ function PaymentMadesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: paymentMades,
-      pagination,
-      filterMeta,
-    }) && !isPaymentsLoading;
+    isEmpty(paymentMades) && !isPaymentsLoading && !tableStateChanged;
 
   // Provider payload.
   const provider = {
@@ -56,7 +52,7 @@ function PaymentMadesListProvider({ query, ...props }) {
     isPaymentsLoading,
     isPaymentsFetching,
     isViewsLoading,
-    isEmptyStatus
+    isEmptyStatus,
   };
 
   return (

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

@@ -0,0 +1,7 @@
+import { pick } from 'lodash';
+
+export const transformPaymentViewsToTabs = (paymentMadeViews) => {
+    return paymentMadeViews.map((view) => ({
+      ...pick(view, ['name', 'id']),
+    }));
+  };

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

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
-  getPaymentMadesTableStateFactory
+  getPaymentMadesTableStateFactory,
+  paymentsTableStateChangedFactory,
 } from 'store/PaymentMades/paymentMades.selector';
 
 export default (mapState) => {
   const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       paymentMadesTableState: getPaymentMadesTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,8 +1,13 @@
 import { connect } from 'react-redux';
-import { setPaymentMadesTableState } from 'store/PaymentMades/paymentMades.actions';
+import {
+  setPaymentMadesTableState,
+  resetPaymentMadesTableState,
+} from 'store/PaymentMades/paymentMades.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentMadesTableState: (state) =>
     dispatch(setPaymentMadesTableState(state)),
+
+  resetPaymentMadesTableState: () => dispatch(resetPaymentMadesTableState()),
 });
 export default connect(null, mapDispatchToProps);