mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
refactoring: sales tables.
refacoring: purchases tables.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,276 @@
|
||||
import React, { useState, useMemo, useEffect, useCallback } from 'react';
|
||||
import { omit } from 'lodash';
|
||||
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { Hint, Icon } from 'components';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {
|
||||
InputGroupCell,
|
||||
MoneyFieldCell,
|
||||
ItemsListCell,
|
||||
PercentFieldCell,
|
||||
DivFieldCell,
|
||||
} from 'components/DataTableCells';
|
||||
|
||||
import withItems from 'containers/Items/withItems';
|
||||
import { compose, formattedAmount } from 'utils';
|
||||
|
||||
const ActionsCellRenderer = ({
|
||||
row: { index },
|
||||
column: { id },
|
||||
cell: { value },
|
||||
data,
|
||||
payload,
|
||||
}) => {
|
||||
if (data.length <= index + 1) {
|
||||
return '';
|
||||
}
|
||||
const onRemoveRole = () => {
|
||||
payload.removeRow(index);
|
||||
};
|
||||
return (
|
||||
<Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
|
||||
<Button
|
||||
icon={<Icon icon={'times-circle'} iconSize={14} />}
|
||||
iconSize={14}
|
||||
className="m12"
|
||||
intent={Intent.DANGER}
|
||||
onClick={onRemoveRole}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const TotalEstimateCellRederer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
const total = props.data.reduce((total, entry) => {
|
||||
const amount = parseInt(entry[type], 10);
|
||||
const computed = amount ? total + amount : total;
|
||||
|
||||
return computed;
|
||||
}, 0);
|
||||
return <span>{formattedAmount(total, 'USD')}</span>;
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
|
||||
const calculateDiscount = (discount, quantity, rate) =>
|
||||
quantity * rate - (quantity * rate * discount) / 100;
|
||||
|
||||
const CellRenderer = (content, type) => (props) => {
|
||||
if (props.data.length === props.row.index + 1) {
|
||||
return '';
|
||||
}
|
||||
return content(props);
|
||||
};
|
||||
|
||||
const ItemHeaderCell = () => {
|
||||
return (
|
||||
<>
|
||||
<T id={'product_and_service'} />
|
||||
<Hint />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function EntriesItemsTable({
|
||||
//#withitems
|
||||
itemsCurrentPage,
|
||||
|
||||
//#ownProps
|
||||
onClickRemoveRow,
|
||||
onClickAddNewRow,
|
||||
onClickClearAllLines,
|
||||
entries,
|
||||
|
||||
errors,
|
||||
setFieldValue,
|
||||
values,
|
||||
}) {
|
||||
const [rows, setRows] = useState([]);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
setRows([...entries.map((e) => ({ ...e }))]);
|
||||
}, [entries]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: '#',
|
||||
accessor: 'index',
|
||||
Cell: ({ row: { index } }) => <span>{index + 1}</span>,
|
||||
width: 40,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
className: 'index',
|
||||
},
|
||||
{
|
||||
Header: ItemHeaderCell,
|
||||
id: 'item_id',
|
||||
accessor: 'item_id',
|
||||
Cell: ItemsListCell,
|
||||
// ItemsListCell
|
||||
disableSortBy: true,
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'description' }),
|
||||
accessor: 'description',
|
||||
Cell: InputGroupCell,
|
||||
disableSortBy: true,
|
||||
className: 'description',
|
||||
width: 100,
|
||||
},
|
||||
|
||||
{
|
||||
Header: formatMessage({ id: 'quantity' }),
|
||||
accessor: 'quantity',
|
||||
Cell: CellRenderer(InputGroupCell, 'quantity'),
|
||||
disableSortBy: true,
|
||||
width: 80,
|
||||
className: 'quantity',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'rate' }),
|
||||
accessor: 'rate',
|
||||
Cell: TotalEstimateCellRederer(MoneyFieldCell, 'rate'),
|
||||
disableSortBy: true,
|
||||
width: 80,
|
||||
className: 'rate',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'discount' }),
|
||||
accessor: 'discount',
|
||||
Cell: CellRenderer(PercentFieldCell, InputGroupCell),
|
||||
disableSortBy: true,
|
||||
width: 80,
|
||||
className: 'discount',
|
||||
},
|
||||
{
|
||||
Header: formatMessage({ id: 'total' }),
|
||||
accessor: (row) =>
|
||||
calculateDiscount(row.discount, row.quantity, row.rate),
|
||||
Cell: TotalEstimateCellRederer(DivFieldCell, 'total'),
|
||||
disableSortBy: true,
|
||||
width: 120,
|
||||
className: 'total',
|
||||
},
|
||||
{
|
||||
Header: '',
|
||||
accessor: 'action',
|
||||
Cell: ActionsCellRenderer,
|
||||
className: 'actions',
|
||||
disableSortBy: true,
|
||||
disableResizing: true,
|
||||
width: 45,
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
|
||||
const handleUpdateData = useCallback(
|
||||
(rowIndex, columnId, value) => {
|
||||
const newRow = rows.map((row, index) => {
|
||||
if (index === rowIndex) {
|
||||
const newRow = { ...rows[rowIndex], [columnId]: value };
|
||||
return {
|
||||
...newRow,
|
||||
total: calculateDiscount(
|
||||
newRow.discount,
|
||||
newRow.quantity,
|
||||
newRow.rate,
|
||||
),
|
||||
};
|
||||
}
|
||||
return row;
|
||||
});
|
||||
setFieldValue(
|
||||
'entries',
|
||||
newRow.map((row) => ({
|
||||
...omit(row, ['total']),
|
||||
})),
|
||||
);
|
||||
},
|
||||
[rows, setFieldValue],
|
||||
);
|
||||
|
||||
const handleRemoveRow = useCallback(
|
||||
(rowIndex) => {
|
||||
if (rows.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const removeIndex = parseInt(rowIndex, 10);
|
||||
const newRows = rows.filter((row, index) => index !== removeIndex);
|
||||
setFieldValue(
|
||||
'entries',
|
||||
newRows.map((row, index) => ({
|
||||
...omit(row),
|
||||
index: index + 1,
|
||||
})),
|
||||
);
|
||||
onClickRemoveRow && onClickRemoveRow(removeIndex);
|
||||
},
|
||||
[rows, setFieldValue, onClickRemoveRow],
|
||||
);
|
||||
|
||||
const onClickNewRow = () => {
|
||||
onClickAddNewRow && onClickAddNewRow();
|
||||
};
|
||||
|
||||
const handleClickClearAllLines = () => {
|
||||
onClickClearAllLines && onClickClearAllLines();
|
||||
};
|
||||
|
||||
const rowClassNames = useCallback(
|
||||
(row) => ({
|
||||
'row--total': rows.length === row.index + 1,
|
||||
}),
|
||||
[rows],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classNames(
|
||||
CLASSES.DATATABLE_EDITOR,
|
||||
CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
|
||||
)}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
rowClassNames={rowClassNames}
|
||||
payload={{
|
||||
items: itemsCurrentPage,
|
||||
errors: errors.entries || [],
|
||||
updateData: handleUpdateData,
|
||||
removeRow: handleRemoveRow,
|
||||
}}
|
||||
/>
|
||||
<div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--new-line'}
|
||||
onClick={onClickNewRow}
|
||||
>
|
||||
<T id={'new_lines'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
small={true}
|
||||
className={'button--secondary button--clear-lines ml1'}
|
||||
onClick={handleClickClearAllLines}
|
||||
>
|
||||
<T id={'clear_all_lines'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withItems(({ itemsCurrentPage }) => ({
|
||||
itemsCurrentPage,
|
||||
})),
|
||||
)(EntriesItemsTable);
|
||||
@@ -0,0 +1,202 @@
|
||||
import React from 'react';
|
||||
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 { If, Icon } from 'components';
|
||||
|
||||
/**
|
||||
* Estimate floating actions bar.
|
||||
*/
|
||||
export default function EstimateFloatingActions({
|
||||
isSubmitting,
|
||||
onSubmitClick,
|
||||
onCancelClick,
|
||||
estimate,
|
||||
}) {
|
||||
const { resetForm, submitForm } = useFormikContext();
|
||||
|
||||
const handleSubmitDeliverBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDeliverAndNewBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
deliver: true,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDeliverContinueEditingBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDraftBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDraftAndNewBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
deliver: false,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDraftContinueEditingBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancelBtnClick = (event) => {
|
||||
saveInvoke(onCancelClick, event);
|
||||
};
|
||||
|
||||
const handleClearBtnClick = (event) => {
|
||||
resetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
|
||||
{/* ----------- Save And Deliver ----------- */}
|
||||
<If condition={!estimate || !estimate?.is_delivered}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitDeliverBtnClick}
|
||||
text={<T id={'save_and_deliver'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'deliver_and_new'} />}
|
||||
onClick={handleSubmitDeliverAndNewBtnClick}
|
||||
/>
|
||||
<MenuItem
|
||||
text={<T id={'deliver_continue_editing'} />}
|
||||
onClick={handleSubmitDeliverContinueEditingBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
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
|
||||
disabled={isSubmitting}
|
||||
rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
|
||||
/>
|
||||
</Popover>
|
||||
</ButtonGroup>
|
||||
</If>
|
||||
{/* ----------- Save and New ----------- */}
|
||||
<If condition={estimate && estimate?.is_delivered}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitDeliverBtnClick}
|
||||
text={<T id={'save'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'save_and_new'} />}
|
||||
onClick={handleSubmitDeliverAndNewBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
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={estimate ? <T id={'reset'} /> : <T id={'clear'} />}
|
||||
/>
|
||||
{/* ----------- Cancel ----------- */}
|
||||
<Button
|
||||
className={'ml1'}
|
||||
onClick={handleCancelBtnClick}
|
||||
text={<T id={'cancel'} />}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
import React, { useMemo, useCallback, useEffect, useState } from 'react';
|
||||
import { Formik, Form } from 'formik';
|
||||
import moment from 'moment';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick, sumBy } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import {
|
||||
CreateEstimateFormSchema,
|
||||
EditEstimateFormSchema,
|
||||
} from './EstimateForm.schema';
|
||||
|
||||
import EstimateFormHeader from './EstimateFormHeader';
|
||||
import EstimateFormBody from './EstimateFormBody';
|
||||
import EstimateFloatingActions from './EstimateFloatingActions';
|
||||
import EstimateFormFooter from './EstimateFormFooter';
|
||||
import EstimateNumberWatcher from './EstimateNumberWatcher';
|
||||
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withEstimateDetail from './withEstimateDetail';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withMediaActions from 'containers/Media/withMediaActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
|
||||
import { AppToaster } from 'components';
|
||||
import { ERROR } from 'common/errors';
|
||||
|
||||
import {
|
||||
compose,
|
||||
repeatValue,
|
||||
defaultToTransform,
|
||||
orderingLinesIndexes,
|
||||
} from 'utils';
|
||||
|
||||
const MIN_LINES_NUMBER = 4;
|
||||
|
||||
const defaultEstimate = {
|
||||
index: 0,
|
||||
item_id: '',
|
||||
rate: '',
|
||||
discount: 0,
|
||||
quantity: 1,
|
||||
description: '',
|
||||
};
|
||||
|
||||
const defaultInitialValues = {
|
||||
customer_id: '',
|
||||
estimate_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
expiration_date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
estimate_number: '',
|
||||
delivered: '',
|
||||
reference: '',
|
||||
note: '',
|
||||
terms_conditions: '',
|
||||
entries: [...repeatValue(defaultEstimate, MIN_LINES_NUMBER)],
|
||||
};
|
||||
|
||||
/**
|
||||
* Estimate form.
|
||||
*/
|
||||
const EstimateForm = ({
|
||||
// #WithMedia
|
||||
requestSubmitMedia,
|
||||
requestDeleteMedia,
|
||||
|
||||
// #WithEstimateActions
|
||||
requestSubmitEstimate,
|
||||
requestEditEstimate,
|
||||
setEstimateNumberChanged,
|
||||
|
||||
//#withDashboard
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
|
||||
// #withSettings
|
||||
estimateNextNumber,
|
||||
estimateNumberPrefix,
|
||||
|
||||
//#withEstimateDetail
|
||||
estimate,
|
||||
|
||||
// #withEstimates
|
||||
estimateNumberChanged,
|
||||
|
||||
//#own Props
|
||||
estimateId,
|
||||
onFormSubmit,
|
||||
onCancelForm,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const history = useHistory();
|
||||
const [submitPayload, setSubmitPayload] = useState({});
|
||||
|
||||
const isNewMode = !estimateId;
|
||||
|
||||
const estimateNumber = estimateNumberPrefix
|
||||
? `${estimateNumberPrefix}-${estimateNextNumber}`
|
||||
: estimateNextNumber;
|
||||
|
||||
useEffect(() => {
|
||||
const transNumber = !isNewMode ? estimate.estimate_number : estimateNumber;
|
||||
|
||||
if (!isNewMode) {
|
||||
changePageTitle(formatMessage({ id: 'edit_estimate' }));
|
||||
} else {
|
||||
changePageTitle(formatMessage({ id: 'new_estimate' }));
|
||||
}
|
||||
changePageSubtitle(
|
||||
defaultToTransform(estimateNumber, `No. ${transNumber}`, ''),
|
||||
);
|
||||
}, [
|
||||
estimate,
|
||||
estimateNumber,
|
||||
isNewMode,
|
||||
formatMessage,
|
||||
changePageTitle,
|
||||
changePageSubtitle,
|
||||
]);
|
||||
|
||||
// Initial values in create and edit mode.
|
||||
const initialValues = useMemo(
|
||||
() => ({
|
||||
...(estimate
|
||||
? {
|
||||
...pick(estimate, Object.keys(defaultInitialValues)),
|
||||
entries: [
|
||||
...estimate.entries.map((estimate) => ({
|
||||
...pick(estimate, Object.keys(defaultEstimate)),
|
||||
})),
|
||||
...repeatValue(
|
||||
defaultEstimate,
|
||||
Math.max(MIN_LINES_NUMBER - estimate.entries.length, 0),
|
||||
),
|
||||
],
|
||||
}
|
||||
: {
|
||||
...defaultInitialValues,
|
||||
estimate_number: estimateNumber,
|
||||
entries: orderingLinesIndexes(defaultInitialValues.entries),
|
||||
}),
|
||||
}),
|
||||
[estimate, estimateNumber],
|
||||
);
|
||||
|
||||
// Transform response errors to fields.
|
||||
const handleErrors = (errors, { setErrors }) => {
|
||||
if (errors.some((e) => e.type === ERROR.ESTIMATE_NUMBER_IS_NOT_UNQIUE)) {
|
||||
setErrors({
|
||||
estimate_number: formatMessage({
|
||||
id: 'estimate_number_is_not_unqiue',
|
||||
}),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handles form submit.
|
||||
const handleFormSubmit = (
|
||||
values,
|
||||
{ setSubmitting, setErrors, resetForm },
|
||||
) => {
|
||||
setSubmitting(true);
|
||||
|
||||
const entries = values.entries.filter(
|
||||
(item) => item.item_id && item.quantity,
|
||||
);
|
||||
|
||||
const totalQuantity = sumBy(entries, (entry) => parseInt(entry.quantity));
|
||||
|
||||
if (totalQuantity === 0) {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'quantity_cannot_be_zero_or_empty',
|
||||
}),
|
||||
intent: Intent.DANGER,
|
||||
});
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const form = {
|
||||
...values,
|
||||
delivered: submitPayload.deliver,
|
||||
// Exclude all entries properties that out of request schema.
|
||||
entries: entries.map((entry) => ({
|
||||
...pick(entry, Object.keys(defaultEstimate)),
|
||||
})),
|
||||
};
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: formatMessage(
|
||||
{
|
||||
id: isNewMode
|
||||
? 'the_estimate_has_been_edited_successfully'
|
||||
: 'the_estimate_has_been_created_successfully',
|
||||
},
|
||||
{ number: values.estimate_number },
|
||||
),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
|
||||
if (submitPayload.redirect) {
|
||||
history.push('/estimates');
|
||||
}
|
||||
if (submitPayload.resetForm) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const onError = (errors) => {
|
||||
if (errors) {
|
||||
handleErrors(errors, { setErrors });
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
if (estimate && estimate.id) {
|
||||
requestEditEstimate(estimate.id, form).then(onSuccess).catch(onError);
|
||||
} else {
|
||||
requestSubmitEstimate(form).then(onSuccess).catch(onError);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEstimateNumberChange = useCallback(
|
||||
(estimateNumber) => {
|
||||
changePageSubtitle(
|
||||
defaultToTransform(estimateNumber, `No. ${estimateNumber}`, ''),
|
||||
);
|
||||
},
|
||||
[changePageSubtitle],
|
||||
);
|
||||
|
||||
const handleSubmitClick = useCallback(
|
||||
(event, payload) => {
|
||||
setSubmitPayload({ ...payload });
|
||||
},
|
||||
[setSubmitPayload],
|
||||
);
|
||||
|
||||
const handleCancelClick = useCallback(
|
||||
(event) => {
|
||||
history.goBack();
|
||||
},
|
||||
[history],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CLASSES.PAGE_FORM,
|
||||
CLASSES.PAGE_FORM_STRIP_STYLE,
|
||||
CLASSES.PAGE_FORM_ESTIMATE,
|
||||
)}
|
||||
>
|
||||
<Formik
|
||||
validationSchema={
|
||||
isNewMode ? CreateEstimateFormSchema : EditEstimateFormSchema
|
||||
}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
{({ isSubmitting}) => (
|
||||
<Form>
|
||||
<EstimateFormHeader
|
||||
onEstimateNumberChanged={handleEstimateNumberChange}
|
||||
/>
|
||||
<EstimateNumberWatcher estimateNumber={estimateNumber} />
|
||||
<EstimateFormBody defaultEstimate={defaultEstimate} />
|
||||
<EstimateFormFooter />
|
||||
<EstimateFloatingActions
|
||||
isSubmitting={isSubmitting}
|
||||
estimate={estimate}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick}
|
||||
/>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withEstimateActions,
|
||||
withEstimateDetail(),
|
||||
withDashboardActions,
|
||||
withMediaActions,
|
||||
withSettings(({ estimatesSettings }) => ({
|
||||
estimateNextNumber: estimatesSettings?.nextNumber,
|
||||
estimateNumberPrefix: estimatesSettings?.numberPrefix,
|
||||
})),
|
||||
)(EstimateForm);
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as Yup from 'yup';
|
||||
import { formatMessage } from 'services/intl';
|
||||
import { DATATYPES_LENGTH } from 'common/dataTypes';
|
||||
import { isBlank } from 'utils';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
customer_id: Yup.number()
|
||||
.label(formatMessage({ id: 'customer_name_' }))
|
||||
.required(),
|
||||
estimate_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'estimate_date_' })),
|
||||
expiration_date: Yup.date()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'expiration_date_' })),
|
||||
estimate_number: Yup.string()
|
||||
.max(DATATYPES_LENGTH.STRING)
|
||||
.label(formatMessage({ id: 'estimate_number_' })),
|
||||
reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
|
||||
note: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(DATATYPES_LENGTH.STRING)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
terms_conditions: Yup.string()
|
||||
.trim()
|
||||
.min(1)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
delivered: Yup.boolean(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
quantity: Yup.number()
|
||||
.nullable()
|
||||
.max(DATATYPES_LENGTH.INT_10)
|
||||
.when(['rate'], {
|
||||
is: (rate) => rate,
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
rate: Yup.number().nullable().max(DATATYPES_LENGTH.INT_10),
|
||||
item_id: Yup.number()
|
||||
.nullable()
|
||||
.when(['quantity', 'rate'], {
|
||||
is: (quantity, rate) => !isBlank(quantity) && !isBlank(rate),
|
||||
then: Yup.number().required(),
|
||||
}),
|
||||
discount: Yup.number().nullable().min(0).max(100),
|
||||
description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
|
||||
}),
|
||||
),
|
||||
});
|
||||
|
||||
export const CreateEstimateFormSchema = Schema;
|
||||
export const EditEstimateFormSchema = Schema;
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import EditableItemsEntriesTable from 'containers/Entries/EditableItemsEntriesTable';
|
||||
|
||||
export default function EstimateFormBody({ defaultEstimate }) {
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
|
||||
<EditableItemsEntriesTable
|
||||
defaultEntry={defaultEstimate}
|
||||
filterSellableItems={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { FormGroup, TextArea } from '@blueprintjs/core';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { Row, Col } from 'components';
|
||||
import Dragzone from 'components/Dragzone';
|
||||
|
||||
import { inputIntent } from 'utils';
|
||||
|
||||
/**
|
||||
* Estimate form footer.
|
||||
*/
|
||||
export default function EstiamteFormFooter({}) {
|
||||
return (
|
||||
<div class={classNames(CLASSES.PAGE_FORM_FOOTER)}>
|
||||
<Row>
|
||||
<Col md={8}>
|
||||
{/* --------- Customer Note --------- */}
|
||||
<FastField name={'note'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'customer_note'} />}
|
||||
className={'form-group--customer_note'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
>
|
||||
<TextArea growVertically={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* --------- Terms and conditions --------- */}
|
||||
<FastField name={'terms_conditions'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'terms_conditions'} />}
|
||||
className={'form-group--terms_conditions'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
>
|
||||
<TextArea growVertically={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
|
||||
<Col md={4}>
|
||||
<Dragzone
|
||||
initialFiles={[]}
|
||||
// onDrop={handleDropFiles}
|
||||
// onDeleteFile={handleDeleteFile}
|
||||
hint={'Attachments: Maxiumum size: 20MB'}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { sumBy } from 'lodash';
|
||||
import { useFormikContext } from 'formik';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import EstimateFormHeaderFields from './EstimateFormHeaderFields';
|
||||
import { PageFormBigNumber } from 'components';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import { compose } from 'utils';
|
||||
|
||||
// Estimate form top header.
|
||||
function EstimateFormHeader({
|
||||
// #ownProps
|
||||
onEstimateNumberChanged,
|
||||
|
||||
// #withSettings
|
||||
baseCurrency,
|
||||
}) {
|
||||
const { values } = useFormikContext();
|
||||
|
||||
// Calculate the total due amount of bill entries.
|
||||
const totalDueAmount = useMemo(() => sumBy(values.entries, 'total'), [
|
||||
values.entries,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
|
||||
<EstimateFormHeaderFields
|
||||
onEstimateNumberChanged={onEstimateNumberChanged}
|
||||
/>
|
||||
<PageFormBigNumber
|
||||
label={'Amount'}
|
||||
amount={totalDueAmount}
|
||||
currencyCode={baseCurrency}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(EstimateFormHeader);
|
||||
@@ -0,0 +1,182 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { FormattedMessage as T } from 'react-intl';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils';
|
||||
import classNames from 'classnames';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import {
|
||||
ContactSelecetList,
|
||||
FieldRequiredHint,
|
||||
Icon,
|
||||
InputPrependButton,
|
||||
Row,
|
||||
Col,
|
||||
} from 'components';
|
||||
|
||||
import withCustomers from 'containers/Customers/withCustomers';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { inputIntent, handleDateChange } from 'utils';
|
||||
import { formatMessage } from 'services/intl';
|
||||
|
||||
function EstimateFormHeader({
|
||||
//#withCustomers
|
||||
customers,
|
||||
// #withDialogActions
|
||||
openDialog,
|
||||
// #ownProps
|
||||
onEstimateNumberChanged,
|
||||
}) {
|
||||
const handleEstimateNumberChange = useCallback(() => {
|
||||
openDialog('estimate-number-form', {});
|
||||
}, [openDialog]);
|
||||
|
||||
const handleEstimateNumberChanged = (event) => {
|
||||
saveInvoke(onEstimateNumberChanged, event.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
|
||||
{/* ----------- Customer name ----------- */}
|
||||
<FastField name={'customer_id'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'customer_name'} />}
|
||||
inline={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--customer')}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'customer_id'} />}
|
||||
>
|
||||
<ContactSelecetList
|
||||
contactsList={customers}
|
||||
selectedContactId={value}
|
||||
defaultSelectText={<T id={'select_customer_account'} />}
|
||||
onContactSelected={(customer) => {
|
||||
form.setFieldValue('customer_id', customer.id);
|
||||
}}
|
||||
popoverFill={true}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Estimate date ----------- */}
|
||||
<FastField name={'estimate_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'estimate_date'} />}
|
||||
inline={true}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames(CLASSES.FILL, 'form-group--estimate-date')}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="estimate_date" />}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('estimate_date', formattedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{
|
||||
leftIcon: <Icon icon={'date-range'} />,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Expiration date ----------- */}
|
||||
<FastField name={'expiration_date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'expiration_date'} />}
|
||||
inline={true}
|
||||
className={classNames(
|
||||
CLASSES.FORM_GROUP_LIST_SELECT,
|
||||
CLASSES.FILL,
|
||||
'form-group--expiration-date',
|
||||
)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="expiration_date" />}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
value={tansformDateValue(value)}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('expiration_date', formattedDate);
|
||||
})}
|
||||
popoverProps={{ position: Position.BOTTOM, minimal: true }}
|
||||
inputProps={{
|
||||
leftIcon: <Icon icon={'date-range'} />,
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Estimate number ----------- */}
|
||||
<FastField name={'estimate_number'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'estimate'} />}
|
||||
inline={true}
|
||||
className={('form-group--estimate-number', CLASSES.FILL)}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="estimate_number" />}
|
||||
>
|
||||
<ControlGroup fill={true}>
|
||||
<InputGroup
|
||||
minimal={true}
|
||||
{...field}
|
||||
onBlur={handleEstimateNumberChanged}
|
||||
/>
|
||||
<InputPrependButton
|
||||
buttonProps={{
|
||||
onClick: handleEstimateNumberChange,
|
||||
icon: <Icon icon={'settings-18'} />,
|
||||
}}
|
||||
tooltip={true}
|
||||
tooltipProps={{
|
||||
content: 'Setting your auto-generated estimate number',
|
||||
position: Position.BOTTOM_LEFT,
|
||||
}}
|
||||
/>
|
||||
</ControlGroup>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Reference ----------- */}
|
||||
<FastField name={'reference'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'reference'} />}
|
||||
inline={true}
|
||||
className={classNames('form-group--reference', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="reference" />}
|
||||
>
|
||||
<InputGroup minimal={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withCustomers(({ customers }) => ({
|
||||
customers,
|
||||
})),
|
||||
withDialogActions,
|
||||
)(EstimateFormHeader);
|
||||
@@ -0,0 +1,104 @@
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useParams, useHistory } from 'react-router-dom';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import EstimateForm from './EstimateForm';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
|
||||
import withCustomersActions from 'containers/Customers/withCustomersActions';
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import withSettingsActions from 'containers/Settings/withSettingsActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
import 'style/pages/SaleEstimate/PageForm.scss';
|
||||
|
||||
function EstimateFormPage({
|
||||
// #withCustomersActions
|
||||
requestFetchCustomers,
|
||||
|
||||
// #withItemsActions
|
||||
requestFetchItems,
|
||||
|
||||
// #withEstimateActions
|
||||
requestFetchEstimate,
|
||||
|
||||
// #withSettingsActions
|
||||
requestFetchOptions,
|
||||
|
||||
// #withDashboardActions
|
||||
setSidebarShrink,
|
||||
resetSidebarPreviousExpand,
|
||||
setDashboardBackLink,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
// Shrink the sidebar by foce.
|
||||
setSidebarShrink();
|
||||
// Show the back link on dashboard topbar.
|
||||
setDashboardBackLink(true);
|
||||
|
||||
return () => {
|
||||
// Reset the sidebar to the previous status.
|
||||
resetSidebarPreviousExpand();
|
||||
// Hide the back link on dashboard topbar.
|
||||
setDashboardBackLink(false);
|
||||
};
|
||||
}, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]);
|
||||
|
||||
const fetchEstimate = useQuery(
|
||||
['estimate', id],
|
||||
(key, _id) => requestFetchEstimate(_id),
|
||||
{ enabled: !!id },
|
||||
);
|
||||
|
||||
// Handle fetch Items data table or list
|
||||
const fetchItems = useQuery('items-list', () => requestFetchItems({}));
|
||||
|
||||
// Handle fetch customers data table or list
|
||||
const fetchCustomers = useQuery('customers-table', () =>
|
||||
requestFetchCustomers({}),
|
||||
);
|
||||
|
||||
//
|
||||
const handleFormSubmit = useCallback(
|
||||
(payload) => {
|
||||
payload.redirect && history.push('/estimates');
|
||||
},
|
||||
[history],
|
||||
);
|
||||
const handleCancel = useCallback(() => {
|
||||
history.goBack();
|
||||
}, [history]);
|
||||
|
||||
const fetchSettings = useQuery(['settings'], () => requestFetchOptions({}));
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={
|
||||
fetchCustomers.isFetching ||
|
||||
fetchItems.isFetching ||
|
||||
fetchEstimate.isFetching
|
||||
}
|
||||
name={'estimate-form'}
|
||||
>
|
||||
<EstimateForm
|
||||
estimateId={id}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onCancelForm={handleCancel}
|
||||
/>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withEstimateActions,
|
||||
withCustomersActions,
|
||||
withItemsActions,
|
||||
withSettingsActions,
|
||||
withDashboardActions,
|
||||
)(EstimateFormPage);
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useFormikContext } from 'formik';
|
||||
|
||||
import withEstimates from './withEstimates';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
function EstimateNumberWatcher({
|
||||
estimateNumberChanged,
|
||||
|
||||
// #WithEstimateActions
|
||||
setEstimateNumberChanged,
|
||||
|
||||
// #withDashboardActions
|
||||
changePageSubtitle,
|
||||
|
||||
// #ownProps
|
||||
estimateNumber,
|
||||
}) {
|
||||
const { setFieldValue } = useFormikContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (estimateNumberChanged) {
|
||||
setFieldValue('estimate_number', estimateNumber);
|
||||
changePageSubtitle(`No. ${estimateNumber}`);
|
||||
setEstimateNumberChanged(false);
|
||||
}
|
||||
}, [
|
||||
estimateNumber,
|
||||
estimateNumberChanged,
|
||||
setEstimateNumberChanged,
|
||||
setFieldValue,
|
||||
changePageSubtitle,
|
||||
]);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
export default compose(
|
||||
withEstimates(({ estimateNumberChanged }) => ({
|
||||
estimateNumberChanged,
|
||||
})),
|
||||
withEstimateActions,
|
||||
withDashboardActions
|
||||
)(EstimateNumberWatcher)
|
||||
19
client/src/containers/Sales/Estimates/EstimatesAlerts.js
Normal file
19
client/src/containers/Sales/Estimates/EstimatesAlerts.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import EstimateDeleteAlert from 'containers/Alerts/Estimates/EstimateDeleteAlert';
|
||||
import EstimateDeliveredAlert from 'containers/Alerts/Estimates/EstimateDeliveredAlert';
|
||||
import EstimateApproveAlert from 'containers/Alerts/Estimates/EstimateApproveAlert';
|
||||
import EstimateRejectAlert from 'containers/Alerts/Estimates/EstimateRejectAlert';
|
||||
|
||||
/**
|
||||
* Estimates alert.
|
||||
*/
|
||||
export default function EstimatesAlerts() {
|
||||
return (
|
||||
<div>
|
||||
<EstimateDeleteAlert name={'estimate-delete'} />
|
||||
<EstimateDeliveredAlert name={'estimate-deliver'} />
|
||||
<EstimateApproveAlert name={'estimate-Approve'} />
|
||||
<EstimateRejectAlert name={'estimate-reject'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import React, { useState } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
Classes,
|
||||
Popover,
|
||||
NavbarDivider,
|
||||
NavbarGroup,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
import { If, DashboardActionViewsList } from 'components';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
|
||||
import withEstimatesActions from './withEstimatesActions';
|
||||
import { useEstimatesListContext } from './EstimatesListProvider';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Estimates list actions bar.
|
||||
*/
|
||||
function EstimateActionsBar({
|
||||
// #withEstimateActions
|
||||
setEstimatesTableState,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const [filterCount, setFilterCount] = useState(0);
|
||||
|
||||
// Estimates list context.
|
||||
const { estimatesViews } = useEstimatesListContext();
|
||||
|
||||
// Handle click a new sale estimate.
|
||||
const onClickNewEstimate = () => {
|
||||
history.push('/estimates/new');
|
||||
};
|
||||
|
||||
const handleTabChange = (customView) => {
|
||||
setEstimatesTableState({
|
||||
customViewId: customView.id || null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<DashboardActionViewsList
|
||||
resourceName={'estimates'}
|
||||
views={estimatesViews}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'plus'} />}
|
||||
text={<T id={'new_estimate'} />}
|
||||
onClick={onClickNewEstimate}
|
||||
/>
|
||||
<Popover
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text={
|
||||
filterCount <= 0 ? (
|
||||
<T id={'filter'} />
|
||||
) : (
|
||||
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
|
||||
)
|
||||
}
|
||||
icon={<Icon icon={'filter-16'} iconSize={16} />}
|
||||
/>
|
||||
</Popover>
|
||||
<If condition={false}>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'trash-16'} iconSize={16} />}
|
||||
text={<T id={'delete'} />}
|
||||
intent={Intent.DANGER}
|
||||
// onClick={handleBulkDelete}
|
||||
/>
|
||||
</If>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'print-16'} iconSize={'16'} />}
|
||||
text={<T id={'print'} />}
|
||||
/>
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-import-16'} />}
|
||||
text={<T id={'import'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
|
||||
text={<T id={'export'} />}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withEstimatesActions,
|
||||
)(EstimateActionsBar);
|
||||
@@ -0,0 +1,127 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { compose } from 'utils';
|
||||
|
||||
import { DataTable } from 'components';
|
||||
import EstimatesEmptyStatus from './EstimatesEmptyStatus';
|
||||
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
|
||||
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
|
||||
|
||||
import withEstimatesActions from './withEstimatesActions';
|
||||
import withSettings from 'containers/Settings/withSettings';
|
||||
import withAlertsActions from 'containers/Alert/withAlertActions';
|
||||
|
||||
import { useEstimatesListContext } from './EstimatesListProvider';
|
||||
import { ActionsMenu, useEstiamtesTableColumns } from './components';
|
||||
|
||||
|
||||
/**
|
||||
* Estimates datatable.
|
||||
*/
|
||||
function EstimatesDataTable({
|
||||
// #withEstimatesActions
|
||||
setEstimatesTableState,
|
||||
|
||||
// #withAlertsActions
|
||||
openAlert,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
// Estimates list context.
|
||||
const {
|
||||
estimates,
|
||||
pagination,
|
||||
isEmptyStatus,
|
||||
isEstimatesLoading,
|
||||
isEstimatesFetching,
|
||||
} = useEstimatesListContext();
|
||||
|
||||
// Estimates table columns.
|
||||
const columns = useEstiamtesTableColumns();
|
||||
|
||||
// Handle estimate edit action.
|
||||
const handleEditEstimate = (estimate) => {
|
||||
history.push(`/estimates/${estimate.id}/edit`);
|
||||
};
|
||||
// Handle estimate delete action.
|
||||
const handleDeleteEstimate = ({ id }) => {
|
||||
openAlert('estimate-delete', { estimateId: id });
|
||||
};
|
||||
|
||||
// Handle cancel/confirm estimate deliver.
|
||||
const handleDeliverEstimate = ({ id }) => {
|
||||
openAlert('estimate-deliver', { estimateId: id });
|
||||
};
|
||||
|
||||
// Handle cancel/confirm estimate approve.
|
||||
const handleApproveEstimate = ({ id }) => {
|
||||
openAlert('estimate-Approve', { estimateId: id });
|
||||
};
|
||||
|
||||
// Handle cancel/confirm estimate reject.
|
||||
const handleRejectEstimate = ({ id }) => {
|
||||
openAlert('estimate-reject', { estimateId: id });
|
||||
};
|
||||
|
||||
// Handles fetch data.
|
||||
const handleFetchData = useCallback(
|
||||
({ pageIndex, pageSize, sortBy }) => {
|
||||
setEstimatesTableState({
|
||||
pageIndex,
|
||||
pageSize,
|
||||
sortBy,
|
||||
});
|
||||
},
|
||||
[setEstimatesTableState],
|
||||
);
|
||||
|
||||
if (isEmptyStatus) {
|
||||
return <EstimatesEmptyStatus />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={estimates}
|
||||
|
||||
loading={isEstimatesLoading}
|
||||
headerLoading={isEstimatesLoading}
|
||||
progressBarLoading={isEstimatesFetching}
|
||||
|
||||
onFetchData={handleFetchData}
|
||||
noInitialFetch={true}
|
||||
manualSortBy={true}
|
||||
selectionColumn={true}
|
||||
sticky={true}
|
||||
pagination={true}
|
||||
|
||||
manualPagination={true}
|
||||
pagesCount={pagination.pagesCount}
|
||||
|
||||
TableLoadingRenderer={TableSkeletonRows}
|
||||
TableHeaderSkeletonRenderer={TableSkeletonHeader}
|
||||
|
||||
ContextMenu={ActionsMenu}
|
||||
payload={{
|
||||
onApprove: handleApproveEstimate,
|
||||
onEdit: handleEditEstimate,
|
||||
onReject: handleRejectEstimate,
|
||||
onDeliver: handleDeliverEstimate,
|
||||
onDelete: handleDeleteEstimate,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withEstimatesActions,
|
||||
withAlertsActions,
|
||||
withSettings(({ organizationSettings }) => ({
|
||||
baseCurrency: organizationSettings?.baseCurrency,
|
||||
})),
|
||||
)(EstimatesDataTable);
|
||||
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { EmptyStatus } from 'components';
|
||||
|
||||
export default function EstimatesEmptyStatus() {
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<EmptyStatus
|
||||
title={"It's time to send estimates to your customers."}
|
||||
description={
|
||||
<p>
|
||||
It is a long established fact that a reader will be distracted by the
|
||||
readable content of a page when looking at its layout.
|
||||
</p>
|
||||
}
|
||||
action={
|
||||
<>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
large={true}
|
||||
onClick={() => {
|
||||
history.push('/estimates/new');
|
||||
}}
|
||||
>
|
||||
New sale estimate
|
||||
</Button>
|
||||
<Button intent={Intent.NONE} large={true}>
|
||||
Learn more
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
import EstimatesActionsBar from './EstimatesActionsBar';
|
||||
import EstimatesAlerts from '../EstimatesAlerts';
|
||||
import EstimatesViewTabs from './EstimatesViewTabs';
|
||||
import EstimatesDataTable from './EstimatesDataTable';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withEstimates from './withEstimates';
|
||||
|
||||
import { EstimatesListProvider } from './EstimatesListProvider';
|
||||
import { compose, transformTableStateToQuery } from 'utils';
|
||||
|
||||
/**
|
||||
* Sale estimates list page.
|
||||
*/
|
||||
function EstimatesList({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
// #withEstimate
|
||||
estimatesTableState,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'estimates_list' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
return (
|
||||
<EstimatesListProvider
|
||||
query={transformTableStateToQuery(estimatesTableState)}
|
||||
>
|
||||
<EstimatesActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<EstimatesViewTabs />
|
||||
<EstimatesDataTable />
|
||||
</DashboardPageContent>
|
||||
|
||||
<EstimatesAlerts />
|
||||
</EstimatesListProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
|
||||
)(EstimatesList);
|
||||
@@ -0,0 +1,65 @@
|
||||
import React, { createContext } from 'react';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import { useResourceViews, useResourceFields, useEstimates } from 'hooks/query';
|
||||
import { isTableEmptyStatus } from 'utils';
|
||||
|
||||
const EstimatesListContext = createContext();
|
||||
|
||||
/**
|
||||
* Sale estimates data provider.
|
||||
*/
|
||||
function EstimatesListProvider({ query, ...props }) {
|
||||
// Fetches estimates resource views and fields.
|
||||
const { data: estimatesViews, isFetching: isViewsLoading } = useResourceViews(
|
||||
'sale_estimates',
|
||||
);
|
||||
|
||||
// Fetches the estimates resource fields.
|
||||
const {
|
||||
data: estimatesFields,
|
||||
isFetching: isFieldsLoading,
|
||||
} = useResourceFields('sale_estimates');
|
||||
|
||||
// Fetch estimates list according to the given custom view id.
|
||||
const {
|
||||
data: { estimates, pagination, filterMeta },
|
||||
isLoading: isEstimatesLoading,
|
||||
isFetching: isEstimatesFetching,
|
||||
} = useEstimates(query, { keepPreviousData: true });
|
||||
|
||||
// Detarmines the datatable empty status.
|
||||
const isEmptyStatus =
|
||||
isTableEmptyStatus({
|
||||
data: estimates,
|
||||
pagination,
|
||||
filterMeta,
|
||||
}) && !isEstimatesFetching;
|
||||
|
||||
// Provider payload.
|
||||
const provider = {
|
||||
estimates,
|
||||
pagination,
|
||||
estimatesFields,
|
||||
estimatesViews,
|
||||
|
||||
isEstimatesLoading,
|
||||
isEstimatesFetching,
|
||||
isFieldsLoading,
|
||||
isViewsLoading,
|
||||
|
||||
isEmptyStatus,
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider
|
||||
loading={isViewsLoading || isFieldsLoading}
|
||||
name={'sale_estimate'}
|
||||
>
|
||||
<EstimatesListContext.Provider value={provider} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const useEstimatesListContext = () => React.useContext(EstimatesListContext);
|
||||
|
||||
export { EstimatesListProvider, useEstimatesListContext };
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
import withEstimatesActions from './withEstimatesActions';
|
||||
import withEstimates from './withEstimates';
|
||||
|
||||
import { useEstimatesListContext } from './EstimatesListProvider';
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Estimates views tabs.
|
||||
*/
|
||||
function EstimateViewTabs({
|
||||
// #withEstimatesActions
|
||||
setEstimatesTableState,
|
||||
|
||||
// #withEstimates
|
||||
estimatesTableState
|
||||
}) {
|
||||
// Estimates list context.
|
||||
const { estimatesViews } = useEstimatesListContext();
|
||||
|
||||
const tabs = estimatesViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
|
||||
const handleTabsChange = (viewId) => {
|
||||
setEstimatesTableState({
|
||||
customViewId: viewId || null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
customViewId={estimatesTableState.customViewId}
|
||||
resourceName={'estimates'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withEstimatesActions,
|
||||
withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
|
||||
)(EstimateViewTabs);
|
||||
@@ -0,0 +1,195 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Tag,
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { Money, Choose, Icon, If } from 'components';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { safeCallback } from 'utils';
|
||||
import moment from 'moment';
|
||||
|
||||
/**
|
||||
* Status accessor.
|
||||
*/
|
||||
export const statusAccessor = (row) => (
|
||||
<Choose>
|
||||
<Choose.When condition={row.is_delivered && row.is_approved}>
|
||||
<Tag minimal={true} intent={Intent.SUCCESS}>
|
||||
<T id={'approved'} />
|
||||
</Tag>
|
||||
</Choose.When>
|
||||
<Choose.When condition={row.is_delivered && row.is_rejected}>
|
||||
<Tag minimal={true} intent={Intent.DANGER}>
|
||||
<T id={'rejected'} />
|
||||
</Tag>
|
||||
</Choose.When>
|
||||
<Choose.When
|
||||
condition={row.is_delivered && !row.is_rejected && !row.is_approved}
|
||||
>
|
||||
<Tag minimal={true} intent={Intent.SUCCESS}>
|
||||
<T id={'delivered'} />
|
||||
</Tag>
|
||||
</Choose.When>
|
||||
<Choose.Otherwise>
|
||||
<Tag minimal={true}>
|
||||
<T id={'draft'} />
|
||||
</Tag>
|
||||
</Choose.Otherwise>
|
||||
</Choose>
|
||||
);
|
||||
|
||||
/**
|
||||
* Actions menu.
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
row: { original },
|
||||
payload: { onEdit, onDeliver, onReject, onApprove, onDelete },
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={formatMessage({ id: 'view_details' })}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
icon={<Icon icon="pen-18" />}
|
||||
text={formatMessage({ id: 'edit_estimate' })}
|
||||
onClick={safeCallback(onEdit, original)}
|
||||
/>
|
||||
<If condition={!original.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_delivered' })}
|
||||
onClick={safeCallback(onDeliver, original)}
|
||||
/>
|
||||
</If>
|
||||
<Choose>
|
||||
<Choose.When condition={original.is_delivered && original.is_approved}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={safeCallback(onReject, original)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When condition={original.is_delivered && original.is_rejected}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={safeCallback(onApprove, original)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When condition={original.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={safeCallback(onApprove, original)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={safeCallback(onReject, original)}
|
||||
/>
|
||||
</Choose.When>
|
||||
</Choose>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_estimate' })}
|
||||
intent={Intent.DANGER}
|
||||
onClick={safeCallback(onDelete, original)}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
/>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
function DateCell({ value }) {
|
||||
return moment(value).format('YYYY MMM DD');
|
||||
}
|
||||
|
||||
function AmountAccessor(row) {
|
||||
return <Money amount={row.amount} currency={'USD'} />;
|
||||
}
|
||||
|
||||
function ActionsCell(props) {
|
||||
return (
|
||||
<Popover
|
||||
content={<ActionsMenu {...props} />}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
export function useEstiamtesTableColumns() {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return React.useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'estimate_date',
|
||||
Header: formatMessage({ id: 'estimate_date' }),
|
||||
accessor: 'estimate_date',
|
||||
Cell: DateCell,
|
||||
width: 140,
|
||||
className: 'estimate_date',
|
||||
},
|
||||
{
|
||||
id: 'customer_id',
|
||||
Header: formatMessage({ id: 'customer_name' }),
|
||||
accessor: 'customer.display_name',
|
||||
width: 140,
|
||||
className: 'customer_id',
|
||||
},
|
||||
{
|
||||
id: 'expiration_date',
|
||||
Header: formatMessage({ id: 'expiration_date' }),
|
||||
accessor: 'expiration_date',
|
||||
Cell: DateCell,
|
||||
width: 140,
|
||||
className: 'expiration_date',
|
||||
},
|
||||
{
|
||||
id: 'estimate_number',
|
||||
Header: formatMessage({ id: 'estimate_number' }),
|
||||
accessor: (row) =>
|
||||
row.estimate_number ? `#${row.estimate_number}` : null,
|
||||
width: 140,
|
||||
className: 'estimate_number',
|
||||
},
|
||||
{
|
||||
id: 'amount',
|
||||
Header: formatMessage({ id: 'amount' }),
|
||||
accessor: AmountAccessor,
|
||||
width: 140,
|
||||
className: 'amount',
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: formatMessage({ id: 'status' }),
|
||||
accessor: (row) => statusAccessor(row),
|
||||
width: 140,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'reference',
|
||||
Header: formatMessage({ id: 'reference_no' }),
|
||||
accessor: 'reference',
|
||||
width: 140,
|
||||
className: 'reference',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ActionsCell,
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getEstimatesTableStateFactory,
|
||||
} from 'store/Estimate/estimates.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const getEstimatesTableState = getEstimatesTableStateFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapped = {
|
||||
estimatesTableState: getEstimatesTableState(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
setEstimatesTableState,
|
||||
} from 'store/Estimate/estimates.actions';
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
11
client/src/containers/Sales/Estimates/withEstimateDetail.js
Normal file
11
client/src/containers/Sales/Estimates/withEstimateDetail.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getEstimateByIdFactory } from 'store/Estimate/estimates.selectors';
|
||||
|
||||
export default () => {
|
||||
const getEstimateById = getEstimateByIdFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
estimate: getEstimateById(state, props),
|
||||
});
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
Reference in New Issue
Block a user