feat(webapp): allow to create a new account item in accounts list component.

packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx

@@ -3,8 +3,8 @@ import React, { useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { FMultiSelect } from '../Forms';
 import { accountPredicate } from './_components';
-import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
 import { MenuItemNestedText } from '../Menu';
+import { usePreprocessingAccounts } from './_hooks';
 
 /**
  * Default account item renderer of the list.
@@ -45,23 +45,13 @@ export function AccountsMultiSelect({
 
   ...rest
 }) {
-  // Filters accounts based on the given filter props.
+  // Filters accounts based on filter props.
-  const filteredAccounts = useMemo(() => {
+  const filteredAccounts = usePreprocessingAccounts(accounts, {
-    const flattenAccounts = nestedArrayToflatten(items);
-
-    return filterAccountsByQuery(flattenAccounts, {
-      filterByRootTypes,
-      filterByParentTypes,
-      filterByTypes,
-      filterByNormal,
-    });
-  }, [
-    items,
-    filterByRootTypes,
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
-  ]);
+    filterByRootTypes,
+  });
 
   return (
     <FMultiSelect

packages/webapp/src/components/Accounts/AccountsSelect.tsx

@@ -1,16 +1,12 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
-import {
+import { MenuItemNestedText, FSelect } from '@/components';
-  MenuItemNestedText,
-  FormattedMessage as T,
-  FSelect,
-} from '@/components';
-import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
 import { accountPredicate } from './_components';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { usePreprocessingAccounts } from './_hooks';
 
 // Create new account renderer.
 const createNewItemRenderer = (query, active, handleClick) => {
@@ -25,11 +21,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
 };
 
 // Create new item from the given query string.
-const createNewItemFromQuery = (name) => {
+const createNewItemFromQuery = (name) => ({ name });
-  return {
-    name,
-  };
-};
 
 /**
  * Default account item renderer.
@@ -61,6 +53,7 @@ function AccountsSelectRoot({
 
   // #ownProps
   items,
+  allowCreate,
 
   filterByParentTypes,
   filterByTypes,
@@ -70,23 +63,17 @@ function AccountsSelectRoot({
   ...restProps
 }) {
   // Filters accounts based on filter props.
-  const filteredAccounts = useMemo(() => {
+  const filteredAccounts = usePreprocessingAccounts(items, {
-    const flattenAccounts = nestedArrayToflatten(items);
-
-    const filteredAccounts = filterAccountsByQuery(flattenAccounts, {
-      filterByRootTypes,
-      filterByParentTypes,
-      filterByTypes,
-      filterByNormal,
-    });
-    return filteredAccounts;
-  }, [
-    items,
-    filterByRootTypes,
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
-  ]);
+    filterByRootTypes,
+  });
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
   return (
     <FSelect
@@ -97,6 +84,8 @@ function AccountsSelectRoot({
       popoverProps={{ minimal: true, usePortal: true, inline: false }}
       itemPredicate={accountPredicate}
       itemRenderer={accountRenderer}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...restProps}
     />
   );

packages/webapp/src/components/Accounts/_components.tsx

@@ -1,7 +1,5 @@
+// @ts-nocheck
 import React from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import { MenuItemNestedText } from '../Menu';
-
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

packages/webapp/src/components/Accounts/_hooks.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
+
+interface PreprocessingAccountsOptions {
+  filterByRootTypes: string[];
+  filterByParentTypes: string[];
+  filterByTypes: string[];
+  filterByNormal: string[];
+}
+
+export const usePreprocessingAccounts = (
+  items: any,
+  {
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  }: PreprocessingAccountsOptions,
+) => {
+  return useMemo(() => {
+    const flattenAccounts = nestedArrayToflatten(items);
+    const filteredAccounts = filterAccountsByQuery(flattenAccounts, {
+      filterByRootTypes,
+      filterByParentTypes,
+      filterByTypes,
+      filterByNormal,
+    });
+    return filteredAccounts;
+  }, [
+    items,
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  ]);
+};

packages/webapp/src/components/Forms/Select.tsx

@@ -1,15 +1,16 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
-import clsx from 'classnames';
 import { Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs-formik/select';
+import styled from 'styled-components';
+import clsx from 'classnames';
 
 export function FSelect({ ...props }) {
   const input = ({ activeItem, text, label, value }) => {
     return (
       <SelectButton
         text={text || props.placeholder || 'Select an item ...'}
+        disabled={props.disabled || false}
         {...props.buttonProps}
         className={clsx({ 'is-selected': !!text }, props.className)}
       />
@@ -45,7 +46,6 @@ const SelectButton = styled(Button)`
     margin-right: 12px;
     border-radius: 1px;
   }
-
   &:not([class*='bp3-intent-']) {
     &,
     &:hover {

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx

@@ -120,6 +120,7 @@ function AccountFormDialogFields({
               buttonProps={{ disabled: !values.subaccount }}
               fastField={true}
               fill={true}
+              allowCreate={true}
             />
           </FFormGroup>
         )}

packages/webapp/src/containers/Items/ItemFormBody.tsx

@@ -101,6 +101,7 @@ function ItemFormBody({ organization: { base_currency } }) {
             items={accounts}
             sellable={values.sellable}
             shouldUpdate={sellAccountFieldShouldUpdate}
+            fastField={true}
           >
             <AccountsSelect
               name={'sell_account_id'}
@@ -110,6 +111,7 @@ function ItemFormBody({ organization: { base_currency } }) {
               filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
               fill={true}
               allowCreate={true}
+              fastField={true}  
             />
           </FFormGroup>
 

packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import { Form, FastField, useFormikContext } from 'formik';
+import styled from 'styled-components';
 import {
   FormGroup,
   RadioGroup,
@@ -21,7 +22,6 @@ import {
 } from '@/components';
 import { handleStringChange, inputIntent } from '@/utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
-
 import { useAccountantFormContext } from './AccountantFormProvider';
 
 /**
@@ -118,7 +118,7 @@ export default function AccountantForm() {
       </FastField>
 
       {/* ----------- Deposit customer account ----------- */}
