feat: Embedded form

Author: cregourd

apps/docs/pages/docs/i18n.mdx

@@ -1,6 +1,3 @@
-import { Callout } from "nextra/components";
-import OptionsTable from "../../components/OptionsTable";
-
 # I18n
 
 <Callout type="info">
@@ -146,6 +143,30 @@ The following keys are accepted:
         "The text displayed in the multiselect widget in list display mode to toggle the select dialog",
       defaultValue: '"Select items"',
     },
+    {
+      name: "form.widgets.multiselect.create",
+      description:
+        "The text displayed in the multiselect widget create button when allowCreate is enabled",
+      defaultValue: '"Create item"',
+    },
+    {
+      name: "form.widgets.select.create",
+      description:
+        "The text displayed in the select widget create button when allowCreate is enabled",
+      defaultValue: '"Create item"',
+    },
+    {
+      name: "form.widgets.multiselect.edit",
+      description:
+        "The text displayed in the multiselect widget edit button when allowEdit is enabled",
+      defaultValue: '"Edit item"',
+    },
+    {
+      name: "form.widgets.select.edit",
+      description:
+        "The text displayed in the select widget edit button when allowEdit is enabled",
+      defaultValue: '"Edit item"',
+    },
     {
       name: "form.widgets.scalar_array.add",
       description:

packages/examples-common/messages/fr.ts

@@ -105,6 +105,12 @@ export default {
         },
         multiselect: {
           select: "Sélectionner",
+          create: "Créer un élément",
+          edit: "Modifier un élément",
+        },
+        select: {
+          create: "Créer un élément",
+          edit: "Modifier un élément",
         },
       },
       user: {

packages/examples-common/options.tsx

@@ -111,6 +111,7 @@ export const options: NextAdminOptions = {
           },
           posts: {
             display: "table",
+            allowCreate: true,
           },
           avatar: {
             format: "file",
@@ -299,6 +300,7 @@ export const options: NextAdminOptions = {
             display: "list",
             orderField: "order",
             relationshipSearchField: "category",
+            allowCreate: true,
           },
           images: {
             format: "file",
@@ -357,6 +359,8 @@ export const options: NextAdminOptions = {
             display: "list",
             relationshipSearchField: "post",
             orderField: "order",
+            allowCreate: true,
+            allowEdit: true,
           },
         },
       },

packages/examples-common/package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "dev": "tsc -w",
     "build": "tsc",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
   },
   "exports": {
     "./components": "./dist/components/index.js",

packages/generator-prisma/src/index.ts

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 import { generatorHandler } from "@prisma/generator-helper";
 import { parseEnvValue } from "@prisma/internals";
-import path from "path";
 import fs from "fs/promises";
+import path from "path";
 // @ts-expect-error
 import { transformDMMF } from "prisma-json-schema-generator/dist/generator/transformDMMF";
 import { insertDmmfData } from "./dmmf";

packages/next-admin/src/appHandler.ts

@@ -1,3 +1,4 @@
+import cloneDeep from "lodash.clonedeep";
 import { createEdgeRouter } from "next-connect";
 import { HookError } from "./exceptions/HookError";
 import { handleOptionsSearch } from "./handlers/options";
@@ -12,16 +13,18 @@ import {
   RequestContext,
   ServerAction,
 } from "./types";
+import { getSchema, initGlobals } from "./utils/globals";
+import { getSchemaForResource, getSchemas } from "./utils/jsonSchema";
 import { hasPermission } from "./utils/permissions";
-import { getRawData } from "./utils/prisma";
+import { getDataItem, getRawData } from "./utils/prisma";
 import {
   formatId,
   getFormValuesFromFormData,
   getModelIdProperty,
   getResourceFromParams,
   getResources,
+  transformSchema,
 } from "./utils/server";
-import { getSchema, initGlobals } from "./utils/globals";
 
 export const createHandler = <P extends string = "nextadmin">({
   apiBasePath,
@@ -51,6 +54,88 @@ export const createHandler = <P extends string = "nextadmin">({
   }
 
   router
+    .get(`${apiBasePath}/:model/schema/:id?`, async (req, ctx) => {
+      try {
+        const resources = getResources(options);
+        const params = await ctx.params;
+        const resource = getResourceFromParams(
+          [params[paramKey][0]],
+          resources
+        );
+
+        if (!resource) {
+          return Response.json(
+            { error: "Resource not found" },
+            { status: 404 }
+          );
+        }
+
+        const id =
+          params[paramKey].length > 2 ? params[paramKey][2] : undefined;
+        const edit = options?.model?.[resource]?.edit;
+
+        let deepCopySchema = await transformSchema(
+          resource,
+          //@ts-expect-error
+          edit,
+          options
+        )(cloneDeep(getSchema()));
+
+        const resourceSchema = getSchemaForResource(deepCopySchema, resource);
+
+        if (id) {
+          const formattedId = formatId(resource, id);
+
+          const { data, relationshipsRawData } = await getDataItem({
+            prisma,
+            resource,
+            resourceId: formattedId,
+            options,
+          });
+
+          const { uiSchema, schema } = getSchemas(
+            data,
+            resourceSchema,
+            edit?.fields as EditFieldsOptions<typeof resource>
+          );
+
+          return Response.json({
+            data,
+            modelSchema: schema,
+            uiSchema,
+            relationshipsRawData,
+            resource,
+          });
+        }
+
+        const relationshipsRawData = await getRawData({
+          prisma,
+          resource,
+          resourceIds: [],
+          maxDepth: 2,
+        });
+
+        const { uiSchema, schema } = getSchemas(
+          null,
+          resourceSchema,
+          edit?.fields as EditFieldsOptions<typeof resource>
+        );
+
+        return Response.json({
+          data: null,
+          modelSchema: schema,
+          uiSchema,
+          relationshipsRawData,
+          resource,
+        });
+      } catch (e) {
+        console.error("Error in GET schema endpoint:", e);
+        return Response.json(
+          { error: (e as Error)?.message || "Unknown error occurred" },
+          { status: 500 }
+        );
+      }
+    })
     .get(`${apiBasePath}/:model/raw`, async (req, ctx) => {
       const resources = getResources(options);
       const params = await ctx.params;
@@ -88,6 +173,9 @@ export const createHandler = <P extends string = "nextadmin">({
 
       return Response.json(data);
     })
+    .get(`${apiBasePath}/:model/:id`, async (req, ctx) => {
+      return Response.json({ error: "Not implemented" }, { status: 200 });
+    })
     .post(`${apiBasePath}/:model/actions/:id`, async (req, ctx) => {
       const resources = getResources(options);
       const params = await ctx.params;

packages/next-admin/src/components/Form.tsx

@@ -4,8 +4,8 @@ import {
   InformationCircleIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import RjsfForm from "@rjsf/core";
 import type { FormProps as RjsfFormProps } from "@rjsf/core";
+import RjsfForm from "@rjsf/core";
 import {
   BaseInputTemplateProps,
   ErrorSchema,
@@ -48,6 +48,7 @@ import {
   Permission,
 } from "../types";
 import { getSchemas } from "../utils/jsonSchema";
+import { getSubmitButtonOptions } from "../utils/rjsf";
 import { formatLabel, isFileUploadFormat, slugify } from "../utils/tools";
 import FormHeader from "./FormHeader";
 import ArrayField from "./inputs/ArrayField";
@@ -69,7 +70,6 @@ import {
   TooltipRoot,
   TooltipTrigger,
 } from "./radix/Tooltip";
-import { getSubmitButtonOptions } from "../utils/rjsf";
 
 const RichTextField = lazy(() => import("./inputs/RichText/RichTextField"));
 
@@ -82,12 +82,14 @@ const widgets: RjsfFormProps["widgets"] = {
   TextareaWidget: TextareaWidget,
 };
 
-const Form = ({
+export const Form = ({
   data,
   schema,
   resource,
   validation: validationProp,
   customInputs,
+  onSubmitCallback,
+  isEmbedded,
 }: FormProps) => {
   const [validation, setValidation] = useState(validationProp);
   const { basePath, options, apiBasePath } = useConfig();
@@ -229,6 +231,7 @@ const Form = ({
             body: formData,
           }
         );
+        debugger;
         const result = await response.json();
         if (result?.validation) {
           setValidation(result.validation);
@@ -240,6 +243,12 @@ const Form = ({
           cleanAll();
         }
         if (result?.deleted) {
+
+          if (onSubmitCallback) {
+            onSubmitCallback(result);
+            return;
+          }
+
           return router.replace({
             pathname: `${basePath}/${slugify(resource)}`,
             query: {
@@ -251,6 +260,12 @@ const Form = ({
           });
         }
         if (result?.created) {
+
+          if (onSubmitCallback) {
+            onSubmitCallback(result);
+            return;
+          }
+
           const pathname = result?.redirect
             ? `${basePath}/${slugify(resource)}`
             : `${basePath}/${slugify(resource)}/${result.createdId}`;
@@ -266,6 +281,12 @@ const Form = ({
           });
         }
         if (result?.updated) {
+
+          if (onSubmitCallback) {
+            onSubmitCallback(result);
+            return;
+          }
+
           const pathname = result?.redirect
             ? `${basePath}/${slugify(resource)}`
             : location.pathname;
@@ -306,9 +327,9 @@ const Form = ({
         const customInput = customInputs?.[props.name as Field<ModelName>];
         const improvedCustomInput = customInput
           ? cloneElement(customInput, {
-              ...customInput.props,
-              mode: edit ? "edit" : "create",
-            })
+            ...customInput.props,
+            mode: edit ? "edit" : "create",
+          })
           : undefined;
         return <ArrayField {...props} customInput={improvedCustomInput} />;
       },
@@ -605,7 +626,7 @@ const Form = ({
             extraErrors={extraErrors}
             fields={fields}
             disabled={allDisabled}
-            formContext={{ isPending, schema }}
+            formContext={{ isPending, schema, parentId: id }}
             templates={templates}
             widgets={widgets}
             ref={ref}
@@ -618,9 +639,9 @@ const Form = ({
 
   return (
     <div className="relative h-full">
-      <div className="bg-nextadmin-background-default dark:bg-dark-nextadmin-background-default max-w-full p-4 align-middle sm:p-8">
+      <div className={clsx(!isEmbedded && "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-default p-4 sm:p-8", "max-w-full align-middle ")}>
         <Message className="-mt-2 mb-2 sm:-mt-4 sm:mb-4" />
-        <div className="bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis border-nextadmin-border-default dark:border-dark-nextadmin-border-default max-w-screen-md rounded-lg border p-4 sm:p-8">
+        <div className={clsx(!isEmbedded && "bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis border-nextadmin-border-default dark:border-dark-nextadmin-border-default rounded-lg border", "max-w-screen-md  p-4 sm:p-8")}>
           <RjsfFormComponent ref={formRef} />
         </div>
       </div>
@@ -635,7 +656,7 @@ const FormWrapper = ({
 }: FormProps) => {
   return (
     <ClientActionDialogProvider componentsMap={clientActionsComponents}>
-      <FormHeader {...props} />
+      {props?.isEmbedded ? null : <FormHeader {...props} />}
       <FormDataProvider
         data={props.data}
         relationshipsRawData={relationshipsRawData}

packages/next-admin/src/components/inputs/ArrayField.tsx

@@ -1,8 +1,8 @@
 import { FieldProps } from "@rjsf/utils";
 import type { CustomInputProps, Enumeration, FormProps } from "../../types";
+import FileWidget from "./FileWidget/FileWidget";
 import MultiSelectWidget from "./MultiSelect/MultiSelectWidget";
 import ScalarArrayField from "./ScalarArray/ScalarArrayField";
-import FileWidget from "./FileWidget/FileWidget";
 
 const ArrayField = (
   props: FieldProps & { customInput?: React.ReactElement<CustomInputProps> }
@@ -22,7 +22,7 @@ const ArrayField = (
 
   const field =
     resourceDefinition.properties[
-      name as keyof typeof resourceDefinition.properties
+    name as keyof typeof resourceDefinition.properties
     ];
 
   if (field?.__nextadmin?.kind === "scalar" && field?.__nextadmin?.isList) {
@@ -66,6 +66,7 @@ const ArrayField = (
       required={required}
       schema={schema}
       options={options}
+      formContext={formContext}
     />
   );
 };