mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
Fix: CurrencySelectList
This commit is contained in:
elforjani3
60
client/src/components/CurrencySelectList.js
Normal file
60
client/src/components/CurrencySelectList.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { ListSelect } from 'components';
|
||||
import { MenuItem } from '@blueprintjs/core';
|
||||
|
||||
export default function CurrencySelectList({
|
||||
currenciesList,
|
||||
selectedCurrencyCode,
|
||||
defaultSelectText = <T id={'select_currency_code'} />,
|
||||
onCurrencySelected,
|
||||
...restProps
|
||||
}) {
|
||||
const [selectedCurrency, setSelectedCurrency] = useState(null);
|
||||
|
||||
// Filters currencies list.
|
||||
const filterCurrencies = (query, currency, _index, exactMatch) => {
|
||||
const normalizedTitle = currency.currency_code.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return (
|
||||
`${currency.currency_code} ${normalizedTitle}`.indexOf(
|
||||
normalizedQuery,
|
||||
) >= 0
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onCurrencySelect = useCallback((currency) => {
|
||||
setSelectedCurrency({ ...currency });
|
||||
onCurrencySelected && onCurrencySelected(currency);
|
||||
});
|
||||
|
||||
const currencyCodeRenderer = useCallback((CurrencyCode, { handleClick }) => {
|
||||
return (
|
||||
<MenuItem
|
||||
key={CurrencyCode.id}
|
||||
text={CurrencyCode.currency_code}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ListSelect
|
||||
items={currenciesList}
|
||||
selectedItemProp={'currency_code'}
|
||||
selectedItem={selectedCurrencyCode}
|
||||
labelProp={'currency_code'}
|
||||
defaultText={defaultSelectText}
|
||||
onItemSelect={onCurrencySelect}
|
||||
itemPredicate={filterCurrencies}
|
||||
itemRenderer={currencyCodeRenderer}
|
||||
popoverProps={{ minimal: true }}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -31,6 +31,8 @@ import Col from './Grid/Col';
|
||||
import CloudLoadingIndicator from './CloudLoadingIndicator';
|
||||
import MoneyExchangeRate from './MoneyExchangeRate';
|
||||
import ContactSelecetList from './ContactSelecetList';
|
||||
import CurrencySelectList from './CurrencySelectList'
|
||||
|
||||
|
||||
const Hint = FieldHint;
|
||||
|
||||
@@ -69,4 +71,5 @@ export {
|
||||
CloudLoadingIndicator,
|
||||
MoneyExchangeRate,
|
||||
ContactSelecetList ,
|
||||
CurrencySelectList
|
||||
};
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Position,
|
||||
MenuItem,
|
||||
} 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,
|
||||
Dialog,
|
||||
ErrorMessage,
|
||||
ListSelect,
|
||||
DialogContent,
|
||||
FieldRequiredHint,
|
||||
CurrencySelectList,
|
||||
} from 'components';
|
||||
import classNames from 'classnames';
|
||||
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';
|
||||
|
||||
function ExchangeRateFormDialogContent({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #withCurrencies
|
||||
currenciesList,
|
||||
|
||||
//#WithExchangeRateDetail
|
||||
exchangeRate,
|
||||
|
||||
// #withExchangeRatesActions
|
||||
requestSubmitExchangeRate,
|
||||
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()
|
||||
.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_successfully_edited',
|
||||
}),
|
||||
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_successfully_created',
|
||||
}),
|
||||
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 (
|
||||
<DialogContent isLoading={fetchCurrencies.isFetching}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={<T id={'date'} />}
|
||||
inline={true}
|
||||
labelInfo={FieldRequiredHint}
|
||||
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(
|
||||
withDialogActions,
|
||||
withExchangeRatesActions,
|
||||
withExchangeRateDetail,
|
||||
withCurrenciesActions,
|
||||
withCurrencies(({ currenciesList }) => ({ currenciesList })),
|
||||
)(ExchangeRateFormDialogContent);
|
||||
@@ -14,7 +14,7 @@ import moment from 'moment';
|
||||
import { momentFormatter, compose, tansformDateValue } from 'utils';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
ListSelect,
|
||||
CurrencySelectList,
|
||||
ContactSelecetList,
|
||||
ErrorMessage,
|
||||
AccountsSelectList,
|
||||
@@ -42,28 +42,6 @@ function ExpenseFormHeader({
|
||||
[setFieldValue],
|
||||
);
|
||||
|
||||
const currencyCodeRenderer = useCallback((item, { handleClick }) => {
|
||||
return (
|
||||
<MenuItem key={item.id} text={item.currency_code} onClick={handleClick} />
|
||||
);
|
||||
}, []);
|
||||
|
||||
// Filters Currency code.
|
||||
const filterCurrencyCode = (query, currency, _index, exactMatch) => {
|
||||
const normalizedTitle = currency.currency_code.toLowerCase();
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
|
||||
if (exactMatch) {
|
||||
return normalizedTitle === normalizedQuery;
|
||||
} else {
|
||||
return (
|
||||
`${currency.currency_code} ${normalizedTitle}`.indexOf(
|
||||
normalizedQuery,
|
||||
) >= 0
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Handles change account.
|
||||
const onChangeAccount = useCallback(
|
||||
(account) => {
|
||||
@@ -91,17 +69,6 @@ function ExpenseFormHeader({
|
||||
[accountsList],
|
||||
);
|
||||
|
||||
const CustomerRenderer = useCallback(
|
||||
(cutomer, { handleClick }) => (
|
||||
<MenuItem
|
||||
key={cutomer.id}
|
||||
text={cutomer.display_name}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
),
|
||||
[],
|
||||
);
|
||||
|
||||
// handle change customer
|
||||
const onChangeCustomer = useCallback(
|
||||
(filedName) => {
|
||||
@@ -205,17 +172,10 @@ function ExpenseFormHeader({
|
||||
<ErrorMessage name="currency_code" {...{ errors, touched }} />
|
||||
}
|
||||
>
|
||||
<ListSelect
|
||||
items={currenciesList}
|
||||
noResults={<MenuItem disabled={true} text="No results." />}
|
||||
itemRenderer={currencyCodeRenderer}
|
||||
itemPredicate={filterCurrencyCode}
|
||||
popoverProps={{ minimal: true }}
|
||||
onItemSelect={onItemsSelect('currency_code')}
|
||||
selectedItem={values.currency_code}
|
||||
selectedItemProp={'currency_code'}
|
||||
defaultText={<T id={'select_currency'} />}
|
||||
labelProp={'currency_code'}
|
||||
<CurrencySelectList
|
||||
currenciesList={currenciesList}
|
||||
selectedCurrencyCode={values.currency_code}
|
||||
onCurrencySelected={onItemsSelect('currency_code')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
Reference in New Issue
Block a user