From 1dec37180b10d1533decb1833636c9b797c67ae3 Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Thu, 14 Dec 2023 16:12:01 +0800 Subject: [PATCH 1/2] fix: data grid pagnitain & primaryKey --- .../src/hooks/utils/fixedComponents.ts | 15 +++ .../widgetLibrary/DataGridWidget/dataGrid.tsx | 6 +- .../widgetLibrary/DataGridWidget/interface.ts | 2 +- .../DataGridWidget/panelConfig.tsx | 98 ++++--------------- .../DataGridWidget/widgetConfig.tsx | 2 +- .../widgetLibrary/ListWidget/panelConfig.tsx | 4 +- 6 files changed, 41 insertions(+), 86 deletions(-) diff --git a/apps/builder/src/hooks/utils/fixedComponents.ts b/apps/builder/src/hooks/utils/fixedComponents.ts index 3cf926d120..51579cac3d 100644 --- a/apps/builder/src/hooks/utils/fixedComponents.ts +++ b/apps/builder/src/hooks/utils/fixedComponents.ts @@ -58,6 +58,19 @@ const fixedListComponent = (component: ComponentTreeNode) => { } } +const fixedDataGridComponent = (component: ComponentTreeNode) => { + return { + ...component, + props: { + ...component.props, + enablePagination: + component.props && component.props.overflowMethod === "PAGINATION" + ? true + : false, + }, + } +} + export const fixedComponentsToNewComponents = ( componentsTree: ComponentTreeNode, ) => { @@ -74,6 +87,8 @@ export const fixedComponentsToNewComponents = ( } case "LIST_WIDGET": return fixedListComponent(component) + case "DATA_GRID_WIDGET": + return fixedDataGridComponent(component) default: { return fixedComponentsToNewComponents(component) } diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx index 0f089d6fe3..9ee79e8511 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx @@ -41,7 +41,6 @@ export const DataGridWidget: FC = (props) => { displayName, rowSelection, rowSelectionMode, - overFlow, pageSize, page, pageSizeOptions, @@ -62,6 +61,7 @@ export const DataGridWidget: FC = (props) => { updateComponentRuntimeProps, deleteComponentRuntimeProps, columns, + enablePagination, } = props const rawData = dataSourceMode === "dynamic" ? dataSourceJS : dataSource @@ -229,6 +229,8 @@ export const DataGridWidget: FC = (props) => { } else { if (primaryKey in row) { return get(row, primaryKey) + } else { + return "" } } }} @@ -291,7 +293,7 @@ export const DataGridWidget: FC = (props) => { ] : [] } - pagination={overFlow === "pagination"} + pagination={enablePagination} pageSizeOptions={isArray(pageSizeOptions) ? pageSizeOptions : []} autoPageSize={pageSize === undefined} paginationModel={ diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/interface.ts b/apps/builder/src/widgetLibrary/DataGridWidget/interface.ts index 319579a100..aabb8bdf60 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/interface.ts +++ b/apps/builder/src/widgetLibrary/DataGridWidget/interface.ts @@ -17,7 +17,6 @@ export interface BaseDataGridProps extends BaseWidgetProps { sortOrder?: "asc" | "desc" | "default" rowSelection?: boolean rowSelectionMode?: "single" | "multiple" - overFlow?: "pagination" | "scroll" pageSize?: number page?: number pageSizeOptions?: number[] @@ -36,6 +35,7 @@ export interface BaseDataGridProps extends BaseWidgetProps { columnVisibilityModel?: GridColumnVisibilityModel selectedRowsPrimaryKeys?: GridInputRowSelectionModel columns?: ColumnConfig[] + enablePagination?: boolean } export const ColumnTypeList = [ diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/panelConfig.tsx index 1aa332422b..bf3001c9a3 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/panelConfig.tsx @@ -679,14 +679,13 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ groupName: i18n.t("editor.inspect.setter_group.pagination"), children: [ { - id: `${baseWidgetName}-basic-overFlow`, - labelName: i18n.t("editor.inspect.setter_label.overFlow"), - attrName: "overFlow", - setterType: "RADIO_GROUP_SETTER", - options: [ - { label: i18n.t("widget.table.pagination"), value: "pagination" }, - { label: i18n.t("widget.table.scroll"), value: "scroll" }, - ], + id: `${baseWidgetName}-basic-enable_pagination`, + labelName: i18n.t("editor.inspect.setter_label.enable_pagination"), + attrName: "enablePagination", + setterType: "DYNAMIC_SWITCH_SETTER", + openDynamic: true, + useCustomLayout: true, + expectedType: VALIDATION_TYPES.BOOLEAN, }, { id: `${baseWidgetName}-basic-enableServerSidePagination`, @@ -696,34 +695,14 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ labelDesc: i18n.t( "editor.inspect.setter_tips.table.enable_server_side_p", ), + bindAttrName: ["enablePagination"], + shown: (value) => value, attrName: "enableServerSidePagination", setterType: "DYNAMIC_SWITCH_SETTER", expectedType: VALIDATION_TYPES.BOOLEAN, openDynamic: true, useCustomLayout: true, }, - { - id: `${baseWidgetName}-column-paginationType`, - labelName: i18n.t("editor.inspect.setter_label.table.pagination_type"), - labelDesc: i18n.t("editor.inspect.setter_tips.table.pagination_type"), - attrName: "paginationType", - setterType: "SEARCH_SELECT_SETTER", - isSetterSingleRow: true, - bindAttrName: ["enableServerSidePagination"], - shown: (value) => value, - options: [ - { - label: i18n.t( - "editor.inspect.setter_option.table.limit_offset_based", - ), - value: "limitOffsetBased", - }, - { - label: i18n.t("editor.inspect.setter_option.table.cursor_based"), - value: "cursorBased", - }, - ], - }, { id: `${baseWidgetName}-basic-totalRowCount`, labelName: i18n.t("editor.inspect.setter_label.table.total_row_count"), @@ -731,38 +710,9 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ setterType: "DATA_GRID_MAPPED_INPUT_SETTER", isSetterSingleRow: true, expectedType: VALIDATION_TYPES.NUMBER, - bindAttrName: ["enableServerSidePagination"], - shown: (value) => value, - }, - { - id: `${baseWidgetName}-basic-previousCursor`, - labelName: i18n.t("editor.inspect.setter_label.previous_cursor"), - attrName: "previousCursor", - setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - bindAttrName: ["enableServerSidePagination", "paginationType"], - shown: (enable, paginationType) => - enable && paginationType === "cursorBased", - }, - { - id: `${baseWidgetName}-basic-nextCursor`, - labelName: i18n.t("editor.inspect.setter_label.table.next_cursor"), - attrName: "nextCursor", - setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - expectedType: VALIDATION_TYPES.STRING, - bindAttrName: ["enableServerSidePagination", "paginationType"], - shown: (enable, paginationType) => - enable && paginationType === "cursorBased", - }, - { - id: `${baseWidgetName}-basic-hasNextPage`, - labelName: i18n.t("editor.inspect.setter_label.table.has_next_page"), - attrName: "hasNextPage", - setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - expectedType: VALIDATION_TYPES.BOOLEAN, - bindAttrName: ["enableServerSidePagination", "paginationType"], - shown: (enable, paginationType) => - enable && paginationType === "cursorBased", + bindAttrName: ["enablePagination", "enableServerSidePagination"], + shown: (enablePagination, enableServerSidePagination) => + enablePagination && enableServerSidePagination, }, { id: `${baseWidgetName}-basic-pageSize`, @@ -770,12 +720,8 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ placeholder: "{{30}}", attrName: "pageSize", setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - bindAttrName: [ - "overFlow", - "enableServerSidePagination", - "paginationType", - ], - shown: (overFlow) => overFlow === "pagination", + bindAttrName: ["enablePagination"], + shown: (enablePagination) => enablePagination, expectedType: VALIDATION_TYPES.NUMBER, }, { @@ -784,16 +730,8 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ placeholder: "{{0}}", attrName: "page", setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - bindAttrName: [ - "overFlow", - "enableServerSidePagination", - "paginationType", - ], - shown: (overFlow, enableServerSidePagination, paginationType) => - overFlow === "pagination" && - (enableServerSidePagination - ? paginationType === "limitOffsetBased" - : true), + bindAttrName: ["enablePagination"], + shown: (enablePagination) => enablePagination, expectedType: VALIDATION_TYPES.NUMBER, }, { @@ -802,8 +740,8 @@ export const DATA_GRID_PANEL_CONFIG: PanelConfig[] = [ placeholder: "{{[5, 10, 25]}}", attrName: "pageSizeOptions", setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - bindAttrName: ["overFlow"], - shown: (overFlow) => overFlow === "pagination", + bindAttrName: ["enablePagination"], + shown: (enablePagination) => enablePagination, isSetterSingleRow: true, expectedType: VALIDATION_TYPES.ARRAY, }, diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx index a65e7ee6b2..fc069cf6ff 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/widgetConfig.tsx @@ -141,7 +141,7 @@ export const DATA_GRID_WIDGET_CONFIG: WidgetConfig = { excludeHiddenColumns: true, dataSourceJS: `{{${JSON.stringify(originData, null, " ")}}}`, dataSource: [], - overFlow: "scroll", + enablePagination: false, sortOrder: "default", }, } diff --git a/apps/builder/src/widgetLibrary/ListWidget/panelConfig.tsx b/apps/builder/src/widgetLibrary/ListWidget/panelConfig.tsx index 23ce966731..32ddb9ec4e 100644 --- a/apps/builder/src/widgetLibrary/ListWidget/panelConfig.tsx +++ b/apps/builder/src/widgetLibrary/ListWidget/panelConfig.tsx @@ -132,7 +132,7 @@ export const LIST_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.previous_cursor"), attrName: "previousCursor", setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - expectedType: VALIDATION_TYPES.NUMBER, + expectedType: VALIDATION_TYPES.STRING, bindAttrName: [ "enablePagination", "enableServerSidePagination", @@ -148,7 +148,7 @@ export const LIST_PANEL_CONFIG: PanelConfig[] = [ labelName: i18n.t("editor.inspect.setter_label.table.next_cursor"), attrName: "nextCursor", setterType: "DATA_GRID_MAPPED_INPUT_SETTER", - expectedType: VALIDATION_TYPES.NUMBER, + expectedType: VALIDATION_TYPES.STRING, bindAttrName: [ "enablePagination", "enableServerSidePagination", From 3adfc9f3b3586911bb1c982e928ec8ddf87ba20a Mon Sep 17 00:00:00 2001 From: Scenery <1507337624@qq.com> Date: Thu, 14 Dec 2023 19:26:03 +0800 Subject: [PATCH 2/2] fix: data grid pagnitain & primaryKey --- apps/builder/src/hooks/utils/fixedComponents.ts | 12 ++++++++---- .../src/widgetLibrary/DataGridWidget/dataGrid.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/builder/src/hooks/utils/fixedComponents.ts b/apps/builder/src/hooks/utils/fixedComponents.ts index 51579cac3d..153e03bc12 100644 --- a/apps/builder/src/hooks/utils/fixedComponents.ts +++ b/apps/builder/src/hooks/utils/fixedComponents.ts @@ -59,14 +59,18 @@ const fixedListComponent = (component: ComponentTreeNode) => { } const fixedDataGridComponent = (component: ComponentTreeNode) => { + let fixedEnablePagination = true + if (component.props) { + fixedEnablePagination = + component.props.enablePagination !== undefined + ? component.props.enablePagination + : component.props.overflowMethod === "PAGINATION" + } return { ...component, props: { ...component.props, - enablePagination: - component.props && component.props.overflowMethod === "PAGINATION" - ? true - : false, + enablePagination: fixedEnablePagination, }, } } diff --git a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx index 9ee79e8511..4e71ac9b3f 100644 --- a/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx +++ b/apps/builder/src/widgetLibrary/DataGridWidget/dataGrid.tsx @@ -348,7 +348,7 @@ export const DataGridWidget: FC = (props) => { columns={(renderColumns as GridColDef[]) ?? []} paginationMode={enableServerSidePagination ? "server" : "client"} rowCount={ - totalRowCount !== undefined + totalRowCount !== undefined && enableServerSidePagination ? Math.ceil(totalRowCount / (pageSize ?? 1)) : undefined }