Fix handmade product form (#1713)

- add "price" input field as it is required by the api
- add missing toolbar including save button in add form

---

Closes COM-460

---------

Co-authored-by: Phillip Lechenauer <phillip.lechenauer@vivid-planet.com>
Co-authored-by: Niko Sams <ns@vivid-planet.com>
Co-authored-by: Niko Sams <niko.sams@gmail.com>

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

@@ -16,6 +16,7 @@ export const productFormFragment = gql`
             id
             title
         }
+        price
     }
 `;
 

demo/admin/src/products/ProductForm.tsx

@@ -3,6 +3,7 @@ import {
     CheckboxField,
     Field,
     FinalForm,
+    FinalFormInput,
     FinalFormSelect,
     FinalFormSubmitEvent,
     Loading,
@@ -56,7 +57,8 @@ const rootBlocks = {
     image: DamImageBlock,
 };
 
-type FormValues = Omit<GQLProductFormManualFragment, "image"> & {
+type FormValues = Omit<GQLProductFormManualFragment, "image" | "price"> & {
+    price: string;
     image: BlockState<typeof rootBlocks.image>;
 };
 
@@ -74,6 +76,7 @@ function ProductForm({ id }: FormProps): React.ReactElement {
     const initialValues: Partial<FormValues> = data?.product
         ? {
               ...filter<GQLProductFormManualFragment>(productFormFragment, data.product),
+              price: String(data.product.price),
               image: rootBlocks.image.input2State(data.product.image),
           }
         : {
@@ -105,6 +108,7 @@ function ProductForm({ id }: FormProps): React.ReactElement {
             articleNumbers: [],
             discounts: [],
             statistics: { views: 0 },
+            price: parseFloat(formValues.price),
         };
         if (mode === "edit") {
             if (!id) throw new Error();
@@ -188,6 +192,13 @@ function ProductForm({ id }: FormProps): React.ReactElement {
                             {...tagsSelectAsyncProps}
                             getOptionLabel={(option: GQLProductTagsSelectFragment) => option.title}
                         />
+                        <Field
+                            fullWidth
+                            name="price"
+                            component={FinalFormInput}
+                            type="number"
+                            label={<FormattedMessage id="product.price" defaultMessage="Price" />}
+                        />
                         <CheckboxField name="inStock" label={<FormattedMessage id="product.inStock" defaultMessage="In stock" />} fullWidth />
                         <Field name="image" isEqual={isEqual}>
                             {createFinalFormBlock(rootBlocks.image)}

demo/admin/src/products/ProductsPage.tsx

@@ -79,7 +79,17 @@ const ProductsPage: React.FC = () => {
                     )}
                 </StackPage>
                 <StackPage name="add" title={intl.formatMessage({ id: "products.addProduct", defaultMessage: "Add product" })}>
-                    <ProductForm />
+                    <SaveBoundary>
+                        <Toolbar>
+                            <ToolbarBackButton />
+                            <ToolbarAutomaticTitleItem />
+                            <ToolbarFillSpace />
+                            <ToolbarActions>
+                                <SaveBoundarySaveButton />
+                            </ToolbarActions>
+                        </Toolbar>
+                        <ProductForm />
+                    </SaveBoundary>
                 </StackPage>
             </StackSwitch>
         </Stack>