feat: Accounts datatable.

client/src/components/Accounts/AccountsDataTable.js

@@ -1,11 +1,4 @@
-import {
-  GridComponent,
-  ColumnsDirective,
-  ColumnDirective,
-  Inject,
-  Sort
-} from '@syncfusion/ej2-react-grids';
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -13,50 +6,34 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-  Checkbox
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import useAsync from 'hooks/async';
 import Icon from 'components/Icon';
-import { handleBooleanChange, compose } from 'utils';
+import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DialogConnect from 'connectors/Dialog.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import ViewConnect from 'connectors/View.connector';
 import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
 
 function AccountsDataTable({
-  filterConditions,
   accounts,
   onDeleteAccount,
   onInactiveAccount,
   openDialog,
-  addBulkActionAccount,
-  removeBulkActionAccount,
-  fetchAccounts,
   changeCurrentView,
   changePageSubtitle,
   getViewItem,
-  setTopbarEditView
+  setTopbarEditView,
+  accountsLoading,
+  onFetchData,
+  setSelectedRowsAccounts,
 }) {
   const { custom_view_id: customViewId } = useParams();
 
-  // Fetch accounts list according to the given custom view id.
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      fetchAccounts({
-        custom_view_id: customViewId,
-        stringified_filter_roles: JSON.stringify(filterConditions) || '',
-      }),
-    ]);
-  });
-
-  useEffect(() => { fetchHook.execute(); }, [filterConditions]);
-
-  // Refetch accounts list after custom view id change.
   useEffect(() => {
     const viewMeta = getViewItem(customViewId);
-    fetchHook.execute();
 
     if (customViewId) {
       changeCurrentView(customViewId);
@@ -65,10 +42,8 @@ function AccountsDataTable({
     changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
   }, [customViewId]);
 
-  useEffect(() => () => {
-    // Clear page subtitle when unmount the page.
-    changePageSubtitle('');
-  }, []);
+  // Clear page subtitle when unmount the page.
+  useEffect(() => () => { changePageSubtitle(''); }, []);
 
   const handleEditAccount = account => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
@@ -88,95 +63,76 @@ function AccountsDataTable({
         onClick={() => onDeleteAccount(account)} />
     </Menu>
   );
+  const columns = useMemo(() => [
+    {
+      id: 'name',
+      Header: 'Account Name',
+      accessor: 'name',
+    },
+    {
+      id: 'code',
+      Header: 'Code',
+      accessor: 'code'
+    },
+    {
+      id: 'type',
+      Header: 'Type',
+      accessor: 'type.name'
+    },
+    {
+      id: 'normal',
+      Header: 'Normal',
+      Cell: ({ cell }) => {
+        const account = cell.row.original;
+        const type = account.type ? account.type.normal : '';
+        const arrowDirection = type === 'credit' ? 'down' : 'up';
 
-  const handleClickCheckboxBulk = account =>
-    handleBooleanChange(value => {
-      if (value) {
-        addBulkActionAccount(account.id);
-      } else {
-        removeBulkActionAccount(account.id);
-      }
-    });
-
-  const columns = [
-    {
-      field: '',
-      headerText: '',
-      template: account => (
-        <Checkbox onChange={handleClickCheckboxBulk(account)} />
-      ),
-      customAttributes: { class: 'checkbox-row' }
-    },
-    {
-      field: 'name',
-      headerText: 'Account Name',
-      customAttributes: { class: 'account-name' }
-    },
-    {
-      field: 'code',
-      headerText: 'Code'
-    },
-    {
-      field: 'type.name',
-      headerText: 'Type'
-    },
-    {
-      headerText: 'Normal',
-      template: column => {
-        const type = column.type ? column.type.normal : '';
-        return type === 'credit' ? (
-          <Icon icon={'arrow-down'} />
-        ) : (
-          <Icon icon={'arrow-up'} />
-        );
+        return (<Icon icon={`arrow-${arrowDirection}`} />);
       },
-      customAttributes: { class: 'account-normal' }
+      className: 'normal',
     },
     {
-      field: 'balance',
-      headerText: 'Balance',
-      template: (column, data) => {
-        return <span>$10,000</span>;
-      }
+      id: 'balance',
+      Header: 'Balance',
+      Cell: ({ cell }) => {
+        const account = cell.row.original;
+        const {balance} = account;
+
+        return ('undefined' !== typeof balance) ?
+          (<span>{ balance.amount }</span>) :
+          (<span>--</span>);
+      },
+      
+      // canResize: false,
     },
     {
-      headerText: '',
-      template: account => (
+      id: 'actions',
+      Header: '',
+      Cell: ({ cell }) => (
         <Popover
-          content={actionMenuList(account)}
-          position={Position.RIGHT_BOTTOM}
-        >
+          content={actionMenuList(cell.row.original)}
+          position={Position.RIGHT_BOTTOM}>
           <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
-      )
+      ),
+      className: 'actions',
+      width: 50,
+      // canResize: false
     }
-  ];
+  ], []);
+
+  const handleDatatableFetchData = useCallback(() => {
+    onFetchData && onFetchData();
+  }, []);
 
-  const dataStateChange = state => {};
   return (
-    <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
-      <GridComponent
-        allowSorting={true}
-        allowGrouping={true}
-        dataSource={{ result: accounts, count: 12 }}
-        dataStateChange={dataStateChange}
-      >
-        <ColumnsDirective>
-          {columns.map(column => {
-            return (
-              <ColumnDirective
-                field={column.field}
-                headerText={column.headerText}
-                template={column.template}
-                allowSorting={true}
-                customAttributes={column.customAttributes}
-              />
-            );
-          })}
-        </ColumnsDirective>
-        <Inject services={[Sort]} />
-      </GridComponent>
-    </LoadingIndicator>
+    <LoadingIndicator loading={accountsLoading} spinnerSize={30}>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        onFetchData={handleDatatableFetchData}
+        manualSortBy={true} />
+    </LoadingIndicator>    
   );
 }