Create component - saving progress

packages/toolpad-core/src/CRUD/Create.tsx

@@ -0,0 +1,42 @@
+'use client';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid2';
+import TextField from '@mui/material/TextField';
+import { CRUDFields, DataModel } from './shared';
+
+export interface CreateProps<D extends DataModel> {
+  /**
+   * Fields to show.
+   */
+  fields: CRUDFields;
+  /**
+   * Methods to interact with server-side data.
+   */
+  methods: {
+    createOne: (data: Omit<D, 'id'>) => Promise<D>;
+  };
+}
+
+function Create<D extends DataModel>(props: CreateProps<D>) {
+  const { fields, methods } = props;
+  const { createOne } = methods;
+
+  return (
+    <Box component="form" noValidate autoComplete="off">
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        {fields.map((field) => (
+          <Grid key={field.field} size={6}>
+            <TextField id={field.field} label={field.headerName} sx={{ width: '100%' }} />
+          </Grid>
+        ))}
+      </Grid>
+      <Button type="submit" variant="contained">
+        Contained
+      </Button>
+    </Box>
+  );
+}
+
+export { Create };

packages/toolpad-core/src/CRUD/index.ts

@@ -1,2 +1,3 @@
 export * from './List';
 export * from './Show';
+export * from './Create';

playground/vite/src/App.tsx

@@ -14,6 +14,11 @@ const NAVIGATION: Navigation = [
     title: 'Dashboard',
     icon: <DashboardIcon />,
   },
+  {
+    segment: 'orders/new',
+    title: 'New Order',
+    icon: <ShoppingCartIcon />,
+  },
   {
     segment: 'orders',
     title: 'Orders',

playground/vite/src/main.tsx

@@ -6,6 +6,7 @@ import Layout from './layouts/dashboard';
 import DashboardPage from './pages';
 import OrdersPage from './pages/orders';
 import OrderPage from './pages/order';
+import NewOrderPage from './pages/new-order';
 
 const router = createBrowserRouter([
   {
@@ -27,6 +28,10 @@ const router = createBrowserRouter([
             path: 'orders/:orderId',
             Component: OrderPage,
           },
+          {
+            path: 'orders/new',
+            Component: NewOrderPage,
+          },
         ],
       },
     ],

playground/vite/src/pages/new-order.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Create } from '@toolpad/core/CRUD';
+
+interface Order extends Record<string, unknown> {
+  id: number;
+  name: string;
+  status: string;
+}
+
+const orderFields = [
+  { field: 'id', headerName: 'ID' },
+  { field: 'name', headerName: 'Name' },
+  { field: 'status', headerName: 'Status' },
+];
+
+export default function OrderPage() {
+  return (
+    <Create<Order>
+      fields={orderFields}
+      methods={{
+        createOne: () => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                id: 69,
+                name: 'Order 69',
+                status: 'pending',
+              });
+            }, 1500);
+          });
+        },
+      }}
+    />
+  );
+}

playground/vite/src/pages/orders.tsx

@@ -24,6 +24,10 @@ export default function OrdersPage() {
     [navigate],
   );
 
+  const handleCreateClick = React.useCallback(() => {
+    navigate('/orders/new');
+  }, [navigate]);
+
   return (
     <List<Order>
       fields={orderFields}
@@ -52,7 +56,7 @@ export default function OrdersPage() {
       }}
       initialPageSize={25}
       onRowClick={handleRowClick}
-      onCreateClick={() => {}}
+      onCreateClick={handleCreateClick}
       onEditClick={() => {}}
     />
   );