BC-12 feat: table rows and cells clickable.

client/src/components/Datatable/TableCell.js

@@ -4,16 +4,14 @@ import { If } from 'components';
 import { Skeleton } from 'components';
 import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
+import { saveInvoke } from 'utils';
 import { isCellLoading } from './utils';
 
 /**
  * Table cell.
  */
-export default function TableCell({
+export default function TableCell({ cell, row, index }) {
-  cell,
+  const { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded } = row;
-  row: { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded },
-  index,
-}) {
   const {
     props: {
       expandToggleColumn,
@@ -21,6 +19,7 @@ export default function TableCell({
       expandable,
       cellsLoading,
       cellsLoadingCoords,
+      onCellClick,
     },
   } = useContext(TableContext);
 
@@ -49,13 +48,19 @@ export default function TableCell({
       </div>
     );
   }
+  // Handle cell click action.
+  const handleCellClick = (event) => {
+    saveInvoke(onCellClick, cell, event);
+  };
 
   return (
     <div
       {...cell.getCellProps({
         className: classNames(cell.column.className, 'td', {
           'is-text-overview': cell.column.textOverview,
+          'clickable': cell.column.clickable,
         }),
+        onClick: handleCellClick,
       })}
     >
       <div

client/src/containers/Accounts/AccountsDataTable.js

@@ -76,6 +76,10 @@ function AccountsDataTable({
       accountType: account.account_type,
     });
   };
+  // Handle cell click.
+  const handleCellClick = (cell, event) => {
+    openDrawer('account-drawer', { accountId: cell.row.original.id });
+  };
 
   return (
     <DataTable
@@ -103,6 +107,7 @@ function AccountsDataTable({
       // #TableVirtualizedListRows props.
       vListrowHeight={42}
       vListOverscanRowCount={0}
+      onCellClick={handleCellClick}
       payload={{
         onEdit: handleEditAccount,
         onDelete: handleDeleteAccount,

client/src/containers/Accounts/utils.js

@@ -56,6 +56,7 @@ export const useAccountsTableColumns = () => {
         accessor: 'name',
         className: 'account_name',
         width: 200,
+        clickable: true,
       },
       {
         id: 'code',
@@ -63,6 +64,7 @@ export const useAccountsTableColumns = () => {
         accessor: AccountCodeAccessor,
         className: 'code',
         width: 80,
+        clickable: true,
       },
       {
         id: 'type',
@@ -70,6 +72,7 @@ export const useAccountsTableColumns = () => {
         accessor: 'account_type_label',
         className: 'type',
         width: 140,
+        clickable: true,
       },
       {
         id: 'normal',
@@ -78,12 +81,14 @@ export const useAccountsTableColumns = () => {
         accessor: 'account_normal',
         className: 'normal',
         width: 80,
+        clickable: true,
       },
       {
         id: 'currency',
         Header: intl.get('currency'),
         accessor: 'currency_code',
         width: 75,
+        clickable: true,
       },
       {
         id: 'balance',
@@ -91,6 +96,7 @@ export const useAccountsTableColumns = () => {
         accessor: 'amount',
         Cell: BalanceCell,
         width: 150,
+        clickable: true,
       },
     ],
     [],

client/src/containers/Preferences/General/GeneralFormPage.js

@@ -51,7 +51,6 @@ function GeneralFormPage({
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
-      resetForm();
     };
     // Handle request error.
     const onError = (errors) => {

client/src/style/components/DataTable/DataTable.scss

@@ -73,6 +73,10 @@
         display: flex;
         flex: 1 0 auto;
       }
+
+      &:hover .td.clickable{
+        cursor: pointer;
+      }
     }
 
     .th,
@@ -108,10 +112,6 @@
         z-index: 1;
         touch-action: none;
 
-        &.isResizing {
-          // background: red;
-        }
-
         .inner-resizer {
           height: 100%;
           width: 1px;
@@ -125,12 +125,12 @@
       }
 
       .bp3-control.bp3-checkbox .bp3-control-indicator {
-        border: 2px solid #d7d7d7;
+        border: 1px solid #c2c2c2;
 
         &,
         &:hover {
-          height: 16px;
+          height: 15px;
-          width: 16px;
+          width: 15px;
         }
       }