feat: add contextMenu in invoice & bill transactions.

2026-02-18 05:40:31 +00:00 · 2021-12-19 17:30:16 +02:00
parent f9fe3506c5
commit d0f889850c
6 changed files with 183 additions and 42 deletions
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js
@@ -1,16 +1,30 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';

 import 'style/pages/PaymentTransactions/List.scss';

-import { useBillPaymentTransactionsColumns } from './components';
+import { useBillPaymentTransactionsColumns, ActionsMenu } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
 import { useBillPaymentTransactions } from 'hooks/query';

+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
 * Bill payment transactions datatable.
 */
-export default function BillPaymentTransactionTable() {
+function BillPaymentTransactionTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
+
  const columns = useBillPaymentTransactionsColumns();

  const { billId } = useBillDrawerContext();
@@ -24,6 +38,19 @@ export default function BillPaymentTransactionTable() {
    enabled: !!billId,
  });

+  // Handles delete bill payment transactions.
+  const handleDeleteBillPaymentTransactons = ({ bill_id }) => {
+    openAlert('bill-delete', {
+      billId: bill_id,
+    });
+  };
+
+  // Handles edit  bill payment transactions.
+  const handleEditBillPaymentTransactions = ({ bill_id }) => {
+    history.push(`/bills/${bill_id}/edit`);
+    closeDrawer('bill-drawer');
+  };
+
  return (
    <Card>
      <DataTable
@@ -32,8 +59,18 @@ export default function BillPaymentTransactionTable() {
        loading={isPaymentTransactionsLoading}
        headerLoading={isPaymentTransactionsLoading}
        progressBarLoading={isPaymentTransactionFetching}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteBillPaymentTransactons,
+          onEdit: handleEditBillPaymentTransactions,
+        }}
        className={'payment-transactions'}
      />
    </Card>
  );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(BillPaymentTransactionTable);
--- a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
+++ b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

 /**
 * Retrieve bill payment transactions table columns.
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js
@@ -1,16 +1,32 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { DataTable, Card } from 'components';

 import 'style/pages/PaymentTransactions/List.scss';

-import { useInvoicePaymentTransactionsColumns } from './components';
+import {
+  useInvoicePaymentTransactionsColumns,
+  ActionsMenu,
+} from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
 import { useInvoicePaymentTransactions } from 'hooks/query';

+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
 /**
 * Invoice payment transactions datatable.
 */
-export default function InvoicePaymentTransactionsTable() {
+function InvoicePaymentTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+
+  // #withDrawerActions
+  closeDrawer,
+}) {
+  const history = useHistory();
  const columns = useInvoicePaymentTransactionsColumns();

  const { invoiceId } = useInvoiceDetailDrawerContext();
@@ -23,6 +39,20 @@ export default function InvoicePaymentTransactionsTable() {
  } = useInvoicePaymentTransactions(invoiceId, {
    enabled: !!invoiceId,
  });
+
+  // Handles delete payment transactions.
+  const handleDeletePaymentTransactons = ({ payment_receive_id }) => {
+    openAlert('payment-receive-delete', {
+      paymentReceiveId: payment_receive_id,
+    });
+  };
+
+  // Handles edit payment transactions.
+  const handleEditPaymentTransactions = ({ payment_receive_id }) => {
+    history.push(`/payment-receives/${payment_receive_id}/edit`);
+    closeDrawer('invoice-detail-drawer');
+  };
+
  return (
    <Card>
      <DataTable
@@ -31,8 +61,18 @@ export default function InvoicePaymentTransactionsTable() {
        loading={isPaymentTransactionLoading}
        headerLoading={isPaymentTransactionLoading}
        progressBarLoading={isPaymentTransactionFetching}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentTransactons,
+          onEdit: handleEditPaymentTransactions,
+        }}
        className={'payment-transactions'}
      />
    </Card>
  );
 }
+
+export default compose(
+  withAlertsActions,
+  withDrawerActions,
+)(InvoicePaymentTransactionsTable);
--- a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js
@@ -1,9 +1,34 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
 import clsx from 'classnames';
 import { CLASSES } from '../../../../common/classes';
