Admin Generator (Future): Add FinalFormRangeInput to form generator (…

…#2612) `FinalFormRangeInput` fields can now be generated in forms. The new field type is `numberRange`. Data of the field is saved in this format: `{ min: number, max: number }` The names `min` and `max` are currently hardcoded, as they **have to** be named this way. `FinalFormRangeInput` passes the values named like this.
vivid-planet · Oct 10, 2024 · 6f82b6e · 6f82b6e
1 parent bc19fb1
commit 6f82b6e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 0 deletions.
diff --git a/demo/admin/src/products/future/ProductForm.cometGen.ts b/demo/admin/src/products/future/ProductForm.cometGen.ts
@@ -32,6 +32,7 @@ export const ProductForm: FormConfig<GQLProduct> = {
                     values: [{ value: "Cap", label: "great Cap" }, "Shirt", "Tie"],
                 },
                 { type: "asyncSelect", name: "category", rootQuery: "productCategories" },
+                { type: "numberRange", name: "priceRange", minValue: 25, maxValue: 500, disableSlider: true, startAdornment: "€" },
                 {
                     type: "optionalNestedFields",
                     name: "dimensions",

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,10 @@ export const productFormFragment = gql`
             id
             title
         }
+        priceRange {
+            min
+            max
+        }
         dimensions {
             width
             height

diff --git a/demo/admin/src/products/future/generated/ProductForm.tsx b/demo/admin/src/products/future/generated/ProductForm.tsx
@@ -9,6 +9,7 @@ import {
     FinalForm,
     FinalFormCheckbox,
     FinalFormInput,
+    FinalFormRangeInput,
     FinalFormSubmitEvent,
     FinalFormSwitch,
     Loading,
@@ -284,6 +285,18 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
                                 }}
                                 getOptionLabel={(option) => option.title}
                             />
+
+                            <Field
+                                variant="horizontal"
+                                fullWidth
+                                name="priceRange"
+                                component={FinalFormRangeInput}
+                                label={<FormattedMessage id="product.priceRange" defaultMessage="Price Range" />}
+                                min={25}
+                                max={500}
+                                disableSlider
+                                startAdornment={<InputAdornment position="start">€</InputAdornment>}
+                            />
                             <Field
                                 fullWidth
                                 name="dimensionsEnabled"

diff --git a/packages/admin/cms-admin/src/generator/future/generateForm.ts b/packages/admin/cms-admin/src/generator/future/generateForm.ts
@@ -250,6 +250,7 @@ export function generateForm(
         FinalForm,
         FinalFormCheckbox,
         FinalFormInput,
+        FinalFormRangeInput,
         FinalFormSelect,
         FinalFormSubmitEvent,
         Loading,

diff --git a/packages/admin/cms-admin/src/generator/future/generateForm/generateFormField.ts b/packages/admin/cms-admin/src/generator/future/generateForm/generateFormField.ts
@@ -165,6 +165,32 @@ export function generateFormField({
                 },
             },
         ];
+    } else if (config.type === "numberRange") {
+        code = `
+            <Field
+                ${required ? "required" : ""}
+                ${config.readOnly ? readOnlyPropsWithLock : ""}
+                variant="horizontal"
+                fullWidth
+                name="${nameWithPrefix}"
+                component={FinalFormRangeInput}
+                label={${fieldLabel}}
+                min={${config.minValue}}
+                max={${config.maxValue}}
+                ${config.disableSlider ? "disableSlider" : ""}
+                ${config.startAdornment ? `startAdornment={<InputAdornment position="start">${config.startAdornment}</InputAdornment>}` : ""}
+                ${config.endAdornment ? `endAdornment={<InputAdornment position="end">${config.endAdornment}</InputAdornment>}` : ""}
+                ${
+                    config.helperText
+                        ? `helperText={<FormattedMessage id=` +
+                          `"${formattedMessageRootId}.${name}.helperText" ` +
+                          `defaultMessage="${config.helperText}" />}`
+                        : ""
+                }
+                ${validateCode}
+            />`;
+
+        formFragmentField = `${name} { min max }`;
     } else if (config.type == "boolean") {
         code = `<Field name="${nameWithPrefix}" label="" type="checkbox" variant="horizontal" fullWidth ${validateCode}>
             {(props) => (

diff --git a/packages/admin/cms-admin/src/generator/future/generator.ts b/packages/admin/cms-admin/src/generator/future/generator.ts
@@ -35,6 +35,14 @@ type MultiFileFormFieldConfig = { type: "fileUpload"; multiple: true; maxFiles?:
 export type FormFieldConfig<T> = (
     | { type: "text"; multiline?: boolean }
     | { type: "number" }
+    | {
+          type: "numberRange";
+          minValue: number;
+          maxValue: number;
+          disableSlider?: boolean;
+          startAdornment?: string;
+          endAdornment?: string;
+      }
     | { type: "boolean" }
     | { type: "date" }
     // TODO | { type: "dateTime" }