Demo Admin Products Form: add nested object as fields

vivid-planet · Nov 13, 2023 · 187b275 · 187b275
1 parent 986efd1
commit 187b275
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 83 deletions.
diff --git a/demo/admin/package.json b/demo/admin/package.json
@@ -138,6 +138,7 @@
         "prettier": "^2.0.0",
         "style-loader": "^3.0.0",
         "ts-node": "^10.0.0",
+        "type-fest": "^4.6.0",
         "typescript": "^4.0.0",
         "webpack": "^5.0.0",
         "webpack-cli": "^4.0.0",

diff --git a/demo/admin/src/products/ProductForm.gql.ts b/demo/admin/src/products/ProductForm.gql.ts
@@ -17,6 +17,11 @@ export const productFormFragment = gql`
             id
             title
         }
+        packageDimensions {
+            width
+            height
+            depth
+        }
     }
 `;
 

diff --git a/demo/admin/src/products/ProductForm.tsx b/demo/admin/src/products/ProductForm.tsx
@@ -7,6 +7,7 @@ import {
     FinalFormSaveSplitButton,
     FinalFormSelect,
     FinalFormSubmitEvent,
+    FormSection,
     Loading,
     MainContent,
     Toolbar,
@@ -29,6 +30,7 @@ import { filter } from "graphql-anywhere";
 import isEqual from "lodash.isequal";
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import { MergeDeep } from "type-fest";
 
 import {
     createProductMutation,
@@ -62,10 +64,18 @@ const rootBlocks = {
     image: DamImageBlock,
 };
 
-type FormValues = Omit<GQLProductFormManualFragment, "price" | "image"> & {
-    price: string;
-    image: BlockState<typeof rootBlocks.image>;
-};
+type FormValues = MergeDeep<
+    GQLProductFormManualFragment,
+    {
+        price: string;
+        image: BlockState<typeof rootBlocks.image>;
+        packageDimensions: {
+            width: string;
+            height: string;
+            depth: string;
+        };
+    }
+>;
 
 function ProductForm({ id }: FormProps): React.ReactElement {
     const stackApi = useStackApi();
@@ -84,6 +94,12 @@ function ProductForm({ id }: FormProps): React.ReactElement {
               ...filter<GQLProductFormManualFragment>(productFormFragment, data.product),
               price: String(data.product.price),
               image: rootBlocks.image.input2State(data.product.image),
+              packageDimensions: {
+                  ...data.product.packageDimensions,
+                  width: String(data.product.packageDimensions.width),
+                  height: String(data.product.packageDimensions.height),
+                  depth: String(data.product.packageDimensions.depth),
+              },
           }
         : {
               image: rootBlocks.image.defaultValues(),
@@ -113,7 +129,12 @@ function ProductForm({ id }: FormProps): React.ReactElement {
             variants: [],
             articleNumbers: [],
             discounts: [],
-            packageDimensions: { width: 0, height: 0, depth: 0 },
+            packageDimensions: {
+                ...formValues.packageDimensions,
+                width: parseFloat(formValues.packageDimensions.width),
+                height: parseFloat(formValues.packageDimensions.height),
+                depth: parseFloat(formValues.packageDimensions.depth),
+            },
             statistics: { views: 0 },
         };
         if (mode === "edit") {
@@ -228,9 +249,6 @@ function ProductForm({ id }: FormProps): React.ReactElement {
                             component={FinalFormSelect}
                             {...categorySelectAsyncProps}
                             getOptionLabel={(option: GQLProductCategorySelectFragment) => option.title}
-                            getOptionSelected={(option: GQLProductCategorySelectFragment, value: GQLProductCategorySelectFragment) => {
-                                return option.id === value.id;
-                            }}
                         />
                         <Field
                             fullWidth
@@ -240,9 +258,6 @@ function ProductForm({ id }: FormProps): React.ReactElement {
                             multiple
                             {...tagsSelectAsyncProps}
                             getOptionLabel={(option: GQLProductTagsSelectFragment) => option.title}
-                            getOptionSelected={(option: GQLProductTagsSelectFragment, value: GQLProductTagsSelectFragment) => {
-                                return option.id === value.id;
-                            }}
                         />
                         <Field
                             fullWidth
@@ -262,6 +277,29 @@ function ProductForm({ id }: FormProps): React.ReactElement {
                         <Field name="image" isEqual={isEqual}>
                             {createFinalFormBlock(rootBlocks.image)}
                         </Field>
+                        <FormSection title={<FormattedMessage id="product.packageDimensions" defaultMessage="Package Dimensions" />}>
+                            <Field
+                                fullWidth
+                                name="packageDimensions.width"
+                                component={FinalFormInput}
+                                inputProps={{ type: "number" }}
+                                label={<FormattedMessage id="product.width" defaultMessage="Width" />}
+                            />
+                            <Field
+                                fullWidth
+                                name="packageDimensions.height"
+                                component={FinalFormInput}
+                                inputProps={{ type: "number" }}
+                                label={<FormattedMessage id="product.height" defaultMessage="Height" />}
+                            />
+                            <Field
+                                fullWidth
+                                name="packageDimensions.depth"
+                                component={FinalFormInput}
+                                inputProps={{ type: "number" }}
+                                label={<FormattedMessage id="product.depth" defaultMessage="Depth" />}
+                            />
+                        </FormSection>
                     </MainContent>
                 </EditPageLayout>
             )}

diff --git a/demo/api/schema.gql b/demo/api/schema.gql
@@ -451,7 +451,7 @@ type Product implements DocumentInterface {
   discounts: [ProductDiscounts!]!
   articleNumbers: [String!]!
   dimensions: ProductDimensions
-  packageDimensions: ProductPackageDimensions
+  packageDimensions: ProductPackageDimensions!
   statistics: ProductStatistics
   createdAt: DateTime!
   category: ProductCategory
@@ -1116,7 +1116,7 @@ input ProductInput {
   discounts: [ProductDiscountsInput!]! = []
   articleNumbers: [String!]! = []
   dimensions: ProductDimensionsInput
-  packageDimensions: ProductPackageDimensionsInput
+  packageDimensions: ProductPackageDimensionsInput!
   statistics: ProductStatisticsInput
   variants: [ProductVariantInput!]! = []
   category: ID = null

diff --git a/demo/api/src/products/entities/product.entity.ts b/demo/api/src/products/entities/product.entity.ts
@@ -147,9 +147,9 @@ export class Product extends BaseEntity<Product, "id"> implements DocumentInterf
     @Field(() => ProductDimensions, { nullable: true })
     dimensions?: ProductDimensions = undefined;
 
-    @Embedded(() => ProductPackageDimensions, { nullable: true })
-    @Field(() => ProductPackageDimensions, { nullable: true })
-    packageDimensions?: ProductPackageDimensions = undefined;
+    @Embedded(() => ProductPackageDimensions)
+    @Field(() => ProductPackageDimensions)
+    packageDimensions: ProductPackageDimensions;
 
     @OneToOne(() => ProductStatistics, { inversedBy: "product", owner: true, ref: true, nullable: true })
     @Field(() => ProductStatistics, { nullable: true })

diff --git a/demo/api/src/products/generated/dto/product.input.ts b/demo/api/src/products/generated/dto/product.input.ts
@@ -69,11 +69,11 @@ export class ProductInput {
     @Field(() => ProductDimensions, { nullable: true })
     dimensions?: ProductDimensions;
 
-    @IsNullable()
+    @IsNotEmpty()
     @ValidateNested()
     @Type(() => ProductPackageDimensions)
-    @Field(() => ProductPackageDimensions, { nullable: true })
-    packageDimensions?: ProductPackageDimensions;
+    @Field(() => ProductPackageDimensions)
+    packageDimensions: ProductPackageDimensions;
 
     @IsNullable()
     @Field(() => ProductStatisticsInput, { nullable: true })