From d0f889850c0b35bcd0db2339830627c80716e228 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 19 Dec 2021 17:30:16 +0200 Subject: [PATCH] feat: add contextMenu in invoice & bill transactions. --- .../BillPaymentTransactionTable.js | 41 +++++++++- .../BillPaymentTransactions/components.js | 29 +++++++- .../InvoicePaymentTransactionsTable.js | 44 ++++++++++- .../InvoicePaymentTransactions/components.js | 29 +++++++- .../ItemPaymentTransactions/components.js | 74 ++++++++++--------- src/lang/en/index.json | 8 +- 6 files changed, 183 insertions(+), 42 deletions(-) diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js index ab23a4620..e0caa4957 100644 --- 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 ( ); } + +export default compose( + withAlertsActions, + withDrawerActions, +)(BillPaymentTransactionTable); diff --git a/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js b/src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js index cd8ba435e..b62afa494 100644 --- 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 ( + + } + text={intl.get('invoice_transactions.action.edit_transaction')} + onClick={safeCallback(onEdit, original)} + /> + } + /> + + ); +} /** * Retrieve bill payment transactions table columns. diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js index ef2928824..94253df76 100644 --- 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 ( ); } + +export default compose( + withAlertsActions, + withDrawerActions, +)(InvoicePaymentTransactionsTable); diff --git a/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js b/src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js index 680802e62..3333a986b 100644 --- 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 ( + + } + text={intl.get('invoice_transactions.action.edit_transaction')} + onClick={safeCallback(onEdit, original)} + /> + } + /> + + ); +} /** * Retrieve invoice payment transactions table columns. diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js index 2ff7389b8..bc1437a80 100644 --- 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, }, diff --git a/src/lang/en/index.json b/src/lang/en/index.json index fc2b8bab1..0dd8dfa1a 100644 --- 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" }