From 7095903653939a426a892eb487b941b0b558f4cb Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 19 Dec 2021 19:29:42 +0200 Subject: [PATCH] feat: add contextMenu in item transactions. --- .../BillPaymentTransactions/components.js | 90 +++++++ .../index.js} | 7 +- .../EstimatePaymentTransactions/components.js | 92 +++++++ .../EstimatePaymentTransactions/index.js | 70 +++++ .../EstimatePaymentTransactionsDataTable.js | 33 --- .../InvoicePaymentTransactions/components.js | 93 +++++++ .../InvoicePaymentTransactions/index.js | 56 ++++ .../InvoicePaymentTransactionsDataTable.js | 33 --- .../ItemPaymentTransactionContent.js | 16 +- .../ReceiptPaymentTransactions/components.js | 93 +++++++ .../ReceiptPaymentTransactions/index.js | 54 ++++ .../ReceiptPaymentTransactionsDataTable.js | 33 --- .../ItemPaymentTransactions/components.js | 245 ------------------ src/hooks/query/bills.js | 3 + src/hooks/query/estimates.js | 15 +- src/hooks/query/invoices.js | 3 + src/hooks/query/receipts.js | 3 + 17 files changed, 578 insertions(+), 361 deletions(-) create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js rename src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/{BillPaymentTransactionsDataTable.js => BillPaymentTransactions/index.js} (77%) create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js delete mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js new file mode 100644 index 000000000..4ed2e0acc --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js @@ -0,0 +1,90 @@ +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, 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 transactions associated with item table columns. + */ +export const useBillTransactionsColumns = () => { + return React.useMemo( + () => [ + { + id: 'bill_date', + Header: intl.get('date'), + accessor: 'formatted_bill_date', + Cell: FormatDateCell, + 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'), + accessor: (row) => (row.bill_number ? `${row.bill_number}` : null), + width: 100, + className: 'bill_number', + }, + { + id: 'qunatity', + Header: intl.get('item.drawer_quantity_sold'), + accessor: 'quantity', + width: 100, + }, + { + id: 'rate', + Header: 'Rate', + accessor: 'formatted_rate', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + { + id: 'amount', + Header: intl.get('total'), + accessor: 'formatted_amount', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js similarity index 77% rename from src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js rename to src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js index 8d0c6d7a6..8c8f3025b 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js @@ -1,8 +1,8 @@ import React from 'react'; -import { DataTable } from '../../../../components'; -import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; +import { DataTable } from '../../../../../components'; +import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider'; import { useItemAssociatedBillTransactions } from 'hooks/query'; -import { useBillTransactionsColumns } from './components'; +import { useBillTransactionsColumns, ActionsMenu } from './components'; /** * Bill payment transactions data table. @@ -28,6 +28,7 @@ export default function BillPaymentTransactions() { loading={isBillTransactionsLoading} headerLoading={isBillTransactionsLoading} progressBarLoading={isBillTransactionFetching} + ContextMenu={ActionsMenu} /> ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js new file mode 100644 index 000000000..5f49bc7f8 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js @@ -0,0 +1,92 @@ +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, 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 estimate transactions associated with item table columns. + */ +export const useEstimateTransactionsColumns = () => { + return React.useMemo( + () => [ + { + id: 'estimate_date', + Header: intl.get('date'), + accessor: 'formatted_estimate_date', + Cell: FormatDateCell, + 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'), + accessor: 'estimate_number', + width: 120, + className: 'estimate_number', + textOverview: true, + }, + { + id: 'qunatity', + Header: intl.get('item.drawer_quantity_sold'), + accessor: 'quantity', + width: 100, + }, + { + id: 'rate', + Header: 'Rate', + accessor: 'formatted_rate', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + { + id: 'amount', + Header: intl.get('total'), + accessor: 'formatted_amount', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js new file mode 100644 index 000000000..47556b3a9 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; + +import { DataTable } from '../../../../../components'; +import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider'; +import { useItemAssociatedEstimateTransactions } from 'hooks/query'; +import { useEstimateTransactionsColumns, ActionsMenu } from './components'; + +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +/** + * Esimtate payment transactions. + */ +function EstimatePaymentTransactions({ + // #withAlertsActions + openAlert, + + // #withDrawerActions + closeDrawer, +}) { + const history = useHistory(); + + const columns = useEstimateTransactionsColumns(); + + const { itemId } = useItemDetailDrawerContext(); + + // Handle fetch Estimate associated transactions. + const { + isLoading: isEstimateTransactionsLoading, + isFetching: isEstimateTransactionFetching, + data: paymentTransactions, + } = useItemAssociatedEstimateTransactions(itemId, { + enabled: !!itemId, + }); + + // Handles delete payment transactions. + const handleDeletePaymentTransactons = ({ estimate_id }) => { + openAlert('estimate-delete', { + estimateId: estimate_id, + }); + }; + + // Handles edit payment transactions. + const handleEditPaymentTransactions = ({ estimate_id }) => { + history.push(`/estimates/${estimate_id}/edit`); + closeDrawer('item-detail-drawer'); + }; + + return ( + + ); +} +export default compose( + withAlertsActions, + withDrawerActions, +)(EstimatePaymentTransactions); diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js deleted file mode 100644 index 0bafefb1a..000000000 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { DataTable } from '../../../../components'; -import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; -import { useItemAssociatedEstimateTransactions } from 'hooks/query'; -import { useEstimateTransactionsColumns } from './components'; - -/** - * Esimtate payment transactions datatable. - */ -export default function EstimatePaymentTransactions() { - const columns = useEstimateTransactionsColumns(); - - const { itemId } = useItemDetailDrawerContext(); - - // Handle fetch Estimate associated transactions. - const { - isLoading: isEstimateTransactionsLoading, - isFetching: isEstimateTransactionFetching, - data: paymentTransactions, - } = useItemAssociatedEstimateTransactions(itemId, { - enabled: !!itemId, - }); - - return ( - - ); -} diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js new file mode 100644 index 000000000..ba9b6e67e --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js @@ -0,0 +1,93 @@ +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 ,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 associated with item table columns. + */ +export const useInvoicePaymentTransactionsColumns = () => { + return React.useMemo( + () => [ + { + id: 'invoice_date', + Header: intl.get('date'), + accessor: 'formatted_invoice_date', + Cell: FormatDateCell, + 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__'), + accessor: 'invoice_number', + width: 120, + className: 'invoice_no', + textOverview: true, + }, + { + id: 'qunatity', + Header: intl.get('item.drawer_quantity_sold'), + accessor: 'quantity', + width: 100, + }, + { + id: 'rate', + Header: 'Rate', + accessor: 'formatted_rate', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + { + id: 'amount', + Header: intl.get('total'), + accessor: 'formatted_amount', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js new file mode 100644 index 000000000..83181f83b --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import { DataTable } from '../../../../../components'; +import { useItemAssociatedInvoiceTransactions } from 'hooks/query'; +import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider'; +import { + useInvoicePaymentTransactionsColumns, + ActionsMenu, +} from './components'; + +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +/** + * Invoice payment transactions. + */ +function InvoicePaymentTransactions({ + // #withAlertsActions + openAlert, + + // #withDrawerActions + closeDrawer, +}) { + const history = useHistory(); + + const columns = useInvoicePaymentTransactionsColumns(); + + const { itemId } = useItemDetailDrawerContext(); + + // Handle fetch invoice associated transactions. + const { + isLoading: isInvoiceTransactionsLoading, + isFetching: isInvoiceTransactionFetching, + data: paymentTransactions, + } = useItemAssociatedInvoiceTransactions(itemId, { + enabled: !!itemId, + }); + + return ( + + ); +} + +export default compose( + withAlertsActions, + withDrawerActions, +)(InvoicePaymentTransactions); diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js deleted file mode 100644 index 7900a998a..000000000 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { DataTable } from '../../../../components'; -import { useItemAssociatedInvoiceTransactions } from 'hooks/query'; -import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; -import { useInvoicePaymentTransactionsColumns } from './components'; - -/** - * Invoice payment transactions datatable. - */ -export default function InvoicePaymentTransactionsTable() { - const columns = useInvoicePaymentTransactionsColumns(); - - const { itemId } = useItemDetailDrawerContext(); - - // Handle fetch invoice associated transactions. - const { - isLoading: isInvoiceTransactionsLoading, - isFetching: isInvoiceTransactionFetching, - data: paymentTransactions, - } = useItemAssociatedInvoiceTransactions(itemId, { - enabled: !!itemId, - }); - - return ( - - ); -} diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js index eb6f93d30..e31721fe5 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js @@ -1,20 +1,20 @@ import React from 'react'; -import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable'; -import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable'; -import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable'; -import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable'; +import InvoicePaymentTransactions from './InvoicePaymentTransactions'; +import EstimatePaymentTransactions from './EstimatePaymentTransactions'; +import ReceiptPaymentTransactions from './ReceiptPaymentTransactions'; +import BillPaymentTransactions from './BillPaymentTransactions'; export default function ItemPaymentTransactionsContent({ tansactionType }) { const handleType = () => { switch (tansactionType) { case 'invoices': - return ; + return ; case 'estimates': - return ; + return ; case 'receipts': - return ; + return ; case 'bills': - return ; + return ; } }; return handleType(); diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js new file mode 100644 index 000000000..4d0ac8779 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js @@ -0,0 +1,93 @@ +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, 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 receipt transactions associated with item table columns. + */ +export const useReceiptTransactionsColumns = () => { + return React.useMemo( + () => [ + { + id: 'receipt_date', + Header: intl.get('date'), + accessor: 'formatted_receipt_date', + Cell: FormatDateCell, + 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: 120, + className: 'receipt_number', + clickable: true, + textOverview: true, + }, + { + id: 'qunatity', + Header: intl.get('item.drawer_quantity_sold'), + accessor: 'quantity', + width: 100, + }, + { + id: 'rate', + Header: 'Rate', + accessor: 'formatted_rate', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + { + id: 'amount', + Header: intl.get('total'), + accessor: 'formatted_amount', + align: 'right', + width: 100, + className: clsx(CLASSES.FONT_BOLD), + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js new file mode 100644 index 000000000..b8fc1194a --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; + +import { DataTable } from '../../../../../components'; +import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider'; +import { useItemAssociatedReceiptTransactions } from 'hooks/query'; +import { useReceiptTransactionsColumns, ActionsMenu } from './components'; + +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +/** + * Receipt payment transactions. + */ +function ReceiptPaymentTransactions({ + // #withAlertsActions + openAlert, + + // #withDrawerActions + closeDrawer, +}) { + const history = useHistory(); + + const columns = useReceiptTransactionsColumns(); + + const { itemId } = useItemDetailDrawerContext(); + + // Handle fetch receipts associated transactions. + const { + isLoading: isReceiptTransactionsLoading, + isFetching: isReceiptTransactionFetching, + data: paymentTransactions, + } = useItemAssociatedReceiptTransactions(itemId, { + enabled: !!itemId, + }); + + return ( + + ); +} + +export default compose( + withAlertsActions, + withDrawerActions, +)(ReceiptPaymentTransactions); diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js deleted file mode 100644 index dac60ed12..000000000 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { DataTable } from '../../../../components'; -import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; -import { useItemAssociatedReceiptTransactions } from 'hooks/query'; -import { useReceiptTransactionsColumns } from './components'; - -/** - * Receipt payment transactions datatable. - */ -export default function ReceiptPaymentTransactions() { - const columns = useReceiptTransactionsColumns(); - - const { itemId } = useItemDetailDrawerContext(); - - // Handle fetch receipts associated transactions. - const { - isLoading: isReceiptTransactionsLoading, - isFetching: isReceiptTransactionFetching, - data: paymentTransactions, - } = useItemAssociatedReceiptTransactions(itemId, { - enabled: !!itemId, - }); - - return ( - - ); -} diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js deleted file mode 100644 index bc1437a80..000000000 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/components.js +++ /dev/null @@ -1,245 +0,0 @@ -import React from 'react'; -import intl from 'react-intl-universal'; - -import clsx from 'classnames'; -import { CLASSES } from '../../../../common/classes'; -import { FormatDateCell } from '../../../../components'; - -/** - * Retrieve invoice payment transactions associated with item table columns. - */ -export const useInvoicePaymentTransactionsColumns = () => { - return React.useMemo( - () => [ - { - id: 'invoice_date', - Header: intl.get('date'), - accessor: 'formatted_invoice_date', - Cell: FormatDateCell, - 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__'), - accessor: 'invoice_number', - width: 120, - className: 'invoice_no', - textOverview: true, - }, - { - id: 'qunatity', - Header: intl.get('item.drawer_quantity_sold'), - accessor: 'quantity', - width: 100, - }, - { - id: 'rate', - Header: 'Rate', - accessor: 'formatted_rate', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - { - id: 'amount', - Header: intl.get('total'), - accessor: 'formatted_amount', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - ], - [], - ); -}; - -/** - * Retrieve estimate transactions associated with item table columns. - */ -export const useEstimateTransactionsColumns = () => { - return React.useMemo( - () => [ - { - id: 'estimate_date', - Header: intl.get('date'), - accessor: 'formatted_estimate_date', - Cell: FormatDateCell, - 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'), - accessor: 'estimate_number', - width: 120, - className: 'estimate_number', - textOverview: true, - }, - { - id: 'qunatity', - Header: intl.get('item.drawer_quantity_sold'), - accessor: 'quantity', - width: 100, - }, - { - id: 'rate', - Header: 'Rate', - accessor: 'formatted_rate', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - { - id: 'amount', - Header: intl.get('total'), - accessor: 'formatted_amount', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - ], - [], - ); -}; - -/** - * Retrieve receipt transactions associated with item table columns. - */ -export const useReceiptTransactionsColumns = () => { - return React.useMemo( - () => [ - { - id: 'receipt_date', - Header: intl.get('date'), - accessor: 'formatted_receipt_date', - Cell: FormatDateCell, - 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: 120, - className: 'receipt_number', - clickable: true, - textOverview: true, - }, - { - id: 'qunatity', - Header: intl.get('item.drawer_quantity_sold'), - accessor: 'quantity', - width: 100, - }, - { - id: 'rate', - Header: 'Rate', - accessor: 'formatted_rate', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - { - id: 'amount', - Header: intl.get('total'), - accessor: 'formatted_amount', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - ], - [], - ); -}; - -/** - * Retrieve bill transactions associated with item table columns. - */ -export const useBillTransactionsColumns = () => { - return React.useMemo( - () => [ - { - id: 'bill_date', - Header: intl.get('date'), - accessor: 'formatted_bill_date', - Cell: FormatDateCell, - 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'), - accessor: (row) => (row.bill_number ? `${row.bill_number}` : null), - width: 100, - className: 'bill_number', - }, - { - id: 'qunatity', - Header: intl.get('item.drawer_quantity_sold'), - accessor: 'quantity', - width: 100, - }, - { - id: 'rate', - Header: 'Rate', - accessor: 'formatted_rate', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - { - id: 'amount', - Header: intl.get('total'), - accessor: 'formatted_amount', - align: 'right', - width: 100, - className: clsx(CLASSES.FONT_BOLD), - textOverview: true, - }, - ], - [], - ); -}; diff --git a/src/hooks/query/bills.js b/src/hooks/query/bills.js index 008daf3ce..d30f32d5a 100644 --- a/src/hooks/query/bills.js +++ b/src/hooks/query/bills.js @@ -30,6 +30,9 @@ const commonInvalidateQueries = (queryClient) => { // Invalidate financial reports. queryClient.invalidateQueries(t.FINANCIAL_REPORT); + + // Invalidate + queryClient.invalidateQueries(t.ITEMS_ASSOCIATED_WITH_BILLS); }; /** diff --git a/src/hooks/query/estimates.js b/src/hooks/query/estimates.js index b73eae6ce..63ac3e53a 100644 --- a/src/hooks/query/estimates.js +++ b/src/hooks/query/estimates.js @@ -9,6 +9,9 @@ import t from './types'; const commonInvalidateQueries = (queryClient) => { // Invalidate estimates. queryClient.invalidateQueries(t.SALE_ESTIMATES); + + // Invalidate + queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_ESTIMATES); }; /** @@ -191,7 +194,7 @@ export function useRefreshEstimates() { } /** - * + * */ export function useCreateNotifyEstimateBySMS(props) { const queryClient = useQueryClient(); @@ -214,11 +217,11 @@ export function useCreateNotifyEstimateBySMS(props) { } /** - * - * @param {*} estimateId - * @param {*} props - * @param {*} requestProps - * @returns + * + * @param {*} estimateId + * @param {*} props + * @param {*} requestProps + * @returns */ export function useEstimateSMSDetail(estimateId, props, requestProps) { return useRequestQuery( diff --git a/src/hooks/query/invoices.js b/src/hooks/query/invoices.js index 682ffecf5..1223210a9 100644 --- a/src/hooks/query/invoices.js +++ b/src/hooks/query/invoices.js @@ -31,6 +31,9 @@ const commonInvalidateQueries = (queryClient) => { // Invalidate reconcile. queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTE); queryClient.invalidateQueries(t.RECONCILE_CREDIT_NOTES); + + // Invalidate + queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_INVOICES); }; /** diff --git a/src/hooks/query/receipts.js b/src/hooks/query/receipts.js index a9b0c705b..c2cbeaa22 100644 --- a/src/hooks/query/receipts.js +++ b/src/hooks/query/receipts.js @@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => { queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS); queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY); + // Invalidate + queryClient.invalidateQueries(t.ITEM_ASSOCIATED_WITH_RECEIPTS); + // Invalidate the settings. queryClient.invalidateQueries([t.SETTING, t.SETTING_RECEIPTS]); };