dynamice populate columns for data mapping

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx

@@ -1,7 +1,7 @@
 import { CellProps } from "components/table/EditableCell";
 import { DateTimeComp } from "comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp";
 import { ButtonComp } from "comps/comps/tableComp/column/simpleColumnTypeComps";
-import { MultiCompBuilder, withDefault, withType } from "comps/generators";
+import { withType } from "comps/generators";
 import { trans } from "i18n";
 import { Dropdown } from "lowcoder-design";
 import { BooleanComp } from "./columnTypeComps/columnBooleanComp";
@@ -17,31 +17,6 @@ import { ColumnTagsComp } from "./columnTypeComps/columnTagsComp";
 import { ColumnSelectComp } from "./columnTypeComps/columnSelectComp";
 import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
 import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
-import { useState } from "react";
-import { dropdownControl } from "@lowcoder-ee/index.sdk";
-
-const columnValueOptions = [
-  {
-    label: "ID",
-    value: "{{currentRow.id}}",
-  },
-  {
-    label: "Name",
-    value: "{{currentRow.name}}",
-  },
-  {
-    label: "Department",
-    value: "{{currentRow.department}}",
-  },
-  {
-    label: "Date",
-    value: "{{currentRow.date}}",
-  },
-  {
-    label: "Other",
-    value: "",
-  },
-] as const;
 
 const actionOptions = [
   {
@@ -129,15 +104,6 @@ export type ColumnTypeKeys = keyof ColumnTypeMapType;
 
 const TypedColumnTypeComp = withType(ColumnTypeCompMap, "text");
 
-const childrenMap = {
-  comp: TypedColumnTypeComp,
-  valueMap: dropdownControl(columnValueOptions, "")
-};
-
-const TmpColumnTypeComp = new MultiCompBuilder(childrenMap, (props) => {
-  return props;
-}).build();
-
 export class ColumnTypeComp extends TypedColumnTypeComp {
   override getView() {
     const childView = this.children.comp.getView();

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx

@@ -19,13 +19,13 @@ const Wrapper = styled.div`
   padding: 0 8px;
 `;
 
-const IconWrapper = styled.div<{ $style: CheckboxStyleType; ifChecked: boolean }>`
+const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
   height: 22px;
   svg {
     width: 14px;
     height: 22px;
     g {
-      stroke: ${(props) => props.ifChecked && props.$style.checkedBackground} !important;
+      stroke: ${(props) => props.$ifChecked && props.$style.checkedBackground} !important;
     }
   }
 `;
@@ -87,7 +87,7 @@ export const BooleanComp = (function () {
       const CheckBoxComp = () => {
         const style = useStyle(CheckboxStyle);
         return (
-          <IconWrapper $style={style} ifChecked={value}>
+          <IconWrapper $style={style} $ifChecked={value}>
             {value ? (
               <TableCheckedIcon />
             ) : props.falseValues === "x" ? (

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -21,7 +21,7 @@ import {
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
-import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeigthIcon, ImageCompIcon, controlItem } from "lowcoder-design";
+import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeigthIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
 import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
@@ -57,29 +57,6 @@ const columnFixOptions = [
   },
 ] as const;
 
-const columnValueOptions = [
-  {
-    label: "ID",
-    value: "{{currentRow.id}}",
-  },
-  {
-    label: "Name",
-    value: "{{currentRow.name}}",
-  },
-  {
-    label: "Department",
-    value: "{{currentRow.department}}",
-  },
-  {
-    label: "Date",
-    value: "{{currentRow.date}}",
-  },
-  {
-    label: "Other",
-    value: "",
-  },
-] as const;
-
 const cellColorLabel = trans("table.cellColor");
 const CellColorTempComp = withContext(
   new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
@@ -113,11 +90,11 @@ export const columnChildrenMap = {
   isCustom: valueComp<boolean>(false),
   // If it is a data column, it must be the name of the column and cannot be duplicated as a react key
   dataIndex: valueComp<string>(""),
+  columnsList: valueComp<Array<JSONValue>>([]),
   hide: BoolControl,
   sortable: BoolControl,
   width: NumberControl,
   autoWidth: dropdownControl(columnWidthOptions, "auto"),
-  columnMapping: dropdownControl(columnValueOptions, ""),
   render: RenderComp,
   align: HorizontalAlignmentControl,
   tempHide: stateComp<boolean>(false),
@@ -213,27 +190,39 @@ export class ColumnComp extends ColumnInitComp {
 
   propertyView(key: string) {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
+    const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
+    const column = this.children.render.getSelectedComp().getComp().toJsonValue();
+    let columnValue = '{{currentCell}}';
+    if (column.comp?.hasOwnProperty('src')) {
+      columnValue = (column.comp as any).src;
+    } else if (column.comp?.hasOwnProperty('text')) {
+      columnValue = (column.comp as any).text;
+    }
+
     return (
       <>
         {this.children.title.propertyView({
           label: trans("table.columnTitle"),
           placeholder: this.children.dataIndex.getView(),
         })}
-        {this.children.columnMapping.propertyView({
-          label: "Data Mapping",
-          onChange: (value) => {
-            console.log(value)
-            const comp = this.children.render.getSelectedComp().getComp();
-            // let textRawData = "{{currentCell}}";
-            // if (comp.children.hasOwnProperty("text")) {
-            //   textRawData = (comp.children as any).text.toJsonValue();
-            // }
+        <Dropdown
+          showSearch={true}
+          value={columnValue}
+          options={initialColumns}
+          label={trans("table.dataMapping")}
+          onChange={(value) => {
+            // Keep the previous text value, some components do not have text, the default value is currentCell
+            const compType = columnType;
+            let comp: Record<string, string> = { text: value};
+            if(columnType === 'image') {
+              comp = { src: value };
+            }
             this.children.render.dispatchChangeValueAction({
-              compType: columnType,
-              comp: { text: value },
+              compType,
+              comp,
             } as any);
-          }
-        })}
+          }}
+        />
         {/* FIXME: cast type currently, return type of withContext should be corrected later */}
         {this.children.render.getPropertyView()}
         {this.children.showTitle.propertyView({

client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

@@ -250,6 +250,18 @@ function renderTitle(props: { title: string; editable: boolean }) {
   );
 }
 
+function getInitialColumns(columnsAggrData: ColumnsAggrData) {
+  const initialColumns = Object.keys(columnsAggrData).map(column => ({
+    label: <span style={{textTransform: 'capitalize'}}>{column}</span>,
+    value: `{{currentRow.${column}}}`
+  }))
+  initialColumns.push({
+    label: <span>Select with handlebars</span>,
+    value: '{{currentCell}}',
+  })
+  return initialColumns;
+}
+
 export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
   onWidthResize?: (width: number) => void;
   titleText: string;
@@ -271,7 +283,7 @@ export function columnsToAntdFormat(
   columnsAggrData: ColumnsAggrData,
   onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
-  console.log(columnsAggrData);
+  const initialColumns = getInitialColumns(columnsAggrData);
   const sortMap: Map<string | undefined, SortOrder> = new Map(
     sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
   );
@@ -345,6 +357,7 @@ export function columnsToAntdFormat(
               currentRow: _.omit(record, OB_ROW_ORI_INDEX),
               currentIndex: index,
               currentOriginalIndex: tryToNumber(record[OB_ROW_ORI_INDEX]),
+              initialColumns,
             },
             String(record[OB_ROW_ORI_INDEX])
           )

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1135,6 +1135,7 @@ export const de = {
       "auto": "Auto",
       "fixed": "Festgelegt",
       "columnType": "Säule Typ",
+      "dataMapping": "Datenzuordnung",
       "numberStep": "Schritt",
       "numberStepTooltip": "Die Zahl, auf die der aktuelle Wert erhöht oder verringert wird. Es kann eine ganze Zahl oder eine Dezimalzahl sein",
       "precision": "Präzision",
@@ -2375,7 +2376,7 @@ export const de = {
       "selectBackground": "Ausgewählter Hintergrund"
   },
   "componentDocExtra": {
-      "table": "Zusätzliche Dokumentation für die Tabellenkomponente"
+      "table": table,
   },
   "idSource": {
       "title": "OAuth-Anbieter",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1258,6 +1258,7 @@ export const en = {
     "auto": "Auto",
     "fixed": "Fixed",
     "columnType": "Column Type",
+    "dataMapping": "Data Mapping",
     "numberStep": "Step",
     "numberStepTooltip": "The number to which the current value is increased or decreased. It can be an integer or decimal",
     "precision": "Precision",
@@ -2573,7 +2574,7 @@ export const en = {
     "selectBackground": "Selected Background"
   },
   "componentDocExtra": {
-    table,
+    "table": table,
   },
   "idSource": {
     "title": "OAuth Providers",

client/packages/lowcoder/src/i18n/locales/translation_files/en.json

@@ -1,3 +1,4 @@
+
 {
   "productName": "Lowcoder",
   "productDesc": "Create software applications for your company and customers with minimal coding experience. Lowcoder is an excellent alternative to Retool, Appsmith, and Tooljet.",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1221,6 +1221,7 @@ table: {
     imageSrc: "图片链接",
     imageSize: "图片尺寸",
     columnTitle: "标题",
+    dataMapping: "数据映射",
     showTitle: "显示标题",
     showTitleTooltip: "显示/隐藏表标题中的列标题",
     sortable: "可排序",
@@ -2521,7 +2522,7 @@ calendar: {
     selectBackground: "选中背景",
 },
 componentDocExtra: {
-    table,
+    table: table,
 },
 idSource: {
     title: "OAuth 提供商",