From 222ffd7ac6493f54a6eb20b3d5d19f0ca5ca78ee Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Mon, 23 Nov 2020 21:01:22 +0200 Subject: [PATCH 1/2] Fix: FloatingActions. --- .../Customers/CustomerFloatingActions.js | 115 +++++++++++----- .../src/containers/Customers/CustomerForm.js | 20 ++- .../Sales/Estimate/EstimateFloatingActions.js | 112 ++++++++++------ .../containers/Sales/Estimate/EstimateForm.js | 23 ++-- .../Sales/Invoice/InvoiceFloatingActions.js | 7 +- .../containers/Sales/Receipt/ReceiptForm.js | 53 ++++---- .../Receipt/ReceiptFormFloatingActions.js | 124 +++++++++++------- .../Vendors/VendorFloatingActions.js | 112 +++++++++++----- client/src/containers/Vendors/VendorForm.js | 11 +- 9 files changed, 380 insertions(+), 197 deletions(-) diff --git a/client/src/containers/Customers/CustomerFloatingActions.js b/client/src/containers/Customers/CustomerFloatingActions.js index e390794d0..a22a9aefe 100644 --- a/client/src/containers/Customers/CustomerFloatingActions.js +++ b/client/src/containers/Customers/CustomerFloatingActions.js @@ -1,52 +1,97 @@ import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; +import { + Intent, + Button, + ButtonGroup, + Popover, + PopoverInteractionKind, + Position, + Menu, + MenuItem, +} from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; +import { useFormikContext } from 'formik'; import { saveInvoke } from 'utils'; +import { Icon } from 'components'; +/** + * Customer floating actions bar. + */ export default function CustomerFloatingActions({ onSubmitClick, - onSubmitAndNewClick, onCancelClick, - isSubmitting, customerId, }) { + const { resetForm, submitForm } = useFormikContext(); + + const handleSubmitBtnClick = (event) => { + saveInvoke(onSubmitClick, event, { + noRedirect: false, + }); + }; + + const handleCancelBtnClick = (event) => { + saveInvoke(onCancelClick, event); + }; + + const handleClearBtnClick = (event) => { + // saveInvoke(onClearClick, event); + resetForm(); + }; + + const handleSubmitAndNewClick = (event) => { + submitForm(); + saveInvoke(onSubmitClick, event, { + noRedirect: true, + }); + }; + return (
- - - - - + + {/* ----------- Save and New ----------- */} +
); } diff --git a/client/src/containers/Customers/CustomerForm.js b/client/src/containers/Customers/CustomerForm.js index ffbddf34e..bf7d28fba 100644 --- a/client/src/containers/Customers/CustomerForm.js +++ b/client/src/containers/Customers/CustomerForm.js @@ -229,13 +229,19 @@ function CustomerForm({ [setDeletedFiles, deletedFiles], ); - const handleCancelClick = () => { - history.goBack(); - }; + const handleCancelClick = useCallback( + (event) => { + history.goBack(); + }, + [history], + ); - const handleSubmitAndNewClick = () => { - setSubmitPayload({ noRedirect: true }); - }; + const handleSubmitClick = useCallback( + (event, payload) => { + setSubmitPayload({ ...payload }); + }, + [setSubmitPayload], + ); return (
@@ -261,8 +267,8 @@ function CustomerForm({ )} diff --git a/client/src/containers/Sales/Estimate/EstimateFloatingActions.js b/client/src/containers/Sales/Estimate/EstimateFloatingActions.js index f76709fdb..d56def74d 100644 --- a/client/src/containers/Sales/Estimate/EstimateFloatingActions.js +++ b/client/src/containers/Sales/Estimate/EstimateFloatingActions.js @@ -1,18 +1,37 @@ import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; +import { + Intent, + Button, + ButtonGroup, + Popover, + PopoverInteractionKind, + Position, + Menu, + MenuItem, +} from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; +import { CLASSES } from 'common/classes'; +import classNames from 'classnames'; +import { useFormikContext } from 'formik'; import { saveInvoke } from 'utils'; +import { Icon } from 'components'; +/** + * Estimate floating actions bar. + */ export default function EstimateFloatingActions({ isSubmitting, onSubmitClick, onCancelClick, onClearClick, - onSubmitAndNewClick, estimateId, }) { + const { resetForm, submitForm } = useFormikContext(); + const handleSubmitBtnClick = (event) => { - saveInvoke(onSubmitClick, event); + saveInvoke(onSubmitClick, event, { + redirect: true, + }); }; const handleCancelBtnClick = (event) => { @@ -20,49 +39,60 @@ export default function EstimateFloatingActions({ }; const handleClearBtnClick = (event) => { - saveInvoke(onClearClick, event); + // saveInvoke(onClearClick, event); + resetForm(); }; const handleSubmitAndNewClick = (event) => { - saveInvoke(onSubmitAndNewClick, event); - } + submitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + }); + }; return ( -
- - - - - - - +
+ + {/* ----------- Save and New ----------- */} +
); } diff --git a/client/src/containers/Sales/Estimate/EstimateForm.js b/client/src/containers/Sales/Estimate/EstimateForm.js index ba1f06a67..98ef90428 100644 --- a/client/src/containers/Sales/Estimate/EstimateForm.js +++ b/client/src/containers/Sales/Estimate/EstimateForm.js @@ -216,13 +216,19 @@ const EstimateForm = ({ [changePageSubtitle], ); - const handleSubmitClick = useCallback((event) => { - setSubmitPayload({ redirect: true }); - }, [setSubmitPayload]); + const handleSubmitClick = useCallback( + (event, payload) => { + setSubmitPayload({ ...payload }); + }, + [setSubmitPayload], + ); - const handleCancelClick = useCallback((event) => { - history.goBack(); - }, [history]); + const handleCancelClick = useCallback( + (event) => { + history.goBack(); + }, + [history], + ); return (
@@ -238,15 +244,16 @@ const EstimateForm = ({ - + + )} diff --git a/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js b/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js index f52c278ca..0004df237 100644 --- a/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js +++ b/client/src/containers/Sales/Invoice/InvoiceFloatingActions.js @@ -16,6 +16,10 @@ import classNames from 'classnames'; import { saveInvoke } from 'utils'; import { Icon } from 'components'; + +/** + * Invoice floating actions bar. + */ export default function InvoiceFloatingActions({ isSubmitting, onSubmitClick, @@ -106,6 +110,7 @@ export default function InvoiceFloatingActions({ /> } + minimal={true} interactionKind={PopoverInteractionKind.CLICK} position={Position.BOTTOM_LEFT} > @@ -141,6 +146,7 @@ export default function InvoiceFloatingActions({ /> } + minimal={true} interactionKind={PopoverInteractionKind.CLICK} position={Position.BOTTOM_LEFT} > @@ -159,7 +165,6 @@ export default function InvoiceFloatingActions({ {/* ----------- Cancel ----------- */} - - - - - - + + {/* ----------- Save and New ----------- */} +
); } diff --git a/client/src/containers/Vendors/VendorFloatingActions.js b/client/src/containers/Vendors/VendorFloatingActions.js index 0f8203faf..7e3216da7 100644 --- a/client/src/containers/Vendors/VendorFloatingActions.js +++ b/client/src/containers/Vendors/VendorFloatingActions.js @@ -1,11 +1,24 @@ import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; +import { + Intent, + Button, + ButtonGroup, + Popover, + PopoverInteractionKind, + Position, + Menu, + MenuItem, +} from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; +import { useFormikContext } from 'formik'; import { saveInvoke } from 'utils'; +import { Icon } from 'components'; - +/** + * Vendor floating actions bar. + */ export default function VendorFloatingActions({ onSubmitClick, onSubmitAndNewClick, @@ -13,38 +26,73 @@ export default function VendorFloatingActions({ isSubmitting, vendor, }) { + const { resetForm, submitForm } = useFormikContext(); + + const handleSubmitBtnClick = (event) => { + saveInvoke(onSubmitClick, event, { + noRedirect: false, + }); + }; + + const handleCancelBtnClick = (event) => { + saveInvoke(onCancelClick, event); + }; + + const handleClearBtnClick = (event) => { + // saveInvoke(onClearClick, event); + resetForm(); + }; + + const handleSubmitAndNewClick = (event) => { + submitForm(); + saveInvoke(onSubmitClick, event, { + noRedirect: true, + }); + }; + return (
- - - + + {/* ----------- Save and New ----------- */} +
); } diff --git a/client/src/containers/Vendors/VendorForm.js b/client/src/containers/Vendors/VendorForm.js index 23b760735..fff75d5d5 100644 --- a/client/src/containers/Vendors/VendorForm.js +++ b/client/src/containers/Vendors/VendorForm.js @@ -143,9 +143,12 @@ function VendorForm({ history.goBack(); }, [history]); - const handleSubmitAndNewClick = useCallback(() => { - setSubmitPayload({ noRedirect: true }); - }); + const handleSubmitClick = useCallback( + (event, payload) => { + setSubmitPayload({ ...payload }); + }, + [setSubmitPayload], + ); return (
@@ -173,8 +176,8 @@ function VendorForm({ )} From 98fb5ca4480c49bf75efc0e24a8be82c03d27242 Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 24 Nov 2020 01:31:22 +0200 Subject: [PATCH 2/2] Fix: Expense & PaymentReceive FloatingActions. --- .../Expenses/ExpenseFloatingActions.js | 170 ++++++++++++++---- client/src/containers/Expenses/ExpenseForm.js | 38 ++-- .../PaymentReceiveFloatingActions.js | 104 +++++++---- .../PaymentReceive/PaymentReceiveForm.js | 25 ++- client/src/lang/en/index.js | 15 +- 5 files changed, 252 insertions(+), 100 deletions(-) diff --git a/client/src/containers/Expenses/ExpenseFloatingActions.js b/client/src/containers/Expenses/ExpenseFloatingActions.js index eda49ee81..eda5ff0a9 100644 --- a/client/src/containers/Expenses/ExpenseFloatingActions.js +++ b/client/src/containers/Expenses/ExpenseFloatingActions.js @@ -1,10 +1,20 @@ import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; +import { + Intent, + Button, + ButtonGroup, + Popover, + PopoverInteractionKind, + Position, + Menu, + MenuItem, +} 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'; +import { Icon } from 'components'; /** * Expense form floating actions. @@ -14,56 +24,142 @@ export default function ExpenseFloatingFooter({ onSubmitClick, onCancelClick, onDraftClick, + onClearClick, onSubmitAndNewClick, + onSubmitForm, + onResetForm, expense, }) { - const handleSubmitBtnClick = (event) => { - saveInvoke(onSubmitClick, event); + const handleSubmitPublishAndNewBtnClick = (event) => { + onSubmitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + publish: true, + resetForm: true, + }); }; - const handleCancelBtnClick = (event) => { - saveInvoke(onCancelClick, event); + const handleSubmitPublishContinueEditingBtnClick = (event) => { + onSubmitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + publish: true, + }); }; - const handleSubmitAndDraftBtnClick = (event) => { - saveInvoke(onDraftClick, event); + const handleSubmitDraftAndNewBtnClick = (event) => { + onSubmitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + publish: false, + resetForm: true, + }); }; - const handleSubmitAndNewBtnClick = (event) => { - saveInvoke(onSubmitAndNewClick, event); + const handleSubmitDraftContinueEditingBtnClick = (event) => { + onSubmitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + publish: true, + }); }; return (
- + + {/* ----------- Save And Publish ----------- */} + - - - - + {/* ----------- Save As Draft ----------- */} +
); } diff --git a/client/src/containers/Expenses/ExpenseForm.js b/client/src/containers/Expenses/ExpenseForm.js index 4fcf0c080..943df21a9 100644 --- a/client/src/containers/Expenses/ExpenseForm.js +++ b/client/src/containers/Expenses/ExpenseForm.js @@ -66,9 +66,9 @@ function ExpenseForm({ onFormSubmit, onCancelForm, }) { - const [payload, setPayload] = useState({}); + const [submitPayload, setSubmitPayload] = useState({}); const history = useHistory(); - + const isNewMode = !expenseId; const { formatMessage } = useIntl(); @@ -199,6 +199,8 @@ function ExpenseForm({ setFieldValue, handleSubmit, getFieldProps, + submitForm, + resetForm, } = useFormik({ enableReinitialize: true, validationSchema, @@ -228,7 +230,7 @@ function ExpenseForm({ const form = { ...values, - publish: payload.publish, + publish: submitPayload.publish, categories, }; const saveExpense = (mdeiaIds) => @@ -246,7 +248,7 @@ function ExpenseForm({ intent: Intent.SUCCESS, }); setSubmitting(false); - saveInvokeSubmit({ action: 'update', ...payload }); + saveInvokeSubmit({ action: 'update', ...submitPayload }); clearSavedMediaIds([]); resetForm(); }) @@ -265,8 +267,11 @@ function ExpenseForm({ intent: Intent.SUCCESS, }); setSubmitting(false); - resetForm(); - saveInvokeSubmit({ action: 'new', ...payload }); + + if (submitPayload.resetForm) { + resetForm(); + } + saveInvokeSubmit({ action: 'new', ...submitPayload }); clearSavedMediaIds(); }) .catch((errors) => { @@ -288,20 +293,17 @@ function ExpenseForm({ }, }); - const handleSubmitClick = useCallback(() => { - setPayload({ publish: true, redirect: true }); - }, [setPayload]); + const handleSubmitClick = useCallback( + (event, payload) => { + setSubmitPayload({ ...payload }); + }, + [setSubmitPayload], + ); const handleCancelClick = useCallback(() => { history.goBack(); - }, []); + }, [history]); - const handleSubmitAndNewClick = useCallback(() => { - setPayload({ publish: true, redirect: false }); - }); - const handleSubmitAndDraftClick = useCallback(() => { - setPayload({ publish: false, redirect: false }); - }); const handleDeleteFile = useCallback( (_deletedFiles) => { @@ -370,8 +372,8 @@ function ExpenseForm({ isSubmitting={isSubmitting} onSubmitClick={handleSubmitClick} onCancelClick={handleCancelClick} - onDraftClick={handleSubmitAndDraftClick} - onSubmitAndNewClick={handleSubmitAndNewClick} + onSubmitForm={submitForm} + onResetForm={resetForm} expense={expense} /> diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js index 0dcf50020..2f02013c4 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js @@ -1,9 +1,20 @@ import React from 'react'; -import { Intent, Button } from '@blueprintjs/core'; +import { + Intent, + Button, + ButtonGroup, + Popover, + PopoverInteractionKind, + Position, + Menu, + MenuItem, +} from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; - import { CLASSES } from 'common/classes'; +import { useFormikContext } from 'formik'; +import { saveInvoke } from 'utils'; +import { Icon } from 'components'; /** * Payment receive floating actions bar. @@ -13,53 +24,74 @@ export default function PaymentReceiveFormFloatingActions({ onSubmitClick, onCancelClick, onClearClick, + onSubmitForm, paymentReceiveId, }) { - const handleSubmitClick = (event) => { - onSubmitClick && onSubmitClick(event); + const handleSubmitBtnClick = (event) => { + saveInvoke(onSubmitClick, event, { + redirect: true, + }); }; const handleClearBtnClick = (event) => { onClearClick && onClearClick(event); }; - const handleCloseBtnClick = (event) => { + const handleCancelBtnClick = (event) => { onCancelClick && onCancelClick(event); + saveInvoke(onCancelClick, event); + }; + + const handleSubmitAndNewClick = (event) => { + onSubmitForm(); + saveInvoke(onSubmitClick, event, { + redirect: false, + }); }; return (
- - - - - - - + + {/* ----------- Save and New ----------- */} +
); } diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js index dcc4e21be..89cbee70d 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js @@ -13,6 +13,7 @@ import { FormattedMessage as T, useIntl } from 'react-intl'; import { pick, sumBy, omit } from 'lodash'; import { Intent, Alert } from '@blueprintjs/core'; import classNames from 'classnames'; +import { useHistory } from 'react-router-dom'; import { CLASSES } from 'common/classes'; import PaymentReceiveHeader from './PaymentReceiveFormHeader'; @@ -66,8 +67,11 @@ function PaymentReceiveForm({ const [clearLinesAlert, setClearLinesAlert] = useState(false); const [fullAmount, setFullAmount] = useState(null); const [clearFormAlert, setClearFormAlert] = useState(false); + const [submitPayload, setSubmitPayload] = useState({}); const { formatMessage } = useIntl(); + const history = useHistory(); + const isNewMode = !paymentReceiveId; const [localPaymentEntries, setLocalPaymentEntries] = useState( paymentReceiveEntries, @@ -103,7 +107,7 @@ function PaymentReceiveForm({ const validationSchema = isNewMode ? CreatePaymentReceiveFormSchema : EditPaymentReceiveFormSchema; - + // Default payment receive entry. const defaultPaymentReceiveEntry = { id: '', @@ -187,6 +191,10 @@ function PaymentReceiveForm({ }); setSubmitting(false); resetForm(); + + if (submitPayload.redirect) { + history.push('/payment-receives'); + } }; // Handle request response errors. const onError = (errors) => { @@ -220,6 +228,7 @@ function PaymentReceiveForm({ isSubmitting, touched, resetForm, + submitForm, } = useFormik({ enableReinitialize: true, validationSchema, @@ -338,6 +347,17 @@ function PaymentReceiveForm({ [changePageSubtitle], ); + const handleSubmitClick = useCallback( + (event, payload) => { + setSubmitPayload({ ...payload }); + }, + [setSubmitPayload], + ); + + const handleCancelClick = useCallback(() => { + history.goBack(); + }, [history]); + return (
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index fdd9c14f7..31e5f1783 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -844,12 +844,11 @@ export default { are_sure_to_publish_this_manual_journal: 'Are you sure you want to publish this manual journal?', - save_publish:'Save and Publish', - publish_and_new: 'Publish and new', - publish_continue_editing:'Publish (continue editing)', - save_and_new:'Save and new', - save_continue_editing:'Save (continue editing)', - reset:'Reset ', - - + save_publish: 'Save and Publish', + publish_and_new: 'Publish and new', + publish_continue_editing: 'Publish (continue editing)', + save_and_new: 'Save and new', + save_continue_editing: 'Save (continue editing)', + reset: 'Reset ', + save_and_send: 'Save and Send', };