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