feat: tables empty status.

2026-02-18 13:50:31 +00:00 · 2020-11-17 11:31:49 +02:00
parent 4ea6f7af85
commit 1465100a4b
49 changed files with 1050 additions and 244 deletions
--- a/client/src/containers/Sales/Estimate/EstimateViewTabs.js
+++ b/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}>
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/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);
--- a/client/src/containers/Sales/Estimate/EstimatesEmptyStatus.js
+++ b/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>
+        </>
+      }
+    />
+  );
+}
--- a/client/src/containers/Sales/Estimate/withEstimates.js
+++ b/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,
      
--- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js
+++ b/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(),
--- a/client/src/containers/Sales/Invoice/InvoicesEmptyStatus.js
+++ b/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>
+          </>
+        }
+      />
+    );
+  }
--- a/client/src/containers/Sales/Invoice/withInvoices.js
+++ b/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,
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.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 PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
+import { LoadingIndicator, DataTable, Choose, Money, Icon } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -32,6 +32,7 @@ function PaymentReceivesDataTable({
  paymentReceivesPageination,
  paymentReceivesLoading,
  paymentReceivesTableQuery,
+  paymentReceivesCurrentViewId,

  // #withPaymentReceivesActions
  addPaymentReceivesTableQueries,
@@ -179,28 +180,41 @@ function PaymentReceivesDataTable({
    [actionMenuList, formatMessage],
  );

+  const showEmptyStatus = [
+    paymentReceivesCurrentViewId === -1,
+    PaymentReceivesCurrentPage.length === 0,
+  ].every(condition => condition === true); 
+
  return (
    <LoadingIndicator
      loading={paymentReceivesLoading && !isLoaded}
      mount={false}
    >
-      <DataTable
-        columns={columns}
-        data={PaymentReceivesCurrentPage}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        pagesCount={paymentReceivesPageination.pagesCount}
-        initialPageSize={paymentReceivesTableQuery.page_size}
-        initialPageIndex={paymentReceivesTableQuery.page - 1}
-      />
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <PaymentReceivesEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            columns={columns}
+            data={PaymentReceivesCurrentPage}
+            onFetchData={handleDataTableFetchData}
+            manualSortBy={true}
+            selectionColumn={true}
+            noInitialFetch={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            rowContextMenu={onRowContextMenu}
+            pagination={true}
+            autoResetSortBy={false}
+            autoResetPage={false}
+            pagesCount={paymentReceivesPageination.pagesCount}
+            initialPageSize={paymentReceivesTableQuery.page_size}
+            initialPageIndex={paymentReceivesTableQuery.page - 1}
+          />
+        </Choose.Otherwise>
+      </Choose>
    </LoadingIndicator>
  );
 }
@@ -216,12 +230,14 @@ export default compose(
      PaymentReceivesCurrentPage,
      paymentReceivesLoading,
      paymentReceivesPageination,
-      paymentReceivesTableQuery
+      paymentReceivesTableQuery,
+      paymentReceivesCurrentViewId,
    }) => ({
      PaymentReceivesCurrentPage,
      paymentReceivesLoading,
      paymentReceivesPageination,
-      paymentReceivesTableQuery
+      paymentReceivesTableQuery,
+      paymentReceivesCurrentViewId,
    }),
  ),
  withViewDetails(),
--- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesEmptyStatus.js
+++ b/client/src/containers/Sales/PaymentReceive/PaymentReceivesEmptyStatus.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 PaymentReceivesEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={"The organization does't receive money, 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-receive/new');
+            }}
+          >
+            New payment receive
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}
--- a/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceive/withPaymentReceives.js
@@ -4,11 +4,14 @@ import {
  getPaymentReceiveCurrentPageFactory,
  getPaymentReceivePaginationMetaFactory,
  getPaymentReceiveTableQuery,
+  getPaymentReceivesCurrentViewIdFactory,
 } from 'store/PaymentReceive/paymentReceive.selector';

 export default (mapState) => {
  const getPyamentReceivesItems = getPaymentReceiveCurrentPageFactory();
  const getPyamentReceivesPaginationMeta = getPaymentReceivePaginationMetaFactory();
+  const getPaymentReceivesCurrentViewId = getPaymentReceivesCurrentViewIdFactory();
+
  const mapStateToProps = (state, props) => {
    const query = getPaymentReceiveTableQuery(state, props);
    const mapped = {
@@ -23,6 +26,7 @@ export default (mapState) => {
      ),
      paymentReceivesLoading: state.paymentReceives.loading,
      paymentReceiveNumberChanged: state.paymentReceives.journalNumberChanged,
+      paymentReceivesCurrentViewId: getPaymentReceivesCurrentViewId(state, props),
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsDataTable.js
@@ -15,7 +15,9 @@ import moment from 'moment';
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';

-import { LoadingIndicator, DataTable, Money, Icon } from 'components';
+import { Choose, LoadingIndicator, DataTable, Money, Icon } from 'components';
+
+import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -24,16 +26,17 @@ import withReceipts from './withReceipts';
 import withReceiptActions from './withReceiptActions';

 function ReceiptsDataTable({
-  //#withReceipts
+  // #withReceipts
  receiptsCurrentPage,
  receiptsLoading,
  receiptsPagination,
  receiptTableQuery,
+  receiptsCurrentViewId,

  // #withReceiptsActions
  addReceiptsTableQueries,

-  // #Own Props
+  // #ownProps
  loading,
  onEditReceipt,
  onDeleteReceipt,
@@ -186,28 +189,38 @@ function ReceiptsDataTable({
    [onSelectedRowsChange],
  );

+  const showEmptyStatus = [
+    receiptsCurrentViewId === -1,
+    receiptsCurrentPage.length === 0,
+  ].every(condition => condition === true);
+
  return (
-    <LoadingIndicator
-      loading={receiptsLoading && !isLoadedBefore}
-      mount={false}
-    >
-      <DataTable
-        columns={columns}
-        data={receiptsCurrentPage}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        pagesCount={receiptsPagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        initialPageSize={receiptTableQuery.page_size}
-        initialPageIndex={receiptTableQuery.page - 1}
-      />
+    <LoadingIndicator loading={receiptsLoading && !isLoadedBefore}>
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <ReceiptsEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            columns={columns}
+            data={receiptsCurrentPage}
+            onFetchData={handleDataTableFetchData}
+            manualSortBy={true}
+            selectionColumn={true}
+            noInitialFetch={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            rowContextMenu={onRowContextMenu}
+            pagination={true}
+            pagesCount={receiptsPagination.pagesCount}
+            autoResetSortBy={false}
+            autoResetPage={false}
+            initialPageSize={receiptTableQuery.page_size}
+            initialPageIndex={receiptTableQuery.page - 1}
+          />
+        </Choose.Otherwise>
+      </Choose>
    </LoadingIndicator>
  );
 }
@@ -223,11 +236,13 @@ export default compose(
      receiptsLoading,
      receiptsPagination,
      receiptTableQuery,
+      receiptsCurrentViewId
    }) => ({
      receiptsCurrentPage,
      receiptsLoading,
      receiptsPagination,
      receiptTableQuery,
+      receiptsCurrentViewId
    }),
  ),
 )(ReceiptsDataTable);
--- a/client/src/containers/Sales/Receipt/ReceiptsEmptyStatus.js
+++ b/client/src/containers/Sales/Receipt/ReceiptsEmptyStatus.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 ReceiptsEmptyStatus() {
+  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('/receipts/new');
+            }}
+          >
+            New receipt
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}
--- a/client/src/containers/Sales/Receipt/withReceipts.js
+++ b/client/src/containers/Sales/Receipt/withReceipts.js
@@ -4,12 +4,14 @@ import {
  getReceiptCurrentPageFactory,
  getReceiptsTableQueryFactory,
  getReceiptsPaginationMetaFactory,
+  getReceiptsCurrentViewIdFactory
 } from 'store/receipt/receipt.selector';

 export default (mapState) => {
  const getReceiptsItems = getReceiptCurrentPageFactory();
  const getReceiptPaginationMeta = getReceiptsPaginationMetaFactory();
  const getReceiptsTableQuery = getReceiptsTableQueryFactory();
+  const getReceiptsCurrentViewId = getReceiptsCurrentViewIdFactory();

  const mapStateToProps = (state, props) => {
    const tableQuery = getReceiptsTableQuery(state, props);
@@ -23,6 +25,8 @@ export default (mapState) => {

      receiptsLoading: state.salesReceipts.loading,
      receiptNumberChanged: state.salesReceipts.journalNumberChanged,
+
+      receiptsCurrentViewId: getReceiptsCurrentViewId(state, props),
    };

    return mapState ? mapState(mapped, state, props) : mapped;