re-structure to monorepo.

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

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '../Forms';
+import classNames from 'classnames';
+import { Classes } from '@blueprintjs/popover2';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} account
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const accountItemPredicate = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} account
+ * @param {*} param1
+ * @returns
+ */
+const accountItemRenderer = (
+  account,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      icon={isSelected ? 'tick' : 'blank'}
+      text={account.name}
+      label={account.code}
+      key={account.id}
+      onClick={handleClick}
+    />
+  );
+};
+
+const accountSelectProps = {
+  itemPredicate: accountItemPredicate,
+  itemRenderer: accountItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.code,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * branches mulit select.
+ * @param {*} param0
+ * @returns {JSX.Element}
+ */
+export function AccountMultiSelect({ accounts, ...rest }) {
+  return (
+    <FMultiSelect
+      items={accounts}
+      popoverProps={{
+        minimal: true,
+      }}
+      {...accountSelectProps}
+      {...rest}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import { MultiSelect } from '../MultiSelectTaggable';
+
+export function AccountsMultiSelect({ ...multiSelectProps }) {
+  return (
+    <MultiSelect
+      itemRenderer={(
+        item,
+        { active, selected, handleClick, modifiers, query },
+      ) => {
+        return (
+          <MenuItem
+            active={active}
+            icon={selected ? 'tick' : 'blank'}
+            text={item.name}
+            label={item.code}
+            key={item.id}
+            onClick={handleClick}
+          />
+        );
+      }}
+      popoverProps={{ minimal: true }}
+      fill={true}
+      tagRenderer={(item) => item.name}
+      resetOnSelect={true}
+      {...multiSelectProps}
+    />
+  );
+}

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

@@ -0,0 +1,177 @@
+// @ts-nocheck
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { Select } from '@blueprintjs/select';
+import * as R from 'ramda';
+
+import { MenuItemNestedText, FormattedMessage as T } from '@/components';
+import { nestedArrayToflatten, filterAccountsByQuery } from '@/utils';
+
+import { CLASSES } from '@/constants/classes';
+import { DialogsName } from '@/constants/dialogs';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts select list.
+ */
+function AccountsSelectListRoot({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
+  accounts,
+  initialAccountId,
+  selectedAccountId,
+  defaultSelectText = 'Select account',
+  onAccountSelected,
+  disabled = false,
+  popoverFill = false,
+
+  filterByParentTypes,
+  filterByTypes,
+  filterByNormal,
+  filterByRootTypes,
+
+  allowCreate,
+
+  buttonProps = {},
+}) {
+  const flattenAccounts = useMemo(
+    () => nestedArrayToflatten(accounts),
+    [accounts],
+  );
+
+  // Filters accounts based on filter props.
+  const filteredAccounts = useMemo(() => {
+    let filteredAccounts = filterAccountsByQuery(flattenAccounts, {
+      filterByRootTypes,
+      filterByParentTypes,
+      filterByTypes,
+      filterByNormal,
+    });
+    return filteredAccounts;
+  }, [
+    flattenAccounts,
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  ]);
+
+  // Find initial account object to set it as default account in initial render.
+  const initialAccount = useMemo(
+    () => filteredAccounts.find((a) => a.id === initialAccountId),
+    [initialAccountId, filteredAccounts],
+  );
+
+  // Select account item.
+  const [selectedAccount, setSelectedAccount] = useState(
+    initialAccount || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedAccountId !== 'undefined') {
+      const account = selectedAccountId
+        ? filteredAccounts.find((a) => a.id === selectedAccountId)
+        : null;
+      setSelectedAccount(account);
+    }
+  }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
+
+  // Account item of select accounts field.
+  const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        text={<MenuItemNestedText level={item.level} text={item.name} />}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  // Handle the account item select.
+  const handleAccountSelect = useCallback(
+    (account) => {
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog(DialogsName.AccountForm);
+      }
+    },
+    [setSelectedAccount, onAccountSelected, openDialog],
+  );
+
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Select
+      items={filteredAccounts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
+      itemRenderer={accountItem}
+      itemPredicate={filterAccountsPredicater}
+      popoverProps={{
+        minimal: true,
+        usePortal: !popoverFill,
+        inline: popoverFill,
+      }}
+      filterable={true}
+      onItemSelect={handleAccountSelect}
+      disabled={disabled}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+    >
+      <Button
+        disabled={disabled}
+        text={selectedAccount ? selectedAccount.name : defaultSelectText}
+        {...buttonProps}
+      />
+    </Select>
+  );
+}
+
+export const AccountsSelectList = R.compose(withDialogActions)(
+  AccountsSelectListRoot,
+);

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

@@ -0,0 +1,176 @@
+// @ts-nocheck
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import * as R from 'ramda';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import { MenuItem } from '@blueprintjs/core';
+import { Suggest } from '@blueprintjs/select';
+
+import { CLASSES } from '@/constants/classes';
+import { DialogsName } from '@/constants/dialogs';
+
+import { MenuItemNestedText, FormattedMessage as T } from '@/components';
+import { nestedArrayToflatten, filterAccountsByQuery } from '@/utils';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => {
+  return {
+    name,
+  };
+};
+
+// Handle input value renderer.
+const handleInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+// Filters accounts items.
+const filterAccountsPredicater = (query, account, _index, exactMatch) => {
+  const normalizedTitle = account.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ * Accounts suggest field.
+ */
+function AccountsSuggestFieldRoot({
+  // #withDialogActions
+  openDialog,
+
+  // #ownProps
+  accounts,
+  initialAccountId,
+  selectedAccountId,
+  defaultSelectText = intl.formatMessage({ id: 'select_account' }),
+  popoverFill = false,
+  onAccountSelected,
+
+  filterByParentTypes = [],
+  filterByTypes = [],
+  filterByNormal,
+  filterByRootTypes = [],
+
+  allowCreate,
+
+  ...suggestProps
+}) {
+  const flattenAccounts = useMemo(
+    () => nestedArrayToflatten(accounts),
+    [accounts],
+  );
+
+  // Filters accounts based on filter props.
+  const filteredAccounts = useMemo(() => {
+    let filteredAccounts = filterAccountsByQuery(flattenAccounts, {
+      filterByRootTypes,
+      filterByParentTypes,
+      filterByTypes,
+      filterByNormal,
+    });
+    return filteredAccounts;
+  }, [
+    flattenAccounts,
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  ]);
+
+  // Find initial account object to set it as default account in initial render.
+  const initialAccount = useMemo(
+    () => filteredAccounts.find((a) => a.id === initialAccountId),
+    [initialAccountId, filteredAccounts],
+  );
+
+  const [selectedAccount, setSelectedAccount] = useState(
+    initialAccount || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedAccountId !== 'undefined') {
+      const account = selectedAccountId
+        ? filteredAccounts.find((a) => a.id === selectedAccountId)
+        : null;
+      setSelectedAccount(account);
+    }
+  }, [selectedAccountId, filteredAccounts, setSelectedAccount]);
+
+  // Account item of select accounts field.
+  const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        text={<MenuItemNestedText level={item.level} text={item.name} />}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
+    );
+  }, []);
+
+  const handleAccountSelect = useCallback(
+    (account) => {
+      if (account.id) {
+        setSelectedAccount({ ...account });
+        onAccountSelected && onAccountSelected(account);
+      } else {
+        openDialog(DialogsName.AccountForm);
+      }
+    },
+    [setSelectedAccount, onAccountSelected, openDialog],
+  );
+
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  return (
+    <Suggest
+      items={filteredAccounts}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
+      itemRenderer={accountItem}
+      itemPredicate={filterAccountsPredicater}
+      onItemSelect={handleAccountSelect}
+      selectedItem={selectedAccount}
+      inputProps={{ placeholder: defaultSelectText }}
+      resetOnClose={true}
+      fill={true}
+      popoverProps={{ minimal: true, boundary: 'window' }}
+      inputValueRenderer={handleInputValueRenderer}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      {...suggestProps}
+    />
+  );
+}
+
+export const AccountsSuggestField = R.compose(withDialogActions)(
+  AccountsSuggestFieldRoot,
+);

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

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import { ListSelect } from '@/components';
+import { CLASSES } from '@/constants/classes';
+
+export function AccountsTypesSelect({
+  accountsTypes,
+  selectedTypeId,
+  defaultSelectText = 'Select account type',
+  onTypeSelected,
+  disabled = false,
+  popoverFill = false,
+  ...restProps
+}) {
+  // Filters accounts types items.
+  const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
+    const normalizedTitle = accountType.label.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  };
+
+  // Handle item selected.
+  const handleItemSelected = (accountType) => {
+    onTypeSelected && onTypeSelected(accountType);
+  };
+
+  return (
+    <ListSelect
+      items={accountsTypes}
+      selectedItemProp={'key'}
+      selectedItem={selectedTypeId}
+      textProp={'label'}
+      defaultText={defaultSelectText}
+      onItemSelect={handleItemSelected}
+      itemPredicate={filterAccountTypeItems}
+      disabled={disabled}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...restProps}
+    />
+  );
+}

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

@@ -0,0 +1,5 @@
+export * from './AccountMultiSelect';
+export * from './AccountsMultiSelect';
+export * from './AccountsSelectList';
+export * from './AccountsSuggestField';
+export * from './AccountsTypesSelect';