feat: style read-only drawers.

fix: empty state in resources tables.

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