-import { FormattedMessage as T, FormatDateCell } from '../../../../components';
+import { FormatDateCell, Icon } from '../../../../components';
+import { safeCallback } from 'utils';
+
+/**
+ * Table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={intl.get('invoice_transactions.action.edit_transaction')}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        text={intl.get('invoice_transactions.action.delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}

 /**
 * Retrieve invoice payment transactions table columns.
--- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
+++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js
@@ -16,10 +16,18 @@ export const useInvoicePaymentTransactionsColumns = () => {
        Header: intl.get('date'),
        accessor: 'formatted_invoice_date',
        Cell: FormatDateCell,
-        width: 140,
+        width: 120,
        className: 'invoice_date',
        textOverview: true,
      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
      {
        id: 'invoice_no',
        Header: intl.get('invoice_no__'),
@@ -28,17 +36,9 @@ export const useInvoicePaymentTransactionsColumns = () => {
        className: 'invoice_no',
        textOverview: true,
      },
-      // {
-      //   id: 'reference_number',
-      //   Header: intl.get('reference_no'),
-      //   accessor: 'reference_number',
-      //   width: 120,
-      //   className: 'reference_number',
-      //   textOverview: true,
-      // },
      {
        id: 'qunatity',
-        Header: 'Quantity Sold',
+        Header: intl.get('item.drawer_quantity_sold'),
        accessor: 'quantity',
        width: 100,
      },
@@ -76,10 +76,18 @@ export const useEstimateTransactionsColumns = () => {
        Header: intl.get('date'),
        accessor: 'formatted_estimate_date',
        Cell: FormatDateCell,
-        width: 140,
+        width: 120,
        className: 'estimate_date',
        textOverview: true,
      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
      {
        id: 'estimate_number',
        Header: intl.get('estimate_no'),
@@ -90,7 +98,7 @@ export const useEstimateTransactionsColumns = () => {
      },
      {
        id: 'qunatity',
-        Header: 'Quantity Sold',
+        Header: intl.get('item.drawer_quantity_sold'),
        accessor: 'quantity',
        width: 100,
      },
@@ -128,30 +136,30 @@ export const useReceiptTransactionsColumns = () => {
        Header: intl.get('date'),
        accessor: 'formatted_receipt_date',
        Cell: FormatDateCell,
-        width: 110,
+        width: 120,
        className: 'receipt_date',
        textOverview: true,
      },
+      {
+        id: 'customer',
+        Header: intl.get('customer'),
+        accessor: 'customer_display_name',
+        width: 140,
+        className: 'customer',
+        textOverview: true,
+      },
      {
        id: 'receipt_number',
        Header: intl.get('receipt_no'),
        accessor: 'receip_number',
-        width: 140,
+        width: 120,
        className: 'receipt_number',
        clickable: true,
        textOverview: true,
      },
-      {
-        id: 'reference_number',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_number',
-        width: 140,
-        className: 'reference_number',
-        textOverview: true,
-      },
      {
        id: 'qunatity',
-        Header: 'Quantity Sold',
+        Header: intl.get('item.drawer_quantity_sold'),
        accessor: 'quantity',
        width: 100,
      },
@@ -189,9 +197,17 @@ export const useBillTransactionsColumns = () => {
        Header: intl.get('date'),
        accessor: 'formatted_bill_date',
        Cell: FormatDateCell,
-        width: 110,
+        width: 120,
        className: 'bill_date',
      },
+      {
+        id: 'vendor',
+        Header: intl.get('vendor'),
+        accessor: 'vendor_display_name',
+        width: 140,
+        className: 'vendor',
+        textOverview: true,
+      },
      {
        id: 'bill_number',
        Header: intl.get('bill_number'),
@@ -199,17 +215,9 @@ export const useBillTransactionsColumns = () => {
        width: 100,
        className: 'bill_number',
      },
-      {
-        id: 'reference_number',
-        Header: intl.get('reference_no'),
-        accessor: 'reference_number',
-        width: 140,
-        className: 'reference_number',
-        textOverview: true,
-      },
      {
        id: 'qunatity',
-        Header: 'Quantity Sold',
+        Header: intl.get('item.drawer_quantity_sold'),
        accessor: 'quantity',
        width: 100,
      },
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1638,7 +1638,13 @@
  "transactions_locking.long_description": "Transactions locking has the ability to lock all organization transactions so users can’t edit, delete or create new transactions during the past period, but still have the ability to create draft invoices or bills and that won’t affect financial reports. typically set a lock date when your financial records are being prepared for the year.",
  "payment_transactions": "Payment transactions",
  "invoice_transactions.column.withdrawal_account": "Deposit account",
+  "invoice_transactions.action.delete_transaction":"Delete Transaction",
+  "invoice_transactions.action.edit_transaction":"Edit Transaction",
  "bill_transactions.column.deposit_account": "Withdrawal account",
-  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module."
+  "transactions_locking.lock_item.no_lock": "There are no locked transactions in this module.",
+  "overview":"Overview",
+  "transactions":"Transactions",
+  "item.drawer_transactions_by":"Transactions by:",
+  "item.drawer_quantity_sold":"Quantity Sold"
 }