djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add metadata editor to product type creator

Browse source
This commit is contained in:
dominik-zeglen 2020-09-01 13:53:28 +02:00
parent e268ddd3d2
commit 4391e79a90
2 changed files with 84 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/productTypes/components/ProductTypeCreatePage/ProductTypeCreatePage.tsx
View file

@ -4,6 +4,7 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Container from "@saleor/components/Container";
import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid";
import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
@ -12,6 +13,7 @@ import { sectionNames } from "@saleor/intl";
import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductTypeDetails";
import { UserError } from "@saleor/types";
import { WeightUnitsEnum } from "@saleor/types/globalTypes";
import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
import React from "react";
import { useIntl } from "react-intl";
@ -19,7 +21,7 @@ import ProductTypeDetails from "../ProductTypeDetails/ProductTypeDetails";
import ProductTypeShipping from "../ProductTypeShipping/ProductTypeShipping";
import ProductTypeTaxes from "../ProductTypeTaxes/ProductTypeTaxes";
export interface ProductTypeForm {
export interface ProductTypeForm extends MetadataFormData {
name: string;
isShippingRequired: boolean;
taxType: string;
@ -39,7 +41,9 @@ export interface ProductTypeCreatePageProps {
const formInitialData: ProductTypeForm = {
isShippingRequired: false,
metadata: [],
name: "",
privateMetadata: [],
taxType: "",
weight: 0
};
@ -68,10 +72,16 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
}: ProductTypeCreatePageProps) => {
const intl = useIntl();
const [taxTypeDisplayName, setTaxTypeDisplayName] = useStateFromProps("");
const {
makeChangeHandler: makeMetadataChangeHandler
} = useMetadataChangeTrigger();
return (
<Form initial={formInitialData} onSubmit={onSubmit} confirmLeave>
{({ change, data, hasChanged, submit }) => (
{({ change, data, hasChanged, submit }) => {
const changeMetadata = makeMetadataChangeHandler(change);
return (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.productTypes)}
@ -100,6 +110,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
)
}
/>
<CardSpacer />
<Metadata data={data} onChange={changeMetadata} />
</div>
<div>
<ProductTypeShipping
@ -117,7 +129,8 @@ const ProductTypeCreatePage: React.FC<ProductTypeCreatePageProps> = ({
state={saveButtonBarState}
/>
</Container>
)}
);
}}
</Form>
);
};

31
src/productTypes/views/ProductTypeCreate.tsx
View file

@ -1,6 +1,11 @@
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
import {
useMetadataUpdate,
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import React from "react";
import { useIntl } from "react-intl";
@ -17,6 +22,8 @@ export const ProductTypeCreate: React.FC = () => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const [updateMetadata] = useMetadataUpdate({});
const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
const handleCreateSuccess = (updateData: ProductTypeCreateMutation) => {
if (updateData.productTypeCreate.errors.length === 0) {
@ -32,8 +39,8 @@ export const ProductTypeCreate: React.FC = () => {
return (
<TypedProductTypeCreateMutation onCompleted={handleCreateSuccess}>
{(createProductType, createProductTypeOpts) => {
const handleCreate = (formData: ProductTypeForm) =>
createProductType({
const handleCreate = async (formData: ProductTypeForm) => {
const result = await createProductType({
variables: {
input: {
hasVariants: false,
@ -44,6 +51,15 @@ export const ProductTypeCreate: React.FC = () => {
}
}
});
return result.data?.productTypeCreate.productType?.id || null;
};
const handleSubmit = createMetadataCreateHandler(
handleCreate,
updateMetadata,
updatePrivateMetadata
);
return (
<TypedProductTypeCreateDataQuery displayLoader>
{({ data, loading }) => (
@ -58,19 +74,18 @@ export const ProductTypeCreate: React.FC = () => {
<ProductTypeCreatePage
defaultWeightUnit={maybe(() => data.shop.defaultWeightUnit)}
disabled={loading}
errors={maybe(
() => createProductTypeOpts.data.productTypeCreate.errors,
[]
)}
errors={
createProductTypeOpts.data?.productTypeCreate.errors || []
}
pageTitle={intl.formatMessage({
defaultMessage: "Create Product Type",
description: "header",
id: "productTypeCreatePageHeader"
})}
saveButtonBarState={createProductTypeOpts.status}
taxTypes={maybe(() => data.taxTypes, [])}
taxTypes={data?.taxTypes || []}
onBack={() => navigate(productTypeListUrl())}
onSubmit={handleCreate}
onSubmit={handleSubmit}
/>
</>
)}