Order fields on form

.changeset/pretty-melons-develop.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Order fields in form according to display options order

packages/next-admin/src/utils/props.ts

@@ -20,6 +20,7 @@ import {
   getResourceFromParams,
   getResourceIdFromParam,
   getResources,
+  orderSchema,
   transformData,
   transformSchema,
 } from "./server";
@@ -160,8 +161,8 @@ export async function getPropsFromParams({
         resource,
         searchParams,
         options,
-
       );
+      schema = orderSchema(schema, resource, options);
 
       const customInputs = isAppDir
         ? getCustomInputs(resource, options)

packages/next-admin/src/utils/server.ts

@@ -58,13 +58,41 @@ export const getToStringForRelations = <M extends ModelName>(modelName: M, field
   return toStringForRelations;
 }
 
+/**
+ * Order the fields in the schema according to the display option
+ * 
+ * @param schema
+ * @param resource
+ * @param options
+ * 
+ * @returns schema
+ */
+export const orderSchema = (schema: Schema, resource: ModelName, options?: NextAdminOptions) => {
+  const modelName = resource;
+  const model = models.find((model) => model.name === modelName);
+  if (!model) return schema;
+  const edit = options?.model?.[modelName]?.edit as EditOptions<typeof modelName>;
+  const display = edit?.display;
+  if (display) {
+    const properties = schema.definitions[modelName].properties;
+    const propertiesOrdered = {} as Record<string, any>;
+    display.forEach((property) => {
+      propertiesOrdered[property] = properties[property];
+    });
+    schema.definitions[modelName].properties = propertiesOrdered;
+  }
+  return schema;
+}
+
 /**
  * Fill fields with relations with the values of the related model, and inject them into the schema
  *
  * @param schema
  * @param prisma
  * @param requestOptions
  * @param options
+ * 
+ * @returns schema
  */
 export const fillRelationInSchema = async (
   schema: Schema,