Merge pull request #3563 from illacloud/fix/data-grid

Fix/data grid
illacloud · Dec 15, 2023 · f802a32 · f802a32
2 parents 4f30d46 + 3adfc9f
commit f802a32
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 87 deletions.
diff --git a/apps/builder/src/hooks/utils/fixedComponents.ts b/apps/builder/src/hooks/utils/fixedComponents.ts
@@ -58,6 +58,23 @@ 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: fixedEnablePagination,
+    },
+  }
+}
+
 export const fixedComponentsToNewComponents = (
   componentsTree: ComponentTreeNode,
 ) => {
@@ -74,6 +91,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
@@ -41,7 +41,6 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
     displayName,
     rowSelection,
     rowSelectionMode,
-    overFlow,
     pageSize,
     page,
     pageSizeOptions,
@@ -62,6 +61,7 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
     updateComponentRuntimeProps,
     deleteComponentRuntimeProps,
     columns,
+    enablePagination,
   } = props
 
   const rawData = dataSourceMode === "dynamic" ? dataSourceJS : dataSource
@@ -229,6 +229,8 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
             } else {
               if (primaryKey in row) {
                 return get(row, primaryKey)
+              } else {
+                return ""
               }
             }
           }}
@@ -291,7 +293,7 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
                 ]
               : []
           }
-          pagination={overFlow === "pagination"}
+          pagination={enablePagination}
           pageSizeOptions={isArray(pageSizeOptions) ? pageSizeOptions : []}
           autoPageSize={pageSize === undefined}
           paginationModel={
@@ -346,7 +348,7 @@ export const DataGridWidget: FC<BaseDataGridProps> = (props) => {
           columns={(renderColumns as GridColDef[]) ?? []}
           paginationMode={enableServerSidePagination ? "server" : "client"}
           rowCount={
-            totalRowCount !== undefined
+            totalRowCount !== undefined && enableServerSidePagination
               ? Math.ceil(totalRowCount / (pageSize ?? 1))
               : undefined
           }

diff --git 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
@@ -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,86 +695,33 @@ 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"),
         attrName: "totalRowCount",
         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`,
         labelName: i18n.t("editor.inspect.setter_label.pageSize"),
         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
@@ -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
@@ -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",