QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 14:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: exchange rate dialog.

Browse Source
This commit is contained in:
elforjani3
2021-02-18 17:57:30 +02:00
parent 8f680e2068
commit 5171cf7ef5
9 changed files with 337 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.js Normal file
View File

@@ -0,0 +1,114 @@
import React, { useMemo } from 'react';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import moment from 'moment';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { AppToaster } from 'components';
import {
CreateExchangeRateFormSchema,
EditExchangeRateFormSchema,
} from './ExchangeRateForm.schema';
import ExchangeRateFormContent from './ExchangeRateFormContent';
import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
const defaultInitialValues = {
exchange_rate: '',
currency_code: '',
date: moment(new Date()).format('YYYY-MM-DD'),
};
/**
* Exchange rate form.
*/
function ExchangeRateForm({
// #withDialogActions
closeDialog,
}) {
const { formatMessage } = useIntl();
const {
createExchangeRateMutate,
editExchangeRateMutate,
isNewMode,
dialogName,
exchangeRate,
} = useExchangeRateFromContext();
// Form validation schema in create and edit mode.
const validationSchema = isNewMode
? CreateExchangeRateFormSchema
: EditExchangeRateFormSchema;
const initialValues = useMemo(
() => ({
...defaultInitialValues,
...transformToForm(exchangeRate, defaultInitialValues),
}),
[],
);
// Transformers response errors.
const transformErrors = (errors, { setErrors }) => {
if (
errors.find((error) => error.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
) {
setErrors({
exchange_rate: formatMessage({
id: 'there_is_exchange_rate_in_this_date_with_the_same_currency',
}),
});
}
};
// Handle 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: !isNewMode
? 'the_exchange_rate_has_been_edited_successfully'
: 'the_exchange_rate_has_been_created_successfully',
}),
intent: Intent.SUCCESS,
});
afterSubmit(response);
};
// Handle the response error.
const onError = (error) => {
const {
response: {
data: { errors },
},
} = error;
transformErrors(errors, { setErrors });
setSubmitting(false);
};
if (isNewMode) {
createExchangeRateMutate(values).then(onSuccess).catch(onError);
} else {
editExchangeRateMutate([exchangeRate.id, values])
.then(onSuccess)
.catch(onError);
}
};
return (
<Formik
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<ExchangeRateFormContent />
</Formik>
);
}
export default compose(withDialogActions)(ExchangeRateForm);

18
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.schema.js Normal file
View File

@@ -0,0 +1,18 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
exchange_rate: Yup.number()
.required()
.label(formatMessage({ id: 'exchange_rate_' })),
currency_code: Yup.string()
.max(3)
.required(formatMessage({ id: 'currency_code_' })),
date: Yup.date()
.required()
.label(formatMessage({ id: 'date' })),
});
export const CreateExchangeRateFormSchema = Schema;
export const EditExchangeRateFormSchema = Schema;

13
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormContent.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { Form } from 'formik';
import ExchangeRateFormFields from './ExchangeRateFormFields';
import ExchangeRateFormFooter from './ExchangeRateFormFooter';
export default function ExchangeRateFormContent() {
return (
<Form>
<ExchangeRateFormFields />
<ExchangeRateFormFooter />
</Form>
);
}

258
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormDialogContent.js
View File

