refactoring: account form.

refactoring: expense form.
refactoring: manual journal form.
refactoring: invoice form.

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,20 +1,31 @@
-import React from 'react';
-import { Route, Switch  } from 'react-router-dom';
-import routes from 'routes/dashboard'
+import React, { useEffect, Suspense } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import routes from 'routes/dashboard';
 
+import DashboardPage from './DashboardPage';
+
+/**
+ * Dashboard content route.
+ */
 export default function DashboardContentRoute() {
-
   return (
     <Route pathname="/">
       <Switch>
-        { routes.map((route, index) => (
+        {routes.map((route, index) => (
           <Route
             exact={route.exact}
             key={index}
             path={`${route.path}`}
-            component={route.component} />
+          >
+            <DashboardPage
+              Component={route.component}
+              pageTitle={route.pageTitle}
+              backLink={route.backLink}
+              sidebarShrink={route.sidebarShrink}
+            />
+          </Route>
         ))}
       </Switch>
     </Route>
   );
-}
+}

client/src/components/Dashboard/DashboardContentTable.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Dashboard content table.
+ */
+export default function DashboardContentTable({ children }) {
+  return (<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>{ children }</div>)
+}

client/src/components/Dashboard/DashboardPage.js

@@ -0,0 +1,56 @@
+import React, { useEffect, Suspense } from 'react';
+import { CLASSES } from 'common/classes';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from 'utils';
+/**
+ * Dashboard pages wrapper.
+ */
+function DashboardPage({
+  // #ownProps
+  pageTitle,
+  backLink,
+  sidebarShrink,
+  Component,
+
+  // #withDashboardActions
+  changePageTitle,
+  setDashboardBackLink,
+  setSidebarShrink,
+  resetSidebarPreviousExpand,
+}) {
+  useEffect(() => {
+    pageTitle && changePageTitle(pageTitle);
+
+    return () => {
+      pageTitle && changePageTitle('');
+    };
+  });
+
+  useEffect(() => {
+    backLink && setDashboardBackLink(backLink);
+
+    return () => {
+      backLink && setDashboardBackLink(false);
+    };
+  }, [backLink, setDashboardBackLink]);
+
+  // Handle sidebar shrink in mount and reset to the pervious state
+  // once the page unmount.
+  useEffect(() => {
+    sidebarShrink && setSidebarShrink();
+
+    return () => {
+      sidebarShrink && resetSidebarPreviousExpand();
+    };
+  }, [resetSidebarPreviousExpand, sidebarShrink, setSidebarShrink]);
+
+  return (
+    <div className={CLASSES.DASHBOARD_PAGE}>
+      <Suspense fallback={''}>
+        <Component />
+      </Suspense>
+    </div>
+  );
+}
+
+export default compose(withDashboardActions)(DashboardPage);

client/src/components/Dashboard/DashboardPageContent.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Dashboard page content.
+ */
 export default function DashboardPageContent({ children }) {
   return (
     <div class="dashboard__page-content">

client/src/components/DataTable.js

@@ -20,6 +20,7 @@ import TableNoResultsRow from './Datatable/TableNoResultsRow';
 import TableLoadingRow from './Datatable/TableLoading';
 import TableHeader from './Datatable/TableHeader';
 import TablePage from './Datatable/TablePage';
+import TableFooter from './Datatable/TableFooter';
 import TableRow from './Datatable/TableRow';
 import TableRows from './Datatable/TableRows';
 import TableCell from './Datatable/TableCell';
@@ -75,6 +76,7 @@ export default function DataTable(props) {
     TableWrapperRenderer,
     TableTBodyRenderer,
     TablePaginationRenderer,
+    TableFooterRenderer,
 
     ...restProps
   } = props;
@@ -124,11 +126,11 @@ export default function DataTable(props) {
     },
     useSortBy,
     useExpanded,
-    useRowSelect,
     useResizeColumns,
     useFlexLayout,
     useSticky,
     usePagination,
+    useRowSelect,
     (hooks) => {
       hooks.visibleColumns.push((columns) => [
         // Let's make a column for selection
@@ -170,6 +172,8 @@ export default function DataTable(props) {
         <TableTBodyRenderer>
           <TablePageRenderer />
         </TableTBodyRenderer>
+
+        <TableFooterRenderer />
       </TableWrapperRenderer>
 
       <TablePaginationRenderer />
@@ -194,6 +198,7 @@ DataTable.defaultProps = {
   autoResetRowState: true,
 
   TableHeaderRenderer: TableHeader,
+  TableFooterRenderer: TableFooter,
   TableLoadingRenderer: TableLoadingRow,
   TablePageRenderer: TablePage,
   TableRowsRenderer: TableRows,

client/src/components/Datatable/DatatableEditable.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import {
-  DataTable,
-  If,
-} from 'components';
+import { DataTable, If } from 'components';
 import 'style/components/DataTable/DataTableEditable.scss';
 
 export default function DatatableEditable({
@@ -14,11 +11,7 @@ export default function DatatableEditable({
   ...tableProps
 }) {
   return (
-    <div
-      className={classNames(CLASSES.DATATABLE_EDITOR, {
-        [`${CLASSES.DATATABLE_EDITOR_HAS_TOTAL_ROW}`]: totalRow,
-      }, className)}
-    >
+    <div className={classNames(CLASSES.DATATABLE_EDITOR, className)}>
       <DataTable {...tableProps} />
 
       <If condition={actions}>

client/src/components/Datatable/TableFooter.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import TableContext from './TableContext';
+
+/**
+ * Table footer.
+ */
+export default function TableFooter() {
+  const {
+    table: { footerGroups },
+  } = useContext(TableContext);
+
+  return (
+    <div class="tfooter">
+      {footerGroups.map((group) => (
+        <div {...group.getFooterGroupProps({ className: 'tr' })}>
+          {group.headers.map((column) => (
+            <div
+              {...column.getFooterProps({
+                className: 'td',
+              })}
+            >
+              {column.render('Footer')}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

client/src/components/DialogsContainer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
+import AccountDialog from 'containers/Dialogs/AccountDialog';
 import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
 import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
 import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
@@ -19,7 +19,7 @@ import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog'
 export default function DialogsContainer() {
   return (
     <div>
-      {/* <AccountFormDialog dialogName={'account-form'} /> */}
+      <AccountDialog dialogName={'account-form'} />
       <JournalNumberDialog dialogName={'journal-number-form'} />
       <PaymentReceiveNumberDialog dialogName={'payment-receive-number-form'} />
       <EstimateNumberDialog dialogName={'estimate-number-form'} />

client/src/components/index.js

@@ -47,6 +47,8 @@ import CustomersMultiSelect from './CustomersMultiSelect';
 import Skeleton from './Skeleton'
 import ContextMenu from './ContextMenu'
 import TableFastCell from './Datatable/TableFastCell';
+import DashboardContentTable from './Dashboard/DashboardContentTable';
+import DashboardPageContent from './Dashboard/DashboardPageContent';
 
 const Hint = FieldHint;
 
@@ -99,5 +101,7 @@ export {
   CustomersMultiSelect,
   TableFastCell,
   Skeleton,
-  ContextMenu
+  ContextMenu,
+  DashboardContentTable,
+  DashboardPageContent
 };