feat: Accounts datatable.

client/src/containers/Dashboard/Accounts/AccountsChart.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import {
   Route,
   Switch,
@@ -22,11 +22,12 @@ import { compose } from 'utils';
 function AccountsChart({
   changePageTitle,
   fetchAccounts,
-  deleteAccount,
-  inactiveAccount,
+  requestDeleteAccount,
+  requestInactiveAccount,
   fetchResourceViews,
   fetchResourceFields,
   getResourceFields,
+  fetchAccountsTable,
 }) {
   const [state, setState] = useState({
     deleteAlertActive: false,
@@ -34,8 +35,8 @@ function AccountsChart({
     inactiveAlertActive: false,
     targetAccount: {},
   });
-
-  const [filterConditions, setFilterConditions] = useState([]);
+  const [deleteAccount, setDeleteAccount] = useState(false);
+  const [inactiveAccount, setInactiveAccount] = useState(false);
  
   const fetchHook = useAsync(async () => {
     await Promise.all([
@@ -44,57 +45,56 @@ function AccountsChart({
     ]);
   });
 
+  // Fetch accounts list according to the given custom view id.
+  const fetchAccountsHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccountsTable(),
+    ]);
+  }, false);
+
   useEffect(() => {
     changePageTitle('Chart of Accounts');
   }, []);
 
-  /**
-   * Handle click and cancel/confirm account delete
-   */
-  const handleDeleteAccount = (account) => {
-    setState({
-      deleteAlertActive: true,
-      deleteAccount: account,
-    });
-  };
- 
-  const handleCancelAccountDelete = () => {
-    setState({ deleteAlertActive: false });
-  };
-  const handleConfirmAccountDelete = () => {
-    const { targetAccount: account } = state;
-    deleteAccount(account.id).then(() => {
-      setState({ deleteAlertActive: false });
-      fetchAccounts();
+  // Handle click and cancel/confirm account delete
+  const handleDeleteAccount = (account) => { setDeleteAccount(account); };
+  
+  // handle cancel delete account alert.
+  const handleCancelAccountDelete = () => { setDeleteAccount(false); };
+  
+  // Handle confirm account delete
+  const handleConfirmAccountDelete = useCallback(() => {
+    requestDeleteAccount(deleteAccount.id).then(() => {
+      setDeleteAccount(false);
+      fetchAccountsHook.execute();
       AppToaster.show({ message: 'the_account_has_been_deleted' });
     });
-  };
+  }, [deleteAccount]);
 
-  /**
-   * Handle cancel/confirm account inactive.
-   */
-  const handleInactiveAccount = (account) => {
-    setState({ inactiveAlertActive: true, targetAccount: account });
-  };
+  // Handle cancel/confirm account inactive.
+  const handleInactiveAccount = useCallback((account) => {
+    setInactiveAccount(account);
+  }, []);
 
-  const handleCancelInactiveAccount = () => {
-    setState({ inactiveAlertActive: false });
-  };
+  // Handle cancel inactive account alert.
+  const handleCancelInactiveAccount = useCallback(() => {
+    setInactiveAccount(false);
+  }, []);
 
-  const handleConfirmAccountActive = () => {
-    const { targetAccount: account } = state;
-    inactiveAccount(account.id).then(() => {
-      setState({ inactiveAlertActive: true });
-      fetchAccounts();
+  // Handle confirm account activation.
+  const handleConfirmAccountActive = useCallback(() => {
+    requestInactiveAccount(inactiveAccount.id).then(() => {
+      setInactiveAccount(false);
+      fetchAccountsTable();
       AppToaster.show({ message: 'the_account_has_been_inactivated' });
     });
-  };
+  }, [inactiveAccount]);
 
   /**
    * Handle cancel/confirm account restore.
    */
   const handleCancelAccountRestore = () => {
-    setState({ restoreAlertActive: false });
+    
   };
 
   const handleEditAccount = (account) => {
@@ -108,16 +108,22 @@ function AccountsChart({
   const handleConfirmAccountRestore = (account) => {
 
   };
-
   const handleDeleteBulkAccounts = (accounts) => {
 
   };
-  const handleFilterChange = (conditions) => { setFilterConditions(conditions); };
+
+  const handleSelectedRowsChange = (accounts) => {
+    console.log(accounts);
+  };
+
+  const handleFilterChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleViewChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFetchData = useCallback(() => { fetchAccountsHook.execute(); }, []);
 
   return (
     <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
       <DashboardActionsBar
-        onFilterChange={handleFilterChange} />
+        onFilterChanged={handleFilterChanged} />
       <DashboardPageContent>
         <Switch>
           <Route
@@ -126,14 +132,17 @@ function AccountsChart({
               '/dashboard/accounts/:custom_view_id/custom_view',
               '/dashboard/accounts'
             ]}>
-            <AccountsViewsTabs onDeleteBulkAccounts={handleDeleteBulkAccounts} />
- 
+            <AccountsViewsTabs
+              onViewChanged={handleViewChanged}
+              onDeleteBulkAccounts={handleDeleteBulkAccounts} />
+
             <AccountsDataTable
-              filterConditions={filterConditions}
+              onSelectedRowsChange={handleSelectedRowsChange}
               onDeleteAccount={handleDeleteAccount}
               onInactiveAccount={handleInactiveAccount}
               onRestoreAccount={handleRestoreAccount}
-              onEditAccount={handleEditAccount} />
+              onEditAccount={handleEditAccount}
+              onFetchData={handleFetchData} />
           </Route>
         </Switch>
 
@@ -142,7 +151,7 @@ function AccountsChart({
           confirmButtonText="Move to Trash"
           icon="trash"
           intent={Intent.DANGER}
-          isOpen={state.deleteAlertActive}
+          isOpen={deleteAccount}
           onCancel={handleCancelAccountDelete}
           onConfirm={handleConfirmAccountDelete}>
           <p>
@@ -156,7 +165,7 @@ function AccountsChart({
           confirmButtonText="Inactivate"
           icon="trash"
           intent={Intent.WARNING}
-          isOpen={state.inactiveAlertActive}
+          isOpen={inactiveAccount}
           onCancel={handleCancelInactiveAccount}
           onConfirm={handleConfirmAccountActive}>
           <p>
@@ -164,20 +173,6 @@ function AccountsChart({
           but it will become private to you.
           </p>
         </Alert>
-
-        <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText="Move to Trash"
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={state.restoreAlertActive}
-          onCancel={handleCancelAccountRestore}
-          onConfirm={handleConfirmAccountRestore}>
-          <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
-          but it will become private to you.
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );

client/src/containers/Dashboard/Dialogs/AccountFormDialog.js

@@ -21,6 +21,7 @@ import AppToaster from 'components/AppToaster';
 import DialogConnect from 'connectors/Dialog.connector';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
+import AccountsConnect from 'connectors/Accounts.connector';
 
 function AccountFormDialog({
   name,
@@ -33,7 +34,8 @@ function AccountFormDialog({
   closeDialog,
   submitAccount,
   fetchAccount,
-  editAccount
+  editAccount,
+  fetchAccountsTable,
 }) {
   const intl = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
@@ -64,6 +66,7 @@ function AccountFormDialog({
           AppToaster.show({
             message: 'the_account_has_been_edited'
           });
+          refetchAccounts.execute();
         });
       } else {
         submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
@@ -71,6 +74,7 @@ function AccountFormDialog({
           AppToaster.show({
             message: 'the_account_has_been_submit'
           });
+          refetchAccounts.execute();
         });
       }
     }
@@ -131,15 +135,19 @@ function AccountFormDialog({
     await Promise.all([
       fetchAccounts(),
       fetchAccountTypes(),
-
       // Fetch the target in case edit mode.
       ...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
     ]);
-  });
+  }, false);
 
-  const onDialogOpening = async () => {
-    fetchHook.execute();
-  };
+  const refetchAccounts = useAsync(async () => {
+    await Promise.all([
+      fetchAccountsTable(),
+    ]);
+  }, false);
+
+  // Fetch requests on dialog opening.
+  const onDialogOpening = async () => { fetchHook.execute(); };
 
   const onChangeAccountType = accountType => {
     setState({ ...state, selectedAccountType: accountType.name });
@@ -294,6 +302,7 @@ function AccountFormDialog({
 
 export default compose(
   AccountFormDialogConnect,
+  AccountsConnect,
   DialogReduxConnect,
   DialogConnect
 )(AccountFormDialog);