feat: tables empty status.

client/src/containers/Sales/Estimate/EstimateViewTabs.js

@@ -76,7 +76,6 @@ function EstimateViewTabs({
     history.push('/custom_views/estimates/new');
   };
 
-  console.log(estimateViews, 'estimateViews');
   return (
     <Navbar className={'navbar--dashboard-views'}>
       <NavbarGroup align={Alignment.LEFT}>

client/src/containers/Sales/Estimate/EstimatesDataTable.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Intent,
   Button,
@@ -8,15 +8,17 @@ import {
   MenuDivider,
   Position,
 } from '@blueprintjs/core';
-import { withRouter } from 'react-router';
+import classNames from 'classnames';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import moment from 'moment';
 
+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 { DataTable, Money, Choose, Icon } from 'components';
+import EstimatesEmptyStatus from './EstimatesEmptyStatus';
 
 import withEstimates from './withEstimates';
 import withEstimateActions from './withEstimateActions';
@@ -28,6 +30,7 @@ function EstimatesDataTable({
   estimatesLoading,
   estimatesPageination,
   estimatesTableQuery,
+  estimatesCurrentViewId,
 
   // #withEstimatesActions
   addEstimatesTableQueries,
@@ -177,35 +180,57 @@ function EstimatesDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    estimatesCurrentPage.length === 0,
+    estimatesCurrentViewId === -1,
+  ].every(d => d === true);
+
   return (
-    <LoadingIndicator loading={estimatesLoading && !isLoaded} mount={false}>
-      <DataTable
-        columns={columns}
-        data={estimatesCurrentPage}
-        onFetchData={handleFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        pagesCount={estimatesPageination.pagesCount}
-        initialPageSize={estimatesTableQuery.page_size}
-        initialPageIndex={estimatesTableQuery.page - 1}
-      />
-    </LoadingIndicator>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator loading={estimatesLoading && !isLoaded} mount={false}>
+        <Choose>
+          <Choose.When condition={showEmptyStatus}>
+            <EstimatesEmptyStatus />
+          </Choose.When>
+
+          <Choose.Otherwise>
+            <DataTable
+              columns={columns}
+              data={estimatesCurrentPage}
+              onFetchData={handleFetchData}
+              manualSortBy={true}
+              selectionColumn={true}
+              noInitialFetch={true}
+              sticky={true}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              rowContextMenu={onRowContextMenu}
+              pagination={true}
+              pagesCount={estimatesPageination.pagesCount}
+              initialPageSize={estimatesTableQuery.page_size}
+              initialPageIndex={estimatesTableQuery.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
 }
 
 export default compose(
   withEstimateActions,
   withEstimates(
-    ({ estimatesCurrentPage, estimatesLoading, estimatesPageination, estimatesTableQuery }) => ({
+    ({
       estimatesCurrentPage,
       estimatesLoading,
       estimatesPageination,
-      estimatesTableQuery
+      estimatesTableQuery,
+      estimatesCurrentViewId,
+    }) => ({
+      estimatesCurrentPage,
+      estimatesLoading,
+      estimatesPageination,
+      estimatesTableQuery,
+      estimatesCurrentViewId,
     }),
   ),
 )(EstimatesDataTable);

client/src/containers/Sales/Estimate/EstimatesEmptyStatus.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 EstimatesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={"It's time to send estimates to your customers."}
+      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('/estimates/new');
+            }}
+          >
+            New sale estimate
+          </Button>
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Sales/Estimate/withEstimates.js

@@ -4,18 +4,22 @@ import {
   getEstimateCurrentPageFactory,
   getEstimatesTableQueryFactory,
   getEstimatesPaginationMetaFactory,
+  getEstimatesCurrentViewIdFactory,
 } from 'store/Estimate/estimates.selectors';
 
 export default (mapState) => {
   const getEstimatesItems = getEstimateCurrentPageFactory();
   const getEstimatesPaginationMeta = getEstimatesPaginationMetaFactory();
   const getEstimatesTableQuery = getEstimatesTableQueryFactory();
+  const getEstimatesCurrentViewId = getEstimatesCurrentViewIdFactory();
 
   const mapStateToProps = (state, props) => {
     const query = getEstimatesTableQuery(state, props);
 
     const mapped = {
       estimatesCurrentPage: getEstimatesItems(state, props, query),
+      estimatesCurrentViewId: getEstimatesCurrentViewId(state, props),
+
       estimateViews: getResourceViews(state, props, 'sales_estimates'),
       estimateItems: state.salesEstimates.items,