From 80da5ef8845325519cb93fa5e0df378fb81ead74 Mon Sep 17 00:00:00 2001
From: Navaneeth Pk <navaneeth@tooljet.io>
Date: Mon, 2 Aug 2021 10:16:59 +0530
Subject: [PATCH] Feature: Radio buttons as table cell type (#424)

---
 .../src/Editor/Components/Table/Radio.jsx     | 19 +++++++++++++++++++
 .../src/Editor/Components/Table/Table.jsx     | 16 +++++++++++++++-
 .../src/Editor/Inspector/Components/Table.jsx |  3 ++-
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/Editor/Components/Table/Radio.jsx

diff --git a/frontend/src/Editor/Components/Table/Radio.jsx b/frontend/src/Editor/Components/Table/Radio.jsx
new file mode 100644
index 0000000000..b6b704d83b
--- /dev/null
+++ b/frontend/src/Editor/Components/Table/Radio.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+
+export const Radio = ({ options, value, onChange, readOnly }) => {
+
+  value = value || [];
+
+  return (
+    <div className="radio row">
+      <div>
+        {options.map((option) => 
+          <label class="form-check form-check-inline" onClick={() => { if(!readOnly) onChange(option.value); } }>
+            <input class="form-check-input" type="radio" checked={option.value === value} disabled={readOnly && (option.value !== value)}/>
+            <span class ="form-check-label">{option.name}</span>
+          </label>
+        )}
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index d2c376aee5..3510a2eae2 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -17,6 +17,7 @@ import Papa from 'papaparse';
 import { Pagination } from './Pagination';
 import { CustomSelect } from './CustomSelect';
 import { Tags } from './Tags';
+import { Radio } from './Radio';
 
 var _ = require('lodash');
 
@@ -226,7 +227,7 @@ export function Table({
     const columnType = column.columnType;
 
     const columnOptions = {};
-    if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges') {
+    if (columnType === 'dropdown' || columnType === 'multiselect' || columnType === 'badge' || columnType === 'badges' || columnType === 'radio') {
       const values = resolveReferences(column.values, currentState) || [];
       const labels = resolveReferences(column.labels, currentState, []) || [];
 
@@ -349,6 +350,19 @@ export function Table({
               />
             </div>
           );
+        } if (columnType === 'radio') {
+          return (
+            <div>
+              <Radio
+                options={columnOptions.selectOptions}
+                value={cellValue}
+                readOnly={!column.isEditable}
+                onChange={(value) => {
+                  handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
+                }}
+              />
+            </div>
+          );
         }
         return cellValue || '';
       }
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index ab05e17643..b5efc8c747 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -101,6 +101,7 @@ class Table extends React.Component {
                 { name: 'Multiple badges', value: 'badges' },
                 { name: 'Tags', value: 'tags' },
                 { name: 'Dropdown', value: 'dropdown' },
+                { name: 'Radio', value: 'radio' },
                 { name: 'Multiselect', value: 'multiselect' }
               ]}
               value={column.columnType}
@@ -138,7 +139,7 @@ class Table extends React.Component {
             />
           </div>
 
-          {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges') && (
+          {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && (
             <div>
               <div className="field mb-2">
                 <label className="form-label">Values</label>