Merge remote-tracking branch 'origin/next' into admin-gen-textfield-t…

…extareafield-multiline
vivid-planet · Feb 19, 2024 · 5366e7b · 5366e7b
2 parents 19b2731 + 6cbb9e7
commit 5366e7b
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 9 deletions.
diff --git a/demo/admin/src/products/future/ProductForm.cometGen.ts b/demo/admin/src/products/future/ProductForm.cometGen.ts
@@ -11,6 +11,7 @@ export const ProductForm: FormConfig<GQLProduct> = {
             name: "title",
             label: "Titel", // default is generated from name (camelCaseToHumanReadable)
             required: true, // default is inferred from gql schema
+            validate: { name: "validateTitle", import: "./validateTitle" },
         },
         { type: "text", name: "slug" },
         { type: "text", name: "description", label: "Description", multiline: true },

diff --git a/demo/admin/src/products/future/generated/ProductForm.gql.tsx b/demo/admin/src/products/future/generated/ProductForm.gql.tsx
@@ -14,6 +14,18 @@ export const productFormFragment = gql`
         image
     }
 `;
+export const productFormUpdateMutationFragment = gql`
+    fragment ProductFormDetailsUpdate on Product {
+        title
+        slug
+        description
+        type
+        price
+        inStock
+        availableSince
+        image
+    }
+`;
 export const productQuery = gql`
     query Product($id: ID!) {
         product(id: $id) {
@@ -39,8 +51,8 @@ export const updateProductMutation = gql`
         updateProduct(id: $id, input: $input, lastUpdatedAt: $lastUpdatedAt) {
             id
             updatedAt
-            ...ProductFormDetails
+            ...ProductFormDetailsUpdate
         }
     }
-    ${productFormFragment}
+    ${productFormUpdateMutationFragment}
 `;
diff --git a/demo/admin/src/products/future/generated/ProductForm.tsx b/demo/admin/src/products/future/generated/ProductForm.tsx
@@ -33,6 +33,7 @@ import isEqual from "lodash.isequal";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { validateTitle } from "../validateTitle";
 import { createProductMutation, productFormFragment, productQuery, updateProductMutation } from "./ProductForm.gql";
 import {
     GQLCreateProductMutation,
@@ -74,6 +75,7 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
             data?.product
                 ? {
                       ...filter<GQLProductFormDetailsFragment>(productFormFragment, data.product),
+
                       price: String(data.product.price),
                       image: rootBlocks.image.input2State(data.product.image),
                   }
@@ -99,6 +101,7 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
         if (await saveConflict.checkForConflicts()) throw new Error("Conflicts detected");
         const output = {
             ...formValues,
+
             price: parseFloat(formValues.price),
             image: rootBlocks.image.state2Output(formValues.image),
         };
@@ -161,7 +164,13 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
                         </ToolbarActions>
                     </Toolbar>
                     <MainContent>
-                        <TextField required fullWidth name="title" label={<FormattedMessage id="product.title" defaultMessage="Titel" />} />
+                        <TextField
+                            required
+                            fullWidth
+                            name="title"
+                            label={<FormattedMessage id="product.title" defaultMessage="Titel" />}
+                            validate={validateTitle}
+                        />
 
                         <TextField required fullWidth name="slug" label={<FormattedMessage id="product.slug" defaultMessage="Slug" />} />
 

diff --git a/demo/admin/src/products/future/validateTitle.tsx b/demo/admin/src/products/future/validateTitle.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+export function validateTitle(value: string) {
+    return value.length < 3 ? (
+        <FormattedMessage id="product.validate.titleMustBe3CharsLog" defaultMessage="Title must be at least 3 characters long" />
+    ) : undefined;
+}
diff --git a/packages/admin/cms-admin/src/generator/future/generateFormField.ts b/packages/admin/cms-admin/src/generator/future/generateFormField.ts
@@ -33,6 +33,21 @@ export function generateFormField(
     //TODO verify introspectionField.type is compatbile with config.type
 
     const imports: Imports = [];
+
+    let validateCode = "";
+    if (config.validate) {
+        let importPath = config.validate.import;
+        if (importPath.startsWith("./")) {
+            //go one level up as generated files are in generated subfolder
+            importPath = `.${importPath}`;
+        }
+        imports.push({
+            name: config.validate.name,
+            importPath,
+        });
+        validateCode = `validate={${config.validate.name}}`;
+    }
+
     let code = "";
     if (config.type == "text") {
         const TextInputComponent = config.multiline ? "TextAreaField" : "TextField";
@@ -42,6 +57,7 @@ export function generateFormField(
             fullWidth
             name="${name}"
             label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}
+            ${validateCode}
         />`;
     } else if (config.type == "number") {
         code = `
@@ -52,10 +68,11 @@ export function generateFormField(
                 component={FinalFormInput}
                 type="number"
                 label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}
+                ${validateCode}
             />`;
         //TODO MUI suggest not using type=number https://mui.com/material-ui/react-text-field/#type-quot-number-quot
     } else if (config.type == "boolean") {
-        code = `<Field name="${name}" label="" type="checkbox" fullWidth>
+        code = `<Field name="${name}" label="" type="checkbox" fullWidth ${validateCode}>
             {(props) => (
                 <FormControlLabel
                     label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}
@@ -71,6 +88,7 @@ export function generateFormField(
                 name="${name}"
                 component={FinalFormDatePicker}
                 label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}
+                ${validateCode}
             />`;
     } else if (config.type == "block") {
         imports.push({
@@ -92,7 +110,9 @@ export function generateFormField(
         code = `<Field
             fullWidth
             name="${name}"
-            label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}>
+            label={<FormattedMessage id="${instanceGqlType}.${name}" defaultMessage="${label}" />}
+            ${validateCode}
+            >
             {(props) => 
                 <FinalFormSelect {...props}>
                 ${values

diff --git a/packages/admin/cms-admin/src/generator/future/generator.ts b/packages/admin/cms-admin/src/generator/future/generator.ts
@@ -8,7 +8,7 @@ import { generateForm } from "./generateForm";
 import { generateGrid } from "./generateGrid";
 import { writeGenerated } from "./utils/writeGenerated";
 
-type BlockReference = {
+type ImportReference = {
     name: string;
     import: string;
 };
@@ -21,8 +21,8 @@ export type FormFieldConfig<T> = (
     // TODO | { type: "dateTime" }
     | { type: "staticSelect"; values?: string[] }
     | { type: "asyncSelect"; values?: string[] }
-    | { type: "block"; block: BlockReference }
-) & { name: keyof T; label?: string; required?: boolean };
+    | { type: "block"; block: ImportReference }
+) & { name: keyof T; label?: string; required?: boolean; validate?: ImportReference };
 
 export type FormConfig<T extends { __typename?: string }> = {
     type: "form";
@@ -41,7 +41,7 @@ export type GridColumnConfig<T> = (
     | { type: "date" }
     | { type: "dateTime" }
     | { type: "staticSelect"; values?: string[] }
-    | { type: "block"; block: BlockReference }
+    | { type: "block"; block: ImportReference }
 ) & { name: keyof T; headerName?: string; width?: number };
 export type GridConfig<T extends { __typename?: string }> = {
     type: "grid";