feat: estimate status.

This commit is contained in:
elforjani3
2020-12-16 17:25:01 +02:00
parent fa505edaab
commit 7536c28591
10 changed files with 282 additions and 34 deletions

View File

@@ -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>
}

View File

@@ -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>
)}

View File

@@ -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()

View File

@@ -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>
);

View File

@@ -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)}>

View 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>
);

View File

@@ -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({

View File

@@ -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,
});
};

View File

@@ -902,4 +902,25 @@ export default {
open: 'Open',
are_sure_to_open_this_bill: 'Are you sure you want to open this bill?',
opened: 'Opened',
the_estimate_has_been_successfully_delivered:
'The estimate has been successfully delivered.',
the_estimate_has_been_successfully_approved:
'The estimate has been successfully approved.',
the_estimate_has_been_successfully_rejected:
'The estimate has been successfully rejected.',
are_sure_to_deliver_this_estimate:
'Are you sure you want to deliver this estimate?',
approve: 'Approve',
are_sure_to_approve_this_estimate:
'Are you sure you want to approve this estimate?',
reject: 'Reject',
are_sure_to_reject_this_estimate:
'Are you sure you want to reject this estimate?',
mark_as_approved: 'Mark as approved',
mark_as_rejected: 'Mark as rejected',
delivered:'Delivered',
rejected:'Rejected',
approved:'Approved'
};

View File

@@ -75,7 +75,7 @@ export const fetchEstimate = ({ id }) => {
export const fetchEstimatesTable = ({ query = {} }) => {
return (dispatch, getState) =>
new Promise((resolve, rejcet) => {
new Promise((resolve, reject) => {
const pageQuery = getState().salesEstimates.tableQuery;
dispatch({
type: t.ESTIMATES_TABLE_LOADING,
@@ -117,7 +117,17 @@ export const fetchEstimatesTable = ({ query = {} }) => {
resolve(response);
})
.catch((error) => {
rejcet(error);
reject(error);
});
});
};
export const deliverEstimate = ({ id }) => {
return (dispatch) => ApiService.post(`sales/estimates/${id}/deliver`);
};
export const approveEstimate = ({ id }) => {
return (dispatch) => ApiService.post(`sales/estimates/${id}/approve`);
};
export const rejectEstimate = ({ id }) => {
return (dispatch) => ApiService.post(`sales/estimates/${id}/reject`);
};