diff --git a/client/src/containers/Accounting/MakeJournalEntriesHeader.js b/client/src/containers/Accounting/MakeJournalEntriesHeader.js index 48b8d8894..a2bec082e 100644 --- a/client/src/containers/Accounting/MakeJournalEntriesHeader.js +++ b/client/src/containers/Accounting/MakeJournalEntriesHeader.js @@ -26,7 +26,6 @@ import { import withDialogActions from 'containers/Dialog/withDialogActions'; import withCurrencies from 'containers/Currencies/withCurrencies'; -import withSettings from 'containers/Settings/withSettings'; import { compose } from 'utils'; @@ -41,9 +40,6 @@ function MakeJournalEntriesHeader({ manualJournal, onJournalNumberChanged, - // #withSettings - baseCurrency, - // #withCurrencies currenciesList, @@ -225,7 +221,7 @@ function MakeJournalEntriesHeader({ currenciesList={currenciesList} selectedCurrencyCode={values.currency_code} onCurrencySelected={onItemsSelect('currency_code')} - defaultSelectText={baseCurrency} + defaultSelectText={values.currency_code} /> @@ -236,9 +232,6 @@ function MakeJournalEntriesHeader({ export default compose( withDialogActions, - withSettings(({ organizationSettings }) => ({ - baseCurrency: organizationSettings?.baseCurrency, - })), withCurrencies(({ currenciesList }) => ({ currenciesList, })), diff --git a/client/src/containers/Expenses/ExpenseFloatingActions.js b/client/src/containers/Expenses/ExpenseFloatingActions.js new file mode 100644 index 000000000..eda49ee81 --- /dev/null +++ b/client/src/containers/Expenses/ExpenseFloatingActions.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { Intent, Button } from '@blueprintjs/core'; +import { useFormikContext } from 'formik'; +import { FormattedMessage as T } from 'react-intl'; +import { CLASSES } from 'common/classes'; +import classNames from 'classnames'; +import { saveInvoke } from 'utils'; + +/** + * Expense form floating actions. + */ +export default function ExpenseFloatingFooter({ + isSubmitting, + onSubmitClick, + onCancelClick, + onDraftClick, + onSubmitAndNewClick, + expense, +}) { + const handleSubmitBtnClick = (event) => { + saveInvoke(onSubmitClick, event); + }; + + const handleCancelBtnClick = (event) => { + saveInvoke(onCancelClick, event); + }; + + const handleSubmitAndDraftBtnClick = (event) => { + saveInvoke(onDraftClick, event); + }; + + const handleSubmitAndNewBtnClick = (event) => { + saveInvoke(onSubmitAndNewClick, event); + }; + + return ( +
+ + + + + + + +
+ ); +} diff --git a/client/src/containers/Expenses/ExpenseFooter.js b/client/src/containers/Expenses/ExpenseFooter.js deleted file mode 100644 index 818e9b811..000000000 --- a/client/src/containers/Expenses/ExpenseFooter.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; -import { FormattedMessage as T } from 'react-intl'; - -export default function ExpenseFloatingFooter({ - formik: { isSubmitting }, - onSubmitClick, - onCancelClick, - - expense, -}) { - return ( -
- - - - - - - -
- ); -} diff --git a/client/src/containers/Expenses/ExpenseForm.js b/client/src/containers/Expenses/ExpenseForm.js index f8266ed0c..f5543642a 100644 --- a/client/src/containers/Expenses/ExpenseForm.js +++ b/client/src/containers/Expenses/ExpenseForm.js @@ -11,28 +11,33 @@ import moment from 'moment'; import { Intent, FormGroup, TextArea } from '@blueprintjs/core'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { pick } from 'lodash'; +import { useHistory } from 'react-router-dom'; import ExpenseFormHeader from './ExpenseFormHeader'; import ExpenseTable from './ExpenseTable'; -import ExpenseFloatingFooter from './ExpenseFooter'; +import ExpenseFloatingFooter from './ExpenseFloatingActions'; import withExpensesActions from 'containers/Expenses/withExpensesActions'; import withExpenseDetail from 'containers/Expenses/withExpenseDetail'; import withAccountsActions from 'containers/Accounts/withAccountsActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withMediaActions from 'containers/Media/withMediaActions'; +import withSettings from 'containers/Settings/withSettings'; import AppToaster from 'components/AppToaster'; import Dragzone from 'components/Dragzone'; import useMedia from 'hooks/useMedia'; -import { compose, repeatValue } from 'utils'; +import { compose, repeatValue, transformToForm } from 'utils'; const MIN_LINES_NUMBER = 4; const ERROR = { EXPENSE_ALREADY_PUBLISHED: 'EXPENSE.ALREADY.PUBLISHED', }; +/** + * Expense form. + */ function ExpenseForm({ // #withMedia requestSubmitMedia, @@ -49,13 +54,20 @@ function ExpenseForm({ //#withExpenseDetail expense, + // #withSettings + baseCurrency, + preferredPaymentAccount, + // #own Props expenseId, onFormSubmit, onCancelForm, }) { - const { formatMessage } = useIntl(); const [payload, setPayload] = useState({}); + + const history = useHistory(); + const { formatMessage } = useIntl(); + const { setFiles, saveMedia, @@ -67,23 +79,6 @@ function ExpenseForm({ deleteCallback: requestDeleteMedia, }); - const handleDropFiles = useCallback((_files) => { - setFiles(_files.filter((file) => file.uploaded === false)); - }, []); - - const savedMediaIds = useRef([]); - const clearSavedMediaIds = () => { - savedMediaIds.current = []; - }; - - useEffect(() => { - if (expense && expense.id) { - changePageTitle(formatMessage({ id: 'edit_expense' })); - } else { - changePageTitle(formatMessage({ id: 'new_expense' })); - } - }, [changePageTitle, expense, formatMessage]); - const validationSchema = Yup.object().shape({ beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })), payment_account_id: Yup.number() @@ -117,11 +112,27 @@ function ExpenseForm({ ), }); + const handleDropFiles = useCallback((_files) => { + setFiles(_files.filter((file) => file.uploaded === false)); + }, []); + + const savedMediaIds = useRef([]); + const clearSavedMediaIds = () => { + savedMediaIds.current = []; + }; + + useEffect(() => { + if (expense && expense.id) { + changePageTitle(formatMessage({ id: 'edit_expense' })); + } else { + changePageTitle(formatMessage({ id: 'new_expense' })); + } + }, [changePageTitle, expense, formatMessage]); + const saveInvokeSubmit = useCallback( (payload) => { onFormSubmit && onFormSubmit(payload); }, - [onFormSubmit], ); @@ -137,12 +148,12 @@ function ExpenseForm({ const defaultInitialValues = useMemo( () => ({ - payment_account_id: '', + payment_account_id: parseInt(preferredPaymentAccount), beneficiary: '', payment_date: moment(new Date()).format('YYYY-MM-DD'), description: '', reference_no: '', - currency_code: '', + currency_code: baseCurrency, categories: [...repeatValue(defaultCategory, MIN_LINES_NUMBER)], }), [defaultCategory], @@ -205,7 +216,15 @@ function ExpenseForm({ } }; - const formik = useFormik({ + const { + values, + errors, + touched, + isSubmitting, + setFieldValue, + handleSubmit, + getFieldProps, + } = useFormik({ enableReinitialize: true, validationSchema, initialValues: { @@ -294,20 +313,20 @@ function ExpenseForm({ }, }); - const handleSubmitClick = useCallback( - (payload) => { - setPayload(payload); - formik.submitForm(); - }, - [setPayload, formik], - ); + const handleSubmitClick = useCallback(() => { + setPayload({ publish: true, redirect: true }); + }, [setPayload]); - const handleCancelClick = useCallback( - (payload) => { - onCancelForm && onCancelForm(payload); - }, - [onCancelForm], - ); + const handleCancelClick = useCallback(() => { + history.goBack(); + }, []); + + const handleSubmitAndNewClick = useCallback(() => { + setPayload({ publish: true, redirect: false }); + }); + const handleSubmitAndDraftClick = useCallback(() => { + setPayload({ publish: false, redirect: false }); + }); const handleDeleteFile = useCallback( (_deletedFiles) => { @@ -322,14 +341,14 @@ function ExpenseForm({ // Handle click on add a new line/row. const handleClickAddNewRow = () => { - formik.setFieldValue( + setFieldValue( 'categories', - orderingCategoriesIndex([...formik.values.categories, defaultCategory]), + orderingCategoriesIndex([...values.categories, defaultCategory]), ); }; const handleClearAllLines = () => { - formik.setFieldValue( + setFieldValue( 'categories', orderingCategoriesIndex([ ...repeatValue(defaultCategory, MIN_LINES_NUMBER), @@ -337,21 +356,23 @@ function ExpenseForm({ ); }; - const categories = formik.values.categories.filter( - (category) => - category.amount && category.index && category.expense_account_id, - ); - return (
-
- + +
@@ -359,10 +380,7 @@ function ExpenseForm({ label={} className={'form-group--description'} > -