Demo: Add 'FinalFormRangeInput' to handmade 'ProductForm' (#2593)

A `FinalFormRangeInput` field is added to the handmade `ProductForm`.
This is done in preparation to add the range input field to the admin
generator.

A new field has been added to `product.entity` in context to this:
`priceRange`

```
@ObjectType()
@inputType("ProductPriceRangeInput")
export class ProductPriceRange {
    @field()
    @IsNumber()
    min: number;

    @field()
    @IsNumber()
    max: number;
}
```

demo/admin/src/products/ProductForm.gql.ts

@@ -33,6 +33,10 @@ export const productFormFragment = gql`
             id
             title
         }
+        priceRange {
+            min
+            max
+        }
     }
     ${finalFormFileUploadFragment}
 `;

demo/admin/src/products/ProductForm.tsx

@@ -5,6 +5,7 @@ import {
     Field,
     filterByFragment,
     FinalForm,
+    FinalFormRangeInput,
     FinalFormSubmitEvent,
     Loading,
     MainContent,
@@ -24,7 +25,7 @@ import {
     resolveHasSaveConflict,
     useFormSaveConflict,
 } from "@comet/cms-admin";
-import { MenuItem } from "@mui/material";
+import { InputAdornment, MenuItem } from "@mui/material";
 import { GQLProductType } from "@src/graphql.generated";
 import {
     GQLManufacturerCountriesQuery,
@@ -35,6 +36,7 @@ import {
 import { FormApi } from "final-form";
 import isEqual from "lodash.isequal";
 import { useMemo } from "react";
+import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import {
@@ -177,6 +179,16 @@ export function ProductForm({ id }: FormProps) {
                         <TextField required fullWidth name="title" label={<FormattedMessage id="product.title" defaultMessage="Title" />} />
                         <TextField required fullWidth name="slug" label={<FormattedMessage id="product.slug" defaultMessage="Slug" />} />
 
+                        <Field
+                            name="priceRange"
+                            label={<FormattedMessage id="product.priceRange" defaultMessage="Price range" />}
+                            fullWidth
+                            component={FinalFormRangeInput}
+                            min={5}
+                            max={100}
+                            startAdornment={<InputAdornment position="start">€</InputAdornment>}
+                            disableSlider
+                        />
                         <TextAreaField
                             required
                             fullWidth

demo/api/schema.gql

@@ -529,6 +529,11 @@ type ProductDimensions {
   depth: Float!
 }
 
+type ProductPriceRange {
+  min: Float!
+  max: Float!
+}
+
 type Product {
   id: ID!
   title: String!
@@ -538,6 +543,7 @@ type Product {
   type: ProductType!
   additionalTypes: [ProductType!]!
   price: Float
+  priceRange: ProductPriceRange
   inStock: Boolean!
   soldCount: Int
   availableSince: Date
@@ -729,6 +735,11 @@ input ProductDimensionsInput {
   depth: Float!
 }
 
+input ProductPriceRangeInput {
+  min: Float!
+  max: Float!
+}
+
 input RedirectScopeInput {
   domain: String!
 }
@@ -1403,6 +1414,7 @@ input ProductInput {
   type: ProductType!
   additionalTypes: [ProductType!]! = []
   price: Float = null
+  priceRange: ProductPriceRangeInput
   inStock: Boolean! = true
   availableSince: Date = null
   lastCheckedAt: DateTime = null
@@ -1442,6 +1454,7 @@ input ProductUpdateInput {
   type: ProductType
   additionalTypes: [ProductType!]
   price: Float
+  priceRange: ProductPriceRangeInput
   inStock: Boolean
   availableSince: Date
   lastCheckedAt: DateTime

demo/api/src/db/migrations/Migration20241004111520.ts

@@ -0,0 +1,7 @@
+import { Migration } from "@mikro-orm/migrations";
+
+export class Migration20241004111520 extends Migration {
+    async up(): Promise<void> {
+        this.addSql('alter table "Product" add column "priceRange" jsonb null;');
+    }
+}

demo/api/src/products/entities/product.entity.ts

@@ -64,6 +64,18 @@ export class ProductDimensions {
     depth: number;
 }
 
+@ObjectType()
+@InputType("ProductPriceRangeInput")
+export class ProductPriceRange {
+    @Field()
+    @IsNumber()
+    min: number;
+
+    @Field()
+    @IsNumber()
+    max: number;
+}
+
 @ObjectType()
 @Entity()
 @RootBlockEntity<Product>({ isVisible: (product) => product.status === ProductStatus.Published })
@@ -109,6 +121,10 @@ export class Product extends BaseEntity<Product, "id"> {
     @Field({ nullable: true })
     price?: number = undefined;
 
+    @Property({ type: "json", nullable: true })
+    @Field(() => ProductPriceRange, { nullable: true })
+    priceRange?: ProductPriceRange = undefined;
+
     // eslint-disable-next-line @typescript-eslint/no-inferrable-types
     @Property({ type: types.boolean })
     @Field()

demo/api/src/products/generated/dto/product.input.ts

@@ -7,7 +7,7 @@ import { Transform, Type } from "class-transformer";
 import { IsArray, IsBoolean, IsDate, IsEnum, IsNotEmpty, IsNumber, IsString, IsUUID, ValidateNested } from "class-validator";
 import { GraphQLDate } from "graphql-scalars";
 
-import { ProductDimensions, ProductDiscounts, ProductStatus } from "../../entities/product.entity";
+import { ProductDimensions, ProductDiscounts, ProductPriceRange, ProductStatus } from "../../entities/product.entity";
 import { ProductType } from "../../entities/product-type.enum";
 import { ProductNestedProductColorInput } from "./product-nested-product-color.input";
 import { ProductNestedProductStatisticsInput } from "./product-nested-product-statistics.input";
@@ -50,6 +50,12 @@ export class ProductInput {
     @Field({ nullable: true, defaultValue: null })
     price?: number;
 
+    @IsNullable()
+    @ValidateNested()
+    @Type(() => ProductPriceRange)
+    @Field(() => ProductPriceRange, { nullable: true })
+    priceRange?: ProductPriceRange;
+
     @IsNotEmpty()
     @IsBoolean()
     @Field({ defaultValue: true })