feat: Control selected account from selectedAccountId prop.

feat: Allow to reset form of manual journal and expense.

client/src/components/AccountsSelectList.js

@@ -1,17 +1,35 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function AccountsSelectList({
   accounts,
   onAccountSelected,
   error = [],
-  initialAccount,
-  defautlSelectText = 'Select account',
+  initialAccountId,
+  selectedAccountId,
+  defaultSelectText = 'Select account',
 }) {
+  // Find initial account object to set it as default account in initial render.
+  const initialAccount = useMemo(
+    () => accounts.find((a) => a.id === initialAccountId),
+    [initialAccountId],
+  );
+
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null,
   );
+
+  useEffect(() => {
+    if (typeof selectedAccountId !== 'undefined') {
+      const account = selectedAccountId
+        ? accounts.find((a) => a.id === selectedAccountId)
+        : null;
+      setSelectedAccount(account);
+    }
+  }, [selectedAccountId, accounts, setSelectedAccount]);
+
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
@@ -52,7 +70,7 @@ export default function AccountsSelectList({
   return (
     <Select
       items={accounts}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
       popoverProps={{ minimal: true }}
@@ -60,7 +78,7 @@ export default function AccountsSelectList({
       onItemSelect={onAccountSelect}
     >
       <Button
-        text={selectedAccount ? selectedAccount.name : defautlSelectText}
+        text={selectedAccount ? selectedAccount.name : defaultSelectText}
       />
     </Select>
   );

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -9,7 +9,7 @@ import {
 
 // Account cell renderer.
 const AccountCellRenderer = ({
-  column: { id, value },
+  column: { id },
   row: { index, original },
   cell: { value: initialValue },
   payload: { accounts, updateData, errors },
@@ -20,9 +20,9 @@ const AccountCellRenderer = ({
 
   const { 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
@@ -36,7 +36,7 @@ const AccountCellRenderer = ({
         accounts={accounts}
         onAccountSelected={handleAccountSelected}
         error={account_id}
-        initialAccount={initialAccount} />
+        selectedAccountId={initialValue} />
     </FormGroup>
   );
 };

client/src/components/index.js

@@ -18,6 +18,7 @@ import FieldRequiredHint from './FieldRequiredHint';
 import Dialog from './Dialog';
 import AppToaster from './AppToaster';
 import DataTable from './DataTable';
+import AccountsSelectList from './AccountsSelectList';
 
 const Hint = FieldHint;
 
@@ -43,4 +44,5 @@ export {
   Dialog,
   AppToaster,
   DataTable,
+  AccountsSelectList,
 };