From e185434014828ce60095e6d6f9f201c4daa4498c Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 24 Apr 2021 22:02:14 +0530
Subject: [PATCH] Feature: Dropdown column type for tables

---
 frontend/src/Editor/Components/Table.jsx      | 19 ++++++++++++++
 .../src/Editor/Inspector/Components/Table.jsx | 26 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/frontend/src/Editor/Components/Table.jsx b/frontend/src/Editor/Components/Table.jsx
index 42619b3e2e..9ad6c9c439 100644
--- a/frontend/src/Editor/Components/Table.jsx
+++ b/frontend/src/Editor/Components/Table.jsx
@@ -11,6 +11,7 @@ import {
 } from "react-table";
 import { resolve, resolve_references } from '@/_helpers/utils';
 import Skeleton from 'react-loading-skeleton';
+import SelectSearch, { fuzzySearch } from 'react-select-search';
 
 export function Table({ id, width, height, component, onComponentClick, currentState = { components: { } }, onEvent, paramUpdated, changeCanDrag, onComponentOptionChanged }) {
 
@@ -97,6 +98,15 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 	const columnData = component.definition.properties.columns.value.map((column) => { 
 		const columnSize = columnSizes[column.key] || columnSizes[column.name];
 		const columnType = column.columnType;
+
+		const columnOptions = {};
+		if(columnType === 'dropdown') {
+			const values = resolve_references(column.values, currentState, []);
+			const labels = resolve_references(column.labels, currentState, []);
+			columnOptions['selectOptions'] = labels.map((label, index) => {
+				return { name: label, value: values[index]};
+			});
+		}
 		
     	return { Header: 
 			column.name, 
@@ -121,6 +131,15 @@ export function Table({ id, width, height, component, onComponentClick, currentS
 					} else {
 						return cellValue;
 					}
+				} else if(columnType === 'dropdown') {
+					return <SelectSearch 
+						options={columnOptions['selectOptions']}
+						value={cellValue} 
+						search={true}
+						onChange={(value) => { handleCellValueChange(cell.row.index, column.name, value, cell.row.original) }}
+						filterOptions={fuzzySearch}
+						placeholder="Select.." 
+                	/>
 				} else {
 					return cellValue;
 				}
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 5abe6dce7f..3538eff76f 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -77,6 +77,7 @@ class Table extends React.Component {
                             options={[
                                 { name: 'Default', value: 'default' },
                                 { name: 'String', value: 'string' },
+                                { name: 'Dropdown', value: 'dropdown' },
                             ]}
                             value={column.columnType} 
                             search={true}
@@ -105,6 +106,31 @@ class Table extends React.Component {
                         />
                     </div>
 
+                    {column.columnType === "dropdown" && 
+                        <div>
+                            <div className="field mb-2">
+                                <label class="form-label">Values</label>
+                                <input 
+                                    type="text"
+                                    class="form-control text-field" 
+                                    onChange={(e) => { e.stopPropagation(); this.onColumnItemChange(index, 'values', e.target.value) }} 
+                                    value={column.values} 
+                                    placeholder={`{{[1, 2, 3]}}`}
+                                />
+                            </div>
+                            <div className="field mb-2">
+                                <label class="form-label">Labels</label>
+                                <input 
+                                    type="text"  
+                                    class="form-control text-field" 
+                                    onChange={(e) => { e.stopPropagation(); this.onColumnItemChange(index, 'labels', e.target.value) }} 
+                                    value={column.labels} 
+                                    placeholder={`{{["one", "two", "three"]}}`}
+                                />
+                            </div>
+                        </div>
+                    }
+
                     {column.columnType === "string" && 
                          <label className="form-check form-switch my-2">
                             <input