@@ -1,35 +1,9 @@
import React, { useState, useMemo, useCallback } from 'react'; import React from 'react';
import {
Button, import ExchangeRateForm from './ExchangeRateForm';
Classes, import { ExchangeRateFormProvider } from './ExchangeRateFormProvider';
FormGroup,
InputGroup,
Intent,
Position,
} from '@blueprintjs/core';
import { pick } from 'lodash';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useQuery, queryCache } from 'react-query';
import moment from 'moment';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { momentFormatter, tansformDateValue } from 'utils';
import {
AppToaster,
ErrorMessage,
DialogContent,
FieldRequiredHint,
CurrencySelectList,
} from 'components';
import classNames from 'classnames';
import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail'; import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import withCurrencies from 'containers/Currencies/withCurrencies';
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils'; import { compose } from 'utils';
import 'style/pages/ExchangeRate/ExchangeRateDialog.scss'; import 'style/pages/ExchangeRate/ExchangeRateDialog.scss';
@@ -38,226 +12,20 @@ import 'style/pages/ExchangeRate/ExchangeRateDialog.scss';
* Exchange rate form content. * Exchange rate form content.
*/ */
function ExchangeRateFormDialogContent({ function ExchangeRateFormDialogContent({
// #withDialogActions
closeDialog,
// #withCurrencies
currenciesList,
//#WithExchangeRateDetail
exchangeRate,
// #withExchangeRatesActions
requestSubmitExchangeRate,
requestEditExchangeRate,
// #wihtCurrenciesActions
requestFetchCurrencies,
// #ownProp // #ownProp
action, action,
exchangeRateId, exchangeRateId,
dialogName, dialogName,
}) { }) {
const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const fetchCurrencies = useQuery(
'currencies',
() => requestFetchCurrencies(),
{ enabled: true },
);
const validationSchema = Yup.object().shape({
exchange_rate: Yup.number()
.required()
.label(formatMessage({ id: 'exchange_rate_' })),
currency_code: Yup.string()
.max(3)
.required(formatMessage({ id: 'currency_code_' })),
date: Yup.date()
.required()
.label(formatMessage({ id: 'date' })),
});
const initialValues = useMemo(
() => ({
exchange_rate: '',
currency_code: '',
date: moment(new Date()).format('YYYY-MM-DD'),
}),
[],
);
const {
values,
touched,
errors,
isSubmitting,
handleSubmit,
getFieldProps,
setFieldValue,
resetForm,
} = useFormik({
enableReinitialize: true,
validationSchema,
initialValues: {
...initialValues,
...(action === 'edit' && pick(exchangeRate, Object.keys(initialValues))),
},
onSubmit: (values, { setSubmitting, setErrors }) => {
if (action === 'edit') {
requestEditExchangeRate(exchangeRateId, values)
.then((response) => {
closeDialog(dialogName);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rate_has_been_edited_successfully',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.invalidateQueries('exchange-rates-table');
})
.catch((error) => {
setSubmitting(false);
});
} else {
requestSubmitExchangeRate(values)
.then((response) => {
closeDialog(dialogName);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rate_has_been_created_successfully',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.invalidateQueries('exchange-rates-table');
})
.catch((errors) => {
if (
errors.find((e) => e.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
) {
setErrors({
exchange_rate: formatMessage({
id:
'there_is_exchange_rate_in_this_date_with_the_same_currency',
}),
});
}
});
}
},
});
const handleClose = useCallback(() => {
closeDialog(dialogName);
resetForm();
}, [dialogName, closeDialog]);
const handleDateChange = useCallback(
(date_filed) => (date) => {
const formatted = moment(date).format('YYYY-MM-DD');
setFieldValue(date_filed, formatted);
},
[setFieldValue],
);
const onItemsSelect = useCallback(
(filedName) => {
return (filed) => {
setSelectedItems({
...selectedItems,
[filedName]: filed,
});
setFieldValue(filedName, filed.currency_code);
};
},
[setFieldValue, selectedItems],
);
return ( return (
<DialogContent isLoading={fetchCurrencies.isFetching}> <ExchangeRateFormProvider
<form onSubmit={handleSubmit}> dialogName={dialogName}
<div className={Classes.DIALOG_BODY}> exchangeRate={exchangeRateId}
<FormGroup action={action}
label={<T id={'date'} />} >
inline={true} <ExchangeRateForm />
labelInfo={FieldRequiredHint} </ExchangeRateFormProvider>
intent={errors.date && touched.date && Intent.DANGER}
helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
>
<DateInput
fill={true}
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.date)}
onChange={handleDateChange('date')}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
disabled={action === 'edit'}
/>
</FormGroup>
<FormGroup
label={<T id={'currency_code'} />}
labelInfo={FieldRequiredHint}
className={classNames('form-group--select-list', Classes.FILL)}
inline={true}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
}
helperText={
<ErrorMessage name="currency_code" {...{ errors, touched }} />
}
>
<CurrencySelectList
currenciesList={currenciesList}
selectedCurrencyCode={values.currency_code}
onCurrencySelected={onItemsSelect('currency_code')}
disabled={action === 'edit'}
/>
</FormGroup>
<FormGroup
label={<T id={'exchange_rate'} />}
labelInfo={FieldRequiredHint}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
helperText={
<ErrorMessage name="exchange_rate" {...{ errors, touched }} />
}
inline={true}
>
<InputGroup
medium={true}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
{...getFieldProps('exchange_rate')}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'close'} />
</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( export default compose(withExchangeRateDetail)(ExchangeRateFormDialogContent);
withDialogActions,
withExchangeRatesActions,
withExchangeRateDetail,
withCurrenciesActions,
withCurrencies(({ currenciesList }) => ({ currenciesList })),
)(ExchangeRateFormDialogContent);

88
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFields.js Normal file
View File

@@ -0,0 +1,88 @@
import React from 'react';
import { Classes, FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { FastField } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import {
momentFormatter,
tansformDateValue,
handleDateChange,
inputIntent,
} from 'utils';
import {
ErrorMessage,
FieldRequiredHint,
CurrencySelectList,
} from 'components';
import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
import classNames from 'classnames';
export default function ExchangeRateFormFields() {
const { action, currencies } = useExchangeRateFromContext();
return (
<div className={Classes.DIALOG_BODY}>
{/* ----------- Date ----------- */}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
labelInfo={FieldRequiredHint}
className={classNames('form-group--select-list', Classes.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
inline={true}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
disabled={action === 'edit'}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Currency Code ----------- */}
<FastField name={'currency_code'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'currency_code'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--currency', Classes.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="currency_code" />}
inline={true}
>
<CurrencySelectList
currenciesList={currencies}
selectedCurrencyCode={value}
onCurrencySelected={({ currency_code }) => {
form.setFieldValue('currency_code', currency_code);
}}
disabled={action === 'edit'}
/>
</FormGroup>
)}
</FastField>
{/*------------ Exchange Rate -----------*/}
<FastField name={'exchange_rate'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'exchange_rate'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="exchange_rate" />}
inline={true}
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
</div>
);
}

35
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFooter.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Button, Classes, Intent } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function ExchangeRateFormFooter({
// #withDialogActions
closeDialog,
}) {
const { isSubmitting } = useFormikContext();
const { dialogName, action } = useExchangeRateFromContext();
const handleClose = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(ExchangeRateFormFooter);

52
client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormProvider.js Normal file
View File

@@ -0,0 +1,52 @@
import React, { createContext, useContext } from 'react';
import {
useCreateExchangeRate,
useEdiExchangeRate,
useCurrencies,
useExchangeRates,
} from 'hooks/query';
import { DialogContent } from 'components';
const ExchangeRateFormContext = createContext();
/**
* Exchange rate Form page provider.
*/
function ExchangeRateFormProvider({
exchangeRate,
action,
dialogName,
...props
}) {
// Create and edit exchange rate mutations.
const { mutateAsync: createExchangeRateMutate } = useCreateExchangeRate();
const { mutateAsync: editExchangeRateMutate } = useEdiExchangeRate();
// Load Currencies list.
const { data: currencies, isFetching: isCurrenciesLoading } = useCurrencies();
const { isFetching: isExchangeRatesLoading } = useExchangeRates();
const isNewMode = !exchangeRate;
// Provider state.
const provider = {
createExchangeRateMutate,
editExchangeRateMutate,
dialogName,
exchangeRate,
action,
currencies,
isExchangeRatesLoading,
isNewMode,
};
return (
<DialogContent isLoading={isCurrenciesLoading} name={'exchange-rate-form'}>
<ExchangeRateFormContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useExchangeRateFromContext = () => useContext(ExchangeRateFormContext);
export { ExchangeRateFormProvider, useExchangeRateFromContext };

4
client/src/containers/Dialogs/ExchangeRateFormDialog/index.js
View File

@@ -16,7 +16,7 @@ const ExchangeRateFormDialogContent = lazy(() =>
*/ */
function ExchangeRateFormDialog({ function ExchangeRateFormDialog({
dialogName, dialogName,
payload = { action: '', id: null }, payload = { action: '', id: null , exchangeRate:"" },
isOpen, isOpen,
}) { }) {
return ( return (
@@ -38,7 +38,7 @@ function ExchangeRateFormDialog({
<ExchangeRateFormDialogContent <ExchangeRateFormDialogContent
dialogName={dialogName} dialogName={dialogName}
action={payload.action} action={payload.action}
exchangeRateId={payload.id} exchangeRateId={payload.exchangeRate}
/> />
</DialogSuspense> </DialogSuspense>
</Dialog> </Dialog>

3
client/src/hooks/query/index.js
View File

@@ -17,4 +17,5 @@ export * from './receipts';
export * from './paymentReceives'; export * from './paymentReceives';
export * from './paymentMades'; export * from './paymentMades';
export * from './settings'; export * from './settings';
export * from './users'; export * from './users';
export * from './exchangeRates';