From b3439a2bc1698cdf935f4fcbc3933f4725a9beca Mon Sep 17 00:00:00 2001 From: elforjani3 Date: Tue, 7 Sep 2021 00:17:32 +0200 Subject: [PATCH] BC-14: feat: table rows clickable. --- .../JournalsLanding/ManualJournalsDataTable.js | 6 ++++++ .../src/containers/Accounting/JournalsLanding/utils.js | 9 ++++++++- .../Customers/CustomersLanding/CustomersTable.js | 6 ++++++ .../containers/Customers/CustomersLanding/components.js | 5 +++++ .../Expenses/ExpensesLanding/ExpenseDataTable.js | 6 ++++++ .../containers/Expenses/ExpensesLanding/components.js | 6 ++++++ .../InventoryAdjustments/InventoryAdjustmentTable.js | 8 +++++++- client/src/containers/InventoryAdjustments/components.js | 7 +++++++ client/src/containers/Items/ItemsDataTable.js | 6 ++++++ client/src/containers/Items/components.js | 7 +++++++ .../Purchases/Bills/BillsLanding/BillsTable.js | 6 ++++++ .../Purchases/Bills/BillsLanding/components.js | 7 +++++++ .../PaymentMades/PaymentsLanding/PaymentMadesTable.js | 8 ++++++++ .../Purchases/PaymentMades/PaymentsLanding/components.js | 6 ++++++ .../Estimates/EstimatesLanding/EstimatesDataTable.js | 5 +++++ .../Sales/Estimates/EstimatesLanding/components.js | 7 +++++++ .../Sales/Invoices/InvoicesLanding/InvoicesDataTable.js | 5 +++++ .../Sales/Invoices/InvoicesLanding/components.js | 9 ++++++++- .../PaymentsLanding/PaymentReceivesTable.js | 8 ++++++++ .../Sales/PaymentReceives/PaymentsLanding/components.js | 6 ++++++ .../Sales/Receipts/ReceiptsLanding/ReceiptsTable.js | 5 +++++ .../Sales/Receipts/ReceiptsLanding/components.js | 7 +++++++ .../containers/Vendors/VendorsLanding/VendorsTable.js | 7 ++++++- .../src/containers/Vendors/VendorsLanding/components.js | 5 +++++ 24 files changed, 153 insertions(+), 4 deletions(-) diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js index 645e3fcce..c0243e831 100644 --- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js @@ -73,6 +73,11 @@ function ManualJournalsDataTable({ }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('journal-drawer', { manualJournalId: cell.row.original.id }); + }; + // Handle fetch data once the page index, size or sort by of the table change. const handleFetchData = React.useCallback( ({ pageSize, pageIndex, sortBy }) => { @@ -111,6 +116,7 @@ function ManualJournalsDataTable({ TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} onFetchData={handleFetchData} + onCellClick={handleCellClick} payload={{ onDelete: handleDeleteJournal, onPublish: handlePublishJournal, diff --git a/client/src/containers/Accounting/JournalsLanding/utils.js b/client/src/containers/Accounting/JournalsLanding/utils.js index 03fd12010..18bca9dca 100644 --- a/client/src/containers/Accounting/JournalsLanding/utils.js +++ b/client/src/containers/Accounting/JournalsLanding/utils.js @@ -20,6 +20,7 @@ export const useManualJournalsColumns = () => { accessor: DateAccessor, width: 115, className: 'date', + clickable: true, }, { id: 'amount', @@ -27,6 +28,7 @@ export const useManualJournalsColumns = () => { accessor: 'formatted_amount', className: 'amount', width: 115, + clickable: true, }, { id: 'journal_number', @@ -34,6 +36,7 @@ export const useManualJournalsColumns = () => { accessor: (row) => `#${row.journal_number}`, className: 'journal_number', width: 100, + clickable: true, }, { id: 'journal_type', @@ -41,6 +44,7 @@ export const useManualJournalsColumns = () => { accessor: 'journal_type', width: 110, className: 'journal_type', + clickable: true, }, { id: 'status', @@ -48,6 +52,7 @@ export const useManualJournalsColumns = () => { accessor: (row) => StatusAccessor(row), width: 95, className: 'status', + clickable: true, }, { id: 'note', @@ -56,6 +61,7 @@ export const useManualJournalsColumns = () => { disableSortBy: true, width: 85, className: 'note', + clickable: true, }, { id: 'created_at', @@ -63,8 +69,9 @@ export const useManualJournalsColumns = () => { accessor: (r) => moment(r.created_at).format('YYYY MMM DD'), width: 125, className: 'created_at', + clickable: true, }, ], [], ); -}; \ No newline at end of file +}; diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js index 741570929..b590cdf01 100644 --- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js +++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js @@ -95,6 +95,11 @@ function CustomersTable({ openDrawer('contact-detail-drawer', { contactId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('contact-detail-drawer', { contactId: cell.row.original.id }); + }; + if (isEmptyStatus) { return ; } @@ -121,6 +126,7 @@ function CustomersTable({ autoResetPage={false} TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} + onCellClick={handleCellClick} payload={{ onDelete: handleCustomerDelete, onEdit: handleCustomerEdit, diff --git a/client/src/containers/Customers/CustomersLanding/components.js b/client/src/containers/Customers/CustomersLanding/components.js index 8b23d3bbd..3b45559c3 100644 --- a/client/src/containers/Customers/CustomersLanding/components.js +++ b/client/src/containers/Customers/CustomersLanding/components.js @@ -104,6 +104,7 @@ export function useCustomersTableColumns() { width: 45, disableResizing: true, disableSortBy: true, + clickable: true, }, { id: 'display_name', @@ -111,6 +112,7 @@ export function useCustomersTableColumns() { accessor: 'display_name', className: 'display_name', width: 150, + clickable: true, }, { id: 'company_name', @@ -118,6 +120,7 @@ export function useCustomersTableColumns() { accessor: 'company_name', className: 'company_name', width: 150, + clickable: true, }, { id: 'work_phone', @@ -125,6 +128,7 @@ export function useCustomersTableColumns() { accessor: PhoneNumberAccessor, className: 'phone_number', width: 100, + clickable: true, }, { id: 'balance', @@ -132,6 +136,7 @@ export function useCustomersTableColumns() { accessor: BalanceAccessor, className: 'receivable_balance', width: 100, + clickable: true, }, ], [], diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js index 2c42c9957..dda1055b5 100644 --- a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js +++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js @@ -78,6 +78,11 @@ function ExpensesDataTable({ }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('expense-drawer', { expenseId: cell.row.original.id }); + }; + // Display empty status instead of the table. if (isEmptyStatus) { return ; @@ -103,6 +108,7 @@ function ExpensesDataTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onPublish: handlePublishExpense, onDelete: handleDeleteExpense, diff --git a/client/src/containers/Expenses/ExpensesLanding/components.js b/client/src/containers/Expenses/ExpensesLanding/components.js index 25a91a252..462e95304 100644 --- a/client/src/containers/Expenses/ExpensesLanding/components.js +++ b/client/src/containers/Expenses/ExpensesLanding/components.js @@ -138,6 +138,7 @@ export function useExpensesTableColumns() { accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'), width: 140, className: 'payment_date', + clickable: true, }, { id: 'amount', @@ -145,6 +146,7 @@ export function useExpensesTableColumns() { accessor: TotalAmountAccessor, className: 'amount', width: 150, + clickable: true, }, { id: 'payment_account', @@ -152,6 +154,7 @@ export function useExpensesTableColumns() { accessor: 'payment_account.name', className: 'payment_account', width: 150, + clickable: true, }, { id: 'expense_account', @@ -160,6 +163,7 @@ export function useExpensesTableColumns() { width: 160, className: 'expense_account', disableSortBy: true, + clickable: true, }, { id: 'published', @@ -167,6 +171,7 @@ export function useExpensesTableColumns() { accessor: PublishAccessor, width: 100, className: 'publish', + clickable: true, }, { id: 'description', @@ -175,6 +180,7 @@ export function useExpensesTableColumns() { width: 150, className: 'description', disableSortBy: true, + clickable: true, }, ], [], diff --git a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js index 07bde3169..4f4af0535 100644 --- a/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js +++ b/client/src/containers/InventoryAdjustments/InventoryAdjustmentTable.js @@ -66,7 +66,12 @@ function InventoryAdjustmentDataTable({ }, [setInventoryAdjustmentTableState], ); - + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('inventory-adjustment-drawer', { + inventoryId: cell.row.original.id, + }); + }; return ( { accessor: (r) => moment(r.date).format('YYYY MMM DD'), width: 115, className: 'date', + clickable: true, }, { id: 'type', @@ -150,6 +151,7 @@ export const useInventoryAdjustmentsColumns = () => { accessor: TypeAccessor, className: 'type', width: 100, + clickable: true, }, { id: 'reason', @@ -157,6 +159,7 @@ export const useInventoryAdjustmentsColumns = () => { accessor: 'reason', className: 'reason', width: 115, + clickable: true, }, { id: 'reference_no', @@ -164,6 +167,7 @@ export const useInventoryAdjustmentsColumns = () => { accessor: 'reference_no', className: 'reference_no', width: 100, + clickable: true, }, { id: 'published_at', @@ -171,6 +175,7 @@ export const useInventoryAdjustmentsColumns = () => { accessor: PublishAccessor, width: 95, className: 'publish', + clickable: true, }, { id: 'description', @@ -179,6 +184,7 @@ export const useInventoryAdjustmentsColumns = () => { disableSorting: true, width: 85, className: 'description', + clickable: true, }, { id: 'created_at', @@ -186,6 +192,7 @@ export const useInventoryAdjustmentsColumns = () => { accessor: (r) => moment(r.created_at).format('YYYY MMM DD'), width: 125, className: 'created_at', + clickable: true, }, ], [], diff --git a/client/src/containers/Items/ItemsDataTable.js b/client/src/containers/Items/ItemsDataTable.js index 62847e127..72fd0e053 100644 --- a/client/src/containers/Items/ItemsDataTable.js +++ b/client/src/containers/Items/ItemsDataTable.js @@ -107,6 +107,11 @@ function ItemsDataTable({ return ; } + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('item-detail-drawer', { itemId: cell.row.original.id }); + }; + return ( { accessor: 'name', className: 'name', width: 180, + clickable: true, }, { id: 'code', @@ -162,6 +163,7 @@ export const useItemsTableColumns = () => { accessor: 'code', className: 'code', width: 120, + clickable: true, }, { id: 'type', @@ -169,6 +171,7 @@ export const useItemsTableColumns = () => { accessor: ItemTypeAccessor, className: 'item_type', width: 120, + clickable: true, }, { id: 'category', @@ -176,6 +179,7 @@ export const useItemsTableColumns = () => { accessor: 'category.name', className: 'category', width: 150, + clickable: true, }, { id: 'sell_price', @@ -183,6 +187,7 @@ export const useItemsTableColumns = () => { accessor: 'sell_price_formatted', className: 'sell-price', width: 150, + clickable: true, }, { id: 'cost_price', @@ -190,6 +195,7 @@ export const useItemsTableColumns = () => { accessor: 'cost_price_formatted', className: 'cost-price', width: 150, + clickable: true, }, { id: 'quantity_on_hand', @@ -197,6 +203,7 @@ export const useItemsTableColumns = () => { accessor: 'quantity_on_hand', Cell: QuantityOnHandCell, width: 140, + clickable: true, }, ], [], diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js index f2edded7d..13548472e 100644 --- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js +++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js @@ -86,6 +86,11 @@ function BillsDataTable({ openDrawer('bill-drawer', { billId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('bill-drawer', { billId: cell.row.original.id }); + }; + if (isEmptyStatus) { return ; } @@ -108,6 +113,7 @@ function BillsDataTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onDelete: handleDeleteBill, onEdit: handleEditBill, diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js index 2c4845706..32a9972ec 100644 --- a/client/src/containers/Purchases/Bills/BillsLanding/components.js +++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js @@ -159,6 +159,7 @@ export function useBillsTableColumns() { accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'), width: 110, className: 'bill_date', + clickable: true, }, { id: 'vendor', @@ -166,6 +167,7 @@ export function useBillsTableColumns() { accessor: 'vendor.display_name', width: 180, className: 'vendor', + clickable: true, }, { id: 'bill_number', @@ -173,6 +175,7 @@ export function useBillsTableColumns() { accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null), width: 100, className: 'bill_number', + clickable: true, }, { id: 'amount', @@ -180,6 +183,7 @@ export function useBillsTableColumns() { accessor: AmountAccessor, width: 120, className: 'amount', + clickable: true, }, { id: 'status', @@ -187,6 +191,7 @@ export function useBillsTableColumns() { accessor: StatusAccessor, width: 160, className: 'status', + clickable: true, }, { id: 'due_date', @@ -194,6 +199,7 @@ export function useBillsTableColumns() { accessor: (r) => moment(r.due_date).format('YYYY MMM DD'), width: 110, className: 'due_date', + clickable: true, }, { id: 'reference_no', @@ -201,6 +207,7 @@ export function useBillsTableColumns() { accessor: 'reference_no', width: 90, className: 'reference_no', + clickable: true, }, ], [], diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js index 993ceeff2..00af42200 100644 --- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js +++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js @@ -63,6 +63,13 @@ function PaymentMadesTable({ openDrawer('payment-made-detail-drawer', { paymentMadeId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('payment-made-detail-drawer', { + paymentMadeId: cell.row.original.id, + }); + }; + // Handle datatable fetch data once the table state change. const handleDataTableFetchData = useCallback( ({ pageIndex, pageSize, sortBy }) => { @@ -96,6 +103,7 @@ function PaymentMadesTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onEdit: handleEditPaymentMade, onDelete: handleDeletePaymentMade, diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js index ea55630ce..bef7be79e 100644 --- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js +++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js @@ -78,6 +78,7 @@ export function usePaymentMadesTableColumns() { accessor: 'payment_date', width: 140, className: 'payment_date', + clickable: true, }, { id: 'vendor', @@ -85,6 +86,7 @@ export function usePaymentMadesTableColumns() { accessor: 'vendor.display_name', width: 140, className: 'vendor_id', + clickable: true, }, { id: 'payment_number', @@ -93,6 +95,7 @@ export function usePaymentMadesTableColumns() { row.payment_number ? `#${row.payment_number}` : null, width: 140, className: 'payment_number', + clickable: true, }, { id: 'payment_account', @@ -100,6 +103,7 @@ export function usePaymentMadesTableColumns() { accessor: 'payment_account.name', width: 140, className: 'payment_account_id', + clickable: true, }, { id: 'amount', @@ -107,6 +111,7 @@ export function usePaymentMadesTableColumns() { accessor: AmountAccessor, width: 140, className: 'amount', + clickable: true, }, { id: 'reference_no', @@ -114,6 +119,7 @@ export function usePaymentMadesTableColumns() { accessor: 'reference', width: 140, className: 'reference', + clickable: true, }, ], [], diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js index 242855779..6caffd3af 100644 --- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js +++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js @@ -90,6 +90,10 @@ function EstimatesDataTable({ openDialog('estimate-pdf-preview', { estimateId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('estimate-detail-drawer', { estimateId: cell.row.original.id }); + }; // Handles fetch data. const handleFetchData = useCallback( ({ pageIndex, pageSize, sortBy }) => { @@ -125,6 +129,7 @@ function EstimatesDataTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onApprove: handleApproveEstimate, onEdit: handleEditEstimate, diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js index f7d25c3ec..87141ddcc 100644 --- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js +++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js @@ -164,6 +164,7 @@ export function useEstiamtesTableColumns() { Cell: DateCell, width: 140, className: 'estimate_date', + clickable: true, }, { id: 'customer', @@ -171,6 +172,7 @@ export function useEstiamtesTableColumns() { accessor: 'customer.display_name', width: 140, className: 'customer_id', + clickable: true, }, { id: 'expiration_date', @@ -179,6 +181,7 @@ export function useEstiamtesTableColumns() { Cell: DateCell, width: 140, className: 'expiration_date', + clickable: true, }, { id: 'estimate_number', @@ -187,6 +190,7 @@ export function useEstiamtesTableColumns() { row.estimate_number ? `#${row.estimate_number}` : null, width: 140, className: 'estimate_number', + clickable: true, }, { id: 'amount', @@ -194,6 +198,7 @@ export function useEstiamtesTableColumns() { accessor: AmountAccessor, width: 140, className: 'amount', + clickable: true, }, { id: 'status', @@ -201,6 +206,7 @@ export function useEstiamtesTableColumns() { accessor: (row) => statusAccessor(row), width: 140, className: 'status', + clickable: true, }, { id: 'reference_no', @@ -208,6 +214,7 @@ export function useEstiamtesTableColumns() { accessor: 'reference', width: 90, className: 'reference', + clickable: true, }, ], [], diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js index c48450da6..3e1bd8f35 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js @@ -86,6 +86,10 @@ function InvoicesDataTable({ openDialog('invoice-pdf-preview', { invoiceId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('invoice-detail-drawer', { invoiceId: cell.row.original.id }); + }; // Handles fetch data once the table state change. const handleDataTableFetchData = useCallback( ({ pageSize, pageIndex, sortBy }) => { @@ -124,6 +128,7 @@ function InvoicesDataTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onDelete: handleDeleteInvoice, onDeliver: handleDeliverInvoice, diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js index d00e88598..8af13011e 100644 --- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js +++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js @@ -174,6 +174,7 @@ export function useInvoicesTableColumns() { accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'), width: 110, className: 'invoice_date', + clickable: true, }, { id: 'customer', @@ -181,6 +182,7 @@ export function useInvoicesTableColumns() { accessor: 'customer.display_name', width: 180, className: 'customer_id', + clickable: true, }, { @@ -189,6 +191,7 @@ export function useInvoicesTableColumns() { accessor: 'invoice_no', width: 100, className: 'invoice_no', + clickable: true, }, { id: 'balance', @@ -198,6 +201,7 @@ export function useInvoicesTableColumns() { ), width: 120, className: 'balance', + clickable: true, }, { id: 'status', @@ -205,6 +209,7 @@ export function useInvoicesTableColumns() { accessor: (row) => statusAccessor(row), width: 160, className: 'status', + clickable: true, }, { id: 'due_date', @@ -212,6 +217,7 @@ export function useInvoicesTableColumns() { accessor: (r) => moment(r.due_date).format('YYYY MMM DD'), width: 110, className: 'due_date', + clickable: true, }, { id: 'reference_no', @@ -219,8 +225,9 @@ export function useInvoicesTableColumns() { accessor: 'reference_no', width: 90, className: 'reference_no', + clickable: true, }, ], [], ); -} \ No newline at end of file +} diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js index 51f20b337..c2e220847 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js @@ -66,6 +66,13 @@ function PaymentReceivesDataTable({ openDrawer('payment-receive-detail-drawer', { paymentReceiveId: id }); }; + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('payment-receive-detail-drawer', { + paymentReceiveId: cell.row.original.id, + }); + }; + // Handle datatable fetch once the table's state changing. const handleDataTableFetchData = useCallback( ({ pageIndex, pageSize, sortBy }) => { @@ -103,6 +110,7 @@ function PaymentReceivesDataTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onDelete: handleDeletePaymentReceive, onEdit: handleEditPaymentReceive, diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js index 6753d9c36..013198bcd 100644 --- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js +++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js @@ -89,6 +89,7 @@ export function usePaymentReceivesColumns() { accessor: PaymentDateAccessor, width: 140, className: 'payment_date', + clickable: true, }, { id: 'customer', @@ -96,6 +97,7 @@ export function usePaymentReceivesColumns() { accessor: 'customer.display_name', width: 160, className: 'customer_id', + clickable: true, }, { id: 'amount', @@ -103,6 +105,7 @@ export function usePaymentReceivesColumns() { accessor: AmountAccessor, width: 120, className: 'amount', + clickable: true, }, { id: 'payment_receive_no', @@ -111,6 +114,7 @@ export function usePaymentReceivesColumns() { row.payment_receive_no ? `#${row.payment_receive_no}` : null, width: 140, className: 'payment_receive_no', + clickable: true, }, { id: 'deposit_account', @@ -118,6 +122,7 @@ export function usePaymentReceivesColumns() { accessor: 'deposit_account.name', width: 140, className: 'deposit_account_id', + clickable: true, }, { id: 'reference_no', @@ -125,6 +130,7 @@ export function usePaymentReceivesColumns() { accessor: 'reference_no', width: 140, className: 'reference_no', + clickable: true, }, ], [], diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js index 1a30b2e7c..9e8b69e29 100644 --- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js +++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js @@ -95,6 +95,10 @@ function ReceiptsDataTable({ if (isEmptyStatus) { return ; } + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('receipt-detail-drawer', { receiptId: cell.row.original.id }); + }; return ( moment(r.receipt_date).format('YYYY MMM DD'), width: 140, className: 'receipt_date', + clickable: true, }, { id: 'customer', @@ -113,6 +114,7 @@ export function useReceiptsTableColumns() { accessor: 'customer.display_name', width: 140, className: 'customer_id', + clickable: true, }, { id: 'receipt_number', @@ -120,6 +122,7 @@ export function useReceiptsTableColumns() { accessor: 'receipt_number', width: 140, className: 'receipt_number', + clickable: true, }, { id: 'deposit_account', @@ -127,6 +130,7 @@ export function useReceiptsTableColumns() { accessor: 'deposit_account.name', width: 140, className: 'deposit_account', + clickable: true, }, { id: 'amount', @@ -134,6 +138,7 @@ export function useReceiptsTableColumns() { accessor: (r) => , width: 140, className: 'amount', + clickable: true, }, { id: 'status', @@ -141,6 +146,7 @@ export function useReceiptsTableColumns() { accessor: StatusAccessor, width: 140, className: 'status', + clickable: true, }, { id: 'reference_no', @@ -148,6 +154,7 @@ export function useReceiptsTableColumns() { accessor: 'reference_no', width: 140, className: 'reference_no', + clickable: true, }, ], [], diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js index ed9b6e8dd..1f6a04945 100644 --- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js +++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js @@ -85,7 +85,11 @@ function VendorsTable({ const handleViewDetailVendor = ({ id }) => { openDrawer('contact-detail-drawer', { contactId: id }); }; - + + // Handle cell click. + const handleCellClick = (cell, event) => { + openDrawer('contact-detail-drawer', { contactId: cell.row.original.id }); + }; // Handle fetch data once the page index, size or sort by of the table change. const handleFetchData = React.useCallback( ({ pageSize, pageIndex, sortBy }) => { @@ -124,6 +128,7 @@ function VendorsTable({ TableLoadingRenderer={TableSkeletonRows} TableHeaderSkeletonRenderer={TableSkeletonHeader} ContextMenu={ActionsMenu} + onCellClick={handleCellClick} payload={{ onEdit: handleEditVendor, onDelete: handleDeleteVendor, diff --git a/client/src/containers/Vendors/VendorsLanding/components.js b/client/src/containers/Vendors/VendorsLanding/components.js index 30646f94b..355effbf3 100644 --- a/client/src/containers/Vendors/VendorsLanding/components.js +++ b/client/src/containers/Vendors/VendorsLanding/components.js @@ -117,6 +117,7 @@ export function useVendorsTableColumns() { width: 45, disableResizing: true, disableSortBy: true, + clickable: true, }, { id: 'display_name', @@ -124,6 +125,7 @@ export function useVendorsTableColumns() { accessor: 'display_name', className: 'display_name', width: 150, + clickable: true, }, { id: 'company_name', @@ -131,6 +133,7 @@ export function useVendorsTableColumns() { accessor: 'company_name', className: 'company_name', width: 150, + clickable: true, }, { id: 'work_phone', @@ -138,6 +141,7 @@ export function useVendorsTableColumns() { accessor: PhoneNumberAccessor, className: 'work_phone', width: 100, + clickable: true, }, { id: 'balance', @@ -145,6 +149,7 @@ export function useVendorsTableColumns() { accessor: BalanceAccessor, className: 'receivable_balance', width: 100, + clickable: true, }, ], [],