Merge pull request #653 from raheeliftikhar5/table-column-data-mapping

Table column data mapping

Author: FalkWolsky

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";
@@ -90,6 +90,7 @@ 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,
@@ -189,12 +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(),
         })}
+        <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,
+              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,6 +283,7 @@ export function columnsToAntdFormat(
   columnsAggrData: ColumnsAggrData,
   onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
+  const initialColumns = getInitialColumns(columnsAggrData);
   const sortMap: Map<string | undefined, SortOrder> = new Map(
     sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
   );
@@ -344,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/comps/controls/dropdownControl.tsx

@@ -92,15 +92,16 @@ export function dropdownAbstractControl<T extends OptionsType>(
       return controlItem(
         { filterText: params.label },
         <DropdownPropertyView<T>
+          {...params}
           value={this.value}
           options={finalOptions}
           onChange={(value) => {
+            console.log(value);
             if (!params.disableDispatchValueChange) {
               this.dispatchChangeValueAction(value);
             }
             params.onChange?.(value);
           }}
-          {...params}
         />
       );
     }

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 提供商",