From c5bc5cf5792ca8ea19244c098ea938a4b9f9d749 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Mon, 9 Sep 2019 16:07:09 +0200 Subject: [PATCH] Fix visibility card --- src/collections/views/CollectionCreate.tsx | 6 +- src/collections/views/CollectionDetails.tsx | 6 +- src/components/Checkbox/Checkbox.tsx | 10 +- .../RadioGroupField/RadioGroupField.tsx | 30 +++- .../VisibilityCard/VisibilityCard.tsx | 157 ++++++++++++------ src/configuration/ConfigurationPage.tsx | 6 +- .../CustomerAddress/CustomerAddress.tsx | 2 - src/pages/views/PageCreate.tsx | 16 +- src/pages/views/PageDetails.tsx | 39 ++--- src/products/views/ProductCreate.tsx | 6 +- src/products/views/ProductUpdate/handlers.ts | 5 +- 11 files changed, 179 insertions(+), 104 deletions(-) diff --git a/src/collections/views/CollectionCreate.tsx b/src/collections/views/CollectionCreate.tsx index 9b747b30e..bf46fc536 100644 --- a/src/collections/views/CollectionCreate.tsx +++ b/src/collections/views/CollectionCreate.tsx @@ -63,7 +63,11 @@ export const CollectionCreate: React.FC = () => { backgroundImage: formData.backgroundImage.value, backgroundImageAlt: formData.backgroundImageAlt, descriptionJson: JSON.stringify(formData.description), - isPublished: formData.isPublished, + isPublished: + typeof formData.isPublished !== "boolean" && + formData.isPublished === "true" + ? true + : false, name: formData.name, seo: { description: formData.seoDescription, diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index 9d1668512..de83510b4 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -148,7 +148,11 @@ export const CollectionDetails: React.StatelessComponent< const input: CollectionInput = { backgroundImageAlt: formData.backgroundImageAlt, descriptionJson: JSON.stringify(formData.description), - isPublished: formData.isPublished, + isPublished: + typeof formData.isPublished !== "boolean" && + formData.isPublished === "true" + ? true + : false, name: formData.name, publicationDate: formData.publicationDate, seo: { diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 3a71618b9..0ca2cfb9a 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -31,8 +31,8 @@ const styles = (theme: Theme) => "&$checked": { "&:before": { background: theme.palette.primary.main, - content: '"\\2713"', color: theme.palette.common.white, + content: '"\\2713"', fontWeight: "bold", textAlign: "center" }, @@ -74,17 +74,17 @@ const styles = (theme: Theme) => disabled: {}, indeterminate: {}, root: { + "&:hover": { + background: fade(theme.palette.primary.main, 0.1) + }, alignItems: "center", borderRadius: "100%", cursor: "pointer", display: "flex", height: 30, justifyContent: "center", - width: 30, margin: 9, - "&:hover": { - background: fade(theme.palette.primary.main, 0.1) - } + width: 30 } }); const Checkbox = withStyles(styles, { name: "Checkbox" })( diff --git a/src/components/RadioGroupField/RadioGroupField.tsx b/src/components/RadioGroupField/RadioGroupField.tsx index 3c97b2ef7..f16f24c6d 100644 --- a/src/components/RadioGroupField/RadioGroupField.tsx +++ b/src/components/RadioGroupField/RadioGroupField.tsx @@ -21,6 +21,10 @@ const styles = createStyles({ }, radioLabel: { "& > span": { + "& > span": { + display: "block", + fontSize: "12px" + }, padding: "6px" } } @@ -30,6 +34,7 @@ interface RadioGroupFieldProps extends WithStyles { choices: Array<{ value: string; label: string | React.ReactNode; + secondLabel?: string | React.ReactNode; }>; className?: string; disabled?: boolean; @@ -72,15 +77,22 @@ export const RadioGroupField = withStyles(styles, { onChange={onChange} > {choices.length > 0 ? ( - choices.map(choice => ( - } - label={choice.label} - key={choice.value} - /> - )) + choices.map(choice => { + return ( + } + label={ + <> + {choice.label} + {choice.secondLabel} + + } + key={choice.value} + /> + ); + }) ) : ( diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index 610e07e49..594330299 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -7,12 +7,13 @@ import { WithStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; import React from "react"; import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; -import ControlledSwitch from "@saleor/components/ControlledSwitch"; import { FormSpacer } from "@saleor/components/FormSpacer"; +import RadioGroupField from "@saleor/components/RadioGroupField"; import useDateLocalize from "@saleor/hooks/useDateLocalize"; import { DateContext } from "../Date/DateContext"; @@ -22,12 +23,25 @@ const styles = (theme: Theme) => "& svg": { fill: theme.palette.primary.main }, - marginTop: theme.spacing.unit * 4 + marginTop: theme.spacing.unit * 3 }, expandedSwitchContainer: { + "& > div": { + padding: 0 + }, marginBottom: 0 }, + setPublicationDate: { + color: theme.palette.primary.main, + cursor: "pointer", + fontSize: "14px", + paddingTop: "15px", + textDecoration: "underline" + }, switchContainer: { + "& > div": { + padding: 0 + }, marginBottom: -theme.spacing.unit } }); @@ -55,8 +69,60 @@ export const VisibilityCard = withStyles(styles, { onChange }: VisibilityCardProps) => { const intl = useIntl(); + const [isPublicationDate, setPublicationDate] = React.useState( + publicationDate === null ? true : false + ); const localizeDate = useDateLocalize(); const dateNow = React.useContext(DateContext); + const isPublishedRadio = + typeof isPublished !== "boolean" + ? isPublished + : isPublished + ? "true" + : "false"; + const visibleSecondLabel = publicationDate + ? isPublished + ? intl.formatMessage( + { + defaultMessage: "since {date}" + }, + { + date: localizeDate(publicationDate) + } + ) + : null + : null; + const hiddenSecondLabel = publicationDate + ? isPublished + ? null + : Date.parse(publicationDate) > dateNow + ? intl.formatMessage( + { + defaultMessage: "will be visible from {date}" + }, + { + date: localizeDate(publicationDate) + } + ) + : null + : null; + + const visiblilityPickerChoices = [ + { + label: intl.formatMessage({ + defaultMessage: "Visible" + }), + secondLabel: visibleSecondLabel, + value: "true" + }, + { + label: intl.formatMessage({ + defaultMessage: "Hidden" + }), + secondLabel: hiddenSecondLabel, + value: "false" + } + ]; return ( - dateNow - ? intl.formatMessage( - { - defaultMessage: "will be visible from {date}" - }, - { - date: localizeDate(publicationDate) - } - ) - : null - : null - } - checked={isPublished} - onChange={onChange} + - {!isPublished && ( + {isPublishedRadio === "false" && ( <> - + {!isPublicationDate && ( + setPublicationDate(!isPublicationDate)} + > + {" "} + Set publication date + + )} + {isPublicationDate && ( + + )} )} diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx index 344d63bfb..d6d8c96fc 100644 --- a/src/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.tsx @@ -53,14 +53,14 @@ const styles = (theme: Theme) => marginBottom: theme.spacing.unit * 3 }, configurationCategory: { - borderTop: `solid 1px #eaeaea`, - paddingTop: theme.spacing.unit * 3 + "px", [theme.breakpoints.down("md")]: { gridTemplateColumns: "1fr" }, + borderTop: `solid 1px #eaeaea`, display: "grid", gridColumnGap: theme.spacing.unit * 4 + "px", - gridTemplateColumns: "1fr 3fr" + gridTemplateColumns: "1fr 3fr", + paddingTop: theme.spacing.unit * 3 + "px" }, configurationItem: { display: "grid", diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx index ce26576f2..cc3da80ab 100644 --- a/src/customers/components/CustomerAddress/CustomerAddress.tsx +++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx @@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; -import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -44,7 +43,6 @@ const styles = createStyles({ const CustomerAddress = withStyles(styles, { name: "CustomerAddress" })( ({ address, - addressNumber, classes, disabled, isDefaultBillingAddress, diff --git a/src/pages/views/PageCreate.tsx b/src/pages/views/PageCreate.tsx index 38e8d83fd..44cd84e63 100644 --- a/src/pages/views/PageCreate.tsx +++ b/src/pages/views/PageCreate.tsx @@ -54,16 +54,16 @@ export const PageCreate: React.StatelessComponent = () => { page={null} onBack={() => navigate(pageListUrl())} onRemove={() => undefined} - onSubmit={formData => + onSubmit={formData => { pageCreate({ variables: { input: { contentJson: JSON.stringify(formData.content), - isPublished: formData.isPublished - ? true - : formData.publicationDate === "" - ? false - : true, + isPublished: + typeof formData.isPublished !== "boolean" && + formData.isPublished === "true" + ? true + : false, publicationDate: formData.isPublished ? null : formData.publicationDate === "" @@ -77,8 +77,8 @@ export const PageCreate: React.StatelessComponent = () => { title: formData.title } } - }) - } + }); + }} /> ); diff --git a/src/pages/views/PageDetails.tsx b/src/pages/views/PageDetails.tsx index 066554652..abdb1e668 100644 --- a/src/pages/views/PageDetails.tsx +++ b/src/pages/views/PageDetails.tsx @@ -19,25 +19,26 @@ export interface PageDetailsProps { params: PageUrlQueryParams; } -const createPageInput = (data: FormData): PageInput => ({ - contentJson: JSON.stringify(data.content), - isPublished: data.isPublished - ? true - : data.publicationDate === "" || data.publicationDate === null - ? false - : true, - publicationDate: data.isPublished - ? null - : data.publicationDate === "" - ? null - : data.publicationDate, - seo: { - description: data.seoDescription, - title: data.seoTitle - }, - slug: data.slug === "" ? null : data.slug, - title: data.title -}); +const createPageInput = (data: FormData): PageInput => { + return { + contentJson: JSON.stringify(data.content), + isPublished: + typeof data.isPublished !== "boolean" && data.isPublished === "true" + ? true + : false, + publicationDate: data.isPublished + ? null + : data.publicationDate === "" + ? null + : data.publicationDate, + seo: { + description: data.seoDescription, + title: data.seoTitle + }, + slug: data.slug === "" ? null : data.slug, + title: data.title + }; +}; export const PageDetails: React.StatelessComponent = ({ id, diff --git a/src/products/views/ProductCreate.tsx b/src/products/views/ProductCreate.tsx index e3528a3b3..e4c80f1e0 100644 --- a/src/products/views/ProductCreate.tsx +++ b/src/products/views/ProductCreate.tsx @@ -83,7 +83,11 @@ export const ProductUpdate: React.StatelessComponent< descriptionJson: JSON.stringify( formData.description ), - isPublished: formData.isPublished, + isPublished: + typeof formData.isPublished !== "boolean" && + formData.isPublished === "true" + ? true + : false, name: formData.name, productType: formData.productType, publicationDate: diff --git a/src/products/views/ProductUpdate/handlers.ts b/src/products/views/ProductUpdate/handlers.ts index fd356f33a..c35720ae0 100644 --- a/src/products/views/ProductUpdate/handlers.ts +++ b/src/products/views/ProductUpdate/handlers.ts @@ -25,7 +25,10 @@ export function createUpdateHandler( collections: data.collections, descriptionJson: JSON.stringify(data.description), id: product.id, - isPublished: data.isPublished, + isPublished: + typeof data.isPublished !== "boolean" && data.isPublished === "true" + ? true + : false, name: data.name, publicationDate: data.publicationDate !== "" ? data.publicationDate : null,