Moving list schemas logique to crud lib

gui/rpk-gui/src/lib/crud/components/crud-list.tsx

@@ -0,0 +1,95 @@
+import { DataGrid, GridColDef, GridColumnVisibilityModel, GridValidRowModel } from "@mui/x-data-grid";
+import { UiSchema } from "@rjsf/utils";
+import React, { useEffect, useState } from "react";
+import { jsonschemaProvider } from "../providers/jsonschema-provider";
+import { CircularProgress } from "@mui/material";
+
+type CrudListProps = {
+  schemaName: string,
+  uiSchema?: UiSchema,
+  columnDefinitions: ColumnDefinition[],
+  dataGridProps: any,
+  resourceBasePath: string,
+  onRowClick?: (params: any) => void
+}
+
+type ColumnSchema<T extends GridValidRowModel> = {
+  columns: GridColDef<T>[],
+  columnVisibilityModel: GridColumnVisibilityModel
+}
+
+type ColumnDefinition = {
+  field: string,
+  column: Partial<GridColDef>,
+  hide?: boolean
+}
+
+const CrudList = <T extends GridValidRowModel>(props: CrudListProps) => {
+  const {
+    dataGridProps,
+    onRowClick,
+    schemaName,
+    columnDefinitions
+  } = props;
+
+  const [columnSchema, setColumnSchema] = useState<ColumnSchema<T>>()
+  const [schemaLoading, setSchemaLoading] = useState(true);
+  useEffect(() => {
+    const fetchSchema = async () => {
+      try {
+        const resourceColumns = await jsonschemaProvider.getReadResourceColumns(schemaName)
+        const definedColumns = computeColumnSchema<T>(columnDefinitions, resourceColumns)
+        setColumnSchema(definedColumns);
+        console.log(resourceColumns);
+        setSchemaLoading(false);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        setSchemaLoading(false);
+      }
+    };
+    fetchSchema();
+  }, []);
+
+  if (schemaLoading || columnSchema === undefined) {
+    return <CircularProgress />
+  }
+
+  return (
+    <DataGrid
+      {...dataGridProps}
+      columns={columnSchema.columns}
+      onRowClick={onRowClick}
+      pageSizeOptions={[10, 15, 25, 50, 100]}
+      disableColumnFilter={true}
+      initialState={{
+        columns: {
+          columnVisibilityModel: columnSchema.columnVisibilityModel
+        }
+      }}
+    />
+  )
+}
+
+function computeColumnSchema<T extends GridValidRowModel>(definitionColumns: ColumnDefinition[], resourceColumns: GridColDef[]): ColumnSchema<T> {
+  //reorder resourceColumns as in definition
+  definitionColumns.slice().reverse().forEach(first => {
+     resourceColumns.sort(function(x,y){ return x.field == first.field ? -1 : y.field == first.field ? 1 : 0; });
+  })
+
+  let visibilityModel: GridColumnVisibilityModel = {}
+  resourceColumns.forEach((resource, index) =>{
+    visibilityModel[resource.field] = definitionColumns.some(col => col.field == resource.field && !col.hide)
+    definitionColumns.forEach((def) => {
+      if (def.field == resource.field) {
+        resourceColumns[index] = {...resource, ...def.column};
+      }
+    })
+  })
+
+  return {
+    columns: resourceColumns,
+    columnVisibilityModel: visibilityModel
+  }
+}
+
+export default CrudList;

gui/rpk-gui/src/pages/firm/base-page/List.tsx

@@ -1,12 +1,12 @@
+import React, { useContext } from "react";
 import { Link, useNavigate } from "react-router"
 import { UiSchema } from "@rjsf/utils";
 import { useTranslation } from "@refinedev/core";
 import { List as RefineList, useDataGrid } from "@refinedev/mui";
