Admin Generator (Future): Add FinalFormRangeInput to form generator

[andrearutrecht]

Description

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.

Example

The field with all possible options:

{ 
     type: "numberRange",
     name: "priceRange", 
     minValue: 25, // required
     maxValue: 500, // required
     disableSlider: true, //  optional, default is false
     startAdornment: "€" // optional
     endAdornment: "€" // optional, both adornments can be added for a field
 }

The field in product.entity:

@ObjectType()
@InputType("ProductPriceRangeInput")
export class ProductPriceRange {
    @Field()
    @IsNumber()
    min: number;

    @Field()
    @IsNumber()
    max: number;
}

{...}

export class Product extends BaseEntity<Product, "id"> {

{...}

    @Property({ type: "json", nullable: true })
    @Field(() => ProductPriceRange, { nullable: true })
    priceRange?: ProductPriceRange = undefined;

{...}

}

• I have verified if my change requires an example

Example in demo: #2593

Screenshots/screencasts

Creating a Product with a price range:

Screen.Recording.2024-10-08.at.11.52.42.mp4

Example of editing a price range:

Screen.Recording.2024-10-08.at.11.54.01.mp4

Changeset

• I have verified if my change requires a changeset

Related tasks and documents

Jira Task: https://vivid-planet.atlassian.net/browse/SVK-124

Open TODOs/questions

Further information