BC-14: feat: table rows clickable.

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 <BillsEmptyStatus />;
   }
@@ -108,6 +113,7 @@ function BillsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
       ContextMenu={ActionsMenu}
+      onCellClick={handleCellClick}
       payload={{
         onDelete: handleDeleteBill,
         onEdit: handleEditBill,

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,
       },
     ],
     [],

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,

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,
       },
     ],
     [],