feat(webapp): handle create item on Accounts select components

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

@@ -1,11 +1,23 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { FMultiSelect } from '../Forms';
 import { accountPredicate } from './_components';
 import { MenuItemNestedText } from '../Menu';
 import { usePreprocessingAccounts } from './_hooks';
 
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
 /**
  * Default account item renderer of the list.
  * @returns {JSX.Element}
@@ -30,13 +42,16 @@ const accountRenderer = (
   );
 };
 
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => ({ name });
+
 /**
  * Accounts multi-select field binded with Formik form.
- * @param {*} param0
  * @returns {JSX.Element}
  */
 export function AccountsMultiSelect({
   items,
+  allowCreate,
 
   filterByRootTypes,
   filterByParentTypes,
@@ -46,12 +61,22 @@ export function AccountsMultiSelect({
   ...rest
 }) {
   // Filters accounts based on filter props.
-  const filteredAccounts = usePreprocessingAccounts(accounts, {
+  const filteredAccounts = usePreprocessingAccounts(items, {
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
     filterByRootTypes,
   });
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDialog(DialogsName.AccountForm);
+  };
 
   return (
     <FMultiSelect
@@ -63,6 +88,9 @@ export function AccountsMultiSelect({
       popoverProps={{ minimal: true }}
       itemPredicate={accountPredicate}
       itemRenderer={accountRenderer}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
       {...rest}
     />
   );

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

@@ -5,6 +5,7 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 import { MenuItemNestedText, FSelect } from '@/components';
 import { accountPredicate } from './_components';
+import { DialogsName } from '@/constants/dialogs';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { usePreprocessingAccounts } from './_hooks';
 
@@ -75,6 +76,11 @@ function AccountsSelectRoot({
     ? createNewItemFromQuery
     : null;
 
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDialog(DialogsName.AccountForm);
+  };
+
   return (
     <FSelect
       items={filteredAccounts}
@@ -86,6 +92,7 @@ function AccountsSelectRoot({
       itemRenderer={accountRenderer}
       createNewItemRenderer={maybeCreateNewItemRenderer}
       createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
       {...restProps}
     />
   );