From ad66f35162b89b81f92abcf138a5a7ac912572ba Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Mon, 2 Nov 2020 14:50:00 +0200 Subject: [PATCH 1/5] Fix : Exchange Rate --- client/src/components/DialogsContainer.js | 3 +- client/src/components/MoneyExchangeRate.js | 5 + client/src/components/index.js | 2 + .../Dialogs/ExchangeRateDialog.container.js | 58 ++++----- .../Dialogs/ExchangeRateFormDialog.js | 48 ++++++++ ...og.js => ExchangeRateFormDialogContent.js} | 116 ++++++++---------- .../ExchangeRates/ExchangeRateTable.js | 25 ++-- client/src/lang/en/index.js | 2 +- client/src/utils.js | 103 +++++++++------- 9 files changed, 213 insertions(+), 149 deletions(-) create mode 100644 client/src/components/MoneyExchangeRate.js create mode 100644 client/src/containers/Dialogs/ExchangeRateFormDialog.js rename client/src/containers/Dialogs/{ExchangeRateDialog.js => ExchangeRateFormDialogContent.js} (78%) diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js index 897653a12..90693c190 100644 --- a/client/src/components/DialogsContainer.js +++ b/client/src/components/DialogsContainer.js @@ -6,7 +6,7 @@ import UserFormDialog from 'containers/Dialogs/UserFormDialog'; // import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog'; import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog'; // import InviteUserDialog from 'containers/Dialogs/InviteUserDialog'; -// import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog'; +import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog'; import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog'; import BillNumberDialog from 'containers/Dialogs/BillNumberDialog'; import PaymentNumberDialog from 'containers/Dialogs/PaymentNumberDialog'; @@ -25,6 +25,7 @@ export default function DialogsContainer() { + ); } diff --git a/client/src/components/MoneyExchangeRate.js b/client/src/components/MoneyExchangeRate.js new file mode 100644 index 000000000..488a696ef --- /dev/null +++ b/client/src/components/MoneyExchangeRate.js @@ -0,0 +1,5 @@ +import React from 'react'; +import { formattedExchangeRate } from 'utils'; +export default function MoneyExchangeRate({ amount, currency }) { + return {formattedExchangeRate(amount, currency)}; +} diff --git a/client/src/components/index.js b/client/src/components/index.js index eec72812c..fd027601e 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -29,6 +29,7 @@ import CategoriesSelectList from './CategoriesSelectList'; import Row from './Grid/Row'; import Col from './Grid/Col'; import CloudLoadingIndicator from './CloudLoadingIndicator'; +import MoneyExchangeRate from './MoneyExchangeRate'; const Hint = FieldHint; @@ -65,4 +66,5 @@ export { Col, Row, CloudLoadingIndicator, + MoneyExchangeRate, }; diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.container.js b/client/src/containers/Dialogs/ExchangeRateDialog.container.js index 8c9373994..d107d266b 100644 --- a/client/src/containers/Dialogs/ExchangeRateDialog.container.js +++ b/client/src/containers/Dialogs/ExchangeRateDialog.container.js @@ -1,33 +1,33 @@ -import { connect } from 'react-redux'; -import { compose } from 'utils'; +// import { connect } from 'react-redux'; +// import { compose } from 'utils'; -import withDialogActions from 'containers/Dialog/withDialogActions'; -import withDialogRedux from 'components/DialogReduxConnect'; -import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail'; -import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions'; -import withExchangeRates from 'containers/ExchangeRates/withExchangeRates'; -import withCurrencies from 'containers/Currencies/withCurrencies'; +// import withDialogActions from 'containers/Dialog/withDialogActions'; +// import withDialogRedux from 'components/DialogReduxConnect'; +// import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail'; +// import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions'; +// import withExchangeRates from 'containers/ExchangeRates/withExchangeRates'; +// import withCurrencies from 'containers/Currencies/withCurrencies'; -const mapStateToProps = (state, props) => ({ - dialogName: 'exchangeRate-form', - exchangeRateId: - props.payload.action === 'edit' && props.payload.id - ? props.payload.id - : null, -}); +// const mapStateToProps = (state, props) => ({ +// dialogName: 'exchangeRate-form', +// exchangeRateId: +// props.payload.action === 'edit' && props.payload.id +// ? props.payload.id +// : null, +// }); -const withExchangeRateDialog = connect(mapStateToProps); +// const withExchangeRateDialog = connect(mapStateToProps); -export default compose( - withDialogRedux(null, 'exchangeRate-form'), - withExchangeRateDialog, - withCurrencies(({ currenciesList }) => ({ - currenciesList, - })), - withExchangeRatesActions, - withExchangeRateDetail, - withExchangeRates(({ exchangeRatesList }) => ({ - exchangeRatesList, - })), - withDialogActions, -); +// export default compose( +// withDialogRedux(null, 'exchangeRate-form'), +// withExchangeRateDialog, +// withCurrencies(({ currenciesList }) => ({ +// currenciesList, +// })), +// withExchangeRatesActions, +// withExchangeRateDetail, +// withExchangeRates(({ exchangeRatesList }) => ({ +// exchangeRatesList, +// })), +// withDialogActions, +// ); diff --git a/client/src/containers/Dialogs/ExchangeRateFormDialog.js b/client/src/containers/Dialogs/ExchangeRateFormDialog.js new file mode 100644 index 000000000..044447c54 --- /dev/null +++ b/client/src/containers/Dialogs/ExchangeRateFormDialog.js @@ -0,0 +1,48 @@ +import React, { lazy } from 'react'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { + Dialog, + DialogSuspense, +} from 'components'; +import withDialogRedux from 'components/DialogReduxConnect'; +import { compose } from 'utils'; + +const ExchangeRateFormDialogContent = lazy(() => + import('./ExchangeRateFormDialogContent'), +); + +/** + * Exchange rate form dialog. + */ +function ExchangeRateFormDialog({ + dialogName, + payload = { action: '', id: null }, + isOpen, +}) { + return ( + + ) : ( + + ) + } + className={'dialog--exchangeRate-form'} + isOpen={isOpen} + autoFocus={true} + canEscapeKeyClose={true} + > + + + + + ); +} + +export default compose(withDialogRedux())(ExchangeRateFormDialog); diff --git a/client/src/containers/Dialogs/ExchangeRateDialog.js b/client/src/containers/Dialogs/ExchangeRateFormDialogContent.js similarity index 78% rename from client/src/containers/Dialogs/ExchangeRateDialog.js rename to client/src/containers/Dialogs/ExchangeRateFormDialogContent.js index 1f1e77f9c..0b9812786 100644 --- a/client/src/containers/Dialogs/ExchangeRateDialog.js +++ b/client/src/containers/Dialogs/ExchangeRateFormDialogContent.js @@ -10,25 +10,32 @@ import { } from '@blueprintjs/core'; import { pick } from 'lodash'; import * as Yup from 'yup'; -import { FormattedMessage as T, useIntl } from 'react-intl'; 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, Dialog, ErrorMessage, ListSelect } from 'components'; +import { + AppToaster, + Dialog, + ErrorMessage, + ListSelect, + DialogContent, + FieldRequiredHint, +} from 'components'; import classNames from 'classnames'; -import withExchangeRatesDialog from './ExchangeRateDialog.container'; +import withExchangeRateDetail from 'containers/ExchangeRates/withExchangeRateDetail'; +import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions'; -/** - * Exchange rate dialog. - */ -function ExchangeRateDialog({ - dialogName, - payload = {}, - isOpen, +import withCurrencies from 'containers/Currencies/withCurrencies'; +import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions'; +import withDialogActions from 'containers/Dialog/withDialogActions'; - // #withDialog +import { compose } from 'utils'; + +function ExchangeRateFormDialogContent({ + // #withDialogActions closeDialog, // #withCurrencies @@ -39,12 +46,25 @@ function ExchangeRateDialog({ // #withExchangeRatesActions requestSubmitExchangeRate, - requestFetchExchangeRates, requestEditExchangeRate, + + // #wihtCurrenciesActions + requestFetchCurrencies, + + // #ownProp + action, + exchangeRateId, + 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() @@ -66,12 +86,6 @@ function ExchangeRateDialog({ [], ); - const fetchExchangeRatesDialog = useQuery( - 'exchange-rates-dialog', - () => requestFetchExchangeRates(), - { manual: true }, - ); - const { values, touched, @@ -85,12 +99,12 @@ function ExchangeRateDialog({ enableReinitialize: true, validationSchema, initialValues: { - ...(payload.action === 'edit' && - pick(exchangeRate, Object.keys(initialValues))), + ...initialValues, + ...(action === 'edit' && pick(exchangeRate, Object.keys(initialValues))), }, onSubmit: (values, { setSubmitting, setErrors }) => { - if (payload.action === 'edit') { - requestEditExchangeRate(payload.id, values) + if (action === 'edit') { + requestEditExchangeRate(exchangeRateId, values) .then((response) => { closeDialog(dialogName); AppToaster.show({ @@ -100,7 +114,7 @@ function ExchangeRateDialog({ intent: Intent.SUCCESS, }); setSubmitting(false); - queryCache.invalidateQueries('exchange-rates-dialog'); + queryCache.invalidateQueries('exchange-rates-table'); }) .catch((error) => { setSubmitting(false); @@ -134,20 +148,10 @@ function ExchangeRateDialog({ }, }); - const requiredSpan = useMemo(() => *, []); - const handleClose = useCallback(() => { closeDialog(dialogName); - }, [dialogName, closeDialog]); - - const onDialogClosed = useCallback(() => { resetForm(); - closeDialog(dialogName); - }, [closeDialog, dialogName, resetForm]); - - const onDialogOpening = useCallback(() => { - fetchExchangeRatesDialog.refetch(); - }, [fetchExchangeRatesDialog]); + }, [dialogName, closeDialog]); const handleDateChange = useCallback( (date_filed) => (date) => { @@ -197,31 +201,13 @@ function ExchangeRateDialog({ }, []); return ( - - ) : ( - - ) - } - className={classNames( - { 'dialog--loading': fetchExchangeRatesDialog.isFetching }, - 'dialog--exchangeRate-form', - )} - isOpen={isOpen} - onClosed={onDialogClosed} - onOpening={onDialogOpening} - isLoading={fetchExchangeRatesDialog.isFetching} - onClose={handleClose} - > +
} inline={true} - labelInfo={requiredSpan} + labelInfo={FieldRequiredHint} intent={errors.date && touched.date && Intent.DANGER} helperText={} > @@ -231,13 +217,13 @@ function ExchangeRateDialog({ value={tansformDateValue(values.date)} onChange={handleDateChange('date')} popoverProps={{ position: Position.BOTTOM, minimal: true }} - disabled={payload.action === 'edit'} + disabled={action === 'edit'} /> } - labelInfo={requiredSpan} + labelInfo={FieldRequiredHint} intent={ errors.exchange_rate && touched.exchange_rate && Intent.DANGER } @@ -257,7 +243,7 @@ function ExchangeRateDialog({ } - labelInfo={requiredSpan} + labelInfo={FieldRequiredHint} className={classNames('form-group--select-list', Classes.FILL)} inline={true} intent={ @@ -291,17 +277,19 @@ function ExchangeRateDialog({ type="submit" disabled={isSubmitting} > - {payload.action === 'edit' ? ( - - ) : ( - - )} + {action === 'edit' ? : }
- + ); } -export default withExchangeRatesDialog(ExchangeRateDialog); +export default compose( + withDialogActions, + withExchangeRatesActions, + withExchangeRateDetail, + withCurrenciesActions, + withCurrencies(({ currenciesList }) => ({ currenciesList })), +)(ExchangeRateFormDialogContent); diff --git a/client/src/containers/ExchangeRates/ExchangeRateTable.js b/client/src/containers/ExchangeRates/ExchangeRateTable.js index 5badc2075..fb363d06b 100644 --- a/client/src/containers/ExchangeRates/ExchangeRateTable.js +++ b/client/src/containers/ExchangeRates/ExchangeRateTable.js @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState, useEffect } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { Button, Popover, @@ -10,7 +10,7 @@ import { import { FormattedMessage as T, useIntl } from 'react-intl'; import moment from 'moment'; -import { DataTable, Money, Icon } from 'components'; +import { DataTable, Icon, MoneyExchangeRate } from 'components'; import LoadingIndicator from 'components/LoadingIndicator'; import withDialogActions from 'containers/Dialog/withDialogActions'; @@ -31,7 +31,6 @@ function ExchangeRateTable({ loading, onFetchData, onDeleteExchangeRate, - onEditExchangeRate, onSelectedRowsChange, }) { const [initialMount, setInitialMount] = useState(false); @@ -52,20 +51,25 @@ function ExchangeRateTable({ (ExchangeRate) => ( } + icon={} + text={formatMessage({ id: 'edit_exchange_rate' })} onClick={handelEditExchangeRate(ExchangeRate)} /> } + text={formatMessage({ id: 'delete_exchange_rate' })} intent={Intent.DANGER} onClick={handleDeleteExchangeRate(ExchangeRate)} icon={} /> ), - [handelEditExchangeRate, handleDeleteExchangeRate], + [handelEditExchangeRate, handleDeleteExchangeRate, formatMessage], ); + const rowContextMenu = (cell) => { + return actionMenuList(cell.row.original); + }; + const columns = useMemo( () => [ { @@ -84,7 +88,9 @@ function ExchangeRateTable({ { id: 'exchange_rate', Header: formatMessage({ id: 'exchange_rate' }), - accessor: (r) => , + accessor: (r) => ( + + ), className: 'exchange_rate', width: 150, }, @@ -94,14 +100,13 @@ function ExchangeRateTable({ Cell: ({ cell }) => (