mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
refactor: receipts alerts.
This commit is contained in:
elforjani3
78
client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js
Normal file
78
client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js
Normal file
@@ -0,0 +1,78 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import { queryCache } from 'react-query';
|
||||
import { AppToaster } from 'components';
|
||||
|
||||
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
|
||||
import withAlertActions from 'containers/Alert/withAlertActions';
|
||||
import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Receipt close alert.
|
||||
*/
|
||||
function ReceiptCloseAlert({
|
||||
name,
|
||||
|
||||
// #withAlertStoreConnect
|
||||
isOpen,
|
||||
payload: { receiptId },
|
||||
|
||||
// #withReceiptActions
|
||||
requestCloseReceipt,
|
||||
|
||||
// #withAlertActions
|
||||
closeAlert,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
// handle cancel delete alert.
|
||||
const handleCancelDeleteAlert = () => {
|
||||
closeAlert(name);
|
||||
};
|
||||
|
||||
// Handle confirm receipt close.
|
||||
const handleConfirmReceiptClose = useCallback(() => {
|
||||
setLoading(true);
|
||||
requestCloseReceipt(receiptId)
|
||||
.then(() => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_receipt_has_been_closed_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('receipts-table');
|
||||
})
|
||||
.catch((error) => {})
|
||||
.finally(() => {
|
||||
closeAlert(name);
|
||||
setLoading(false);
|
||||
});
|
||||
}, [receiptId, requestCloseReceipt, formatMessage]);
|
||||
|
||||
return (
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'close'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={isOpen}
|
||||
onCancel={handleCancelDeleteAlert}
|
||||
onConfirm={handleConfirmReceiptClose}
|
||||
loading={isLoading}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_close_this_receipt'} />
|
||||
</p>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withAlertStoreConnect(),
|
||||
withAlertActions,
|
||||
withReceiptActions,
|
||||
)(ReceiptCloseAlert);
|
||||
85
client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js
Normal file
85
client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import {
|
||||
FormattedMessage as T,
|
||||
FormattedHTMLMessage,
|
||||
useIntl,
|
||||
} from 'react-intl';
|
||||
import { Intent, Alert } from '@blueprintjs/core';
|
||||
import { queryCache } from 'react-query';
|
||||
import { AppToaster } from 'components';
|
||||
|
||||
import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
|
||||
import withAlertActions from 'containers/Alert/withAlertActions';
|
||||
import withReceiptActions from 'containers/Sales/Receipt/withReceiptActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Invoice alert.
|
||||
*/
|
||||
function NameDeleteAlert({
|
||||
name,
|
||||
|
||||
// #withAlertStoreConnect
|
||||
isOpen,
|
||||
payload: { receiptId },
|
||||
|
||||
// #withReceiptActions
|
||||
requestDeleteReceipt,
|
||||
|
||||
// #withAlertActions
|
||||
closeAlert,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
// handle cancel delete alert.
|
||||
const handleCancelDeleteAlert = () => {
|
||||
closeAlert(name);
|
||||
};
|
||||
|
||||
// handle confirm delete receipt
|
||||
const handleConfirmReceiptDelete = useCallback(() => {
|
||||
setLoading(true);
|
||||
requestDeleteReceipt(receiptId)
|
||||
.then(() => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_receipt_has_been_deleted_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('receipts-table');
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
closeAlert(name);
|
||||
});
|
||||
}, [receiptId, requestDeleteReceipt, formatMessage]);
|
||||
|
||||
return (
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={isOpen}
|
||||
onCancel={handleCancelDeleteAlert}
|
||||
onConfirm={handleConfirmReceiptDelete}
|
||||
loading={isLoading}
|
||||
>
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id={'once_delete_this_receipt_you_will_able_to_restore_it'}
|
||||
/>
|
||||
</p>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withAlertStoreConnect(),
|
||||
withAlertActions,
|
||||
withReceiptActions,
|
||||
)(NameDeleteAlert);
|
||||
15
client/src/containers/Sales/Receipt/ReceiptsAlerts.js
Normal file
15
client/src/containers/Sales/Receipt/ReceiptsAlerts.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReceiptDeleteAlert from 'containers/Alerts/Receipts/ReceiptDeleteAlert';
|
||||
import ReceiptCloseAlert from 'containers/Alerts/Receipts/ReceiptCloseAlert';
|
||||
|
||||
/**
|
||||
* Receipts alerts.
|
||||
*/
|
||||
export default function ReceiptsAlerts() {
|
||||
return (
|
||||
<div>
|
||||
<ReceiptDeleteAlert name={'receipt-delete'} />
|
||||
<ReceiptCloseAlert name={'receipt-close'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
import React, { useEffect, useCallback, useMemo, useState } from 'react';
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import { Route, Switch, useHistory } from 'react-router-dom';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
import { useQuery } from 'react-query';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
@@ -11,12 +9,14 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import ReceiptsDataTable from './ReceiptsDataTable';
|
||||
import ReceiptActionsBar from './ReceiptActionsBar';
|
||||
import ReceiptViewTabs from './ReceiptViewTabs';
|
||||
import ReceiptsAlerts from './ReceiptsAlerts';
|
||||
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withResourceActions from 'containers/Resources/withResourcesActions';
|
||||
import withReceipts from './withReceipts';
|
||||
import withReceiptActions from './withReceiptActions';
|
||||
import withViewsActions from 'containers/Views/withViewsActions';
|
||||
import withAlertsActions from 'containers/Alert/withAlertActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
@@ -26,21 +26,19 @@ function ReceiptsList({
|
||||
|
||||
// #withViewsActions
|
||||
requestFetchResourceViews,
|
||||
requestFetchResourceFields,
|
||||
|
||||
//#withReceipts
|
||||
receiptTableQuery,
|
||||
|
||||
// #withAlertsActions,
|
||||
openAlert,
|
||||
|
||||
//#withReceiptActions
|
||||
requestFetchReceiptsTable,
|
||||
requestDeleteReceipt,
|
||||
requestCloseReceipt,
|
||||
addReceiptsTableQueries,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const { formatMessage } = useIntl();
|
||||
const [deleteReceipt, setDeleteReceipt] = useState(false);
|
||||
const [closeReceipt, setCloseReceipt] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
const fetchReceipts = useQuery(
|
||||
@@ -59,76 +57,20 @@ function ReceiptsList({
|
||||
|
||||
// handle delete receipt click
|
||||
const handleDeleteReceipt = useCallback(
|
||||
(_receipt) => {
|
||||
setDeleteReceipt(_receipt);
|
||||
({ id }) => {
|
||||
openAlert('receipt-delete', { receiptId: id });
|
||||
},
|
||||
[setDeleteReceipt],
|
||||
[openAlert],
|
||||
);
|
||||
|
||||
// handle cancel receipt
|
||||
const handleCancelReceiptDelete = useCallback(() => {
|
||||
setDeleteReceipt(false);
|
||||
}, [setDeleteReceipt]);
|
||||
|
||||
// handle confirm delete receipt
|
||||
const handleConfirmReceiptDelete = useCallback(() => {
|
||||
requestDeleteReceipt(deleteReceipt.id).then(() => {
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_receipt_has_been_deleted_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setDeleteReceipt(false);
|
||||
});
|
||||
}, [deleteReceipt, requestDeleteReceipt, formatMessage]);
|
||||
|
||||
// Handle cancel/confirm receipt deliver.
|
||||
const handleCloseReceipt = useCallback((receipt) => {
|
||||
setCloseReceipt(receipt);
|
||||
const handleCloseReceipt = useCallback(({ id }) => {
|
||||
openAlert('receipt-close', { receiptId: id });
|
||||
}, []);
|
||||
|
||||
// Handle cancel close receipt alert.
|
||||
const handleCancelCloseReceipt = useCallback(() => {
|
||||
setCloseReceipt(false);
|
||||
}, []);
|
||||
|
||||
// Handle confirm receipt close.
|
||||
const handleConfirmReceiptClose = useCallback(() => {
|
||||
requestCloseReceipt(closeReceipt.id)
|
||||
.then(() => {
|
||||
setCloseReceipt(false);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'the_receipt_has_been_closed_successfully',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
queryCache.invalidateQueries('receipts-table');
|
||||
})
|
||||
.catch((error) => {
|
||||
setCloseReceipt(false);
|
||||
});
|
||||
}, [closeReceipt, requestCloseReceipt, formatMessage]);
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
// const handleFilterChanged = useCallback(
|
||||
// (filterConditions) => {
|
||||
// addReceiptsTableQueries({
|
||||
// filter_roles: filterConditions || '',
|
||||
// });
|
||||
// },
|
||||
// [fetchReceipt],
|
||||
// );
|
||||
|
||||
// Handle filter change to re-fetch data-table.
|
||||
const handleFilterChanged = useCallback(() => {}, [fetchReceipts]);
|
||||
|
||||
// Calculates the selected rows
|
||||
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
|
||||
selectedRows,
|
||||
]);
|
||||
|
||||
const handleEditReceipt = useCallback(
|
||||
(receipt) => {
|
||||
history.push(`/receipts/${receipt.id}/edit`);
|
||||
@@ -167,32 +109,7 @@ function ReceiptsList({
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon={'trash'}
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteReceipt}
|
||||
onCancel={handleCancelReceiptDelete}
|
||||
onConfirm={handleConfirmReceiptDelete}
|
||||
>
|
||||
<p>
|
||||
<T id={'once_delete_this_receipt_you_will_able_to_restore_it'} />
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'close'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={closeReceipt}
|
||||
onCancel={handleCancelCloseReceipt}
|
||||
onConfirm={handleConfirmReceiptClose}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_close_this_receipt'} />
|
||||
</p>
|
||||
</Alert>
|
||||
<ReceiptsAlerts />
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
@@ -206,4 +123,5 @@ export default compose(
|
||||
withReceipts(({ receiptTableQuery }) => ({
|
||||
receiptTableQuery,
|
||||
})),
|
||||
withAlertsActions,
|
||||
)(ReceiptsList);
|
||||
|
||||
Reference in New Issue
Block a user