From 6b5c26924d1ec1387c3d780a634dca53d8638a05 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sat, 4 Sep 2021 20:12:09 +0200
Subject: [PATCH] BC-12 feat: table rows and cells clickable.

---
 client/src/components/Datatable/TableCell.js      | 15 ++++++++++-----
 .../src/containers/Accounts/AccountsDataTable.js  |  5 +++++
 client/src/containers/Accounts/utils.js           |  6 ++++++
 .../Preferences/General/GeneralFormPage.js        |  1 -
 .../src/style/components/DataTable/DataTable.scss | 14 +++++++-------
 5 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Datatable/TableCell.js b/client/src/components/Datatable/TableCell.js
index 4aa13b5b7..ec5bfe965 100644
--- a/client/src/components/Datatable/TableCell.js
+++ b/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({
-  cell,
-  row: { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded },
-  index,
-}) {
+export default function TableCell({ cell, row, index }) {
+  const { index: rowIndex, depth, getToggleRowExpandedProps, isExpanded } = row;
   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
diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js
index ecc9355b4..a07e70066 100644
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/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,
diff --git a/client/src/containers/Accounts/utils.js b/client/src/containers/Accounts/utils.js
index 3fc1a9d10..728ec6f81 100644
--- a/client/src/containers/Accounts/utils.js
+++ b/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,
       },
     ],
     [],
diff --git a/client/src/containers/Preferences/General/GeneralFormPage.js b/client/src/containers/Preferences/General/GeneralFormPage.js
index 17a693ab5..c6b0e271d 100644
--- a/client/src/containers/Preferences/General/GeneralFormPage.js
+++ b/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) => {
diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss
index d5b23831b..36bd7f5a9 100644
--- a/client/src/style/components/DataTable/DataTable.scss
+++ b/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;
-          width: 16px;
+          height: 15px;
+          width: 15px;
         }
       }