Merge pull request #304 from ANasouf/BIG-53-Add-approve-reject-buttons-on-action-bar-of-the-estimate-details-drawer

feat(webapp): add approve/reject to action bar of estimate details dr…
This commit is contained in:
Ahmed Bouhuolia
2024-01-09 22:17:43 +02:00
committed by GitHub
2 changed files with 91 additions and 26 deletions

View File

@@ -1,5 +1,4 @@
// @ts-nocheck
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
@@ -22,6 +21,7 @@ import {
Icon,
FormattedMessage as T,
Can,
Choose,
} from '@/components';
import { compose } from '@/utils';
@@ -52,7 +52,6 @@ function EstimateDetailActionsBar({
history.push(`/estimates/${estimateId}/edit`);
closeDrawer(DRAWERS.ESTIMATE_DETAILS);
};
// Handle delete sale estimate.
const handleDeleteEstimate = () => {
openAlert('estimate-delete', { estimateId });
@@ -83,6 +82,7 @@ function EstimateDetailActionsBar({
/>
<NavbarDivider />
</Can>
<Can I={SaleEstimateAction.View} a={AbilitySubject.Estimate}>
<Button
className={Classes.MINIMAL}

View File

@@ -1,5 +1,4 @@
// @ts-nocheck
import React from 'react';
import {
Intent,
Button,
@@ -9,9 +8,15 @@ import {
MenuItem,
Menu,
Tag,
MenuDivider,
Classes,
} from '@blueprintjs/core';
import * as R from 'ramda';
import { Icon, T, Choose } from '@/components';
import { Icon, T, Choose, Can } from '@/components';
import { AbilitySubject, SaleEstimateAction } from '@/constants/abilityOption';
import withAlertsActions from '@/containers/Alert/withAlertActions';
import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';
/**
* Estimate details status.
@@ -49,25 +54,85 @@ export function EstimateDetailsStatus({ estimate }) {
);
}
export function EstimateMoreMenuItems({ payload: { onNotifyViaSMS } }) {
return (
<Popover
minimal={true}
content={
<Menu>
<MenuItem
onClick={onNotifyViaSMS}
text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
/>
</Menu>
}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
offset: { offset: '0, 4' },
}}
>
<Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
</Popover>
);
}
export const EstimateMoreMenuItems = R.compose(withAlertsActions)(
({
// # withAlertsActions,
openAlert,
// # rest
payload: { onNotifyViaSMS },
}) => {
const { estimateId, estimate } = useEstimateDetailDrawerContext();
// Handle cancel/confirm estimate approve.
const handleApproveEstimate = () => {
openAlert('estimate-Approve', { estimateId });
};
// Handle cancel/confirm estimate reject.
const handleRejectEstimate = () => {
openAlert('estimate-reject', { estimateId });
};
return (
<Popover
minimal={true}
content={
<Menu>
<MenuItem
onClick={onNotifyViaSMS}
text={<T id={'notify_via_sms.dialog.notify_via_sms'} />}
/>
<MenuDivider />
<Choose>
<Choose.When
condition={estimate.is_delivered && estimate.is_rejected}
>
<Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
<MenuItem
className={Classes.MINIMAL}
text={<T id={'mark_as_approved'} />}
onClick={handleApproveEstimate}
/>
</Can>
</Choose.When>
<Choose.When
condition={estimate.is_delivered && estimate.is_approved}
>
<Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
<MenuItem
className={Classes.MINIMAL}
text={<T id={'mark_as_rejected'} />}
onClick={handleRejectEstimate}
/>
</Can>
</Choose.When>
<Choose.When condition={estimate.is_delivered}>
<Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
<MenuItem
className={Classes.MINIMAL}
text={<T id={'mark_as_approved'} />}
onClick={handleApproveEstimate}
/>
</Can>
<Can I={SaleEstimateAction.Edit} a={AbilitySubject.Estimate}>
<MenuItem
className={Classes.MINIMAL}
text={<T id={'mark_as_rejected'} />}
onClick={handleRejectEstimate}
/>
</Can>
</Choose.When>
</Choose>
</Menu>
}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
offset: { offset: '0, 4' },
}}
>
<Button icon={<Icon icon="more-vert" iconSize={16} />} minimal={true} />
</Popover>
);
},
);