feat: tables empty status.

client/src/containers/Purchases/PaymentMades/PaymentMadeDataTable.js

@@ -15,8 +15,8 @@ import moment from 'moment';
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Money, Icon } from 'components';
+import { DataTable, Money, Icon, Choose, LoadingIndicator } from 'components';
+import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
 
 import withPaymentMade from './withPaymentMade';
 import withPaymentMadeActions from './withPaymentMadeActions';
@@ -31,6 +31,7 @@ function PaymentMadeDataTable({
   paymentMadePageination,
   paymentMadesLoading,
   paymentMadeTableQuery,
+  paymentMadesCurrentViewId,
 
   // #withPaymentMadeActions
   addPaymentMadesTableQueries,
@@ -178,25 +179,38 @@ function PaymentMadeDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatuts = [
+    paymentMadeCurrentPage.length === 0,
+    paymentMadesCurrentViewId === -1,
+  ].every(condition => condition === true);
+
   return (
-    <LoadingIndicator loading={paymentMadesLoading && !isLoaded} mount={false}>
-      <DataTable
-        columns={columns}
-        data={paymentMadeCurrentPage}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        pagesCount={paymentMadePageination.pagesCount}
-        initialPageSize={paymentMadeTableQuery.page_size}
-        initialPageIndex={paymentMadeTableQuery.page - 1}
-        autoResetSortBy={false}
-        autoResetPage={false}
-      />
+    <LoadingIndicator loading={paymentMadesLoading && !isLoaded}>
+      <Choose>
+        <Choose.When condition={showEmptyStatuts}>
+          <PaymentMadesEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            columns={columns}
+            data={paymentMadeCurrentPage}
+            onFetchData={handleDataTableFetchData}
+            manualSortBy={true}
+            selectionColumn={true}
+            noInitialFetch={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            rowContextMenu={onRowContextMenu}
+            pagination={true}
+            pagesCount={paymentMadePageination.pagesCount}
+            initialPageSize={paymentMadeTableQuery.page_size}
+            initialPageIndex={paymentMadeTableQuery.page - 1}
+            autoResetSortBy={false}
+            autoResetPage={false}
+          />
+        </Choose.Otherwise>
+      </Choose>
     </LoadingIndicator>
   );
 }
@@ -211,11 +225,13 @@ export default compose(
       paymentMadesLoading,
       paymentMadePageination,
       paymentMadeTableQuery,
+      paymentMadesCurrentViewId
     }) => ({
       paymentMadeCurrentPage,
       paymentMadesLoading,
       paymentMadePageination,
       paymentMadeTableQuery,
+      paymentMadesCurrentViewId
     }),
   ),
 )(PaymentMadeDataTable);

client/src/containers/Purchases/PaymentMades/PaymentMadesEmptyStatus.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+
+export default function PaymentMadesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={'The organization does not have invoices, yet!'}
+      description={
+        <p>
+          It is a long established fact that a reader will be distracted by the
+          readable content of a page when looking at its layout.
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/payment-made/new');
+            }}
+          >
+            New bill payment
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

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

@@ -1,20 +1,22 @@
 import { connect } from 'react-redux';
-
 import { getResourceViews } from 'store/customViews/customViews.selectors';
 import {
   getPaymentMadeCurrentPageFactory,
   getPaymentMadePaginationMetaFactory,
   getPaymentMadeTableQuery,
-  getPaymentMadeEntriesFactory
+  getPaymentMadeEntriesFactory,
+  getPaymentMadesCurrentViewIdFactory
 } from 'store/PaymentMades/paymentMade.selector';
 
 export default (mapState) => {
   const getPyamentMadesItems = getPaymentMadeCurrentPageFactory();
   const getPyamentMadesPaginationMeta = getPaymentMadePaginationMetaFactory();
   const getPaymentMadeEntries = getPaymentMadeEntriesFactory();
+  const getPaymentMadesCurrentViewId = getPaymentMadesCurrentViewIdFactory();
 
   const mapStateToProps = (state, props) => {
     const query = getPaymentMadeTableQuery(state, props);
+
     const mapped = {
       paymentMadeCurrentPage: getPyamentMadesItems(state, props, query),
       paymentMadeViews: getResourceViews(state, props, 'bill_payments'),
@@ -28,6 +30,8 @@ export default (mapState) => {
       paymentMadesLoading: state.paymentMades.loading,
       nextPaymentNumberChanged: state.paymentMades.nextPaymentNumberChanged,
       paymentMadeEntries: getPaymentMadeEntries(state, props),
+
+      paymentMadesCurrentViewId: getPaymentMadesCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };