Next.js playground, once all bugs are fixes we can send the PR for re…

…view
mui · Feb 13, 2025 · fc4fa14 · fc4fa14
1 parent e67a3e3
commit fc4fa14
Show file tree

Hide file tree

Showing 14 changed files with 386 additions and 89 deletions.
diff --git a/packages/toolpad-core/src/CRUD/FormPage.tsx b/packages/toolpad-core/src/CRUD/FormPage.tsx
@@ -162,9 +162,13 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
 
   const handleDateFieldChange = React.useCallback(
     (name: string) => (value: Dayjs | null) => {
-      handleFormFieldChange(name, value?.toISOString() ?? null);
+      if (value?.isValid()) {
+        handleFormFieldChange(name, value.toISOString() ?? null);
+      } else if (formValues[name]) {
+        handleFormFieldChange(name, null);
+      }
     },
-    [handleFormFieldChange],
+    [formValues, handleFormFieldChange],
   );
 
   const handleSelectFieldChange = React.useCallback(
@@ -193,6 +197,7 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
             helperText={fieldError ?? ' '}
             fullWidth
             multiline={type === 'longString'}
+            minRows={type === 'longString' ? 2 : undefined}
           />
         );
       }

diff --git a/packages/toolpad-core/src/CRUD/List.tsx b/packages/toolpad-core/src/CRUD/List.tsx
@@ -134,7 +134,7 @@ function List<D extends DataModel>(props: ListProps<D>) {
   const routerContext = React.useContext(RouterContext);
   const appWindowContext = React.useContext(WindowContext);
 
-  const appWindow = appWindowContext ?? window;
+  const appWindow = appWindowContext ?? (typeof window !== 'undefined' ? window : null);
 
   const dialogs = useDialogs();
   const notifications = useNotifications();
@@ -167,44 +167,50 @@ function List<D extends DataModel>(props: ListProps<D>) {
   const [error, setError] = React.useState<Error | null>(null);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
 
-    url.searchParams.set('page', String(paginationModel.page));
-    url.searchParams.set('pageSize', String(paginationModel.pageSize));
+      url.searchParams.set('page', String(paginationModel.page));
+      url.searchParams.set('pageSize', String(paginationModel.pageSize));
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, paginationModel.page, paginationModel.pageSize]);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
-
-    if (
-      filterModel.items.length > 0 ||
-      (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0)
-    ) {
-      url.searchParams.set('filter', JSON.stringify(filterModel));
-    } else {
-      url.searchParams.delete('filter');
-    }
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
+
+      if (
+        filterModel.items.length > 0 ||
+        (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0)
+      ) {
+        url.searchParams.set('filter', JSON.stringify(filterModel));
+      } else {
+        url.searchParams.delete('filter');
+      }
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, filterModel]);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
 
-    if (sortModel.length > 0) {
-      url.searchParams.set('sort', JSON.stringify(sortModel));
-    } else {
-      url.searchParams.delete('sort');
-    }
+      if (sortModel.length > 0) {
+        url.searchParams.set('sort', JSON.stringify(sortModel));
+      } else {
+        url.searchParams.delete('sort');
+      }
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, sortModel]);
 
@@ -360,8 +366,11 @@ function List<D extends DataModel>(props: ListProps<D>) {
           sortingMode="server"
           filterMode="server"
           paginationMode="server"
+          paginationModel={paginationModel}
           onPaginationModelChange={setPaginationModel}
+          sortModel={sortModel}
           onSortModelChange={setSortModel}
+          filterModel={filterModel}
           onFilterModelChange={setFilterModel}
           onRowClick={handleRowClick}
           loading={isLoading}

diff --git a/packages/toolpad-core/src/CRUD/Show.tsx b/packages/toolpad-core/src/CRUD/Show.tsx
@@ -141,7 +141,7 @@ function Show<D extends DataModel>(props: ShowProps<D>) {
         return fieldValue ? dayjs(fieldValue as string).format('MMMM D, YYYY h:mm A') : '-';
       }
 
-      return String(fieldValue) ?? '-';
+      return fieldValue ? String(fieldValue) : '-';
     },
     [data],
   );

diff --git a/packages/toolpad-core/src/Crud/FormPage.tsx b/packages/toolpad-core/src/Crud/FormPage.tsx
@@ -162,9 +162,13 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
 
   const handleDateFieldChange = React.useCallback(
     (name: string) => (value: Dayjs | null) => {
-      handleFormFieldChange(name, value?.toISOString() ?? null);
+      if (value?.isValid()) {
+        handleFormFieldChange(name, value.toISOString() ?? null);
+      } else if (formValues[name]) {
+        handleFormFieldChange(name, null);
+      }
     },
-    [handleFormFieldChange],
+    [formValues, handleFormFieldChange],
   );
 
   const handleSelectFieldChange = React.useCallback(
@@ -193,6 +197,7 @@ function FormPage<D extends DataModel>(props: FormPageProps<D>) {
             helperText={fieldError ?? ' '}
             fullWidth
             multiline={type === 'longString'}
+            minRows={type === 'longString' ? 2 : undefined}
           />
         );
       }

