diff --git a/src/common/cashflowOptions.js b/src/common/cashflowOptions.js index 480b71162..dd14899ab 100644 --- a/src/common/cashflowOptions.js +++ b/src/common/cashflowOptions.js @@ -30,3 +30,12 @@ export const addMoneyOut = [ value: 'transfer_to_account', }, ]; + +export const TRANSACRIONS_TYPE = [ + 'OwnerContribution', + 'OtherIncome', + 'TransferFromAccount', + 'OnwersDrawing', + 'OtherExpense', + 'TransferToAccount', +]; diff --git a/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js new file mode 100644 index 000000000..da757392a --- /dev/null +++ b/src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js @@ -0,0 +1,80 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { FormattedMessage as T, FormattedHTMLMessage } from 'components'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; +import { useDeleteCashflowTransaction } from 'hooks/query'; + +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Account delete transaction alert. + */ +function AccountDeleteTransactionAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { referenceId }, + + // #withAlertActions + closeAlert, +}) { + const { mutateAsync: deleteTransactionMutate, isLoading } = + useDeleteCashflowTransaction(); + + // handle cancel delete alert + const handleCancelDeleteAlert = () => { + closeAlert(name); + }; + + // handleConfirm delete transaction. + const handleConfirmTransactioneDelete = () => { + deleteTransactionMutate(referenceId) + .then(() => { + AppToaster.show({ + message: intl.get('cash_flow_transaction.delete.alert_message'), + intent: Intent.SUCCESS, + }); + }) + .catch( + ({ + response: { + data: { errors }, + }, + }) => {}, + ) + .finally(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelDeleteAlert} + onConfirm={handleConfirmTransactioneDelete} + loading={isLoading} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, +)(AccountDeleteTransactionAlert); diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js new file mode 100644 index 000000000..5b3a88ab3 --- /dev/null +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import AccountDeleteTransactionAlert from '../../Alerts/CashFlow/AccountDeleteTransactionAlert'; + +/** + * Account transaction alert. + */ +export default function AccountTransactionsAlerts() { + return ( +
+ +
+ ); +} diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js index 5b0f8e9aa..8ff95651b 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js @@ -8,9 +8,10 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import withSettings from '../../Settings/withSettings'; +import withAlertsActions from 'containers/Alert/withAlertActions'; import { useMemorizedColumnsWidths } from '../../../hooks'; -import { useAccountTransactionsColumns } from './components'; +import { useAccountTransactionsColumns, ActionsMenu } from './components'; import { useAccountTransactionsContext } from './AccountTransactionsProvider'; import { compose } from 'utils'; @@ -20,6 +21,9 @@ import { compose } from 'utils'; function AccountTransactionsDataTable({ // #withSettings cashflowTansactionsTableSize, + + // #withAlertsActions + openAlert, }) { // Retrieve table columns. const columns = useAccountTransactionsColumns(); @@ -35,6 +39,11 @@ function AccountTransactionsDataTable({ const [initialColumnsWidths, , handleColumnResizing] = useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions); + // handle delete transaction + const handleDeleteTransaction = ({ reference_id }) => { + openAlert('account-transaction-delete', { referenceId: reference_id }); + }; + return ( ); } @@ -68,4 +83,5 @@ export default compose( withSettings(({ cashflowTransactionsSettings }) => ({ cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize, })), + withAlertsActions, )(AccountTransactionsDataTable); diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js index 40869934d..a627bc2f5 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js @@ -8,7 +8,7 @@ import { AccountTransactionsProvider } from './AccountTransactionsProvider'; import AccountTransactionsActionsBar from './AccountTransactionsActionsBar'; import AccountTransactionsDataTable from './AccountTransactionsDataTable'; import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar'; - +import AccountTransactionsAlerts from './AccountTransactionsAlerts'; import { AccountTransactionsProgressBar } from './components'; /** @@ -26,6 +26,7 @@ function AccountTransactionsList() { + ); } diff --git a/src/containers/CashFlow/AccountTransactions/components.js b/src/containers/CashFlow/AccountTransactions/components.js index a08aa905c..ad4dda8c6 100644 --- a/src/containers/CashFlow/AccountTransactions/components.js +++ b/src/containers/CashFlow/AccountTransactions/components.js @@ -1,9 +1,28 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { MaterialProgressBar } from 'components'; -import { FormatDateCell } from 'components'; -import { useAccountTransactionsContext } from './AccountTransactionsProvider'; +import { Intent, Menu, MenuItem } from '@blueprintjs/core'; + +import { MaterialProgressBar } from 'components'; +import { FormatDateCell, If, Icon } from 'components'; +import { useAccountTransactionsContext } from './AccountTransactionsProvider'; +import { TRANSACRIONS_TYPE } from 'common/cashflowOptions'; +import { safeCallback } from 'utils'; + +export function ActionsMenu({ payload: { onDelete }, row: { original } }) { + return ( + + + } + /> + + + ); +} /** * Retrieve account transctions table columns. */ @@ -47,7 +66,7 @@ export function useAccountTransactionsColumns() { width: 110, className: 'deposit', textOverview: true, - align: 'right' + align: 'right', }, { id: 'withdrawal', @@ -65,7 +84,7 @@ export function useAccountTransactionsColumns() { className: 'running_balance', width: 150, textOverview: true, - align: 'right' + align: 'right', }, ], [],