From 214b99cd100cfa74fe3867e8c968cabde8184aba Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Tue, 31 Aug 2021 16:07:38 +0530
Subject: [PATCH] Feature: display action button on left (#647)

* Add option to set poisition of table action button

* Display table actions on the left if their position is set to left

* Replace 'buttonPosition' with 'position' for table actions

* Use SelectSearch instead of html select

* Display actions column only if actions are present
---
 .../src/Editor/Components/Table/Table.jsx     | 39 ++++++++++++++++---
 .../src/Editor/Inspector/Components/Table.jsx | 17 ++++++++
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index b913bfd5da..3cc00c5bf1 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -429,15 +429,44 @@ export function Table({
 
   tableData = tableData || [];
 
-  const actionsCellData = actions.value.length > 0
+  const leftActions = () => actions.value.filter(action => action.position === 'left')
+  const rightActions = () => actions.value.filter(action => [undefined, 'right'].includes(action.position))
+
+  const leftActionsCellData = leftActions().length > 0
     ? [
       {
-        id: 'actions',
+        id: 'leftActions',
         Header: 'Actions',
         accessor: 'edit',
         width: columnSizes.actions || defaultColumn.width,
         Cell: (cell) => {
-          return actions.value.map((action) => (
+          return leftActions().map((action) => (
+                <button
+                  key={action.name}
+                  className="btn btn-sm m-1 btn-light"
+                  style={{ background: action.backgroundColor, color: action.textColor }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEvent('onTableActionButtonClicked', { component, data: cell.row.original, action });
+                  }}
+                >
+                  {action.buttonText}
+                </button>
+          ));
+        }
+      }
+    ]
+    : [];
+
+  const rightActionsCellData = rightActions().length > 0
+    ? [
+      {
+        id: 'rightActions',
+        Header: 'Actions',
+        accessor: 'edit',
+        width: columnSizes.actions || defaultColumn.width,
+        Cell: (cell) => {
+          return rightActions().map((action) => (
                 <button
                   key={action.name}
                   className="btn btn-sm m-1 btn-light"
@@ -456,9 +485,9 @@ export function Table({
     : [];
 
   const columns = useMemo(
-    () => [...columnData, ...actionsCellData],
+    () => [...leftActionsCellData, ...columnData, ...rightActionsCellData],
     [JSON.stringify(columnData), 
-      actionsCellData.length, 
+      leftActionsCellData.length + rightActionsCellData.length,
       componentState.changeSet,
       JSON.stringify(component.definition.properties.columns)
     ] // Hack: need to fix
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 3af854d852..af6b75b80e 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -270,6 +270,23 @@ class Table extends React.Component {
               value={action.buttonText}
             />
           </div>
+          <div className="field mb-2">
+            <label className="form-label">Button position</label>
+            <SelectSearch
+              options={[
+                { name: 'Left', value: 'left' },
+                { name: 'Right', value: 'right' },
+              ]}
+              value={action.position ?? 'right'}
+              search={false}
+              closeOnSelect={true}
+              onChange={value => {
+                this.onActionButtonPropertyChanged(index, 'position', value);
+              }}
+              filterOptions={fuzzySearch}
+              placeholder="Select position"
+            />
+          </div>
           <Color
             param={{ name: 'actionButtonBackgroundColor' }}
             paramType="properties"