From a85e3b29e276c0865385aec75e9f369717d7432f Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Mon, 16 Nov 2020 15:16:04 +0200 Subject: [PATCH 1/7] Fix: ExpenseFlatingActions. --- .../Expenses/ExpenseFloatingActions.js | 69 +++++++++ .../src/containers/Expenses/ExpenseFooter.js | 57 -------- client/src/containers/Expenses/ExpenseForm.js | 132 ++++++++++-------- .../containers/Expenses/ExpenseFormHeader.js | 6 +- .../src/containers/Expenses/ExpenseTable.js | 3 +- 5 files changed, 151 insertions(+), 116 deletions(-) create mode 100644 client/src/containers/Expenses/ExpenseFloatingActions.js delete mode 100644 client/src/containers/Expenses/ExpenseFooter.js 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..5191b8530 100644 --- a/client/src/containers/Expenses/ExpenseForm.js +++ b/client/src/containers/Expenses/ExpenseForm.js @@ -11,10 +11,11 @@ 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'; @@ -26,13 +27,16 @@ 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, @@ -54,8 +58,13 @@ function ExpenseForm({ onFormSubmit, onCancelForm, }) { - const { formatMessage } = useIntl(); + const isNewMode = !expenseId; + const [payload, setPayload] = useState({}); + + const history = useHistory(); + const { formatMessage } = useIntl(); + const { setFiles, saveMedia, @@ -67,23 +76,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 +109,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], ); @@ -205,7 +213,15 @@ function ExpenseForm({ } }; - const formik = useFormik({ + const { + values, + errors, + touched, + isSubmitting, + setFieldValue, + handleSubmit, + getFieldProps, + } = useFormik({ enableReinitialize: true, validationSchema, initialValues: { @@ -294,20 +310,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 +338,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 +353,23 @@ function ExpenseForm({ ); }; - const categories = formik.values.categories.filter( - (category) => - category.amount && category.index && category.expense_account_id, - ); - return (
-
- + +
@@ -359,10 +377,7 @@ function ExpenseForm({ label={} className={'form-group--description'} > -