feat: tables empty status.

client/src/containers/Sales/Invoice/InvoicesDataTable.js

@@ -11,12 +11,15 @@ import {
 import { withRouter } from 'react-router';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
 
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Money, Icon } from 'components';
+import { LoadingIndicator, Choose, DataTable, Money, Icon } from 'components';
+import InvoicesEmptyStatus from './InvoicesEmptyStatus';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -32,6 +35,7 @@ function InvoicesDataTable({
   invoicesCurrentPage,
   invoicesLoading,
   invoicesPageination,
+  invoicesCurrentViewId,
 
   // #withInvoicesActions
   addInvoiceTableQueries,
@@ -186,29 +190,41 @@ function InvoicesDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    invoicesCurrentPage.length === 0,
+    invoicesCurrentViewId === -1,
+  ].every((d) => d === true);
+
   return (
-    <LoadingIndicator
-      loading={invoicesLoading && !isLoadedBefore}
-      mount={false}
-    >
-      <DataTable
-        columns={columns}
-        data={invoicesCurrentPage}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        pagesCount={invoicesPageination.pagesCount}
-        initialPageSize={invoicesPageination.pageSize}
-        initialPageIndex={invoicesPageination.page - 1}
-      />
-    </LoadingIndicator>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator loading={invoicesLoading && !isLoadedBefore}>
+        <Choose>
+          <Choose.When condition={showEmptyStatus}>
+            <InvoicesEmptyStatus />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <DataTable
+              columns={columns}
+              data={invoicesCurrentPage}
+              onFetchData={handleDataTableFetchData}
+              manualSortBy={true}
+              selectionColumn={true}
+              noInitialFetch={true}
+              sticky={true}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              rowContextMenu={onRowContextMenu}
+              pagination={true}
+              autoResetSortBy={false}
+              autoResetPage={false}
+              pagesCount={invoicesPageination.pagesCount}
+              initialPageSize={invoicesPageination.pageSize}
+              initialPageIndex={invoicesPageination.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
 }
 
@@ -224,11 +240,13 @@ export default compose(
       invoicesLoading,
       invoicesPageination,
       invoicesTableQuery,
+      invoicesCurrentViewId,
     }) => ({
       invoicesCurrentPage,
       invoicesLoading,
       invoicesPageination,
       invoicesTableQuery,
+      invoicesCurrentViewId,
     }),
   ),
   withViewDetails(),

client/src/containers/Sales/Invoice/InvoicesEmptyStatus.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 EstimatesEmptyStatus() {
+    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('/invoices/new');
+              }}
+            >
+              New sale invoice
+            </Button>
+
+            <Button intent={Intent.NONE} large={true}>
+              Learn more
+            </Button>
+          </>
+        }
+      />
+    );
+  }

client/src/containers/Sales/Invoice/withInvoices.js

@@ -5,6 +5,7 @@ import {
   getInvoicePaginationMetaFactory,
   getInvoiceTableQueryFactory,
   getCustomerReceivableInvoicesEntriesFactory,
+  getInvoicesCurrentViewIdFactory,
 } from 'store/Invoice/invoices.selector';
 
 export default (mapState) => {
@@ -15,11 +16,15 @@ export default (mapState) => {
 
   const getCustomerReceivableInvoicesEntries = getCustomerReceivableInvoicesEntriesFactory();
 
+  const getInvoicesCurrentViewId = getInvoicesCurrentViewIdFactory();
+
   const mapStateToProps = (state, props) => {
     const query = getInvoiceTableQuery(state, props);
 
     const mapped = {
       invoicesCurrentPage: getInvoicesItems(state, props, query),
+      invoicesCurrentViewId: getInvoicesCurrentViewId(state, props),
+
       invoicesViews: getResourceViews(state, props, 'sales_invoices'),
       invoicesItems: state.salesInvoices.items,
       invoicesTableQuery: query,