Merge pull request #86 from bigcapitalhq/BIG-421-account-form-issues

fix: BIG-421 account form issues

packages/server/src/services/Accounts/GetAccounts.ts

@@ -5,6 +5,7 @@ import TenancyService from '@/services/Tenancy/TenancyService';
 import DynamicListingService from '@/services/DynamicListing/DynamicListService';
 import { AccountTransformer } from './AccountTransform';
 import { TransformerInjectable } from '@/lib/Transformer/TransformerInjectable';
+import { flatToNestedArray } from '@/utils';
 
 @Service()
 export class GetAccounts {
@@ -53,11 +54,17 @@ export class GetAccounts {
       builder.modify('inactiveMode', filter.inactiveMode);
     });
     // Retrievs the formatted accounts collection.
-    const transformedAccounts = await this.transformer.transform(
+    const preTransformedAccounts = await this.transformer.transform(
       tenantId,
       accounts,
       new AccountTransformer()
     );
+    // Transform accounts to nested array.
+    const transformedAccounts = flatToNestedArray(preTransformedAccounts, {
+      id: 'id',
+      parentId: 'parentAccountId',
+    });
+
     return {
       accounts: transformedAccounts,
       filterMeta: dynamicList.getResponseMeta(),

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogForm.tsx

@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
-import { omit } from 'lodash';
 import { AppToaster } from '@/components';
 
 import AccountDialogFormContent from './AccountDialogFormContent';
@@ -14,7 +13,11 @@ import {
   CreateAccountFormSchema,
 } from './AccountForm.schema';
 import { compose, transformToForm } from '@/utils';
-import { transformApiErrors, transformAccountToForm } from './utils';
+import {
+  transformApiErrors,
+  transformAccountToForm,
+  transformFormToReq,
+} from './utils';
 
 import '@/style/pages/Accounts/AccountFormDialog.scss';
 import { useAccountDialogContext } from './AccountDialogProvider';
@@ -26,7 +29,7 @@ const defaultInitialValues = {
   name: '',
   code: '',
   description: '',
-  currency_code:'',
+  currency_code: '',
   subaccount: false,
 };
 
@@ -43,7 +46,6 @@ function AccountFormDialogContent({
     createAccountMutate,
     account,
 
-    accountId,
     payload,
     isNewMode,
     dialogName,
@@ -56,7 +58,7 @@ function AccountFormDialogContent({
 
   // Callbacks handles form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
-    const form = omit(values, ['subaccount']);
+    const form = transformFormToReq(values);
     const toastAccountName = values.code
       ? `${values.code} - ${values.name}`
       : values.name;
@@ -90,8 +92,8 @@ function AccountFormDialogContent({
       setErrors({ ...errorsTransformed });
       setSubmitting(false);
     };
-    if (accountId) {
+    if (payload.accountId) {
-      editAccountMutate([accountId, form])
+      editAccountMutate([payload.accountId, form])
         .then(handleSuccess)
         .catch(handleError);
     } else {
@@ -113,7 +115,6 @@ function AccountFormDialogContent({
       defaultInitialValues,
     ),
   };
-
   // Handles dialog close.
   const handleClose = useCallback(() => {
     closeDialog(dialogName);

packages/webapp/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.tsx

@@ -26,6 +26,7 @@ import { inputIntent, compose } from '@/utils';
 import { useAutofocus } from '@/hooks';
 import { FOREIGN_CURRENCY_ACCOUNTS } from '@/constants/accountTypes';
 import { useAccountDialogContext } from './AccountDialogProvider';
+import { parentAccountShouldUpdate } from './utils';
 
 /**
  * Account form dialogs fields.
@@ -115,12 +116,7 @@ function AccountFormDialogFields({
             >
               <Checkbox
                 inline={true}
-                label={
+                label={<T id={'sub_account'} />}
-                  <>
-                    <T id={'sub_account'} />
-                    <Hint />
-                  </>
-                }
                 name={'subaccount'}
                 {...field}
               />
@@ -128,37 +124,36 @@ function AccountFormDialogFields({
           )}
         </Field>
 
-        <If condition={values.subaccount}>
+        <FastField
-          <FastField name={'parent_account_id'}>
+          name={'parent_account_id'}
-            {({
+          shouldUpdate={parentAccountShouldUpdate}
-              form: { values, setFieldValue },
+        >
-              field: { value },
+          {({
-              meta: { error, touched },
+            form: { values, setFieldValue },
-            }) => (
+            field: { value },
-              <FormGroup
+            meta: { error, touched },
-                label={<T id={'parent_account'} />}
+          }) => (
-                className={classNames(
+            <FormGroup
-                  'form-group--parent-account',
+              label={<T id={'parent_account'} />}
-                  Classes.FILL,
+              className={classNames('form-group--parent-account', Classes.FILL)}
-                )}
+              inline={true}
-                inline={true}
+              intent={inputIntent({ error, touched })}
-                intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="parent_account_id" />}
-                helperText={<ErrorMessage name="parent_account_id" />}
+            >
-              >
+              <AccountsSelectList
-                <AccountsSelectList
+                accounts={accounts}
-                  accounts={accounts}
+                onAccountSelected={(account) => {
-                  onAccountSelected={(account) => {
+                  setFieldValue('parent_account_id', account.id);
-                    setFieldValue('parent_account_id', account.id);
+                }}
-                  }}
+                defaultSelectText={<T id={'select_parent_account'} />}
-                  defaultSelectText={<T id={'select_parent_account'} />}
+                selectedAccountId={value}
-                  selectedAccountId={value}
+                popoverFill={true}
-                  popoverFill={true}
+                filterByTypes={values.account_type}
-                  filterByTypes={values.account_type}
+                disabled={!values.subaccount}
-                />
+              />
-              </FormGroup>
+            </FormGroup>
-            )}
+          )}
-          </FastField>
+        </FastField>
-        </If>
 
         <If condition={FOREIGN_CURRENCY_ACCOUNTS.includes(values.account_type)}>
           {/*------------ Currency  -----------*/}

packages/webapp/src/containers/Dialogs/AccountDialog/utils.tsx

@@ -2,6 +2,7 @@
 import intl from 'react-intl-universal';
 import * as R from 'ramda';
 import { isUndefined } from 'lodash';
+import { defaultFastFieldShouldUpdate } from '@/utils';
 
 export const AccountDialogAction = {
   Edit: 'edit',
@@ -33,7 +34,7 @@ export const transformApiErrors = (errors) => {
 /**
  * Payload transformer in account edit mode.
  */
-function tranformNewChildAccountPayload(payload) {
+function tranformNewChildAccountPayload(account, payload) {
   return {
     parent_account_id: payload.parentAccountId || '',
     account_type: payload.accountType || '',
@@ -44,7 +45,7 @@ function tranformNewChildAccountPayload(payload) {
 /**
  * Payload transformer in new account with defined type.
  */
-function transformNewDefinedTypePayload(payload) {
+function transformNewDefinedTypePayload(account, payload) {
   return {
     account_type: payload.accountType || '',
   };
@@ -63,7 +64,9 @@ const mergeWithAccount = R.curry((transformed, account) => {
 /**
  * Default account payload transformer.
  */
-const defaultPayloadTransform = () => ({});
+const defaultPayloadTransform = (account, payload) => ({
+  subaccount: !!account.parent_account_id,
+});
 
 /**
  * Defined payload transformers.
@@ -89,7 +92,7 @@ export const transformAccountToForm = (account, payload) => {
 
     return [
       condition[0] === payload.action ? R.T : R.F,
-      mergeWithAccount(transformer(payload)),
+      mergeWithAccount(transformer(account, payload)),
     ];
   });
   return R.cond(results)(account);
@@ -106,3 +109,29 @@ export const getDisabledFormFields = (account, payload) => {
       payload.action === AccountDialogAction.NewDefinedType,
   };
 };
+
+/**
+ * Detarmines whether should update the parent account field.
+ * @param newProps
+ * @param oldProps
+ * @returns {boolean}
+ */
+export const parentAccountShouldUpdate = (newProps, oldProps) => {
+  return (
+    newProps.formik.values.subaccount !== oldProps.formik.values.subaccount ||
+    defaultFastFieldShouldUpdate(newProps, oldProps)
+  );
+};
+
+/**
+ * Transformes the form values to the request.
+ */
+export const transformFormToReq = (form) => {
+  return R.compose(
+    R.omit(['subaccount']),
+    R.when(
+      R.propSatisfies(R.equals(R.__, false), 'subaccount'),
+      R.assoc(['parent_account_id'], ''),
+    ),
+  )(form);
+};