mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
refactor: currency Form.
This commit is contained in:
elforjani3
@@ -1,200 +0,0 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import * as Yup from 'yup';
|
||||
import { useFormik } from 'formik';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick } from 'lodash';
|
||||
import {
|
||||
ErrorMessage,
|
||||
AppToaster,
|
||||
FieldRequiredHint,
|
||||
DialogContent,
|
||||
} from 'components';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
|
||||
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
import 'style/pages/Currency/CurrencyFormDialog.scss'
|
||||
|
||||
function CurencyFormDialogContent({
|
||||
// #withCurrencyDetail
|
||||
currency,
|
||||
|
||||
// #wihtCurrenciesActions
|
||||
requestFetchCurrencies,
|
||||
requestSubmitCurrencies,
|
||||
requestEditCurrency,
|
||||
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #ownProp
|
||||
action,
|
||||
currencyId,
|
||||
dialogName,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const fetchCurrencies = useQuery('currencies', () =>
|
||||
requestFetchCurrencies(),
|
||||
);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
currency_name: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'currency_name_' })),
|
||||
currency_code: Yup.string()
|
||||
.max(4)
|
||||
.required()
|
||||
.label(formatMessage({ id: 'currency_code_' })),
|
||||
});
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
currency_name: '',
|
||||
currency_code: '',
|
||||
}),
|
||||
[],
|
||||
);
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
isSubmitting,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
resetForm,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...(action === 'edit' && pick(currency, Object.keys(initialValues))),
|
||||
},
|
||||
validationSchema: validationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
if (action === 'edit') {
|
||||
requestEditCurrency(currency.id, values)
|
||||
.then((response) => {
|
||||
closeDialog(dialogName);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_currency_has_been_edited_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
queryCache.invalidateQueries('currencies');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
} else {
|
||||
requestSubmitCurrencies(values)
|
||||
.then((response) => {
|
||||
closeDialog(dialogName);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_currency_has_been_created_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
queryCache.invalidateQueries('currencies');
|
||||
})
|
||||
.catch((error) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(dialogName);
|
||||
}, [dialogName, closeDialog]);
|
||||
|
||||
const onDialogOpening = useCallback(() => {
|
||||
fetchCurrencies.refetch();
|
||||
}, [fetchCurrencies]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
resetForm();
|
||||
closeDialog(dialogName);
|
||||
}, [closeDialog, dialogName, resetForm]);
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={fetchCurrencies.isFetching}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={<T id={'currency_name'} />}
|
||||
labelInfo={FieldRequiredHint}
|
||||
className={'form-group--currency-name'}
|
||||
intent={
|
||||
errors.currency_name && touched.currency_name && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name="currency_name" {...{ errors, touched }} />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={
|
||||
errors.currency_name && touched.currency_name && Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('currency_name')}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'currency_code'} />}
|
||||
labelInfo={FieldRequiredHint}
|
||||
className={'form-group--currency-code'}
|
||||
intent={
|
||||
errors.currency_code && touched.currency_code && Intent.DANGER
|
||||
}
|
||||
helperText={
|
||||
<ErrorMessage name="currency_code" {...{ errors, touched }} />
|
||||
}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={
|
||||
errors.currency_code && touched.currency_code && Intent.DANGER
|
||||
}
|
||||
{...getFieldProps('currency_code')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCurrencyDetail,
|
||||
withDialogActions,
|
||||
withCurrenciesActions,
|
||||
)(CurencyFormDialogContent);
|
||||
@@ -0,0 +1,97 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { Formik } from 'formik';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { AppToaster } from 'components';
|
||||
import { pick } from 'lodash';
|
||||
import CurrencyFormContent from './CurrencyFormContent';
|
||||
|
||||
import { useCurrencyFormContext } from './CurrencyFormProvider';
|
||||
import {
|
||||
CreateCurrencyFormSchema,
|
||||
EditCurrencyFormSchema,
|
||||
} from './CurrencyForm.schema';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { compose, transformToForm } from 'utils';
|
||||
|
||||
const defaultInitialValues = {
|
||||
currency_name: '',
|
||||
currency_code: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Currency form.
|
||||
*/
|
||||
function CurrencyForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const {
|
||||
createCurrencyMutate,
|
||||
editCurrencyMutate,
|
||||
dialogName,
|
||||
currency,
|
||||
isEditMode,
|
||||
} = useCurrencyFormContext();
|
||||
|
||||
// Form validation schema in create and edit mode.
|
||||
const validationSchema = isEditMode
|
||||
? EditCurrencyFormSchema
|
||||
: CreateCurrencyFormSchema;
|
||||
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...defaultInitialValues,
|
||||
// ...(isEditMode && pick(currency, Object.keys(defaultInitialValues))),
|
||||
...transformToForm(currency, defaultInitialValues),
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
setSubmitting(true);
|
||||
|
||||
// Handle close the dialog after success response.
|
||||
const afterSubmit = () => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
const onSuccess = ({ response }) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: isEditMode
|
||||
? 'the_currency_has_been_edited_successfully'
|
||||
: 'the_currency_has_been_created_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
afterSubmit(response);
|
||||
};
|
||||
|
||||
// Handle the response error.
|
||||
const onError = (errors) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
if (isEditMode) {
|
||||
editCurrencyMutate([currency.id, values]).then(onSuccess).catch(onError);
|
||||
} else {
|
||||
createCurrencyMutate(values).then(onSuccess).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={validationSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<CurrencyFormContent />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(CurrencyForm);
|
||||
@@ -0,0 +1,16 @@
|
||||
import * as Yup from 'yup';
|
||||
import { formatMessage } from 'services/intl';
|
||||
import { DATATYPES_LENGTH } from 'common/dataTypes';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
currency_name: Yup.string()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'currency_name_' })),
|
||||
currency_code: Yup.string()
|
||||
.max(4)
|
||||
.required()
|
||||
.label(formatMessage({ id: 'currency_code_' })),
|
||||
});
|
||||
|
||||
export const CreateCurrencyFormSchema = Schema;
|
||||
export const EditCurrencyFormSchema = Schema;
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
|
||||
import CurrencyFormFields from './CurrencyFormFields';
|
||||
import CurrencyFormFooter from './CurrencyFormFooter';
|
||||
|
||||
export default function CurrencyFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<CurrencyFormFields />
|
||||
<CurrencyFormFooter />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import { CurrencyFormProvider } from './CurrencyFormProvider';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import CurrencyForm from './CurrencyForm';
|
||||
import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import 'style/pages/Currency/CurrencyFormDialog.scss';
|
||||
|
||||
function CurrencyFormDialogContent({
|
||||
// #ownProp
|
||||
action,
|
||||
currency,
|
||||
dialogName,
|
||||
}) {
|
||||
return (
|
||||
<CurrencyFormProvider
|
||||
isEditMode={action}
|
||||
currency={currency}
|
||||
dialogName={dialogName}
|
||||
>
|
||||
<CurrencyForm />
|
||||
</CurrencyFormProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withCurrencyDetail)(CurrencyFormDialogContent);
|
||||
@@ -0,0 +1,62 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import { Form, useFormikContext, FastField } from 'formik';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick } from 'lodash';
|
||||
import {
|
||||
ErrorMessage,
|
||||
AppToaster,
|
||||
FieldRequiredHint,
|
||||
DialogContent,
|
||||
} from 'components';
|
||||
|
||||
import { useAutofocus } from 'hooks';
|
||||
import { inputIntent } from 'utils';
|
||||
|
||||
export default function CurrencyFormFields() {
|
||||
const currencyNameFieldRef = useAutofocus();
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
{/* ----------- Currency name ----------- */}
|
||||
<FastField name={'currency_name'}>
|
||||
{({ field, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'currency_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--currency-name'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="currency_name" />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
inputRef={(ref) => (currencyNameFieldRef.current = ref)}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/* ----------- Currency Code ----------- */}
|
||||
<FastField name={'currency_code'}>
|
||||
{({ field, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'currency_code'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={'form-group--currency-code'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="currency_code" />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { useCurrencyFormContext } from './CurrencyFormProvider';
|
||||
|
||||
import { Button, Classes, Intent } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function CurrencyFormFooter({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
const { dialogName, isEditMode } = useCurrencyFormContext();
|
||||
|
||||
const handleClose = () => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
<Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
|
||||
{!isEditMode ? <T id={'submit'} /> : <T id={'edit'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(CurrencyFormFooter);
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { createContext } from 'react';
|
||||
import { useCurrencies, useEditCurrency, useCreateCurrency } from 'hooks/query';
|
||||
import { DialogContent } from 'components';
|
||||
|
||||
const CurrencyFormContext = createContext();
|
||||
|
||||
/**
|
||||
* Currency Form page provider.
|
||||
*/
|
||||
|
||||
function CurrencyFormProvider({ isEditMode, currency, dialogName, ...props }) {
|
||||
// Create and edit item currency mutations.
|
||||
const { mutateAsync: createCurrencyMutate } = useCreateCurrency();
|
||||
const { mutateAsync: editCurrencyMutate } = useEditCurrency();
|
||||
|
||||
// fetch Currencies list.
|
||||
const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
|
||||
|
||||
// Provider state.
|
||||
const provider = {
|
||||
createCurrencyMutate,
|
||||
editCurrencyMutate,
|
||||
dialogName,
|
||||
currency,
|
||||
isCurrenciesLoading,
|
||||
isEditMode,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={isCurrenciesLoading} name={'currency-form'}>
|
||||
<CurrencyFormContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useCurrencyFormContext = () => React.useContext(CurrencyFormContext);
|
||||
|
||||
export { CurrencyFormProvider, useCurrencyFormContext };
|
||||
@@ -5,7 +5,7 @@ import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const CurrencyFormDialogContent = lazy(() =>
|
||||
import('./CurencyFormDialogContent'),
|
||||
import('./CurrencyFormDialogContent'),
|
||||
);
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user