fix: menu item nested text.

client/src/components/AccountsSelectList.js

@@ -1,9 +1,10 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { FormattedMessage as T } from 'components';
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { filterAccountsByQuery } from './utils';
+import { nestedArrayToflatten } from 'utils';
 import { CLASSES } from 'common/classes';
 
 export default function AccountsSelectList({
@@ -22,9 +23,14 @@ export default function AccountsSelectList({
 
   buttonProps = {},
 }) {
+  const flattenAccounts = useMemo(
+    () => nestedArrayToflatten(accounts),
+    [accounts],
+  );
+
   // Filters accounts based on filter props.
   const filteredAccounts = useMemo(() => {
-    let filteredAccounts = filterAccountsByQuery(accounts, {
+    let filteredAccounts = filterAccountsByQuery(flattenAccounts, {
       filterByRootTypes,
       filterByParentTypes,
       filterByTypes,
@@ -32,7 +38,7 @@ export default function AccountsSelectList({
     });
     return filteredAccounts;
   }, [
-    accounts,
+    flattenAccounts,
     filterByRootTypes,
     filterByParentTypes,
     filterByTypes,
@@ -62,7 +68,7 @@ export default function AccountsSelectList({
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
       <MenuItem
-        text={item.htmlName || item.name}
+        text={<MenuItemNestedText level={item.level} text={item.name} />}
         label={item.code}
         key={item.id}
         onClick={handleClick}

client/src/components/AccountsSuggestField.js

@@ -6,8 +6,9 @@ import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
-import { FormattedMessage as T } from 'components';
+import { MenuItemNestedText, FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
+import { nestedArrayToflatten } from 'utils';
 
 /**
  * Accounts suggest field.
@@ -27,9 +28,14 @@ export default function AccountsSuggestField({
 
   ...suggestProps
 }) {
+  const flattenAccounts = useMemo(
+    () => nestedArrayToflatten(accounts),
+    [accounts],
+  );
+
   // Filters accounts based on filter props.
   const filteredAccounts = useMemo(() => {
-    let filteredAccounts = filterAccountsByQuery(accounts, {
+    let filteredAccounts = filterAccountsByQuery(flattenAccounts, {
       filterByRootTypes,
       filterByParentTypes,
       filterByTypes,
@@ -37,7 +43,7 @@ export default function AccountsSuggestField({
     });
     return filteredAccounts;
   }, [
-    accounts,
+    flattenAccounts,
     filterByRootTypes,
     filterByParentTypes,
     filterByTypes,
@@ -84,7 +90,7 @@ export default function AccountsSuggestField({
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
       <MenuItem
-        text={item.htmlName || item.name}
+        text={<MenuItemNestedText level={item.level} text={item.name} />}
         label={item.code}
         key={item.id}
         onClick={handleClick}

client/src/components/Menu/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * Menu item nested text.
+ */
+export function MenuItemNestedText({ level, text }) {
+  const whitespaces = [...Array(level - 1)].map((e, i) => (
+    <span key={i} className={'menu-item-space'}></span>
+  ));
+
+  return (
+    <>
+      {whitespaces} {text}
+    </>
+  );
+}

client/src/components/index.js

@@ -61,6 +61,8 @@ import Card from './Card';
 
 import { ItemsMultiSelect } from './Items';
 
+export * from './Menu';
+
 const Hint = FieldHint;
 
 const T = FormattedMessage;