refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/containers/Accounts/AccountsDataTable.js

@@ -1,127 +1,75 @@
-import React, { useCallback, useMemo } from 'react';
-import { Button, Popover, Position } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import React from 'react';
 import classNames from 'classnames';
 
-import { Icon, DataTable } from 'components';
-import { saveInvoke } from 'utils';
+import { TableFastCell, DataTable } from 'components';
+import { compose } from 'utils';
 
 import { CLASSES } from 'common/classes';
 
-import { NormalCell, BalanceCell, AccountActionsMenu } from './components';
-import { TableFastCell } from 'components';
+import { useAccountsTableColumns, rowClassNames } from './utils';
+import { ActionsMenu } from './components';
 
 import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import { useAccountsChartContext } from './AccountsChartProvider';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 
 /**
  * Accounts data-table.
  */
-export default function AccountsDataTable({
-  // #ownProps
-  accounts,
-  loading,
-  onFetchData,
-  onSelectedRowsChange,
-  // onDeleteAccount,
-  // onInactivateAccount,
-  // onActivateAccount,
-  // onEditAccount,
-  // onNewChildAccount,
+function AccountsDataTable({
+  // #withAlertsDialog
+  openAlert,
+
+  // #withDial
+  openDialog,
 }) {
-  const { formatMessage } = useIntl();
+  const {
+    isAccountsLoading,
+    isAccountsFetching,
+    accounts,
+  } = useAccountsChartContext();
 
-  const ActionsCell = useMemo(
-    () => ({ row }) => (
-      <Popover
-        content={<AccountActionsMenu row={row} />}
-        position={Position.RIGHT_TOP}
-      >
-        <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      </Popover>
-    ),
-    [],
-  );
+  // Retrieve accounts table columns.
+  const columns = useAccountsTableColumns();
 
-  const RowContextMenu = useMemo(
-    () => ({ row }) => <AccountActionsMenu row={row} />,
-    [],
-  );
+  // Handle delete action account.
+  const handleDeleteAccount = (account) => {
+    openAlert('account-delete', { accountId: account.id });
+  };
 
-  const columns = useMemo(
-    () => [
-      {
-        id: 'name',
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
-        className: 'account_name',
-        width: 200,
-      },
-      {
-        id: 'code',
-        Header: formatMessage({ id: 'code' }),
-        accessor: 'code',
-        className: 'code',
-        width: 80,
-      },
-      {
-        id: 'type',
-        Header: formatMessage({ id: 'type' }),
-        accessor: 'account_type_label',
-        className: 'type',
-        width: 140,
-      },
-      {
-        id: 'normal',
-        Header: formatMessage({ id: 'normal' }),
-        Cell: NormalCell,
-        accessor: 'account_normal',
-        className: 'normal',
-        width: 80,
-      },
-      {
-        id: 'currency',
-        Header: formatMessage({ id: 'currency' }),
-        accessor: (row) => 'USD',
-        width: 75,
-      },
-      {
-        id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
-        accessor: 'amount',
-        Cell: BalanceCell,
-        width: 150,
-      },
-      {
-        id: 'actions',
-        Header: '',
-        Cell: ActionsCell,
-        className: 'actions',
-        width: 50,
-        skeletonWidthMin: 100,
-      },
-    ],
-    [ActionsCell, formatMessage],
-  );
+  // Handle activate action account.
+  const handleActivateAccount = (account) => {
+    openAlert('account-activate', { accountId: account.id });
+  };
 
-  const handleDatatableFetchData = useCallback(
-    (...params) => {
-      saveInvoke(onFetchData, params);
-    },
-    [onFetchData],
-  );
+  // Handle inactivate action account.
+  const handleInactivateAccount = (account) => {
+    openAlert('account-inactivate', { accountId: account.id });
+  };
 
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      saveInvoke(onSelectedRowsChange, selectedRows);
-    },
-    [onSelectedRowsChange],
-  );
+  // Handle select accounts datatable rows.
+  //   const handleSelectedRowsChange = (selectedRows) => {
+  //     const selectedRowsIds = selectedRows.map((r) => r.id);
+  //     setSelectedRowsAccounts(selectedRowsIds);
+  //   };
 
-  const rowClassNames = (row) => ({
-    inactive: !row.original.active,
-  });
+  // Handle edit account action.
+  const handleEditAccount = (account) => {
+    openDialog('account-form', { action: 'edit', id: account.id });
+  };
+
+  // Handle new child button click.
+  const handleNewChildAccount = (account) => {
+    openDialog('account-form', {
+      action: 'new_child',
+      parentAccountId: account.id,
+      accountType: account.account_type,
+    });
+  };
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -129,29 +77,44 @@ export default function AccountsDataTable({
         noInitialFetch={true}
         columns={columns}
         data={accounts}
-        onFetchData={handleDatatableFetchData}
         selectionColumn={true}
         expandable={true}
         sticky={true}
-        onSelectedRowsChange={handleSelectedRowsChange}
-        loading={loading}
-        headerLoading={loading}
-        rowContextMenu={RowContextMenu}
+
+        loading={isAccountsLoading}
+        headerLoading={isAccountsLoading}
+        progressBarLoading={isAccountsFetching}
+        
         rowClassNames={rowClassNames}
+
         autoResetExpanded={false}
         autoResetSortBy={false}
         autoResetSelectedRows={false}
+
         expandColumnSpace={1}
         expandToggleColumn={2}
         selectionColumnWidth={50}
+
         TableCellRenderer={TableFastCell}
         TableRowsRenderer={TableVirtualizedListRows}
         TableLoadingRenderer={TableSkeletonRows}
         TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+
         // #TableVirtualizedListRows props.
         vListrowHeight={42}
         vListOverscanRowCount={10}
+
+        payload={{
+          onEdit: handleEditAccount,
+          onDelete: handleDeleteAccount,
+          onActivate: handleActivateAccount,
+          onInactivate: handleInactivateAccount,
+          newChild: handleNewChildAccount
+        }}
       />
     </div>
   );
 }
+
+export default compose(withAlertsActions, withDialogActions)(AccountsDataTable);