feat: delete transaction.

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 (
+    <div>
+      <AccountDeleteTransactionAlert name={'account-transaction-delete'} />
+    </div>
+  );
+}

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 (
     <DataTable
       noInitialFetch={true}
@@ -51,6 +60,7 @@ function AccountTransactionsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableRowsRenderer={TableVirtualizedListRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
       // #TableVirtualizedListRows props.
       vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
       vListOverscanRowCount={0}
@@ -58,8 +68,13 @@ function AccountTransactionsDataTable({
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
       size={cashflowTansactionsTableSize}
-      noResults={'There is deposit/withdrawal transactions on the current account.'}
+      noResults={
+        'There is deposit/withdrawal transactions on the current account.'
+      }
       className="table-constrant"
+      payload={{
+        onDelete: handleDeleteTransaction,
+      }}
     />
   );
 }
@@ -68,4 +83,5 @@ export default compose(
   withSettings(({ cashflowTransactionsSettings }) => ({
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
+  withAlertsActions,
 )(AccountTransactionsDataTable);

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() {
           <AccountTransactionsDataTable />
         </DashboardContentTable>
       </DashboardPageContent>
+      <AccountTransactionsAlerts />
     </AccountTransactionsProvider>
   );
 }

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 (
+    <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+      <Menu>
+        <MenuItem
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Menu>
+    </If>
+  );
+}
 /**
  * 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',
       },
     ],
     [],