Add metadata editor to collection creator
This commit is contained in:
dominik-zeglen
parent
5737e5f64d
commit
2353e54ab2
2 changed files with 151 additions and 132 deletions
|
|
@ -1,19 +1,18 @@
|
|||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import AppHeader from "@saleor/components/AppHeader";
|
||||
import { CardSpacer } from "@saleor/components/CardSpacer";
|
||||
import CardTitle from "@saleor/components/CardTitle";
|
||||
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 SeoForm from "@saleor/components/SeoForm";
|
||||
import VisibilityCard from "@saleor/components/VisibilityCard";
|
||||
import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment";
|
||||
import useDateLocalize from "@saleor/hooks/useDateLocalize";
|
||||
import { commonMessages, sectionNames } from "@saleor/intl";
|
||||
import { sectionNames } from "@saleor/intl";
|
||||
import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
|
||||
import { ContentState, convertToRaw, RawDraftContentState } from "draft-js";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
|
@ -21,7 +20,7 @@ import { useIntl } from "react-intl";
|
|||
import CollectionDetails from "../CollectionDetails/CollectionDetails";
|
||||
import { CollectionImage } from "../CollectionImage/CollectionImage";
|
||||
|
||||
export interface CollectionCreatePageFormData {
|
||||
export interface CollectionCreatePageFormData extends MetadataFormData {
|
||||
backgroundImage: {
|
||||
url: string;
|
||||
value: string;
|
||||
|
|
@ -51,7 +50,9 @@ const initialForm: CollectionCreatePageFormData = {
|
|||
backgroundImageAlt: "",
|
||||
description: convertToRaw(ContentState.createFromText("")),
|
||||
isPublished: false,
|
||||
metadata: [],
|
||||
name: "",
|
||||
privateMetadata: [],
|
||||
publicationDate: "",
|
||||
seoDescription: "",
|
||||
seoTitle: ""
|
||||
|
|
@ -66,122 +67,122 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
|
|||
}: CollectionCreatePageProps) => {
|
||||
const intl = useIntl();
|
||||
const localizeDate = useDateLocalize();
|
||||
const {
|
||||
makeChangeHandler: makeMetadataChangeHandler
|
||||
} = useMetadataChangeTrigger();
|
||||
|
||||
return (
|
||||
<Form initial={initialForm} onSubmit={onSubmit}>
|
||||
{({ change, data, hasChanged, submit }) => (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.collections)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Add Collection",
|
||||
description: "page header"
|
||||
})}
|
||||
/>
|
||||
<Grid>
|
||||
<div>
|
||||
<CollectionDetails
|
||||
data={data}
|
||||
disabled={disabled}
|
||||
errors={errors}
|
||||
onChange={change}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<CollectionImage
|
||||
image={
|
||||
data.backgroundImage.url
|
||||
? {
|
||||
__typename: "Image",
|
||||
alt: data.backgroundImageAlt,
|
||||
url: data.backgroundImage.url
|
||||
}
|
||||
: null
|
||||
}
|
||||
onImageDelete={() =>
|
||||
change({
|
||||
target: {
|
||||
name: "backgroundImage",
|
||||
value: {
|
||||
url: null,
|
||||
value: null
|
||||
}
|
||||
}
|
||||
} as any)
|
||||
}
|
||||
onImageUpload={file =>
|
||||
change({
|
||||
target: {
|
||||
name: "backgroundImage",
|
||||
value: {
|
||||
url: URL.createObjectURL(file),
|
||||
value: file
|
||||
}
|
||||
}
|
||||
} as any)
|
||||
}
|
||||
onChange={change}
|
||||
data={data}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<SeoForm
|
||||
description={data.seoDescription}
|
||||
disabled={disabled}
|
||||
descriptionPlaceholder=""
|
||||
helperText={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Add search engine title and description to make this collection easier to find"
|
||||
})}
|
||||
title={data.seoTitle}
|
||||
titlePlaceholder={data.name}
|
||||
onChange={change}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{({ change, data, hasChanged, submit }) => {
|
||||
const changeMetadata = makeMetadataChangeHandler(change);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<AppHeader onBack={onBack}>
|
||||
{intl.formatMessage(sectionNames.collections)}
|
||||
</AppHeader>
|
||||
<PageHeader
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Add Collection",
|
||||
description: "page header"
|
||||
})}
|
||||
/>
|
||||
<Grid>
|
||||
<div>
|
||||
<Card>
|
||||
<CardTitle
|
||||
title={intl.formatMessage(commonMessages.availability)}
|
||||
/>
|
||||
<CardContent>
|
||||
<VisibilityCard
|
||||
data={data}
|
||||
errors={errors}
|
||||
disabled={disabled}
|
||||
hiddenMessage={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "will be visible from {date}",
|
||||
description: "collection"
|
||||
},
|
||||
{
|
||||
date: localizeDate(data.publicationDate)
|
||||
<CollectionDetails
|
||||
data={data}
|
||||
disabled={disabled}
|
||||
errors={errors}
|
||||
onChange={change}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<CollectionImage
|
||||
image={
|
||||
data.backgroundImage.url
|
||||
? {
|
||||
__typename: "Image",
|
||||
alt: data.backgroundImageAlt,
|
||||
url: data.backgroundImage.url
|
||||
}
|
||||
)}
|
||||
onChange={change}
|
||||
visibleMessage={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "since {date}",
|
||||
description: "collection"
|
||||
},
|
||||
{
|
||||
date: localizeDate(data.publicationDate)
|
||||
: null
|
||||
}
|
||||
onImageDelete={() =>
|
||||
change({
|
||||
target: {
|
||||
name: "backgroundImage",
|
||||
value: {
|
||||
url: null,
|
||||
value: null
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
} as any)
|
||||
}
|
||||
onImageUpload={file =>
|
||||
change({
|
||||
target: {
|
||||
name: "backgroundImage",
|
||||
value: {
|
||||
url: URL.createObjectURL(file),
|
||||
value: file
|
||||
}
|
||||
}
|
||||
} as any)
|
||||
}
|
||||
onChange={change}
|
||||
data={data}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<SeoForm
|
||||
description={data.seoDescription}
|
||||
disabled={disabled}
|
||||
descriptionPlaceholder=""
|
||||
helperText={intl.formatMessage({
|
||||
defaultMessage:
|
||||
"Add search engine title and description to make this collection easier to find"
|
||||
})}
|
||||
title={data.seoTitle}
|
||||
titlePlaceholder={data.name}
|
||||
onChange={change}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<Metadata data={data} onChange={changeMetadata} />
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
<SaveButtonBar
|
||||
state={saveButtonBarState}
|
||||
disabled={disabled || !hasChanged}
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
/>
|
||||
</Container>
|
||||
)}
|
||||
<div>
|
||||
<VisibilityCard
|
||||
data={data}
|
||||
errors={errors}
|
||||
disabled={disabled}
|
||||
hiddenMessage={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "will be visible from {date}",
|
||||
description: "collection"
|
||||
},
|
||||
{
|
||||
date: localizeDate(data.publicationDate)
|
||||
}
|
||||
)}
|
||||
onChange={change}
|
||||
visibleMessage={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "since {date}",
|
||||
description: "collection"
|
||||
},
|
||||
{
|
||||
date: localizeDate(data.publicationDate)
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
<SaveButtonBar
|
||||
state={saveButtonBarState}
|
||||
disabled={disabled || !hasChanged}
|
||||
onCancel={onBack}
|
||||
onSave={submit}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}}
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,11 +2,18 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
|
|||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useNotifier from "@saleor/hooks/useNotifier";
|
||||
import { commonMessages } from "@saleor/intl";
|
||||
import createMetadataCreateHandler from "@saleor/utils/handlers/metadataCreateHandler";
|
||||
import {
|
||||
useMetadataUpdate,
|
||||
usePrivateMetadataUpdate
|
||||
} from "@saleor/utils/metadata/updateMetadata";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { CollectionCreateInput } from "../../types/globalTypes";
|
||||
import CollectionCreatePage from "../components/CollectionCreatePage/CollectionCreatePage";
|
||||
import CollectionCreatePage, {
|
||||
CollectionCreatePageFormData
|
||||
} from "../components/CollectionCreatePage/CollectionCreatePage";
|
||||
import { useCollectionCreateMutation } from "../mutations";
|
||||
import { collectionListUrl, collectionUrl } from "../urls";
|
||||
|
||||
|
|
@ -14,6 +21,8 @@ export const CollectionCreate: React.FC = () => {
|
|||
const navigate = useNavigator();
|
||||
const notify = useNotifier();
|
||||
const intl = useIntl();
|
||||
const [updateMetadata] = useMetadataUpdate({});
|
||||
const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
|
||||
|
||||
const [createCollection, createCollectionOpts] = useCollectionCreateMutation({
|
||||
onCompleted: data => {
|
||||
|
|
@ -38,6 +47,31 @@ export const CollectionCreate: React.FC = () => {
|
|||
}
|
||||
});
|
||||
|
||||
const handleCreate = async (formData: CollectionCreatePageFormData) => {
|
||||
const result = await createCollection({
|
||||
variables: {
|
||||
input: {
|
||||
backgroundImage: formData.backgroundImage.value,
|
||||
backgroundImageAlt: formData.backgroundImageAlt,
|
||||
descriptionJson: JSON.stringify(formData.description),
|
||||
isPublished: formData.isPublished,
|
||||
name: formData.name,
|
||||
seo: {
|
||||
description: formData.seoDescription,
|
||||
title: formData.seoTitle
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return result.data?.collectionCreate.collection?.id || null;
|
||||
};
|
||||
const handleSubmit = createMetadataCreateHandler(
|
||||
handleCreate,
|
||||
updateMetadata,
|
||||
updatePrivateMetadata
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<WindowTitle
|
||||
|
|
@ -50,23 +84,7 @@ export const CollectionCreate: React.FC = () => {
|
|||
errors={createCollectionOpts.data?.collectionCreate.errors || []}
|
||||
onBack={() => navigate(collectionListUrl())}
|
||||
disabled={createCollectionOpts.loading}
|
||||
onSubmit={formData =>
|
||||
createCollection({
|
||||
variables: {
|
||||
input: {
|
||||
backgroundImage: formData.backgroundImage.value,
|
||||
backgroundImageAlt: formData.backgroundImageAlt,
|
||||
descriptionJson: JSON.stringify(formData.description),
|
||||
isPublished: formData.isPublished,
|
||||
name: formData.name,
|
||||
seo: {
|
||||
description: formData.seoDescription,
|
||||
title: formData.seoTitle
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
onSubmit={handleSubmit}
|
||||
saveButtonBarState={createCollectionOpts.status}
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue