feat: tables empty status.

client/src/containers/Purchases/Bill/BillsDataTable.js

@@ -19,8 +19,9 @@ import Icon from 'components/Icon';
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
+import { LoadingIndicator, Choose } from 'components';
 import DataTable from 'components/DataTable';
+import BillsEmptyStatus from './BillsEmptyStatus';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -30,11 +31,13 @@ import withBills from './withBills';
 import withBillActions from './withBillActions';
 import withCurrentView from 'containers/Views/withCurrentView';
 
+// Bills transactions datatable.
 function BillsDataTable({
-  //#withBills
+  // #withBills
   billsCurrentPage,
   billsLoading,
   billsPageination,
+  billsCurrentViewId,
 
   // #withDashboardActions
   changeCurrentView,
@@ -215,23 +218,36 @@ function BillsDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    billsCurrentViewId === -1,
+    billsCurrentPage.length === 0,
+  ].every(condition => condition === true);
+
   return (
     <LoadingIndicator loading={billsLoading && !isLoadedBefore} mount={false}>
-      <DataTable
-        columns={columns}
-        data={billsCurrentPage}
-        onFetchData={handleFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        pagesCount={billsPageination.pagesCount}
-        initialPageSize={billsPageination.pageSize}
-        initialPageIndex={billsPageination.page - 1}
-      />
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <BillsEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            columns={columns}
+            data={billsCurrentPage}
+            onFetchData={handleFetchData}
+            manualSortBy={true}
+            selectionColumn={true}
+            noInitialFetch={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            rowContextMenu={onRowContextMenu}
+            pagination={true}
+            pagesCount={billsPageination.pagesCount}
+            initialPageSize={billsPageination.pageSize}
+            initialPageIndex={billsPageination.page - 1}
+          />
+        </Choose.Otherwise>
+      </Choose>
     </LoadingIndicator>
   );
 }
@@ -248,11 +264,13 @@ export default compose(
       billsLoading,
       billsPageination,
       billsTableQuery,
+      billsCurrentViewId
     }) => ({
       billsCurrentPage,
       billsLoading,
       billsPageination,
       billsTableQuery,
+      billsCurrentViewId
     }),
   ),
   withViewDetails(),

client/src/containers/Purchases/Bill/BillsEmptyStatus.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { useHistory } from 'react-router-dom';
+import { EmptyStatus } from 'components';
+
+export default function BillsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={'Manage the organization’s services and products.'}
+      description={
+        <p>
+          Here a list of your organization products and services, to be used when you create invoices or bills to your customers or vendors.
+        </p>
+      }
+      action={
+        <>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={() => {
+              history.push('/bills/new');
+            }}
+          >
+            New bill
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Purchases/Bill/withBills.js

@@ -6,6 +6,7 @@ import {
   getBillTableQueryFactory,
   getVendorPayableBillsFactory,
   getVendorPayableBillsEntriesFactory,
+  getBillsCurrentViewIdFactory,
 } from 'store/Bills/bills.selectors';
 
 export default (mapState) => {
@@ -14,12 +15,14 @@ export default (mapState) => {
   const getBillTableQuery = getBillTableQueryFactory();
   const getVendorPayableBills = getVendorPayableBillsFactory();
   const getVendorPayableBillsEntries = getVendorPayableBillsEntriesFactory();
+  const getBillsCurrentViewId = getBillsCurrentViewIdFactory();
 
   const mapStateToProps = (state, props) => {
     const tableQuery = getBillTableQuery(state, props);
 
     const mapped = {
       billsCurrentPage: getBillsItems(state, props, tableQuery),
+      billsCurrentViewId: getBillsCurrentViewId(state),
       billsViews: getResourceViews(state, props, 'bills'),
       billsItems: state.bills.items,
       billsTableQuery: tableQuery,
@@ -29,6 +32,7 @@ export default (mapState) => {
       nextBillNumberChanged: state.bills.nextBillNumberChanged,
       vendorPayableBills: getVendorPayableBills(state, props),
       vendorPayableBillsEntries: getVendorPayableBillsEntries(state, props),
+      
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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