feat: add contextMenu in invoice & bill transactions.

2026-02-19 14:20: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,
      },