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

Fix: FloatingActions.

Browse Source
This commit is contained in:
elforjani3
2020-11-23 21:01:22 +02:00
parent 0513a4d4ad
commit 222ffd7ac6
9 changed files with 380 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
client/src/containers/Customers/CustomerFloatingActions.js
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event);
}}
>
{customerId ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save_and_new'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitAndNewClick, event);
}}
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
>
<T id={'close'} />
</Button>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={customerId ? <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}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={customerId ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
</div>
);
}

20
client/src/containers/Customers/CustomerForm.js
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
@@ -261,8 +267,8 @@ function CustomerForm({
<CustomerFloatingActions
isSubmitting={isSubmitting}
customerId={customer}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
onSubmitAndNewClick={handleSubmitAndNewClick}
/>
</Form>
)}

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

@@ -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 (
<div className={'form__floating-footer'}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
>
{(estimateId) ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
type="submit"
onClick={handleSubmitAndNewClick}
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
>
<T id={'clear'} />
</Button>
<Button
className={'ml1'}
type="submit"
onClick={handleCancelBtnClick}
>
<T id={'close'} />
</Button>
<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}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</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>
</div>
);
}

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

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ESTIMATE)}>
@@ -238,15 +244,16 @@ const EstimateForm = ({
<EstimateFormHeader
onEstimateNumberChanged={handleEstimateNumberChange}
/>
<EstimateNumberWatcher estimateNumber={estimateNumber} />
<EstimateNumberWatcher estimateNumber={estimateNumber} />
<EditableItemsEntriesTable />
<EstimateFormFooter />
<EstimateFloatingActions
isSubmiting={isSubmitting}
isSubmitting={isSubmitting}
estimateId={estimateId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>
</Form>
)}
</Formik>

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

@@ -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({
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
@@ -141,6 +146,7 @@ export default function InvoiceFloatingActions({
/>
</Menu>
}
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
>
@@ -159,7 +165,6 @@ export default function InvoiceFloatingActions({
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
type="submit"
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}

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

@@ -59,7 +59,6 @@ const defaultInitialValues = {
/**
* Receipt form.
*/
function ReceiptForm({
//#withMedia
requestSubmitMedia,
@@ -218,17 +217,19 @@ function ReceiptForm({
[changePageSubtitle],
);
const handleSubmitClick = (event) => {
setSubmitPayload({ redirect: true });
};
const handleSubmitClick = useCallback(
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setSubmitPayload],
);
const handleSubmitAndNewClick = (event) => {
setSubmitPayload({ redirect: false });
};
const handleCancelClick = (event) => {
history.goBack();
};
const handleCancelClick = useCallback(
(event) => {
history.goBack();
},
[history],
);
return (
<div className={classNames(CLASSES.PAGE_FORM_RECEIPT, CLASSES.PAGE_FORM)}>
@@ -239,20 +240,22 @@ function ReceiptForm({
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<ReceiptFromHeader
onReceiptNumberChanged={handleReceiptNumberChanged}
/>
<ReceiptNumberWatcher receiptNumber={receiptNumber} />
<EditableItemsEntriesTable />
<ReceiptFormFooter />
<ReceiptFormFloatingActions
receiptId={receiptId}
onSubmitClick={handleSubmitClick}
onSubmitAndNewClick={handleSubmitAndNewClick}
onCancelForm={handleCancelClick}
/>
</Form>
{({ isSubmitting }) => (
<Form>
<ReceiptFromHeader
onReceiptNumberChanged={handleReceiptNumberChanged}
/>
<ReceiptNumberWatcher receiptNumber={receiptNumber} />
<EditableItemsEntriesTable />
<ReceiptFormFooter />
<ReceiptFormFloatingActions
isSubmitting={isSubmitting}
receiptId={receiptId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
/>
</Form>
)}
</Formik>
</div>
);

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

@@ -1,63 +1,99 @@
import React from 'react';
import { Intent, Button } from '@blueprintjs/core';
import React, { useCallback } from 'react';
import {
Intent,
Button,
ButtonGroup,
Popover,
PopoverInteractionKind,
Position,
Menu,
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { useFormikContext } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { saveInvoke } from 'utils';
import { Icon } from 'components';
/**
* Receipt floating actions bar.
*/
export default function ReceiptFormFloatingActions({
isSubmitting,
receiptId,
onSubmitClick,
onCancelClick,
onClearClick,
onSubmitAndNewClick,
}) {
const { resetForm } = useFormikContext();
const { resetForm, submitForm } = useFormikContext();
const handleSubmitAndNewClick = useCallback(
(event) => {
submitForm();
saveInvoke(onSubmitClick, event, {
redirect: false,
});
},
[submitForm],
);
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
const handleClearBtnClick = (event) => {
// saveInvoke(onClearClick, event);
resetForm();
};
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event);
}}
>
{receiptId ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitAndNewClick, event);
}}
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={(event) => {
resetForm();
saveInvoke(onClearClick, event);
}}
>
<T id={'clear'} />
</Button>
<Button className={'ml1'} onClick={(event) => {
saveInvoke(onCancelClick, event);
}}>
<T id={'close'} />
</Button>
<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}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</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>
</div>
);
}

112
client/src/containers/Vendors/VendorFloatingActions.js
View File

@@ -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 (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitClick, event);
}}
>
{vendor ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
className={'ml1'}
name={'save_and_new'}
type="submit"
onClick={(event) => {
saveInvoke(onSubmitAndNewClick, event);
}}
>
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
onClick={(event) => {
saveInvoke(onCancelClick, event);
}}
>
<T id={'close'} />
</Button>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={handleSubmitBtnClick}
text={vendor ? <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}
>
<Button
intent={Intent.PRIMARY}
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
/>
</Popover>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={handleClearBtnClick}
text={vendor ? <T id={'reset'} /> : <T id={'clear'} />}
/>
{/* ----------- Cancel ----------- */}
<Button
className={'ml1'}
onClick={handleCancelBtnClick}
text={<T id={'cancel'} />}
/>
</ButtonGroup>
</div>
);
}

11
client/src/containers/Vendors/VendorForm.js
View File

@@ -143,9 +143,12 @@ function VendorForm({
history.goBack();
}, [history]);
const handleSubmitAndNewClick = useCallback(() => {
setSubmitPayload({ noRedirect: true });
});
const handleSubmitClick = useCallback(
(event, payload) => {
setSubmitPayload({ ...payload });
},
[setSubmitPayload],
);
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
@@ -173,8 +176,8 @@ function VendorForm({
<VendorFloatingActions
isSubmitting={isSubmitting}
vendor={vendorId}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick}
onSubmitAndNewClick={handleSubmitAndNewClick}
/>
</Form>
)}