From 2dd9fef0b9f72f4c24fce10b6d136b933391786d Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Mon, 31 Oct 2022 14:12:57 +0530
Subject: [PATCH] Feature :: Table image column type addition (#4547)

* feat :: adding column type image

* feat :: adding image fit property
---
 .../src/Editor/Components/Table/Table.jsx     |  6 +-
 .../Editor/Components/Table/columns/index.jsx | 22 ++++-
 .../src/Editor/Inspector/Components/Table.jsx | 83 +++++++++++++++++--
 frontend/src/_styles/theme.scss               |  3 +
 4 files changed, 103 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 9f4956237b..31dd81a646 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -791,7 +791,11 @@ export function Table({
                           {...cellProps}
                           style={{ ...cellProps.style, backgroundColor: cellBackgroundColor ?? 'inherit' }}
                         >
-                          <div className="td-container">{cell.render('Cell')}</div>
+                          <div
+                            className={`td-container ${cell.column.columnType === 'image' && 'jet-table-image-column'}`}
+                          >
+                            {cell.render('Cell')}
+                          </div>
                         </td>
                       );
                     })}
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 135398ad91..fbfe60b013 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -35,7 +35,8 @@ export default function generateColumnsData({
       columnType === 'multiselect' ||
       columnType === 'badge' ||
       columnType === 'badges' ||
-      columnType === 'radio'
+      columnType === 'radio' ||
+      columnType === 'image'
     ) {
       columnOptions.selectOptions = [];
       const values = resolveReferences(column.values, currentState, []);
@@ -328,6 +329,25 @@ export default function generateColumnsData({
               </div>
             );
           }
+          case 'image': {
+            return (
+              <div>
+                {cellValue && (
+                  <img
+                    src={cellValue}
+                    style={{
+                      pointerEvents: 'auto',
+                      width: `${column?.width}px`,
+                      height: `${column?.height}px`,
+                      borderRadius: `${column?.borderRadius}%`,
+                      objectFit: `${column?.objectFit}`,
+                    }}
+                    alt={cellValue}
+                  />
+                )}
+              </div>
+            );
+          }
           case 'radio': {
             return (
               <div>
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index aa54dffbf4..04757e755d 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -180,6 +180,7 @@ class TableComponent extends React.Component {
                 { name: 'Multiselect', value: 'multiselect' },
                 { name: 'Toggle switch', value: 'toggle' },
                 { name: 'Date Picker', value: 'datepicker' },
+                { name: 'Image', value: 'image' },
               ]}
               value={column.columnType}
               search={true}
@@ -526,16 +527,80 @@ class TableComponent extends React.Component {
               </div>
             </div>
           )}
+          {column.columnType === 'image' && (
+            <>
+              <div className="field mb-2">
+                <label className="form-label">{this.props.t('widget.Table.borderRadius', 'Border radius')}</label>
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.borderRadius}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode="javascript"
+                  lineNumbers={false}
+                  placeholder={''}
+                  onChange={(value) => this.onColumnItemChange(index, 'borderRadius', value)}
+                  componentName={this.getPopoverFieldSource(column.columnType, 'borderRadius')}
+                />
+              </div>
+              <div className="field mb-2">
+                <label className="form-label">{this.props.t('widget.Table.width', 'Width')}</label>
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.width}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode="javascript"
+                  lineNumbers={false}
+                  placeholder={''}
+                  onChange={(value) => this.onColumnItemChange(index, 'width', value)}
+                  componentName={this.getPopoverFieldSource(column.columnType, 'width')}
+                />
+              </div>
+              <div className="field mb-2">
+                <label className="form-label">{this.props.t('widget.Table.height', 'Height')}</label>
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={column.height}
+                  theme={this.props.darkMode ? 'monokai' : 'default'}
+                  mode="javascript"
+                  lineNumbers={false}
+                  placeholder={''}
+                  onChange={(value) => this.onColumnItemChange(index, 'height', value)}
+                  componentName={this.getPopoverFieldSource(column.columnType, 'height')}
+                />
+              </div>
+              <div className="field mb-2">
+                <label className="form-label">{this.props.t('widget.Table.objectFit', 'Object fit')}</label>
+                <SelectSearch
+                  className={`${this.props.darkMode ? 'select-search-dark' : 'select-search'}`}
+                  options={[
+                    { name: 'Cover', value: 'cover' },
+                    { name: 'Contain', value: 'contain' },
+                    { name: 'Fill', value: 'fill' },
+                  ]}
+                  value={column.objectFit}
+                  search={true}
+                  closeOnSelect={true}
+                  onChange={(value) => {
+                    this.onColumnItemChange(index, 'objectFit', value);
+                  }}
+                  filterOptions={fuzzySearch}
+                  placeholder={this.props.t('Select') + '...'}
+                />
+              </div>
+            </>
+          )}
 
-          <div className="form-check form-switch my-4">
-            <input
-              className="form-check-input"
-              type="checkbox"
-              onClick={() => this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
-              checked={column.isEditable}
-            />
-            <span className="form-check-label">{this.props.t('widget.Table.makeEditable', 'make editable')}</span>
-          </div>
+          {column.columnType !== 'image' && (
+            <div className="form-check form-switch my-4">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                onClick={() => this.onColumnItemChange(index, 'isEditable', !column.isEditable)}
+                checked={column.isEditable}
+              />
+              <span className="form-check-label">{this.props.t('widget.Table.makeEditable', 'make editable')}</span>
+            </div>
+          )}
         </Popover.Content>
       </Popover>
     );
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index fcc4b47bcd..74da0e4184 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -3436,6 +3436,9 @@ input:focus-visible {
     background: transparent;
   }
 }
+.jet-table-image-column{
+  margin: 0 auto;
+}
 
 .modal-backdrop.show {
   opacity: 0.74;