QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: FloatingActions.

Browse Source
This commit is contained in:
elforjani3
2020-11-24 21:05:51 +02:00
parent 53dd447540
commit ec2d079291
16 changed files with 1147 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
client/src/containers/Accounting/MakeJournalEntriesFooter.js
View File

@@ -1,58 +1,199 @@
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 { saveInvoke } from 'utils';
import { If, Icon } from 'components';
/**
* Make Journal floating actions bar.
*/
export default function MakeJournalEntriesFooter({
isSubmitting,
onSubmitClick,
onCancelClick,
manualJournalId,
onSubmitForm,
onResetForm,
manualJournalPublished,
}) {
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
onResetForm();
};
return (
<div>
<div class="form__floating-footer">
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
name={'save'}
onClick={() => {
onSubmitClick({ publish: true, redirect: true });
}}
>
{manualJournalId ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save_and_new'}
onClick={() => {
onSubmitClick({ publish: true, redirect: false });
}}
>
<T id={'save_new'} />
</Button>
<Button
disabled={isSubmitting}
className={'button-secondary ml1'}
onClick={() => {
onSubmitClick({ publish: false, redirect: true });
}}
>
<T id={'save_as_draft'} />
</Button>
<Button
className={'button-secondary ml1'}
onClick={() => {
onCancelClick && onCancelClick();
}}
>
<T id={'cancel'} />
</Button>
</div>
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
{/* ----------- Save And Publish ----------- */}
<If condition={!manualJournalId || !manualJournalPublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={manualJournalId && manualJournalPublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={manualJournalId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

44
client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -11,6 +11,7 @@ import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import { pick, setWith } from 'lodash';
import { useHistory } from 'react-router-dom';
import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
@@ -77,6 +78,9 @@ function MakeJournalEntriesForm({
onCancelForm,
}) {
const { formatMessage } = useIntl();
const history = useHistory();
const [submitPayload, setSubmitPayload] = useState({});
const {
setFiles,
saveMedia,
@@ -163,8 +167,6 @@ function MakeJournalEntriesForm({
[onFormSubmit],
);
const [payload, setPayload] = useState({});
const defaultEntry = useMemo(
() => ({
index: 0,
@@ -183,6 +185,7 @@ function MakeJournalEntriesForm({
date: moment(new Date()).format('YYYY-MM-DD'),
description: '',
reference: '',
status:'',
currency_code: '',
entries: [...repeatValue(defaultEntry, 4)],
}),
@@ -289,6 +292,8 @@ function MakeJournalEntriesForm({
setFieldValue,
handleSubmit,
getFieldProps,
submitForm,
resetForm,
touched,
isSubmitting,
} = useFormik({
@@ -327,7 +332,7 @@ function MakeJournalEntriesForm({
setSubmitting(false);
return;
}
const form = { ...values, status: payload.publish, entries };
const form = { ...values, status: submitPayload.publish, entries };
const saveJournal = (mediaIds) =>
new Promise((resolve, reject) => {
@@ -344,7 +349,7 @@ function MakeJournalEntriesForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
saveInvokeSubmit({ action: 'update', ...payload });
saveInvokeSubmit({ action: 'update', ...submitPayload });
clearSavedMediaIds([]);
resetForm();
resolve(response);
@@ -364,9 +369,11 @@ function MakeJournalEntriesForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
saveInvokeSubmit({ action: 'new', ...payload });
saveInvokeSubmit({ action: 'new', ...submitPayload });
clearSavedMediaIds();
resetForm();
if (submitPayload.resetForm) {
resetForm();
}
resolve(response);
})
.catch((errors) => {
@@ -407,20 +414,15 @@ function MakeJournalEntriesForm({
]);
const handleSubmitClick = useCallback(
(payload) => {
setPayload(payload);
// formik.resetForm();
handleSubmit();
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setPayload, handleSubmit],
[setSubmitPayload],
);
const handleCancelClick = useCallback(
(payload) => {
onCancelForm && onCancelForm(payload);
},
[onCancelForm],
);
const handleCancelClick = useCallback(() => {
history.goBack();
}, [history]);
const handleDeleteFile = useCallback(
(_deletedFiles) => {
@@ -453,11 +455,12 @@ function MakeJournalEntriesForm({
const handleJournalNumberChanged = useCallback(
(journalNumber) => {
changePageSubtitle(
defaultToTransform(journalNumber, `No. ${journalNumber}`, '')
defaultToTransform(journalNumber, `No. ${journalNumber}`, ''),
);
},
[changePageSubtitle],
);
return (
<div class="make-journal-entries">
<form onSubmit={handleSubmit}>
@@ -482,7 +485,10 @@ function MakeJournalEntriesForm({
isSubmitting={isSubmitting}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
manualJournal={manualJournalId}
manualJournalId={manualJournalId}
manualJournalPublished={values.status}
onSubmitForm={submitForm}
onResetForm={resetForm}
/>
</form>

223
client/src/containers/Expenses/ExpenseFloatingActions.js
View File

@@ -14,7 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { Icon, If } from 'components';
/**
* Expense form floating actions.
@@ -25,11 +25,18 @@ export default function ExpenseFloatingFooter({
onCancelClick,
onDraftClick,
onClearClick,
onSubmitAndNewClick,
onSubmitForm,
onResetForm,
expense,
expensePublished,
}) {
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
@@ -47,6 +54,13 @@ export default function ExpenseFloatingFooter({
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
@@ -60,106 +74,129 @@ export default function ExpenseFloatingFooter({
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
onResetForm();
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save And Publish ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
}}
text={
expense && expense.id ? (
<T id={'edit'} />
) : (
<T id={'save_publish'} />
)
}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!expense}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
}}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
</Popover>
{/* ----------- Clear ----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={(event) => {
onResetForm();
saveInvoke(onClearClick, event);
}}
text={expense && expense.id ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={expense && expensePublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={expense ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

6
client/src/containers/Expenses/ExpenseForm.js
View File

@@ -304,7 +304,6 @@ function ExpenseForm({
history.goBack();
}, [history]);
const handleDeleteFile = useCallback(
(_deletedFiles) => {
_deletedFiles.forEach((deletedFile) => {
@@ -332,7 +331,7 @@ function ExpenseForm({
]),
);
};
return (
<div className={'expense-form'}>
<form onSubmit={handleSubmit}>
@@ -374,7 +373,8 @@ function ExpenseForm({
onCancelClick={handleCancelClick}
onSubmitForm={submitForm}
onResetForm={resetForm}
expense={expense}
expense={expenseId}
expensePublished={true}
/>
</form>
</div>

221
client/src/containers/Purchases/Bill/BillFloatingActions.js
View File

@@ -1,8 +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 { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { saveInvoke } from 'utils';
import { If, Icon } from 'components';
/**
* Bill floating actions bar.
*/
export default function BillFloatingActions({
isSubmitting,
onSubmitClick,
@@ -10,53 +26,176 @@ export default function BillFloatingActions({
onCancelClick,
onClearClick,
billId,
billPublished,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
resetForm();
};
return (
<div className={'form__floating-footer'}>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event);
}}
>
{billId ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitAndNewClick, event);
}}
>
<T id={'save_new'} />
</Button>
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
{/* ----------- Save And Publish ----------- */}
<If condition={!billId}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={billId && billPublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={(event) => {
saveInvoke(onClearClick, event);
}}
>
<T id={'clear'} />
</Button>
onClick={handleClearBtnClick}
text={billId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
>
<T id={'close'} />
</Button>
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

23
client/src/containers/Purchases/Bill/BillForm.js
View File

@@ -22,7 +22,12 @@ import withBillDetail from './withBillDetail';
import { AppToaster } from 'components';
import { ERROR } from 'common/errors';
import { compose, repeatValue, defaultToTransform, orderingLinesIndexes } from 'utils';
import {
compose,
repeatValue,
defaultToTransform,
orderingLinesIndexes,
} from 'utils';
const MIN_LINES_NUMBER = 5;
@@ -154,11 +159,13 @@ function BillForm({
});
setSubmitting(false);
resetForm();
changePageSubtitle('');
if (submitPayload.redirect) {
history.go('/bills');
history.push('/bills');
}
if (submitPayload.resetForm) {
resetForm();
}
};
// Handle the request error.
@@ -189,9 +196,12 @@ function BillForm({
[changePageSubtitle],
);
const handleSubmitClick = useCallback(() => {
setSubmitPayload({ redirect: true });
}, [setSubmitPayload]);
const handleSubmitClick = useCallback(
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setSubmitPayload],
);
const handleCancelClick = useCallback(() => {
history.goBack();
@@ -218,6 +228,7 @@ function BillForm({
<BillFloatingActions
isSubmitting={isSubmitting}
billId={billId}
billPublished={true}
onSubmitClick={handleSubmitClick}
onCancelForm={handleCancelClick}
/>

111
client/src/containers/Purchases/PaymentMades/PaymentMadeFloatingActions.js
View File

@@ -1,9 +1,19 @@
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 { saveInvoke } from 'utils';
import { Icon } from 'components';
/**
* Payment made floating actions bar.
@@ -13,56 +23,85 @@ export default function PaymentMadeFloatingActions({
onSubmitClick,
onCancelClick,
onClearBtnClick,
onSubmitForm,
paymentMadeId,
}) {
const handleSubmitBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
});
};
const handleClearBtnClick = (event) => {
onClearBtnClick && onClearBtnClick(event);
};
const handleSubmitClick = (event) => {
onSubmitClick && onSubmitClick(event, { redirect: true });
};
const handleCancelClick = (event) => {
const handleCancelBtnClick = (event) => {
onCancelClick && onCancelClick(event);
saveInvoke(onCancelClick, event);
};
const handleSubmitAndNewClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
};
const handleSubmitContinueEditingBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitClick}
>
<T id={'save_send'} />
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save'}
type="submit"
onClick={handleSubmitClick}
>
<T id={'save'} />
</Button>
{/* ----------- Save and New ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={paymentMadeId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
>
<T id={'clear'} />
</Button>
text={paymentMadeId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
type="submit"
onClick={handleCancelClick}
>
<T id={'close'} />
</Button>
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

22
client/src/containers/Purchases/PaymentMades/PaymentMadeForm.js
View File

@@ -81,6 +81,7 @@ function PaymentMadeForm({
const [clearLinesAlert, setClearLinesAlert] = useState(false);
const [clearFormAlert, setClearFormAlert] = useState(false);
const [fullAmount, setFullAmount] = useState(null);
const [submitPayload, setSubmitPayload] = useState({});
const [localPaymentEntries, setLocalPaymentEntries] = useState(
paymentMadeEntries,
@@ -96,7 +97,7 @@ function PaymentMadeForm({
const validationSchema = isNewMode
? CreatePaymentMadeFormSchema
: EditPaymentMadeFormSchema;
// Form initial values.
const initialValues = useMemo(
() => ({
@@ -155,8 +156,13 @@ function PaymentMadeForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
// resetForm();
changePageSubtitle('');
if (submitPayload.redirect) {
history.push('/payment-mades');
}
};
const onError = (errors) => {
@@ -187,6 +193,7 @@ function PaymentMadeForm({
values,
handleSubmit,
isSubmitting,
submitForm,
} = useFormik({
validationSchema,
initialValues,
@@ -300,6 +307,14 @@ function PaymentMadeForm({
[values.entries],
);
const handleSubmitClick = useCallback(
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setSubmitPayload],
);
return (
<div
className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_PAYMENT_MADE)}
@@ -372,8 +387,11 @@ function PaymentMadeForm({
<PaymentMadeFloatingActions
isSubmitting={isSubmitting}
paymentMadeId={paymentMadeId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
onClearBtnClick={handleClearBtnClick}
onSubmitForm={submitForm}
/>
{/* <Dragzone

198
client/src/containers/Sales/Estimate/EstimateFloatingActions.js
View File

@@ -14,7 +14,7 @@ import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Estimate floating actions bar.
@@ -25,12 +25,55 @@ export default function EstimateFloatingActions({
onCancelClick,
onClearClick,
estimateId,
estimatePublished,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitBtnClick = (event) => {
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
@@ -43,56 +86,117 @@ export default function EstimateFloatingActions({
resetForm();
};
const handleSubmitAndNewClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={estimateId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!estimateId}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={estimateId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={estimateId && estimatePublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={estimateId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

10
client/src/containers/Sales/Estimate/EstimateForm.js
View File

@@ -103,9 +103,9 @@ const EstimateForm = ({
: estimateNextNumber;
useEffect(() => {
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
if (isNewMode) {
if (!isNewMode) {
changePageTitle(formatMessage({ id: 'edit_estimate' }));
} else {
changePageTitle(formatMessage({ id: 'new_estimate' }));
@@ -199,11 +199,13 @@ const EstimateForm = ({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/estimates');
}
if (submitPayload.resetForm) {
resetForm();
}
};
const onError = (errors) => {
@@ -263,8 +265,8 @@ const EstimateForm = ({
estimateId={estimateId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
estimatePublished={true}
/>
</Form>
)}
</Formik>

294
client/src/containers/Sales/Invoice/InvoiceFloatingActions.js
View File

@@ -14,8 +14,7 @@ import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Invoice floating actions bar.
@@ -26,151 +25,178 @@ export default function InvoiceFloatingActions({
onCancelClick,
onClearClick,
invoice,
invoicePublished,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitPublishAndNewBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
},
[submitForm],
);
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true
});
};
const handleSubmitPublishContinueEditingBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
},
[submitForm],
);
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitDraftAndNewBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
},
[submitForm],
);
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
},
[submitForm],
);
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
resetForm();
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save And Publish ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
}}
text={
invoice && invoice.id ? (
<T id={'edit'} />
) : (
<T id={'save_publish'} />
)
}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!invoice}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
}}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />} />
</Popover>
{/* ----------- Clear ----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={(event) => {
resetForm();
saveInvoke(onClearClick, event);
}}
text={invoice && invoice.id ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={invoice && invoicePublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={invoice ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

6
client/src/containers/Sales/Invoice/InvoiceForm.js
View File

@@ -186,7 +186,6 @@ function InvoiceForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/invoices');
@@ -230,7 +229,7 @@ function InvoiceForm({
},
[changePageSubtitle],
);
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_INVOICE)}>
<Formik
@@ -253,9 +252,10 @@ function InvoiceForm({
<InvoiceFormFooter />
<InvoiceFloatingActions
isSubmitting={isSubmitting}
invoice={invoice}
invoice={invoiceId}
onCancelClick={handleCancelClick}
onSubmitClick={handleSubmitClick}
invoicePublished={true}
/>
</Form>
)}

43
client/src/containers/Sales/PaymentReceive/PaymentReceiveFloatingActions.js
View File

@@ -46,19 +46,28 @@ export default function PaymentReceiveFormFloatingActions({
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
resetForm: true,
});
};
const handleSubmitContinueEditingBtnClick = (event) => {
onSubmitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
{/* ----------- Save and New ----------- */}
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save_and_send'} />}
text={paymentReceiveId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
@@ -67,6 +76,10 @@ export default function PaymentReceiveFormFloatingActions({
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
@@ -78,20 +91,20 @@ export default function PaymentReceiveFormFloatingActions({
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={paymentReceiveId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}

6
client/src/containers/Sales/PaymentReceive/PaymentReceiveForm.js
View File

@@ -190,11 +190,13 @@ function PaymentReceiveForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/payment-receives');
}
if (submitPayload.resetForm) {
resetForm();
}
};
// Handle request response errors.
const onError = (errors) => {
@@ -366,7 +368,7 @@ function PaymentReceiveForm({
const handleCancelClick = useCallback(() => {
history.goBack();
}, [history]);
return (
<div
className={classNames(

7
client/src/containers/Sales/Receipt/ReceiptForm.js
View File

@@ -201,11 +201,13 @@ function ReceiptForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (submitPayload.redirect) {
history.push('/receipts');
}
if (submitPayload.resetForm) {
resetForm();
}
};
// Handle the request error.
@@ -243,7 +245,7 @@ function ReceiptForm({
},
[history],
);
return (
<div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
<Formik
@@ -264,6 +266,7 @@ function ReceiptForm({
<ReceiptFormFloatingActions
isSubmitting={isSubmitting}
receiptId={receiptId}
receiptPublished={true}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>

206
client/src/containers/Sales/Receipt/ReceiptFormFloatingActions.js
View File

@@ -14,7 +14,7 @@ import { useFormikContext } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
import { If, Icon } from 'components';
/**
* Receipt floating actions bar.
@@ -22,21 +22,60 @@ import { Icon } from 'components';
export default function ReceiptFormFloatingActions({
isSubmitting,
receiptId,
receiptPublished,
onSubmitClick,
onCancelClick,
onClearClick,
}) {
const { resetForm, submitForm } = useFormikContext();
const handleSubmitAndNewClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
},
[submitForm],
);
const handleSubmitPublishBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: true,
});
};
const handleSubmitPublishAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
resetForm: true,
});
};
const handleSubmitPublishContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: true,
});
};
const handleSubmitDraftBtnClick = (event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
publish: false,
});
};
const handleSubmitDraftAndNewBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
resetForm: true,
});
};
const handleSubmitDraftContinueEditingBtnClick = (event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
publish: false,
});
};
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
@@ -49,51 +88,114 @@ export default function ReceiptFormFloatingActions({
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event, {
redirect: true,
});
}}
text={receiptId ? <T id={'edit'} /> : <T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitAndNewClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
{/* ----------- Save And Publish ----------- */}
<If condition={!receiptId}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save_publish'} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={receiptId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'publish_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
<MenuItem
text={<T id={'publish_continue_editing'} />}
onClick={handleSubmitPublishContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
{/* ----------- Save As Draft ----------- */}
<ButtonGroup>
<Button
disabled={isSubmitting}
className={'ml1'}
type="submit"
onClick={handleSubmitDraftBtnClick}
text={<T id={'save_as_draft'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitDraftAndNewBtnClick}
/>
<MenuItem
text={<T id={'save_continue_editing'} />}
onClick={handleSubmitDraftContinueEditingBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Save and New ----------- */}
<If condition={receiptId && receiptPublished}>
<ButtonGroup>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitPublishBtnClick}
text={<T id={'save'} />}
/>
<Popover
content={
<Menu>
<MenuItem
text={<T id={'save_and_new'} />}
onClick={handleSubmitPublishAndNewBtnClick}
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
</ButtonGroup>
</If>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={receiptId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</div>
);
}