feat: tables empty status.

client/src/containers/Customers/CustomerTable.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -11,8 +11,8 @@ import {
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import { DataTable, Icon, Money } from 'components';
+import CustomersEmptyStatus from './CustomersEmptyStatus';
+import { DataTable, Icon, Money, Choose, LoadingIndicator } from 'components';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -29,6 +29,7 @@ const CustomerTable = ({
   customersLoading,
   customerPagination,
   customersTableQuery,
+  customersCurrentViewId,
 
   // #withCustomersActions
   addCustomersTableQueries,
@@ -182,31 +183,44 @@ const CustomerTable = ({
       onDeleteCustomer,
     });
 
+  const showEmptyStatus = [
+    customersCurrentViewId === -1,
+    customers.length === 0,
+  ].every(condition => condition === true);
+
   return (
     <LoadingIndicator
       loading={customersLoading && !isLoadedBefore}
       mount={false}
     >
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={customers}
-        // loading={customersLoading}
-        onFetchData={handleFetchData}
-        selectionColumn={true}
-        expandable={false}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        spinnerProps={{ size: 30 }}
-        rowContextMenu={rowContextMenu}
-        pagination={true}
-        manualSortBy={true}
-        pagesCount={customerPagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        initialPageSize={customersTableQuery.page_size}
-        initialPageIndex={customersTableQuery.page - 1}
-      />
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <CustomersEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            noInitialFetch={true}
+            columns={columns}
+            data={customers}
+            // loading={customersLoading}
+            onFetchData={handleFetchData}
+            selectionColumn={true}
+            expandable={false}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            spinnerProps={{ size: 30 }}
+            rowContextMenu={rowContextMenu}
+            pagination={true}
+            manualSortBy={true}
+            pagesCount={customerPagination.pagesCount}
+            autoResetSortBy={false}
+            autoResetPage={false}
+            initialPageSize={customersTableQuery.page_size}
+            initialPageIndex={customersTableQuery.page - 1}
+          />
+        </Choose.Otherwise>
+      </Choose>
     </LoadingIndicator>
   );
 };
@@ -218,11 +232,13 @@ export default compose(
       customersLoading,
       customerPagination,
       customersTableQuery,
+      customersCurrentViewId,
     }) => ({
       customers,
       customersLoading,
       customerPagination,
       customersTableQuery,
+      customersCurrentViewId
     }),
   ),
   withCustomersActions,

client/src/containers/Customers/CustomersEmptyStatus.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 CustomersEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={"Create and manage your organization's customers."}
+      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('/customers/new');
+            }}
+          >
+            New customer
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Customers/withCustomers.js

@@ -4,11 +4,13 @@ import {
   getCustomerCurrentPageFactory,
   getCustomerPaginationMetaFactory,
   getCustomerTableQueryFactory,
+  getCustomersCurrentViewIdFactory,
 } from 'store/customers/customers.selectors';
 
 export default (mapState) => {
   const getCustomersList = getCustomerCurrentPageFactory();
   const getCustomerPaginationMeta = getCustomerPaginationMetaFactory();
+  const getCustomersCurrentViewId = getCustomersCurrentViewIdFactory();
   const getCustomerTableQuery = getCustomerTableQueryFactory();
 
   const mapStateToProps = (state, props) => {
@@ -21,6 +23,7 @@ export default (mapState) => {
       customerPagination: getCustomerPaginationMeta(state, props, query),
       customersLoading: state.customers.loading,
       customersItems: state.customers.items,
+      customersCurrentViewId: getCustomersCurrentViewId(state, props),
       // customerErrors: state.customers.errors,
     };
     return mapState ? mapState(mapped, state, props) : mapped;