column 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 { withType } from "comps/generators";
+import { MultiCompBuilder, withDefault, withType } from "comps/generators";
 import { trans } from "i18n";
 import { Dropdown } from "lowcoder-design";
 import { BooleanComp } from "./columnTypeComps/columnBooleanComp";
@@ -17,6 +17,31 @@ 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 = [
   {
@@ -104,6 +129,15 @@ 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/tableColumnComp.tsx

@@ -57,6 +57,29 @@ 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)
@@ -94,6 +117,7 @@ export const columnChildrenMap = {
   sortable: BoolControl,
   width: NumberControl,
   autoWidth: dropdownControl(columnWidthOptions, "auto"),
+  columnMapping: dropdownControl(columnValueOptions, ""),
   render: RenderComp,
   align: HorizontalAlignmentControl,
   tempHide: stateComp<boolean>(false),
@@ -195,6 +219,21 @@ export class ColumnComp extends ColumnInitComp {
           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();
+            // }
+            this.children.render.dispatchChangeValueAction({
+              compType: columnType,
+              comp: { text: value },
+            } 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

@@ -271,6 +271,7 @@ export function columnsToAntdFormat(
   columnsAggrData: ColumnsAggrData,
   onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
+  console.log(columnsAggrData);
   const sortMap: Map<string | undefined, SortOrder> = new Map(
     sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
   );

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}
         />
       );
     }