feat: style read-only drawers.

fix: empty state in resources tables.

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