feat: tables empty status.

client/src/containers/Expenses/ExpenseDataTable.js

@@ -20,9 +20,9 @@ import Icon from 'components/Icon';
 import { compose, saveInvoke } from 'utils';
 import { useIsValuePassed } from 'hooks';
 
-import LoadingIndicator from 'components/LoadingIndicator';
-import { If, Money } from 'components';
+import { If, Money, Choose, LoadingIndicator } from 'components';
 import DataTable from 'components/DataTable';
+import ExpensesEmptyStatus from './ExpensesEmptyStatus';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -37,6 +37,7 @@ function ExpensesDataTable({
   expensesLoading,
   expensesPagination,
   expensesTableQuery,
+  expensesCurrentViewId,
 
   // #withExpensesActions
   addExpensesTableQueries,
@@ -265,28 +266,41 @@ function ExpensesDataTable({
     [onSelectedRowsChange],
   );
 
+  const showEmptyStatus = [
+    expensesCurrentViewId === -1,
+    expensesCurrentPage.length === 0
+  ].every(condition => condition === true);
+
   return (
     <LoadingIndicator
       loading={expensesLoading && !isLoadedBefore}
       mount={false}
     >
-      <DataTable
-        columns={columns}
-        data={expensesCurrentPage}
-        manualSortBy={true}
-        selectionColumn={true}
-        noInitialFetch={true}
-        sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        onFetchData={handleFetchData}
-        rowContextMenu={onRowContextMenu}
-        pagination={true}
-        pagesCount={expensesPagination.pagesCount}
-        autoResetSortBy={false}
-        autoResetPage={false}
-        initialPageSize={expensesTableQuery.page_size}
-        initialPageIndex={expensesTableQuery.page - 1}
-      />
+      <Choose>
+        <Choose.When condition={showEmptyStatus}>
+          <ExpensesEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            columns={columns}
+            data={expensesCurrentPage}
+            manualSortBy={true}
+            selectionColumn={true}
+            noInitialFetch={true}
+            sticky={true}
+            onSelectedRowsChange={handleSelectedRowsChange}
+            onFetchData={handleFetchData}
+            rowContextMenu={onRowContextMenu}
+            pagination={true}
+            pagesCount={expensesPagination.pagesCount}
+            autoResetSortBy={false}
+            autoResetPage={false}
+            initialPageSize={expensesTableQuery.page_size}
+            initialPageIndex={expensesTableQuery.page - 1}
+          />
+        </Choose.Otherwise>
+      </Choose>
     </LoadingIndicator>
   );
 }
@@ -303,11 +317,13 @@ export default compose(
       expensesLoading,
       expensesPagination,
       expensesTableQuery,
+      expensesCurrentViewId,
     }) => ({
       expensesCurrentPage,
       expensesLoading,
       expensesPagination,
       expensesTableQuery,
+      expensesCurrentViewId,
     }),
   ),
   withViewDetails(),

client/src/containers/Expenses/ExpensesEmptyState.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+function DatatableEmptyState({
+  title,
+  description,
+  newButtonText,
+  newButtonUrl,
+
+  learnMoreButtonText,
+  learnMoreButtonUrl,
+}) {
+
+
+  return (
+    <div class={'datatable-empty-state'}>
+      <h1 class={CLASSES.DATATABLE_EMPTY_STATE_TITLE}>
+        { title }
+      </h1>
+    </div>
+  )
+}
+
+
+export default function ExpensesEmptyState({
+
+}) {
+
+
+  return (
+    <DatatableEmptyState
+      title={''}
+      description={''}
+      newButtonText={''}
+      newButtonUrl={''}
+
+      learnMoreButtonText={''}
+      learnMoreButtonUrl={''}
+    />
+  );
+}

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

client/src/containers/Expenses/withExpenses.js

@@ -5,11 +5,13 @@ import {
   getExpenseByIdFactory,
   getExpensesTableQuery,
   getExpensesPaginationMetaFactory,
+  getExpensesCurrentViewIdFactory,
 } from 'store/expenses/expenses.selectors';
 
 export default (mapState) => {
   const getExpensesItems = getExpensesCurrentPageFactory();
   const getExpensesPaginationMeta = getExpensesPaginationMetaFactory();
+  const getExpensesCurrentViewId = getExpensesCurrentViewIdFactory();
 
   const mapStateToProps = (state, props) => {
     const query = getExpensesTableQuery(state, props);
@@ -21,6 +23,7 @@ export default (mapState) => {
       expensesTableQuery: query,
       expensesPagination: getExpensesPaginationMeta(state, props),
       expensesLoading: state.expenses.loading,
+      expensesCurrentViewId: getExpensesCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };