mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
re-structure to monorepo.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,15 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { AccountDialogProvider } from './AccountDialogProvider';
|
||||
import AccountDialogForm from './AccountDialogForm';
|
||||
|
||||
/**
|
||||
* Account dialog content.
|
||||
*/
|
||||
export default function AccountDialogContent({ dialogName, payload }) {
|
||||
return (
|
||||
<AccountDialogProvider dialogName={dialogName} payload={payload}>
|
||||
<AccountDialogForm />
|
||||
</AccountDialogProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
// @ts-nocheck
|
||||
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';
|
||||
|
||||
import withDialogActions from '@/containers/Dialog/withDialogActions';
|
||||
import {
|
||||
EditAccountFormSchema,
|
||||
CreateAccountFormSchema,
|
||||
} from './AccountForm.schema';
|
||||
import { compose, transformToForm } from '@/utils';
|
||||
import { transformApiErrors, transformAccountToForm } from './utils';
|
||||
|
||||
import '@/style/pages/Accounts/AccountFormDialog.scss';
|
||||
import { useAccountDialogContext } from './AccountDialogProvider';
|
||||
|
||||
// Default initial form values.
|
||||
const defaultInitialValues = {
|
||||
account_type: '',
|
||||
parent_account_id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
currency_code:'',
|
||||
subaccount: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Account form dialog content.
|
||||
*/
|
||||
function AccountFormDialogContent({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
// Account form context.
|
||||
const {
|
||||
editAccountMutate,
|
||||
createAccountMutate,
|
||||
account,
|
||||
|
||||
accountId,
|
||||
payload,
|
||||
isNewMode,
|
||||
dialogName,
|
||||
} = useAccountDialogContext();
|
||||
|
||||
// Form validation schema in create and edit mode.
|
||||
const validationSchema = isNewMode
|
||||
? CreateAccountFormSchema
|
||||
: EditAccountFormSchema;
|
||||
|
||||
// Callbacks handles form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
const form = omit(values, ['subaccount']);
|
||||
const toastAccountName = values.code
|
||||
? `${values.code} - ${values.name}`
|
||||
: values.name;
|
||||
|
||||
// Handle request success.
|
||||
const handleSuccess = () => {
|
||||
closeDialog(dialogName);
|
||||
|
||||
AppToaster.show({
|
||||
message: intl.get(
|
||||
isNewMode
|
||||
? 'service_has_been_created_successfully'
|
||||
: 'service_has_been_edited_successfully',
|
||||
{
|
||||
name: toastAccountName,
|
||||
service: intl.get('account'),
|
||||
},
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
};
|
||||
// Handle request error.
|
||||
const handleError = (error) => {
|
||||
const {
|
||||
response: {
|
||||
data: { errors },
|
||||
},
|
||||
} = error;
|
||||
|
||||
const errorsTransformed = transformApiErrors(errors);
|
||||
setErrors({ ...errorsTransformed });
|
||||
setSubmitting(false);
|
||||
};
|
||||
if (accountId) {
|
||||
editAccountMutate([accountId, form])
|
||||
.then(handleSuccess)
|
||||
.catch(handleError);
|
||||
} else {
|
||||
createAccountMutate({ ...form })
|
||||
.then(handleSuccess)
|
||||
.catch(handleError);
|
||||
}
|
||||
};
|
||||
// Form initial values in create and edit mode.
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
/**
|
||||
* We only care about the fields in the form. Previously unfilled optional
|
||||
* values such as `notes` come back from the API as null, so remove those
|
||||
* as well.
|
||||
*/
|
||||
...transformToForm(
|
||||
transformAccountToForm(account, payload),
|
||||
defaultInitialValues,
|
||||
),
|
||||
};
|
||||
|
||||
// Handles dialog close.
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(dialogName);
|
||||
}, [closeDialog, dialogName]);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={validationSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<AccountDialogFormContent
|
||||
dialogName={dialogName}
|
||||
action={payload?.action}
|
||||
onClose={handleClose}
|
||||
/>
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(AccountFormDialogContent);
|
||||
@@ -0,0 +1,225 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
TextArea,
|
||||
Checkbox,
|
||||
} from '@blueprintjs/core';
|
||||
import {
|
||||
If,
|
||||
FieldRequiredHint,
|
||||
Hint,
|
||||
AccountsSelectList,
|
||||
AccountsTypesSelect,
|
||||
CurrencySelect,
|
||||
FormattedMessage as T,
|
||||
} from '@/components';
|
||||
import withAccounts from '@/containers/Accounts/withAccounts';
|
||||
|
||||
import { inputIntent, compose } from '@/utils';
|
||||
import { useAutofocus } from '@/hooks';
|
||||
import { FOREIGN_CURRENCY_ACCOUNTS } from '@/constants/accountTypes';
|
||||
import { useAccountDialogContext } from './AccountDialogProvider';
|
||||
|
||||
/**
|
||||
* Account form dialogs fields.
|
||||
*/
|
||||
function AccountFormDialogFields({
|
||||
// #ownProps
|
||||
onClose,
|
||||
action,
|
||||
}) {
|
||||
const { values, isSubmitting } = useFormikContext();
|
||||
const accountNameFieldRef = useAutofocus();
|
||||
|
||||
// Account form context.
|
||||
const { fieldsDisabled, accounts, accountsTypes, currencies } =
|
||||
useAccountDialogContext();
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<Field name={'account_type'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'account_type'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--account-type', Classes.FILL)}
|
||||
inline={true}
|
||||
helperText={<ErrorMessage name="account_type" />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
>
|
||||
<AccountsTypesSelect
|
||||
accountsTypes={accountsTypes}
|
||||
selectedTypeId={value}
|
||||
defaultSelectText={<T id={'select_account_type'} />}
|
||||
onTypeSelected={(accountType) => {
|
||||
form.setFieldValue('account_type', accountType.key);
|
||||
form.setFieldValue('currency_code', '');
|
||||
}}
|
||||
disabled={fieldsDisabled.accountType}
|
||||
popoverProps={{ minimal: true }}
|
||||
popoverFill={true}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<FastField name={'name'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'account_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--account-name'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="name" />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
inputRef={(ref) => (accountNameFieldRef.current = ref)}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
<FastField name={'code'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'account_code'} />}
|
||||
className={'form-group--account-code'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="code" />}
|
||||
inline={true}
|
||||
labelInfo={<Hint content={<T id="account_code_hint" />} />}
|
||||
>
|
||||
<InputGroup medium={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
<Field name={'subaccount'} type={'checkbox'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={' '}
|
||||
className={classNames('form-group--subaccount')}
|
||||
intent={inputIntent({ error, touched })}
|
||||
inline={true}
|
||||
>
|
||||
<Checkbox
|
||||
inline={true}
|
||||
label={
|
||||
<>
|
||||
<T id={'sub_account'} />
|
||||
<Hint />
|
||||
</>
|
||||
}
|
||||
name={'subaccount'}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<If condition={values.subaccount}>
|
||||
<FastField name={'parent_account_id'}>
|
||||
{({
|
||||
form: { values, setFieldValue },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<FormGroup
|
||||
label={<T id={'parent_account'} />}
|
||||
className={classNames(
|
||||
'form-group--parent-account',
|
||||
Classes.FILL,
|
||||
)}
|
||||
inline={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="parent_account_id" />}
|
||||
>
|
||||
<AccountsSelectList
|
||||
accounts={accounts}
|
||||
onAccountSelected={(account) => {
|
||||
setFieldValue('parent_account_id', account.id);
|
||||
}}
|
||||
defaultSelectText={<T id={'select_parent_account'} />}
|
||||
selectedAccountId={value}
|
||||
popoverFill={true}
|
||||
filterByTypes={values.account_type}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</If>
|
||||
|
||||
<If condition={FOREIGN_CURRENCY_ACCOUNTS.includes(values.account_type)}>
|
||||
{/*------------ Currency -----------*/}
|
||||
<FastField name={'currency_code'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'currency'} />}
|
||||
className={classNames('form-group--select-list', Classes.FILL)}
|
||||
inline={true}
|
||||
>
|
||||
<CurrencySelect
|
||||
name={'currency_code'}
|
||||
currencies={currencies}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</If>
|
||||
<FastField name={'description'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'description'} />}
|
||||
className={'form-group--description'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'description'} />}
|
||||
inline={true}
|
||||
>
|
||||
<TextArea growVertically={true} height={280} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
onClick={onClose}
|
||||
style={{ minWidth: '75px' }}
|
||||
>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
loading={isSubmitting}
|
||||
style={{ minWidth: '95px' }}
|
||||
type="submit"
|
||||
>
|
||||
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withAccounts(({ accountsTypes, accountsList }) => ({
|
||||
accountsTypes,
|
||||
accounts: accountsList,
|
||||
})),
|
||||
)(AccountFormDialogFields);
|
||||
@@ -0,0 +1,85 @@
|
||||
// @ts-nocheck
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import { DialogContent } from '@/components';
|
||||
import {
|
||||
useCreateAccount,
|
||||
useAccountsTypes,
|
||||
useCurrencies,
|
||||
useAccount,
|
||||
useAccounts,
|
||||
useEditAccount,
|
||||
} from '@/hooks/query';
|
||||
import { AccountDialogAction, getDisabledFormFields } from './utils';
|
||||
|
||||
const AccountDialogContext = createContext();
|
||||
|
||||
/**
|
||||
* Account form provider.
|
||||
*/
|
||||
function AccountDialogProvider({ dialogName, payload, ...props }) {
|
||||
// Create and edit account mutations.
|
||||
const { mutateAsync: createAccountMutate } = useCreateAccount();
|
||||
const { mutateAsync: editAccountMutate } = useEditAccount();
|
||||
|
||||
// Fetches accounts list.
|
||||
const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
|
||||
|
||||
// Fetches accounts types.
|
||||
const { data: accountsTypes, isLoading: isAccountsTypesLoading } =
|
||||
useAccountsTypes();
|
||||
|
||||
// Fetches the specific account details.
|
||||
const { data: account, isLoading: isAccountLoading } = useAccount(
|
||||
payload.accountId,
|
||||
{
|
||||
enabled:
|
||||
!!payload.accountId && payload.action === AccountDialogAction.Edit,
|
||||
},
|
||||
);
|
||||
|
||||
// Handle fetch Currencies data table
|
||||
const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
|
||||
|
||||
const isNewMode = !payload?.action;
|
||||
|
||||
// Retrieves the disabled fields of the form.
|
||||
const fieldsDisabled = React.useMemo(
|
||||
() => getDisabledFormFields(account, payload),
|
||||
[account, payload],
|
||||
);
|
||||
|
||||
// Provider payload.
|
||||
const provider = {
|
||||
dialogName,
|
||||
payload,
|
||||
fieldsDisabled,
|
||||
|
||||
currencies,
|
||||
|
||||
createAccountMutate,
|
||||
editAccountMutate,
|
||||
accounts,
|
||||
accountsTypes,
|
||||
account,
|
||||
|
||||
isAccountsLoading,
|
||||
isCurrenciesLoading,
|
||||
isNewMode,
|
||||
};
|
||||
|
||||
const isLoading =
|
||||
isAccountsLoading ||
|
||||
isAccountsTypesLoading ||
|
||||
isAccountLoading ||
|
||||
isCurrenciesLoading;
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={isLoading}>
|
||||
<AccountDialogContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useAccountDialogContext = () => useContext(AccountDialogContext);
|
||||
|
||||
export { AccountDialogProvider, useAccountDialogContext };
|
||||
@@ -0,0 +1,21 @@
|
||||
// @ts-nocheck
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
import { DATATYPES_LENGTH } from '@/constants/dataTypes';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.required()
|
||||
.min(3)
|
||||
.max(DATATYPES_LENGTH.STRING)
|
||||
.label(intl.get('account_name_')),
|
||||
code: Yup.string().nullable().min(3).max(6),
|
||||
account_type: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('account_type')),
|
||||
description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
|
||||
parent_account_id: Yup.number().nullable(),
|
||||
});
|
||||
|
||||
export const CreateAccountFormSchema = Schema;
|
||||
export const EditAccountFormSchema = Schema;
|
||||
@@ -0,0 +1,40 @@
|
||||
// @ts-nocheck
|
||||
import React, { lazy } from 'react';
|
||||
import { FormattedMessage as T } from '@/components';
|
||||
import { Dialog, DialogSuspense } from '@/components';
|
||||
import withDialogRedux from '@/components/DialogReduxConnect';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
const AccountDialogContent = lazy(() => import('./AccountDialogContent'));
|
||||
|
||||
/**
|
||||
* Account form dialog.
|
||||
*/
|
||||
function AccountFormDialog({
|
||||
dialogName,
|
||||
payload = { action: '', id: null },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={
|
||||
payload.action === 'edit' ? (
|
||||
<T id={'edit_account'} />
|
||||
) : (
|
||||
<T id={'new_account'} />
|
||||
)
|
||||
}
|
||||
className={'dialog--account-form'}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<AccountDialogContent dialogName={dialogName} payload={payload} />
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(AccountFormDialog);
|
||||
108
packages/webapp/src/containers/Dialogs/AccountDialog/utils.tsx
Normal file
108
packages/webapp/src/containers/Dialogs/AccountDialog/utils.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
// @ts-nocheck
|
||||
import intl from 'react-intl-universal';
|
||||
import * as R from 'ramda';
|
||||
import { isUndefined } from 'lodash';
|
||||
|
||||
export const AccountDialogAction = {
|
||||
Edit: 'edit',
|
||||
NewChild: 'NewChild',
|
||||
NewDefinedType: 'NewDefinedType',
|
||||
};
|
||||
|
||||
/**
|
||||
* Transformes the response API errors.
|
||||
*/
|
||||
export const transformApiErrors = (errors) => {
|
||||
const fields = {};
|
||||
if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
|
||||
fields.code = intl.get('account_code_is_not_unique');
|
||||
}
|
||||
if (errors.find((e) => e.type === 'ACCOUNT.NAME.NOT.UNIQUE')) {
|
||||
fields.name = intl.get('account_name_is_already_used');
|
||||
}
|
||||
if (
|
||||
errors.find((e) => e.type === 'ACCOUNT_CURRENCY_NOT_SAME_PARENT_ACCOUNT')
|
||||
) {
|
||||
fields.parent_account_id = intl.get(
|
||||
'accounts.error.account_currency_not_same_parent_account',
|
||||
);
|
||||
}
|
||||
return fields;
|
||||
};
|
||||
|
||||
/**
|
||||
* Payload transformer in account edit mode.
|
||||
*/
|
||||
function tranformNewChildAccountPayload(payload) {
|
||||
return {
|
||||
parent_account_id: payload.parentAccountId || '',
|
||||
account_type: payload.accountType || '',
|
||||
subaccount: true,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Payload transformer in new account with defined type.
|
||||
*/
|
||||
function transformNewDefinedTypePayload(payload) {
|
||||
return {
|
||||
account_type: payload.accountType || '',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Merged the fetched account with transformed payload.
|
||||
*/
|
||||
const mergeWithAccount = R.curry((transformed, account) => {
|
||||
return {
|
||||
...account,
|
||||
...transformed,
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Default account payload transformer.
|
||||
*/
|
||||
const defaultPayloadTransform = () => ({});
|
||||
|
||||
/**
|
||||
* Defined payload transformers.
|
||||
*/
|
||||
function getConditions() {
|
||||
return [
|
||||
[AccountDialogAction.Edit],
|
||||
[AccountDialogAction.NewChild, tranformNewChildAccountPayload],
|
||||
[AccountDialogAction.NewDefinedType, transformNewDefinedTypePayload],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Transformes the given payload to account form initial values.
|
||||
*/
|
||||
export const transformAccountToForm = (account, payload) => {
|
||||
const conditions = getConditions();
|
||||
|
||||
const results = conditions.map((condition) => {
|
||||
const transformer = !isUndefined(condition[1])
|
||||
? condition[1]
|
||||
: defaultPayloadTransform;
|
||||
|
||||
return [
|
||||
condition[0] === payload.action ? R.T : R.F,
|
||||
mergeWithAccount(transformer(payload)),
|
||||
];
|
||||
});
|
||||
return R.cond(results)(account);
|
||||
};
|
||||
|
||||
/**
|
||||
* Detarmines whether the for fields are disabled.
|
||||
*/
|
||||
export const getDisabledFormFields = (account, payload) => {
|
||||
return {
|
||||
accountType:
|
||||
payload.action === AccountDialogAction.Edit ||
|
||||
payload.action === AccountDialogAction.NewChild ||
|
||||
payload.action === AccountDialogAction.NewDefinedType,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user