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;

client/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

@@ -172,13 +172,13 @@ function AccountFormDialogFields({
 
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button onClick={onClose} style={{ minWidth: '75px' }}>
+          <Button disabled={isSubmitting} onClick={onClose} style={{ minWidth: '75px' }}>
             <T id={'close'} />
           </Button>
 
           <Button
             intent={Intent.PRIMARY}
-            disabled={isSubmitting}
+            loading={isSubmitting}
             style={{ minWidth: '75px' }}
             type="submit"
           >

client/src/style/App.scss

@@ -27,6 +27,7 @@
 @import 'components/Tooltip';
 @import 'components/Postbox';
 @import 'components/Overlay';
+@import 'components/Menu';
 @import 'components/SidebarOverlay';
 
 // Pages

client/src/style/components/Menu.scss

@@ -0,0 +1,7 @@
+.bp3-menu-item {
+
+    .menu-item-space {
+        width: 6px;
+        display: inline-block;
+    }
+}

client/src/utils.js

@@ -672,7 +672,6 @@ export const defaultFastFieldShouldUpdate = (props, prevProps) => {
   );
 };
 
-
 export const ensureEntriesHasEmptyLine = R.curry(
   (minLinesNumber, defaultEntry, entries) => {
     if (entries.length >= minLinesNumber) {
@@ -683,5 +682,34 @@ export const ensureEntriesHasEmptyLine = R.curry(
 );
 
 export const transfromViewsToTabs = (views) => {
-  return views.map(view => ({ ..._.pick(view, ['slug', 'name']) }))
-}
+  return views.map((view) => ({ ..._.pick(view, ['slug', 'name']) }));
+};
+
+export function nestedArrayToflatten(
+  collection,
+  property = 'children',
+  parseItem = (a, level) => a,
+  level = 1,
+) {
+  const parseObject = (obj) => parseItem({
+    ..._.omit(obj, [property]),
+    level,
+  }, level);
+
+  return collection.reduce((items, currentValue, index) => {
+    let localItems = [...items];
+    const parsedItem = parseObject(currentValue, level);
+    localItems.push(parsedItem);
+
+    if (Array.isArray(currentValue[property])) {
+      const flattenArray = nestedArrayToflatten(
+        currentValue[property],
+        property,
+        parseItem,
+        level + 1,
+      );
+      localItems = _.concat(localItems, flattenArray);
+    }
+    return localItems;
+  }, []);
+}