Finish relationship order

premieroctet · May 24, 2024 · 1f5b90e · 1f5b90e
1 parent 1355f38
commit 1f5b90e
Show file tree

Hide file tree

Showing 17 changed files with 385 additions and 307 deletions.
diff --git a/apps/example/e2e/utils.ts b/apps/example/e2e/utils.ts
@@ -49,7 +49,7 @@ export const createItem = async (
 
   await fillForm(model, page, dataTest);
 
-  await page.click('button[type="submit"]');
+  await page.click('button[name="save_edit"]');
   await page.waitForURL((url) => !url.pathname.endsWith("/new"));
 
   const url = new URL(page.url());

diff --git a/apps/example/options.tsx b/apps/example/options.tsx
@@ -97,6 +97,10 @@ export const options: NextAdminOptions = {
           birthDate: {
             input: <DatePicker />,
           },
+          posts: {
+            display: "list",
+            orderField: "order",
+          },
           avatar: {
             format: "file",
             handler: {
@@ -166,13 +170,12 @@ export const options: NextAdminOptions = {
             format: "richtext-html",
           },
           categories: {
-            optionFormatter: (category) => {
+            relationOptionFormatter: (category) => {
               return `${category.name} Cat.${category.id}`;
             },
             display: "list",
             orderField: "order",
             relationshipSearchField: "category",
-            isExplicitManyToMany: true,
           },
         },
         display: [
@@ -196,6 +199,12 @@ export const options: NextAdminOptions = {
       },
       edit: {
         display: ["name", "posts"],
+        fields: {
+          posts: {
+            display: "list",
+            relationshipSearchField: 'post'
+          },
+        },
       },
     },
   },

diff --git a/apps/example/prisma/json-schema/json-schema.json b/apps/example/prisma/json-schema/json-schema.json
@@ -109,6 +109,10 @@
             "number",
             "null"
           ]
+        },
+        "order": {
+          "type": "integer",
+          "default": 0
         }
       },
       "required": [

diff --git a/apps/example/prisma/migrations/20240524121923_order_posts/migration.sql b/apps/example/prisma/migrations/20240524121923_order_posts/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Post" ADD COLUMN     "order" INTEGER NOT NULL DEFAULT 0;
diff --git a/apps/example/prisma/schema.prisma b/apps/example/prisma/schema.prisma
@@ -45,6 +45,7 @@ model Post {
   authorId   Int
   categories CategoriesOnPosts[]
   rate       Decimal?            @db.Decimal(5, 2)
+  order      Int                 @default(0)
 }
 
 model Profile {

diff --git a/packages/next-admin/src/actions/form.ts b/packages/next-admin/src/actions/form.ts
@@ -81,14 +81,15 @@ export const submitForm = async (
     // Validate
     validate(parsedFormData, fields);
 
-    const { formattedData, errors } = await formattedFormData(
-      formValues,
-      dmmfSchema?.fields!,
-      schema,
-      resource,
-      resourceId,
-      fields
-    );
+    const { formattedData, complementaryFormattedData, errors } =
+      await formattedFormData(
+        formValues,
+        dmmfSchema?.fields!,
+        schema,
+        resource,
+        resourceId,
+        fields
+      );
 
     if (errors.length) {
       return {
@@ -138,6 +139,14 @@ export const submitForm = async (
       data: formattedData,
     });
 
+    // @ts-expect-error
+    await prisma[resource].update({
+      where: {
+        [resourceIdField]: data[resourceIdField],
+      },
+      data: complementaryFormattedData,
+    });
+
     return {
       created: true,
       createdId: data[resourceIdField],

diff --git a/packages/next-admin/src/components/Form.tsx b/packages/next-admin/src/components/Form.tsx
@@ -158,19 +158,15 @@ const Form = ({
     }
 
     return (
-      <div className="mt-4 flex justify-between space-x-2">
+      <div className="mt-4 flex justify-between gap-2">
         {((edit && canEdit) || (!edit && canCreate)) && (
-          <div className="order-2 flex space-x-2">
+          <div className="order-2 flex gap-2">
             <Button
               {...buttonProps}
               className="order-2 flex gap-2"
               type="submit"
-              {...(edit
-                ? {
-                    name: "__admin_redirect",
-                    value: "list",
-                  }
-                : {})}
+              name="__admin_redirect"
+              value="list"
               loading={isPending}
             >
               <CheckCircleIcon className="h-6 w-6" />
@@ -183,6 +179,7 @@ const Form = ({
               tabIndex={-1}
               type="submit"
               loading={isPending}
+              name="save_edit"
             >
               {t("form.button.save_edit.label")}
             </Button>

diff --git a/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectDisplayList.tsx b/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectDisplayList.tsx
@@ -1,8 +1,8 @@
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
 import { RJSFSchema } from "@rjsf/utils";
 import { Enumeration } from "../../../types";
 import MultiSelectDisplayListItem from "./MultiSelectDisplayListItem";
-import { DndContext, DragEndEvent } from "@dnd-kit/core";
-import { SortableContext } from "@dnd-kit/sortable";
 
 type Props = {
   formData: any;

diff --git a/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectDisplayListItem.tsx b/packages/next-admin/src/components/inputs/MultiSelect/MultiSelectDisplayListItem.tsx
@@ -1,16 +1,16 @@
-import clsx from "clsx";
-import { Enumeration } from "../../../types";
-import Link from "next/link";
-import { useConfig } from "../../../context/ConfigContext";
-import { slugify } from "../../../utils/tools";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
   ArrowTopRightOnSquareIcon,
-  Squares2X2Icon,
+  Bars2Icon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { RJSFSchema } from "@rjsf/utils";
+import clsx from "clsx";
+import Link from "next/link";
+import { useConfig } from "../../../context/ConfigContext";
+import { Enumeration } from "../../../types";
+import { slugify } from "../../../utils/tools";
 
 type Props = {
   item: Enumeration;
@@ -46,7 +46,7 @@ const MultiSelectDisplayListItem = ({
   return (
     <li
       className={clsx(
-        "ring-nextadmin-border-default dark:ring-dark-nextadmin-border-default relative flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1"
+        "ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong bg-nextadmin-background-default dark:bg-dark-nextadmin-background-subtle relative flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1"
       )}
       ref={setNodeRef}
       style={style}
@@ -61,16 +61,17 @@ const MultiSelectDisplayListItem = ({
             })}
             {...listeners}
           >
-            <Squares2X2Icon className="text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-4 w-4" />
+            <Bars2Icon className="text-nextadmin-content-default dark:text-dark-nextadmin-content-default h-4 w-4" />
           </div>
         )}
         {label}
       </div>
       <div className="flex items-center space-x-3">
         <Link
           href={`${basePath}/${slugify(
-            // @ts-expect-error
-            schema.items?.relation
+            item?.data?.modelName ??
+              // @ts-expect-error
+              schema.items?.relation
           )}/${value}`}
           className="flex items-center"
         >

diff --git a/packages/next-admin/src/components/inputs/SelectWidget.tsx b/packages/next-admin/src/components/inputs/SelectWidget.tsx
@@ -43,7 +43,7 @@ const SelectWidget = ({
 
   return (
     <div className="relative" ref={containerRef}>
-      <div className="ring-nextadmin-border-strong dark:ring-dark-nextadmin-border-strong dark:bg-dark-nextadmin-background-subtle relative flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1">
+      <div className="ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong dark:bg-dark-nextadmin-background-subtle relative flex w-full cursor-default justify-between rounded-md px-3 py-2 text-sm placeholder-gray-500 shadow-sm ring-1">
         <select
           name={name}
           className="absolute inset-0 -z-10 h-full w-full opacity-0"

diff --git a/packages/next-admin/src/components/inputs/Selector.tsx b/packages/next-admin/src/components/inputs/Selector.tsx
@@ -128,7 +128,7 @@ export const Selector = ({
     <Transition.Root show={open} as="div">
       <Transition.Child
         as="div"
-        className="bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis ring-nextadmin-border-strong dark:ring-dark-nextadmin-border-strong absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded-md shadow-2xl ring-1"
+        className="bg-nextadmin-background-default dark:bg-dark-nextadmin-background-emphasis ring-nextadmin-border-default dark:ring-dark-nextadmin-border-strong absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded-md shadow-2xl ring-1"
         enter="transition-all ease-linear"
         enterFrom="opacity-0 -translate-y-1"
         enterTo="opacity-100 translate-y-0"

diff --git a/packages/next-admin/src/router.tsx b/packages/next-admin/src/router.tsx
@@ -193,14 +193,15 @@ export const nextAdminRouter = async (
           // Validate
           validate(parsedFormData, fields);
 
-          const { formattedData, errors } = await formattedFormData(
-            formData,
-            dmmfSchema?.fields!,
-            schema,
-            resource,
-            resourceId,
-            fields
-          );
+          const { formattedData, complementaryFormattedData, errors } =
+            await formattedFormData(
+              formData,
+              dmmfSchema?.fields!,
+              schema,
+              resource,
+              resourceId,
+              fields
+            );
 
           if (errors.length) {
             return {
@@ -284,6 +285,14 @@ export const nextAdminRouter = async (
             data: formattedData,
           });
 
+          // @ts-expect-error
+          await prisma[resource].update({
+            where: {
+              [modelIdProperty]: createdData[modelIdProperty],
+            },
+            data: complementaryFormattedData,
+          });
+
           const pathname = redirect
             ? `${options.basePath}/${slugify(resource)}`
             : `${options.basePath}/${slugify(resource)}/${

diff --git a/packages/next-admin/src/tests/prismaUtils.test.ts b/packages/next-admin/src/tests/prismaUtils.test.ts
@@ -14,6 +14,7 @@ describe("getMappedDataList", () => {
         author: 1,
         authorId: 1,
         rate: new Decimal(5),
+        order: 0,
       },
       {
         id: 2,
@@ -23,6 +24,7 @@ describe("getMappedDataList", () => {
         author: 1,
         authorId: 1,
         rate: new Decimal(5),
+        order: 1,
       },
     ];
 
@@ -58,6 +60,7 @@ describe("optionsFromResource", () => {
         author: 1,
         authorId: 1,
         rate: new Decimal(5),
+        order: 0
       },
       {
         id: 2,
@@ -67,6 +70,7 @@ describe("optionsFromResource", () => {
         author: 1,
         authorId: 1,
         rate: new Decimal(5),
+        order: 1
       },
     ];