-import { DataGrid, GridColDef, GridValidRowModel, GridColumnVisibilityModel } from "@mui/x-data-grid";
+import { Button } from "@mui/material";
-import React, { useContext, useEffect, useState } from "react";
+import { GridColDef, GridValidRowModel } from "@mui/x-data-grid";
-import { Button, CircularProgress } from "@mui/material";
 import { FirmContext } from "../../../contexts/FirmContext";
-import { jsonschemaProvider } from "../../../lib/crud/providers/jsonschema-provider";
+import CrudList from "../../../lib/crud/components/crud-list";
 
 type ListProps = {
   resource: string,
@@ -15,39 +15,12 @@ type ListProps = {
   uiSchema?: UiSchema,
 }
 
-type ColumnSchema<T extends GridValidRowModel> = {
-  columns: GridColDef<T>[],
-  columnVisibilityModel: GridColumnVisibilityModel
-}
-
 type ColumnDefinition = {
   field: string,
   column: Partial<GridColDef>,
   hide?: boolean
 }
 
-function computeColumnSchema<T extends GridValidRowModel>(definitionColumns: ColumnDefinition[], resourceColumns: GridColDef[]): ColumnSchema<T> {
-  //reorder resourceColumns as in definition
-  definitionColumns.slice().reverse().forEach(first => {
-     resourceColumns.sort(function(x,y){ return x.field == first.field ? -1 : y.field == first.field ? 1 : 0; });
-  })
-
-  let visibilityModel: GridColumnVisibilityModel = {}
-  resourceColumns.forEach((resource, index) =>{
-    visibilityModel[resource.field] = definitionColumns.some(col => col.field == resource.field && !col.hide)
-    definitionColumns.forEach((def) => {
-      if (def.field == resource.field) {
-        resourceColumns[index] = {...resource, ...def.column};
-      }
-    })
-  })
-
-  return {
-    columns: resourceColumns,
-    columnVisibilityModel: visibilityModel
-  }
-}
-
 const List = <T extends GridValidRowModel>(props: ListProps) => {
   const { resource, columns, schemaName } = props;
   const { translate: t } = useTranslation();
@@ -59,32 +32,6 @@ const List = <T extends GridValidRowModel>(props: ListProps) => {
   });
   const navigate = useNavigate();
 
-  const [columnSchema, setColumnSchema] = useState<ColumnSchema<T>>()
-  const [schemaLoading, setSchemaLoading] = useState(true);
-  useEffect(() => {
-    const fetchSchema = async () => {
-      try {
-        const resourceColumns = await jsonschemaProvider.getReadResourceColumns(schemaName)
-        const definedColumns = computeColumnSchema<T>(columns, resourceColumns)
-        setColumnSchema(definedColumns);
-        console.log(resourceColumns);
-        setSchemaLoading(false);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-        setSchemaLoading(false);
-      }
-    };
-    fetchSchema();
-  }, []);
-
-  const handleRowClick = (params: any, event: any) => {
-    navigate(`edit/${params.id}`)
-  }
-
-  if (schemaLoading || columnSchema === undefined) {
-    return <CircularProgress />
-  }
-
   if (tableQueryResult.error?.status == 404) {
     throw tableQueryResult.error
   }
@@ -94,16 +41,12 @@ const List = <T extends GridValidRowModel>(props: ListProps) => {
       <Link to={"create"} >
         <Button>{t("buttons.create")}</Button>
       </Link>
-      <DataGrid
+      <CrudList
-        {...dataGridProps}
+        dataGridProps={dataGridProps}
-        columns={columnSchema.columns}
+        onRowClick={(params: any) => { navigate(`edit/${params.id}`) }}
-        onRowClick={handleRowClick}
+        schemaName={schemaName}
-        pageSizeOptions={[10, 15, 25, 50, 100]}
+        resourceBasePath={resourceBasePath}
-        initialState={{
+        columnDefinitions={columns}
-          columns: {
-            columnVisibilityModel: columnSchema.columnVisibilityModel
-          }
-        }}
       />
     </RefineList>
   )