diff --git a/packages/toolpad-core/src/Crud/List.tsx b/packages/toolpad-core/src/Crud/List.tsx
@@ -134,7 +134,7 @@ function List<D extends DataModel>(props: ListProps<D>) {
   const routerContext = React.useContext(RouterContext);
   const appWindowContext = React.useContext(WindowContext);
 
-  const appWindow = appWindowContext ?? window;
+  const appWindow = appWindowContext ?? (typeof window !== 'undefined' ? window : null);
 
   const dialogs = useDialogs();
   const notifications = useNotifications();
@@ -167,44 +167,50 @@ function List<D extends DataModel>(props: ListProps<D>) {
   const [error, setError] = React.useState<Error | null>(null);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
 
-    url.searchParams.set('page', String(paginationModel.page));
-    url.searchParams.set('pageSize', String(paginationModel.pageSize));
+      url.searchParams.set('page', String(paginationModel.page));
+      url.searchParams.set('pageSize', String(paginationModel.pageSize));
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, paginationModel.page, paginationModel.pageSize]);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
-
-    if (
-      filterModel.items.length > 0 ||
-      (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0)
-    ) {
-      url.searchParams.set('filter', JSON.stringify(filterModel));
-    } else {
-      url.searchParams.delete('filter');
-    }
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
+
+      if (
+        filterModel.items.length > 0 ||
+        (filterModel.quickFilterValues && filterModel.quickFilterValues.length > 0)
+      ) {
+        url.searchParams.set('filter', JSON.stringify(filterModel));
+      } else {
+        url.searchParams.delete('filter');
+      }
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, filterModel]);
 
   React.useEffect(() => {
-    const url = new URL(appWindow.location.href);
+    if (appWindow) {
+      const url = new URL(appWindow.location.href);
 
-    if (sortModel.length > 0) {
-      url.searchParams.set('sort', JSON.stringify(sortModel));
-    } else {
-      url.searchParams.delete('sort');
-    }
+      if (sortModel.length > 0) {
+        url.searchParams.set('sort', JSON.stringify(sortModel));
+      } else {
+        url.searchParams.delete('sort');
+      }
 
-    if (!appWindow.frameElement) {
-      appWindow.history.pushState({}, '', url);
+      if (!appWindow.frameElement) {
+        appWindow.history.pushState({}, '', url);
+      }
     }
   }, [appWindow, sortModel]);
 
@@ -360,8 +366,11 @@ function List<D extends DataModel>(props: ListProps<D>) {
           sortingMode="server"
           filterMode="server"
           paginationMode="server"
+          paginationModel={paginationModel}
           onPaginationModelChange={setPaginationModel}
+          sortModel={sortModel}
           onSortModelChange={setSortModel}
+          filterModel={filterModel}
           onFilterModelChange={setFilterModel}
           onRowClick={handleRowClick}
           loading={isLoading}

diff --git a/packages/toolpad-core/src/Crud/Show.tsx b/packages/toolpad-core/src/Crud/Show.tsx
@@ -141,7 +141,7 @@ function Show<D extends DataModel>(props: ShowProps<D>) {
         return fieldValue ? dayjs(fieldValue as string).format('MMMM D, YYYY h:mm A') : '-';
       }
 
-      return String(fieldValue) ?? '-';
+      return fieldValue ? String(fieldValue) : '-';
     },
     [data],
   );

diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
@@ -16,10 +16,12 @@
     "@types/node": "^20.17.16",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "cookies-next": "^5.1.0",
     "eslint-config-next": "15.1.6",
     "next": "^15.1.6",
     "next-auth": "5.0.0-beta.25",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "yup": "1.6.1"
   }
 }
diff --git a/playground/nextjs/src/app/(dashboard)/layout.tsx b/playground/nextjs/src/app/(dashboard)/layout.tsx
@@ -1,5 +1,6 @@
 'use client';
 import * as React from 'react';
+import { usePathname, useParams } from 'next/navigation';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MenuList from '@mui/material/MenuList';
@@ -157,9 +158,26 @@ function SidebarFooterAccount({ mini }: SidebarFooterProps) {
 }
 
 export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const params = useParams();
+  const [orderId] = params.segments ?? [];
+
+  const title = React.useMemo(() => {
+    if (pathname === '/orders/new') {
+      return 'New Order';
+    }
+    if (orderId && pathname.includes('/edit')) {
+      return `Order ${orderId} - Edit`;
+    }
+    if (orderId) {
+      return `Order ${orderId}`;
+    }
+    return undefined;
+  }, [orderId, pathname]);
+
   return (
     <DashboardLayout slots={{ sidebarFooter: SidebarFooterAccount, toolbarAccount: () => null }}>
-      <PageContainer>{props.children}</PageContainer>
+      <PageContainer title={title}>{props.children}</PageContainer>
     </DashboardLayout>
   );
 }
diff --git a/playground/nextjs/src/app/(dashboard)/orders/[[...segments]]/page.tsx b/playground/nextjs/src/app/(dashboard)/orders/[[...segments]]/page.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Crud } from '@toolpad/core/Crud';
+import { ordersDataSource, Order } from '../../../../data/orders';
+
+export default function OrdersCrudPage() {
+  return (
+    <Crud<Order>
+      dataSource={ordersDataSource}
+      rootPath="/orders"
+      initialPageSize={25}
+      defaultValues={{ itemCount: 1 }}
+    />
+  );
+}
diff --git a/playground/nextjs/src/app/(dashboard)/orders/page.tsx b/playground/nextjs/src/app/(dashboard)/orders/page.tsx
diff --git a/playground/nextjs/src/app/layout.tsx b/playground/nextjs/src/app/layout.tsx
@@ -13,14 +13,14 @@ const NAVIGATION: Navigation = [
     title: 'Main items',
   },
   {
-    segment: '',
     title: 'Dashboard',
     icon: <DashboardIcon />,
   },
   {
     segment: 'orders',
     title: 'Orders',
     icon: <ShoppingCartIcon />,
+    pattern: 'orders{/:orderId}*',
   },
 ];
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,7 +141,7 @@ function Show<D extends DataModel>(props: ShowProps<D>) { @@
             return fieldValue ? dayjs(fieldValue as string).format('MMMM D, YYYY h:mm A') : '-';
           }
-          return String(fieldValue) ?? '-';
+          return fieldValue ? String(fieldValue) : '-';
         },
         [data],
       );
@@ Expand Down @@