WIP / Feature & Fix Expense /Customer

client/src/components/AccountsSelectList.js

@@ -1,43 +1,49 @@
-import React, {useCallback, useState} from 'react';
-import {
-  MenuItem,
-  Button,
-} from '@blueprintjs/core';
-import {Select} from '@blueprintjs/select';
+import React, { useCallback, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
 
 export default function AccountsSelectList({
   accounts,
   onAccountSelected,
-  error,
+  error = [],
   initialAccount,
-  defautlSelectText = 'Select account'
+  defautlSelectText = 'Select account',
 }) {
   const [selectedAccount, setSelectedAccount] = useState(
-    initialAccount || null
+    initialAccount || null,
   );
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
-      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
     );
   }, []);
 
-  const onAccountSelect = useCallback((account) => {
-    setSelectedAccount({ ...account });
-    onAccountSelected && onAccountSelected(account);
-  }, [setSelectedAccount, onAccountSelected]);
+  const onAccountSelect = useCallback(
+    (account) => {
+      setSelectedAccount({ ...account });
+      onAccountSelected && onAccountSelected(account);
+    },
+    [setSelectedAccount, onAccountSelected],
+  );
 
   return (
     <Select
       items={accounts}
-      noResults={<MenuItem disabled={true} text='No results.' />}
+      noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={accountItem}
       popoverProps={{ minimal: true }}
       filterable={true}
-      onItemSelect={onAccountSelect}>
+      onItemSelect={onAccountSelect}
+    >
       <Button
         text={selectedAccount ? selectedAccount.name : defautlSelectText}
       />
     </Select>
   );
-}
+}

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,11 +1,7 @@
-import React, {useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
 import AccountsSelectList from 'components/AccountsSelectList';
 import classNames from 'classnames';
-import {
-  FormGroup,
-  Classes,
-  Intent,
-} from '@blueprintjs/core';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
 // Account cell renderer.
 const AccountCellRenderer = ({
@@ -14,31 +10,38 @@ const AccountCellRenderer = ({
   cell: { value: initialValue },
   payload: { accounts, updateData, errors },
 }) => {
-  const handleAccountSelected = useCallback((account) => {
-    updateData(index, id, account.id);
-  }, [updateData, index, id]);
+  const handleAccountSelected = useCallback(
+    (account) => {
+      updateData(index, id, account.id);
+    },
+    [updateData, index, id],
+  );
 
-  const { account_id = false } = (errors[index] || {});
+  const { account_id = false, expense_account_id = false } =
+    errors[index] || {};
 
-  const initialAccount = useMemo(() => 
-    accounts.find(a => a.id === initialValue),
-    [accounts, initialValue]);
+  const initialAccount = useMemo(
+    () => accounts.find((a) => a.id === initialValue),
+    [accounts, initialValue],
+  );
 
   return (
     <FormGroup
-      intent={account_id ? Intent.DANGER : ''}
+      intent={account_id || expense_account_id ? Intent.DANGER : ''}
       className={classNames(
         'form-group--select-list',
         'form-group--account',
-        Classes.FILL)}
-      >
+        Classes.FILL,
+      )}
+    >
       <AccountsSelectList
         accounts={accounts}
         onAccountSelected={handleAccountSelected}
-        error={account_id}
-        initialAccount={initialAccount} />
+        error={[account_id, expense_account_id]}
+        initialAccount={initialAccount}
+      />
     </FormGroup>
   );
 };
 
-export default AccountCellRenderer;
+export default AccountCellRenderer;