-      <FFormGroup
+      <AccountantFormGroup
         name={'preferred_deposit_account'}
         label={
           <strong>
@@ -133,6 +133,7 @@ export default function AccountantForm() {
           />
         }
         labelInfo={<FieldRequiredHint />}
+        fastField={true}
       >
         <AccountsSelect
           name={'preferred_deposit_account'}
@@ -143,11 +144,12 @@ export default function AccountantForm() {
             ACCOUNT_TYPE.BANK,
             ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
           ]}
+          fastField={true}
         />
-      </FFormGroup>
+      </AccountantFormGroup>
 
       {/* ----------- Withdrawal vendor account ----------- */}
-      <FFormGroup
+      <AccountantFormGroup
         name={'withdrawal_account'}
         label={
           <strong>
@@ -162,6 +164,7 @@ export default function AccountantForm() {
           />
         }
         labelInfo={<FieldRequiredHint />}
+        fastField={true}
       >
         <AccountsSelect
           name={'withdrawal_account'}
@@ -172,11 +175,12 @@ export default function AccountantForm() {
             ACCOUNT_TYPE.BANK,
             ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
           ]}
+          fastField={true}
         />
-      </FFormGroup>
+      </AccountantFormGroup>
 
       {/* ----------- Withdrawal customer account ----------- */}
-      <FFormGroup
+      <AccountantFormGroup
         name={'preferred_advance_deposit'}
         label={
           <strong>
@@ -191,14 +195,16 @@ export default function AccountantForm() {
           />
         }
         labelInfo={<FieldRequiredHint />}
+        fastField={true}
       >
         <AccountsSelect
           name={'preferred_advance_deposit'}
           items={accounts}
           placeholder={<T id={'select_payment_account'} />}
           filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
+          fastField={true}
         />
-      </FFormGroup>
+      </AccountantFormGroup>
 
       <CardFooterActions>
         <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
@@ -211,3 +217,7 @@ export default function AccountantForm() {
     </Form>
   );
 }
+
+const AccountantFormGroup = styled(FFormGroup)`
+  width: 450px;
+`;

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -131,6 +131,7 @@ function ReceiptFormHeader({
         labelInfo={<FieldRequiredHint />}
         name={'deposit_account_id'}
         items={accounts}
+        fastField={true}
         shouldUpdate={accountsFieldShouldUpdate}
       >
         <AccountsSelect
@@ -144,6 +145,8 @@ function ReceiptFormHeader({
           ]}
           allowCreate={true}
           fill={true}
+          fastField={true}
+          shouldUpdate={accountsFieldShouldUpdate}
         />
       </FFormGroup>