feat: style read-only drawers.

fix: empty state in resources tables.

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -46,7 +46,6 @@ function EstimateActionsBar({
   const onClickNewEstimate = () => {
     history.push('/estimates/new');
   };
-
   // Estimates refresh action.
   const { refresh } = useRefreshEstimates();
 

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function EstimatesList({
   // #withEstimate
   estimatesTableState,
+  estimatesTableStateChanged,
 
   // #withEstimatesActions
-  setEstimatesTableState
+  resetEstimatesTableState,
 }) {
   // Resets the estimates table state once the page unmount.
   React.useEffect(
     () => () => {
-      setEstimatesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetEstimatesTableState();
     },
-    [setEstimatesTableState],
+    [resetEstimatesTableState],
   );
 
   return (
     <EstimatesListProvider
       query={transformTableStateToQuery(estimatesTableState)}
+      tableStateChanged={estimatesTableStateChanged}
     >
       <EstimatesActionsBar />
 
@@ -56,6 +54,9 @@ function EstimatesList({
 }
 
 export default compose(
-  withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
-  withEstimatesActions
+  withEstimates(({ estimatesTableState, estimatesTableStateChanged }) => ({
+    estimatesTableState,
+    estimatesTableStateChanged,
+  })),
+  withEstimatesActions,
 )(EstimatesList);

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js

@@ -1,16 +1,18 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useResourceViews, useResourceMeta, useEstimates } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
+// Estimates list context.
 const EstimatesListContext = createContext();
 
 /**
  * Sale estimates data provider.
  */
-function EstimatesListProvider({ query, ...props }) {
+function EstimatesListProvider({ query, tableStateChanged, ...props }) {
   // Fetches estimates resource views and fields.
   const { data: estimatesViews, isLoading: isViewsLoading } =
     useResourceViews('sale_estimates');
@@ -31,11 +33,7 @@ function EstimatesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: estimates,
-      pagination,
-      filterMeta,
-    }) && !isEstimatesFetching;
+    !isEstimatesLoading && !tableStateChanged && isEmpty(estimates);
 
   // Provider payload.
   const provider = {

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getEstimatesTableStateFactory,
+  isEstimatesTableStateChangedFactory,
 } from 'store/Estimate/estimates.selectors';
 
 export default (mapState) => {
   const getEstimatesTableState = getEstimatesTableStateFactory();
+  const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       estimatesTableState: getEstimatesTableState(state, props),
+      estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
   setEstimatesTableState,
+  resetEstimatesTableState,
 } from 'store/Estimate/estimates.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+  resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

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

@@ -29,9 +29,7 @@ function InvoiceViewTabs({
 
   // Handle tab change.
   const handleTabsChange = (viewSlug) => {
-    setInvoicesTableState({
-      viewSlug: viewSlug || null,
-    });
+    setInvoicesTableState({ viewSlug });
   };
   // Handle click a new view tab.
   const handleClickNewView = () => {

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

@@ -22,25 +22,23 @@ import { transformTableStateToQuery, compose } from 'utils';
 function InvoicesList({
   // #withInvoice
   invoicesTableState,
+  invoicesTableStateChanged,
 
   // #withInvoicesActions
-  setInvoicesTableState
+  resetInvoicesTableState,
 }) {
   // Resets the invoices table state once the page unmount.
   React.useEffect(
     () => () => {
-      setInvoicesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetInvoicesTableState();
     },
-    [setInvoicesTableState],
+    [resetInvoicesTableState],
   );
 
   return (
     <InvoicesListProvider
       query={transformTableStateToQuery(invoicesTableState)}
+      tableStateChanged={invoicesTableStateChanged}
     >
       <InvoicesActionsBar />
 
@@ -58,7 +56,10 @@ function InvoicesList({
 }
 
 export default compose(
-  withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+  withInvoices(({ invoicesTableState, invoicesTableStateChanged }) => ({
+    invoicesTableState,
+    invoicesTableStateChanged,
+  })),
   withInvoiceActions,
   withAlertsActions,
 )(InvoicesList);

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

@@ -1,14 +1,16 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const InvoicesListContext = createContext();
 
 /**
  * Accounts chart data provider.
  */
-function InvoicesListProvider({ query, ...props }) {
+function InvoicesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const { data: invoicesViews, isLoading: isViewsLoading } =
     useResourceViews('sale_invoices');
@@ -29,11 +31,7 @@ function InvoicesListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: invoices,
-      pagination,
-      filterMeta,
-    }) && !isInvoicesLoading;
+    isEmpty(invoices) && !tableStateChanged && !isInvoicesLoading;
 
   // Provider payload.
   const provider = {

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

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  setInvoicesTableState
+  setInvoicesTableState,
+  resetInvoicesTableState
 } from 'store/Invoice/invoices.actions';
 
 const mapDipatchToProps = (dispatch) => ({
   setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
+  resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
 });
 
 export default connect(null, mapDipatchToProps);

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

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   getInvoicesTableStateFactory,
+  isInvoicesTableStateChangedFactory,
 } from 'store/Invoice/invoices.selector';
 
 export default (mapState) => {
   const getInvoicesTableState = getInvoicesTableStateFactory();
+  const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       invoicesTableState: getInvoicesTableState(state, props),
+      invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
 function PaymentReceiveList({
   // #withPaymentReceives
   paymentReceivesTableState,
+  paymentsTableStateChanged,
 
   // #withPaymentReceivesActions
-  setPaymentReceivesTableState
+  resetPaymentReceivesTableState,
 }) {
   // Resets the payment receives table state once the page unmount.
   React.useEffect(
     () => () => {
-      setPaymentReceivesTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetPaymentReceivesTableState();
     },
-    [setPaymentReceivesTableState],
+    [resetPaymentReceivesTableState],
   );
 
   return (
     <PaymentReceivesListProvider
       query={transformTableStateToQuery(paymentReceivesTableState)}
+      tableStateChanged={paymentsTableStateChanged}
     >
       <PaymentReceiveActionsBar />
 
@@ -56,8 +54,11 @@ function PaymentReceiveList({
 }
 
 export default compose(
-  withPaymentReceives(({ paymentReceivesTableState }) => ({
-    paymentReceivesTableState,
-  })),
+  withPaymentReceives(
+    ({ paymentReceivesTableState, paymentsTableStateChanged }) => ({
+      paymentReceivesTableState,
+      paymentsTableStateChanged,
+    }),
+  ),
   withPaymentReceivesActions,
 )(PaymentReceiveList);

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

@@ -1,4 +1,6 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
   useResourceViews,
@@ -12,7 +14,7 @@ const PaymentReceivesListContext = createContext();
 /**
  * Payment receives data provider.
  */
-function PaymentReceivesListProvider({ query, ...props }) {
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
   // Fetch accounts resource views and fields.
   const {
     data: paymentReceivesViews,
@@ -33,6 +35,10 @@ function PaymentReceivesListProvider({ query, ...props }) {
     isFetching: isPaymentReceivesFetching,
   } = usePaymentReceives(query, { keepPreviousData: true });
 
+  // Detarmines the datatable empty status.
+  const isEmptyStatus =
+    !isPaymentReceivesLoading && !tableStateChanged && isEmpty(paymentReceives);
+
   // Provider payload.
   const provider = {
     paymentReceives,
@@ -42,6 +48,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
 
     fields: getFieldsFromResourceMeta(resourceMeta.fields),
 
+    isEmptyStatus,
     isViewsLoading,
     isResourceFetching,
     isResourceLoading,

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

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
-  getPaymentReceiveTableStateFactory
+  getPaymentReceiveTableStateFactory,
+  paymentsTableStateChangedFactory
 } from 'store/PaymentReceives/paymentReceives.selector';
 
 export default (mapState) => {
   const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
+  const paymentsTableStateChanged = paymentsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       paymentReceivesTableState: getPaymentReceiveTableState(state, props),
+      paymentsTableStateChanged: paymentsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,9 +1,15 @@
 import { connect } from 'react-redux';
-import { setPaymentReceivesTableState } from 'store/PaymentReceives/paymentReceives.actions';
+import {
+  setPaymentReceivesTableState,
+  resetPaymentReceivesTableState,
+} from 'store/PaymentReceives/paymentReceives.actions';
 
 const mapDispatchToProps = (dispatch) => ({
   setPaymentReceivesTableState: (state) =>
     dispatch(setPaymentReceivesTableState(state)),
+
+  resetPaymentReceivesTableState: () =>
+    dispatch(resetPaymentReceivesTableState()),
 });
 
 export default connect(null, mapDispatchToProps);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js

@@ -20,24 +20,24 @@ import { transformTableStateToQuery, compose } from 'utils';
 function ReceiptsList({
   // #withReceipts
   receiptTableState,
+  receiptsTableStateChanged,
 
   // #withReceiptsActions
-  setReceiptsTableState,
+  resetReceiptsTableState,
 }) {
   // Resets the receipts table state once the page unmount.
   React.useEffect(
     () => () => {
-      setReceiptsTableState({
-        filterRoles: [],
-        viewSlug: '',
-        pageIndex: 0,
-      });
+      resetReceiptsTableState();
     },
-    [setReceiptsTableState],
+    [resetReceiptsTableState],
   );
 
   return (
-    <ReceiptsListProvider query={transformTableStateToQuery(receiptTableState)}>
+    <ReceiptsListProvider
+      query={transformTableStateToQuery(receiptTableState)}
+      tableStateChanged={receiptsTableStateChanged}
+    >
       <DashboardPageContent>
         <ReceiptActionsBar />
 
@@ -56,8 +56,9 @@ function ReceiptsList({
 }
 
 export default compose(
-  withReceipts(({ receiptTableState }) => ({
+  withReceipts(({ receiptTableState, receiptsTableStateChanged }) => ({
     receiptTableState,
+    receiptsTableStateChanged,
   })),
   withReceiptsActions,
 )(ReceiptsList);

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js

@@ -1,13 +1,15 @@
 import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
 import { useResourceMeta, useResourceViews, useReceipts } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
 
 const ReceiptsListContext = createContext();
 
 // Receipts list provider.
-function ReceiptsListProvider({ query, ...props }) {
+function ReceiptsListProvider({ query, tableStateChanged, ...props }) {
   // Fetch receipts resource views and fields.
   const { data: receiptsViews, isLoading: isViewsLoading } =
     useResourceViews('sale_receipt');
@@ -27,11 +29,7 @@ function ReceiptsListProvider({ query, ...props }) {
 
   // Detarmines the datatable empty status.
   const isEmptyStatus =
-    isTableEmptyStatus({
-      data: receipts,
-      pagination,
-      filterMeta,
-    }) && !isReceiptsLoading;
+    isEmpty(receipts) && !tableStateChanged && !isReceiptsLoading;
 
   const provider = {
     receipts,

client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js

@@ -1,14 +1,17 @@
   import { connect } from 'react-redux';
 import {
   getReceiptsTableStateFactory,
+  receiptsTableStateChangedFactory,
 } from 'store/receipts/receipts.selector';
 
 export default (mapState) => {
   const getReceiptsTableState = getReceiptsTableStateFactory();
+  const receiptsTableStateChanged = receiptsTableStateChangedFactory();
 
   const mapStateToProps = (state, props) => {
     const mapped = {
       receiptTableState: getReceiptsTableState(state, props),
+      receiptsTableStateChanged: receiptsTableStateChanged(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js

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