mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-19 06:10:31 +00:00
feat: estimate status.
This commit is contained in:
@@ -25,38 +25,38 @@ export default function EstimateFloatingActions({
|
||||
onCancelClick,
|
||||
onClearClick,
|
||||
estimateId,
|
||||
estimatePublished,
|
||||
isDelivered,
|
||||
}) {
|
||||
const { resetForm, submitForm } = useFormikContext();
|
||||
|
||||
const handleSubmitPublishBtnClick = (event) => {
|
||||
const handleSubmitDeliverBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
publish: true,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitPublishAndNewBtnClick = (event) => {
|
||||
const handleSubmitDeliverAndNewBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
publish: true,
|
||||
deliver: true,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitPublishContinueEditingBtnClick = (event) => {
|
||||
const handleSubmitDeliverContinueEditingBtnClick = (event) => {
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
publish: true,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDraftBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
publish: false,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -64,7 +64,7 @@ export default function EstimateFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
publish: false,
|
||||
deliver: false,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
@@ -73,7 +73,7 @@ export default function EstimateFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
publish: false,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -88,26 +88,26 @@ export default function EstimateFloatingActions({
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
|
||||
{/* ----------- Save And Publish ----------- */}
|
||||
<If condition={!estimateId || !estimatePublished}>
|
||||
{/* ----------- Save And Deliver ----------- */}
|
||||
<If condition={!estimateId || !isDelivered}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitPublishBtnClick}
|
||||
text={<T id={'save_publish'} />}
|
||||
onClick={handleSubmitDeliverBtnClick}
|
||||
text={<T id={'save_and_deliver'} />}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'publish_and_new'} />}
|
||||
onClick={handleSubmitPublishAndNewBtnClick}
|
||||
onClick={handleSubmitDeliverAndNewBtnClick}
|
||||
/>
|
||||
<MenuItem
|
||||
text={<T id={'publish_continue_editing'} />}
|
||||
onClick={handleSubmitPublishContinueEditingBtnClick}
|
||||
onClick={handleSubmitDeliverContinueEditingBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
@@ -156,13 +156,13 @@ export default function EstimateFloatingActions({
|
||||
</ButtonGroup>
|
||||
</If>
|
||||
{/* ----------- Save and New ----------- */}
|
||||
<If condition={estimateId && estimatePublished}>
|
||||
<If condition={estimateId && isDelivered}>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
onClick={handleSubmitPublishBtnClick}
|
||||
onClick={handleSubmitDeliverBtnClick}
|
||||
text={<T id={'save'} />}
|
||||
/>
|
||||
<Popover
|
||||
@@ -170,7 +170,7 @@ export default function EstimateFloatingActions({
|
||||
<Menu>
|
||||
<MenuItem
|
||||
text={<T id={'save_and_new'} />}
|
||||
onClick={handleSubmitPublishAndNewBtnClick}
|
||||
onClick={handleSubmitDeliverAndNewBtnClick}
|
||||
/>
|
||||
</Menu>
|
||||
}
|
||||
|
||||
@@ -54,6 +54,7 @@ const defaultInitialValues = {
|
||||
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: '',
|
||||
@@ -181,6 +182,7 @@ const EstimateForm = ({
|
||||
}
|
||||
const form = {
|
||||
...values,
|
||||
delivered: submitPayload.deliver,
|
||||
// Exclude all entries properties that out of request schema.
|
||||
entries: entries.map((entry) => ({
|
||||
...pick(entry, Object.keys(defaultEstimate)),
|
||||
@@ -256,7 +258,7 @@ const EstimateForm = ({
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
{({ isSubmitting ,values }) => (
|
||||
<Form>
|
||||
<EstimateFormHeader
|
||||
onEstimateNumberChanged={handleEstimateNumberChange}
|
||||
@@ -269,7 +271,7 @@ const EstimateForm = ({
|
||||
estimateId={estimateId}
|
||||
onSubmitClick={handleSubmitClick}
|
||||
onCancelClick={handleCancelClick}
|
||||
estimatePublished={true}
|
||||
isDelivered={values.delivered}
|
||||
/>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
@@ -27,6 +27,7 @@ const Schema = Yup.object().shape({
|
||||
.min(1)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(formatMessage({ id: 'note' })),
|
||||
delivered: Yup.boolean().required(),
|
||||
entries: Yup.array().of(
|
||||
Yup.object().shape({
|
||||
quantity: Yup.number()
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useCallback, useMemo, useState } from 'react';
|
||||
import { Route, Switch, useHistory } from 'react-router-dom';
|
||||
import { useQuery } from 'react-query';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
@@ -35,11 +35,18 @@ function EstimateList({
|
||||
//#withEistimateActions
|
||||
requestFetchEstimatesTable,
|
||||
requestDeleteEstimate,
|
||||
requestDeliverdEstimate,
|
||||
requestApproveEstimate,
|
||||
requestRejectEstimate,
|
||||
addEstimatesTableQueries,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
const [deleteEstimate, setDeleteEstimate] = useState(false);
|
||||
const [deliverEstimate, setDeliverEstimate] = useState(false);
|
||||
const [approveEstimate, setApproveEstimate] = useState(false);
|
||||
const [rejectEstimate, setRejectEstimate] = useState(false);
|
||||
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
// const fetchResourceViews = useQuery(
|
||||
@@ -86,6 +93,88 @@ function EstimateList({
|
||||
});
|
||||
}, [deleteEstimate, requestDeleteEstimate, formatMessage]);
|
||||
|
||||
// Handle cancel/confirm estimate deliver.
|
||||
const handleDeliverEstimate = useCallback((estimate) => {
|
||||
setDeliverEstimate(estimate);
|
||||
}, []);
|
||||
|
||||
// Handle cancel deliver estimate alert.
|
||||
const handleCancelDeliverEstimate = useCallback(() => {
|
||||
setDeliverEstimate(false);
|
||||
}, []);
|
||||
|
||||
// Handle confirm estimate deliver.
|
||||
const handleConfirmEstimateDeliver = useCallback(() => {
|
||||
requestDeliverdEstimate(deliverEstimate.id)
|
||||
.then(() => {
|
||||
setDeliverEstimate(false);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_estimate_has_been_successfully_delivered',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('estimates-table');
|
||||
})
|
||||
.catch((error) => {
|
||||
// setDeliverEstimate(false);
|
||||
});
|
||||
}, [deliverEstimate, requestDeliverdEstimate, formatMessage]);
|
||||
|
||||
// Handle cancel/confirm estimate approve.
|
||||
const handleApproveEstimate = useCallback((estimate) => {
|
||||
setApproveEstimate(estimate);
|
||||
}, []);
|
||||
|
||||
// Handle cancel approve estimate alert.
|
||||
const handleCancelApproveEstimate = useCallback(() => {
|
||||
setApproveEstimate(false);
|
||||
}, []);
|
||||
|
||||
// Handle confirm estimate approve.
|
||||
const handleConfirmEstimateApprove = useCallback(() => {
|
||||
requestApproveEstimate(approveEstimate.id)
|
||||
.then(() => {
|
||||
setApproveEstimate(false);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_estimate_has_been_successfully_approved',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('estimates-table');
|
||||
})
|
||||
.catch((error) => {
|
||||
// setApproveEstimate(false);
|
||||
});
|
||||
}, [approveEstimate, requestApproveEstimate, formatMessage]);
|
||||
|
||||
// Handle cancel/confirm estimate reject.
|
||||
const handleRejectEstimate = useCallback((estimate) => {
|
||||
setRejectEstimate(estimate);
|
||||
}, []);
|
||||
|
||||
// Handle cancel reject estimate alert.
|
||||
const handleCancelRejectEstimate = useCallback(() => {
|
||||
setRejectEstimate(false);
|
||||
}, []);
|
||||
|
||||
// Handle confirm estimate reject.
|
||||
const handleConfirmEstimateReject = useCallback(() => {
|
||||
requestRejectEstimate(rejectEstimate.id)
|
||||
.then(() => {
|
||||
setRejectEstimate(false);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_estimate_has_been_successfully_rejected',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('estimates-table');
|
||||
})
|
||||
.catch((error) => {});
|
||||
}, [rejectEstimate, requestRejectEstimate, formatMessage]);
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
const handleFilterChanged = useCallback(() => {}, [fetchEstimate]);
|
||||
|
||||
@@ -127,6 +216,9 @@ function EstimateList({
|
||||
<EstimatesDataTable
|
||||
onDeleteEstimate={handleDeleteEstimate}
|
||||
onEditEstimate={handleEditEstimate}
|
||||
onDeliverEstimate={handleDeliverEstimate}
|
||||
onApproveEstimate={handleApproveEstimate}
|
||||
onRejectEstimate={handleRejectEstimate}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
/>
|
||||
</Route>
|
||||
@@ -145,6 +237,42 @@ function EstimateList({
|
||||
<T id={'once_delete_this_estimate_you_will_able_to_restore_it'} />
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'deliver'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={deliverEstimate}
|
||||
onCancel={handleCancelDeliverEstimate}
|
||||
onConfirm={handleConfirmEstimateDeliver}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_deliver_this_estimate'} />
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'approve'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={approveEstimate}
|
||||
onCancel={handleCancelApproveEstimate}
|
||||
onConfirm={handleConfirmEstimateApprove}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_approve_this_estimate'} />
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'reject'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={rejectEstimate}
|
||||
onCancel={handleCancelRejectEstimate}
|
||||
onConfirm={handleConfirmEstimateReject}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_approve_this_estimate'} />
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Tag,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
@@ -17,9 +18,9 @@ import { compose, saveInvoke } from 'utils';
|
||||
import { useIsValuePassed } from 'hooks';
|
||||
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { DataTable, Money, Choose, Icon } from 'components';
|
||||
import { DataTable, Money, Choose, Icon, If } from 'components';
|
||||
import EstimatesEmptyStatus from './EstimatesEmptyStatus';
|
||||
|
||||
import { statusAccessor } from './components';
|
||||
import withEstimates from './withEstimates';
|
||||
import withEstimateActions from './withEstimateActions';
|
||||
|
||||
@@ -38,6 +39,9 @@ function EstimatesDataTable({
|
||||
// #ownProps
|
||||
onEditEstimate,
|
||||
onDeleteEstimate,
|
||||
onDeliverEstimate,
|
||||
onApproveEstimate,
|
||||
onRejectEstimate,
|
||||
onSelectedRowsChange,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
@@ -70,6 +74,40 @@ function EstimatesDataTable({
|
||||
text={formatMessage({ id: 'edit_estimate' })}
|
||||
onClick={handleEditEstimate(estimate)}
|
||||
/>
|
||||
<If condition={!estimate.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_delivered' })}
|
||||
onClick={() => onDeliverEstimate(estimate)}
|
||||
/>
|
||||
</If>
|
||||
<Choose>
|
||||
<Choose.When
|
||||
condition={estimate.is_delivered && estimate.is_approved}
|
||||
>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={() => onRejectEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When
|
||||
condition={estimate.is_delivered && estimate.is_rejected}
|
||||
>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={() => onApproveEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
<Choose.When condition={estimate.is_delivered}>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_approved' })}
|
||||
onClick={() => onApproveEstimate(estimate)}
|
||||
/>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'mark_as_rejected' })}
|
||||
onClick={() => onRejectEstimate(estimate)}
|
||||
/>
|
||||
</Choose.When>
|
||||
</Choose>
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'delete_estimate' })}
|
||||
intent={Intent.DANGER}
|
||||
@@ -114,7 +152,8 @@ function EstimatesDataTable({
|
||||
{
|
||||
id: 'estimate_number',
|
||||
Header: formatMessage({ id: 'estimate_number' }),
|
||||
accessor: (row) => (row.estimate_number ? `#${row.estimate_number}` : null),
|
||||
accessor: (row) =>
|
||||
row.estimate_number ? `#${row.estimate_number}` : null,
|
||||
width: 140,
|
||||
className: 'estimate_number',
|
||||
},
|
||||
@@ -126,6 +165,15 @@ function EstimatesDataTable({
|
||||
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' }),
|
||||
@@ -133,6 +181,7 @@ function EstimatesDataTable({
|
||||
width: 140,
|
||||
className: 'reference',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
@@ -183,7 +232,7 @@ function EstimatesDataTable({
|
||||
const showEmptyStatus = [
|
||||
estimatesCurrentPage.length === 0,
|
||||
estimatesCurrentViewId === -1,
|
||||
].every(d => d === true);
|
||||
].every((d) => d === true);
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
|
||||
|
||||
31
client/src/containers/Sales/Estimate/components.js
Normal file
31
client/src/containers/Sales/Estimate/components.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import { Intent, Tag } from '@blueprintjs/core';
|
||||
import { Choose, If } from 'components';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
|
||||
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>
|
||||
);
|
||||
@@ -5,6 +5,9 @@ import {
|
||||
deleteEstimate,
|
||||
fetchEstimate,
|
||||
fetchEstimatesTable,
|
||||
deliverEstimate,
|
||||
approveEstimate,
|
||||
rejectEstimate
|
||||
} from 'store/Estimate/estimates.actions';
|
||||
import t from 'store/types';
|
||||
|
||||
@@ -15,6 +18,9 @@ const mapDipatchToProps = (dispatch) => ({
|
||||
requestFetchEstimatesTable: (query = {}) =>
|
||||
dispatch(fetchEstimatesTable({ query: { ...query } })),
|
||||
requestDeleteEstimate: (id) => dispatch(deleteEstimate({ id })),
|
||||
requestDeliverdEstimate: (id) => dispatch(deliverEstimate({ id })),
|
||||
requestApproveEstimate: (id) => dispatch(approveEstimate({ id })),
|
||||
requestRejectEstimate: (id) => dispatch(rejectEstimate({ id })),
|
||||
|
||||
changeEstimateView: (id) =>
|
||||
dispatch({
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function InvoiceFloatingActions({
|
||||
const handleSubmitDeliverBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
delivered: true,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function InvoiceFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
delivered: true,
|
||||
deliver: true,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
@@ -49,14 +49,14 @@ export default function InvoiceFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
delivered: true,
|
||||
deliver: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitDraftBtnClick = (event) => {
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: true,
|
||||
delivered: false,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -64,7 +64,7 @@ export default function InvoiceFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
delivered: false,
|
||||
deliver: false,
|
||||
resetForm: true,
|
||||
});
|
||||
};
|
||||
@@ -73,7 +73,7 @@ export default function InvoiceFloatingActions({
|
||||
submitForm();
|
||||
saveInvoke(onSubmitClick, event, {
|
||||
redirect: false,
|
||||
delivered: false,
|
||||
deliver: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user