From d0555f67ad14895f72e12b06ca0c114768bd5f4d Mon Sep 17 00:00:00 2001
From: Navaneeth Pk <navaneeth@tooljet.io>
Date: Thu, 2 Sep 2021 11:46:26 +0530
Subject: [PATCH] Customisable font color for string cells (#671)

* Customisable font color for string cells

* Fallback colors
---
 .../src/Editor/Components/Table/Table.jsx     | 14 ++++++++++---
 .../src/Editor/Inspector/Components/Table.jsx | 21 ++++++++++++++-----
 frontend/src/_helpers/utils.js                |  6 +++---
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e25ac49c38..2f4453d134 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -276,10 +276,18 @@ export function Table({
         const cellValue = rowChangeSet ? rowChangeSet[column.name] || cell.value : cell.value;
 
         if (columnType === 'string' || columnType === undefined || columnType === 'default') {
+          
+          const textColor = resolveReferences(column.textColor, currentState, { cellValue });
+
+          const cellStyles = {
+            color: textColor === undefined ? darkMode === true ? '#fff' : 'black' : textColor
+          }
+
           if (column.isEditable) {
             return (
               <input
                 type="text"
+                style={cellStyles}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     if(e.target.defaultValue !== e.target.value) {
@@ -297,7 +305,7 @@ export function Table({
               />
             );
           }
-          return <span>{cellValue}</span>;
+          return <span style={cellStyles}>{cellValue}</span>;
         } if (columnType === 'text') {
           return <textarea 
               rows="1" 
@@ -682,9 +690,9 @@ export function Table({
                       if (componentState.changeSet) {
                         if (componentState.changeSet[cell.row.index]) {
 
-                          const accessor = columnData.find(column => column.id === cell.column.id)?.accessor;
+                          const currentColumn = columnData.find(column => column.id === cell.column.id);
 
-                          if (_.get(componentState.changeSet[cell.row.index], accessor, undefined) !== undefined) {
+                          if (_.get(componentState.changeSet[cell.row.index], currentColumn?.accessor, undefined) !== undefined) {
                             console.log('componentState.changeSet', componentState.changeSet);
                             cellProps.style.backgroundColor = '#ffffde';
                           }
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index af6b75b80e..98261d41f5 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -152,6 +152,21 @@ class Table extends React.Component {
             />
           </div>
 
+          {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && 
+            <div className="field mb-2">
+              <label className="form-label">Text color</label>
+              <CodeHinter
+                currentState={this.props.currentState}
+                initialValue={column.textColor}
+                theme={this.props.darkMode ? 'monokai' : 'default'}
+                mode= "javascript"
+                lineNumbers={false}
+                placeholder={'Text color of the cell'}
+                onChange={(value) => this.onColumnItemChange(index, 'textColor', value)}
+              />
+            </div>
+          }
+
           {column.columnType === 'toggle' && 
             <div>
               <div className="field mb-2">
@@ -228,7 +243,7 @@ class Table extends React.Component {
            
           )}
 
-          <label className="form-check form-switch my-2">
+          <label className="form-check form-switch my-4">
             <input
               className="form-check-input"
               type="checkbox"
@@ -237,10 +252,6 @@ class Table extends React.Component {
             />
             <span className="form-check-label">make editable</span>
           </label>
-
-          <button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
-            Remove
-          </button>
         </Popover.Content>
       </Popover>
     );
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index c888c51ab8..f39c376f7a 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -34,15 +34,15 @@ export function resolveAll(data, state) {
 
 }
 
-export function resolveReferences(object, state) {
+export function resolveReferences(object, state, customObjects) {
   if (typeof object === 'string') {
     if (object.startsWith('{{') && object.endsWith('}}')) {
       const code = object.replace('{{', '').replace('}}', '');
       let result = '';
 
       try {
-        const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_'], `return ${code}`);
-        result = evalFunction(state.components, state.queries, state.globals, moment, _);
+        const evalFunction = Function(['components', 'queries', 'globals', 'moment', '_', ...Object.keys(customObjects)], `return ${code}`);
+        result = evalFunction(state.components, state.queries, state.globals, moment, _, ...Object.values(customObjects));
       } catch (err) {
         console.log('eval_error', err);
       }