feat: tables empty status.

client/src/containers/Accounting/ManualJournalsDataTable.js

@@ -25,6 +25,8 @@ import {
 } from 'components';
 import { useIsValuePassed } from 'hooks';
 
+import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
+
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withManualJournals from 'containers/Accounting/withManualJournals';
 import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
@@ -76,6 +78,7 @@ function ManualJournalsDataTable({
   manualJournalsLoading,
   manualJournalsPagination,
   manualJournalsTableQuery,
+  manualJournalsCurrentViewId,
 
   // #withManualJournalsActions
   addManualJournalsTableQueries,
@@ -248,26 +251,39 @@ function ManualJournalsDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    manualJournalsCurrentViewId === -1,
+    manualJournalsCurrentPage.length === 0,
+  ].every(condition => condition === true);
+
   return (
     <LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
-      <DataTable
-        noInitialFetch={true}
-        columns={columns}
-        data={manualJournalsCurrentPage}
-        onFetchData={handleDataTableFetchData}
-        manualSortBy={true}
-        selectionColumn={true}
-        expandable={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        rowContextMenu={onRowContextMenu}
-        pagesCount={manualJournalsPagination.pagesCount}
-        pagination={true}
-        initialPageSize={manualJournalsTableQuery.page_size}
-        initialPageIndex={manualJournalsTableQuery.page - 1}
-        autoResetSortBy={false}
-        autoResetPage={false}
-      />
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <ManualJournalsEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            noInitialFetch={true}
+            columns={columns}
+            data={manualJournalsCurrentPage}
+            onFetchData={handleDataTableFetchData}
+            manualSortBy={true}
+            selectionColumn={true}
+            expandable={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            rowContextMenu={onRowContextMenu}
+            pagesCount={manualJournalsPagination.pagesCount}
+            pagination={true}
+            initialPageSize={manualJournalsTableQuery.page_size}
+            initialPageIndex={manualJournalsTableQuery.page - 1}
+            autoResetSortBy={false}
+            autoResetPage={false}
+          />
+        </Choose.Otherwise>
+      </Choose>
     </LoadingIndicator>
   );
 }
@@ -282,11 +298,13 @@ export default compose(
       manualJournalsLoading,
       manualJournalsPagination,
       manualJournalsTableQuery,
+      manualJournalsCurrentViewId,
     }) => ({
       manualJournalsCurrentPage,
       manualJournalsLoading,
       manualJournalsPagination,
       manualJournalsTableQuery,
+      manualJournalsCurrentViewId
     }),
   ),
 )(ManualJournalsDataTable);

client/src/containers/Accounting/ManualJournalsEmptyStatus.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 ManualJournalsEmptyStatus() {
+  const history = useHistory();
+
+  return (
+    <EmptyStatus
+      title={'Create your first journal entries on accounts chart.'}
+      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');
+            }}
+          >
+            Make journal
+          </Button>
+
+          <Button intent={Intent.NONE} large={true}>
+            Learn more
+          </Button>
+        </>
+      }
+    />
+  );
+}

client/src/containers/Accounting/withManualJournals.js

@@ -4,10 +4,12 @@ import {
   getManualJournalsItems,
   getManualJournalsPagination,
   getManualJournalsTableQuery,
+  getManualJournalsCurrentViewIdFactory
 } from 'store/manualJournals/manualJournals.selectors';
 
 
 export default (mapState) => {
+  const getManualJournalsCurrentViewId = getManualJournalsCurrentViewIdFactory();
   const mapStateToProps = (state, props) => {
     const query = getManualJournalsTableQuery(state, props);
 
@@ -21,6 +23,8 @@ export default (mapState) => {
       manualJournalsLoading: state.manualJournals.loading,
 
       journalNumberChanged: state.manualJournals.journalNumberChanged,
+
+      manualJournalsCurrentViewId: getManualJournalsCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };