From 981b65349db17d6225c68b8bc531a0ee7b2a6658 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 3 May 2023 22:41:54 +0200 Subject: [PATCH] feat(webapp): allow to create a new account item in accounts list component. --- .../Accounts/AccountsMultiSelect.tsx | 20 +++------ .../components/Accounts/AccountsSelect.tsx | 41 +++++++------------ .../src/components/Accounts/_components.tsx | 4 +- .../webapp/src/components/Accounts/_hooks.ts | 36 ++++++++++++++++ .../webapp/src/components/Forms/Select.tsx | 6 +-- .../AccountDialogFormContent.tsx | 1 + .../src/containers/Items/ItemFormBody.tsx | 2 + .../Preferences/Accountant/AccountantForm.tsx | 24 +++++++---- .../ReceiptForm/ReceiptFormHeaderFields.tsx | 3 ++ 9 files changed, 83 insertions(+), 54 deletions(-) create mode 100644 packages/webapp/src/components/Accounts/_hooks.ts diff --git a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx b/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx index 687b8f5bf..00df4fce9 100644 --- a/packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx +++ b/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. - const filteredAccounts = useMemo(() => { - const flattenAccounts = nestedArrayToflatten(items); - - return filterAccountsByQuery(flattenAccounts, { - filterByRootTypes, - filterByParentTypes, - filterByTypes, - filterByNormal, - }); - }, [ - items, - filterByRootTypes, + // Filters accounts based on filter props. + const filteredAccounts = usePreprocessingAccounts(accounts, { filterByParentTypes, filterByTypes, filterByNormal, - ]); + filterByRootTypes, + }); return ( { @@ -25,11 +21,7 @@ const createNewItemRenderer = (query, active, handleClick) => { }; // Create new item from the given query string. -const createNewItemFromQuery = (name) => { - return { - name, - }; -}; +const createNewItemFromQuery = (name) => ({ 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 flattenAccounts = nestedArrayToflatten(items); - - const filteredAccounts = filterAccountsByQuery(flattenAccounts, { - filterByRootTypes, - filterByParentTypes, - filterByTypes, - filterByNormal, - }); - return filteredAccounts; - }, [ - items, - filterByRootTypes, + 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; return ( ); diff --git a/packages/webapp/src/components/Accounts/_components.tsx b/packages/webapp/src/components/Accounts/_components.tsx index 95db8e018..85bbd50a6 100644 --- a/packages/webapp/src/components/Accounts/_components.tsx +++ b/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) => { diff --git a/packages/webapp/src/components/Accounts/_hooks.ts b/packages/webapp/src/components/Accounts/_hooks.ts new file mode 100644 index 000000000..df8959daf --- /dev/null +++ b/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, + ]); +}; diff --git a/packages/webapp/src/components/Forms/Select.tsx b/packages/webapp/src/components/Forms/Select.tsx index 11d5e5847..56faf3f3a 100644 --- a/packages/webapp/src/components/Forms/Select.tsx +++ b/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 ( @@ -45,7 +46,6 @@ const SelectButton = styled(Button)` margin-right: 12px; border-radius: 1px; } - &:not([class*='bp3-intent-']) { &, &:hover { diff --git a/packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx b/packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx index 68f18e164..31f36b364 100644 --- a/packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx +++ b/packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx @@ -120,6 +120,7 @@ function AccountFormDialogFields({ buttonProps={{ disabled: !values.subaccount }} fastField={true} fill={true} + allowCreate={true} /> )} diff --git a/packages/webapp/src/containers/Items/ItemFormBody.tsx b/packages/webapp/src/containers/Items/ItemFormBody.tsx index fd513fbf8..5d7355ea8 100644 --- a/packages/webapp/src/containers/Items/ItemFormBody.tsx +++ b/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} > diff --git a/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx b/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx index 9be2e319d..880f316f8 100644 --- a/packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx +++ b/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() { {/* ----------- Deposit customer account ----------- */} - @@ -133,6 +133,7 @@ export default function AccountantForm() { /> } labelInfo={} + fastField={true} > - + {/* ----------- Withdrawal vendor account ----------- */} - @@ -162,6 +164,7 @@ export default function AccountantForm() { /> } labelInfo={} + fastField={true} > - + {/* ----------- Withdrawal customer account ----------- */} - @@ -191,14 +195,16 @@ export default function AccountantForm() { /> } labelInfo={} + fastField={true} > } filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]} + fastField={true} /> - +