From 5c225ccb2829fae464b66f8b964d9c82ec6bce0f Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Thu, 18 Jan 2024 12:42:52 +0500 Subject: [PATCH 1/2] column data mapping --- .../comps/tableComp/column/columnTypeComp.tsx | 36 ++++++++++++++++- .../tableComp/column/tableColumnComp.tsx | 39 +++++++++++++++++++ .../src/comps/comps/tableComp/tableUtils.tsx | 1 + .../src/comps/controls/dropdownControl.tsx | 3 +- 4 files changed, 77 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx index 678bcabb0..7e9061504 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx +++ b/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(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 39a392ad4..6932a4983 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/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(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({ diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index 4532475c8..a9fb52ea7 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx @@ -271,6 +271,7 @@ export function columnsToAntdFormat( columnsAggrData: ColumnsAggrData, onTableEvent: (eventName: any) => void, ): Array> { + console.log(columnsAggrData); const sortMap: Map = new Map( sort.map((s) => [s.column, s.desc ? "descend" : "ascend"]) ); diff --git a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx index 211dd0910..1492a97a4 100644 --- a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx @@ -92,15 +92,16 @@ export function dropdownAbstractControl( return controlItem( { filterText: params.label }, + {...params} value={this.value} options={finalOptions} onChange={(value) => { + console.log(value); if (!params.disableDispatchValueChange) { this.dispatchChangeValueAction(value); } params.onChange?.(value); }} - {...params} /> ); } From 155fbaec08737fdb9a300c253683f24a5b78cced Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 23 Jan 2024 13:33:34 +0500 Subject: [PATCH 2/2] dynamice populate columns for data mapping --- .../comps/tableComp/column/columnTypeComp.tsx | 36 +--------- .../columnTypeComps/columnBooleanComp.tsx | 6 +- .../tableComp/column/tableColumnComp.tsx | 65 ++++++++----------- .../src/comps/comps/tableComp/tableUtils.tsx | 15 ++++- .../packages/lowcoder/src/i18n/locales/de.ts | 3 +- .../packages/lowcoder/src/i18n/locales/en.ts | 3 +- .../i18n/locales/translation_files/en.json | 1 + .../packages/lowcoder/src/i18n/locales/zh.ts | 3 +- 8 files changed, 52 insertions(+), 80 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx index 7e9061504..678bcabb0 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComp.tsx +++ b/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(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx index 3a1e91f8a..b65c74eb4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx +++ b/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 ( - + {value ? ( ) : props.falseValues === "x" ? ( diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index 6932a4983..0d5e2ac2b 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/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(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(""), + columnsList: valueComp>([]), hide: BoolControl, sortable: BoolControl, width: NumberControl, autoWidth: dropdownControl(columnWidthOptions, "auto"), - columnMapping: dropdownControl(columnValueOptions, ""), render: RenderComp, align: HorizontalAlignmentControl, tempHide: stateComp(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(); - // } + { + // Keep the previous text value, some components do not have text, the default value is currentCell + const compType = columnType; + let comp: Record = { 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({ diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx index a9fb52ea7..9508af8ce 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx +++ b/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: {column}, + value: `{{currentRow.${column}}}` + })) + initialColumns.push({ + label: Select with handlebars, + value: '{{currentCell}}', + }) + return initialColumns; +} + export type CustomColumnType = ColumnType & { onWidthResize?: (width: number) => void; titleText: string; @@ -271,7 +283,7 @@ export function columnsToAntdFormat( columnsAggrData: ColumnsAggrData, onTableEvent: (eventName: any) => void, ): Array> { - console.log(columnsAggrData); + const initialColumns = getInitialColumns(columnsAggrData); const sortMap: Map = 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]) ) diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index 298e80ef4..b30fead70 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/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", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 9cc91a970..b5ec23f09 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/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", diff --git a/client/packages/lowcoder/src/i18n/locales/translation_files/en.json b/client/packages/lowcoder/src/i18n/locales/translation_files/en.json index ac390b96c..f53bbcb57 100644 --- a/client/packages/lowcoder/src/i18n/locales/translation_files/en.json +++ b/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.", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index a91e25bff..7ff3d6825 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/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 提供商",