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

Fix visibility card

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-09 16:07:09 +02:00
parent af88d66d11
commit c5bc5cf579
11 changed files with 179 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/collections/views/CollectionCreate.tsx
View file

@ -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,

6
src/collections/views/CollectionDetails.tsx
View file

@ -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: {

10
src/components/Checkbox/Checkbox.tsx
View file

@ -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" })(

30
src/components/RadioGroupField/RadioGroupField.tsx
View file

@ -21,6 +21,10 @@ const styles = createStyles({
},
radioLabel: {
"& > span": {
"& > span": {
display: "block",
fontSize: "12px"
},
padding: "6px"
}
}
@ -30,6 +34,7 @@ interface RadioGroupFieldProps extends WithStyles<typeof styles> {
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 => (
<FormControlLabel
value={choice.value}
className={classes.radioLabel}
control={<Radio color="primary" />}
label={choice.label}
key={choice.value}
/>
))
choices.map(choice => {
return (
<FormControlLabel
value={choice.value}
className={classes.radioLabel}
control={<Radio color="primary" />}
label={
<>
{choice.label}
<span>{choice.secondLabel}</span>
</>
}
key={choice.value}
/>
);
})
) : (
<MenuItem disabled={true}>
<FormattedMessage defaultMessage="No results found" />

157
src/components/VisibilityCard/VisibilityCard.tsx
View file

@ -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 (
<Card>
<CardTitle
@ -73,62 +139,45 @@ export const VisibilityCard = withStyles(styles, {
: classes.switchContainer
}
>
<ControlledSwitch
name="isPublished"
label={intl.formatMessage({
defaultMessage: "Visible"
})}
uncheckedLabel={intl.formatMessage({
defaultMessage: "Hidden"
})}
secondLabel={
publicationDate
? isPublished
? intl.formatMessage(
{
defaultMessage: "since {date}"
},
{
date: localizeDate(publicationDate)
}
)
: Date.parse(publicationDate) > dateNow
? intl.formatMessage(
{
defaultMessage: "will be visible from {date}"
},
{
date: localizeDate(publicationDate)
}
)
: null
: null
}
checked={isPublished}
onChange={onChange}
<RadioGroupField
choices={visiblilityPickerChoices}
disabled={disabled}
name={"isPublished" as keyof FormData}
value={isPublishedRadio}
onChange={onChange}
/>
</div>
{!isPublished && (
{isPublishedRadio === "false" && (
<>
<TextField
error={!!errors.publicationDate}
disabled={disabled}
label={intl.formatMessage({
defaultMessage: "Publish on",
description: "publish on date"
})}
name="publicationDate"
type="date"
fullWidth={true}
helperText={errors.publicationDate}
value={publicationDate ? publicationDate : ""}
onChange={onChange}
className={classes.date}
InputLabelProps={{
shrink: true
}}
/>
{!isPublicationDate && (
<Typography
className={classes.setPublicationDate}
onClick={() => setPublicationDate(!isPublicationDate)}
>
{" "}
Set publication date
</Typography>
)}
{isPublicationDate && (
<TextField
error={!!errors.publicationDate}
disabled={disabled}
label={intl.formatMessage({
defaultMessage: "Publish on",
description: "publish on date"
})}
name="publicationDate"
type="date"
fullWidth={true}
helperText={errors.publicationDate}
value={publicationDate ? publicationDate : ""}
onChange={onChange}
className={classes.date}
InputLabelProps={{
shrink: true
}}
/>
)}
</>
)}
<FormSpacer />

6
src/configuration/ConfigurationPage.tsx
View file

@ -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",

2
src/customers/components/CustomerAddress/CustomerAddress.tsx
View file

@ -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,

16
src/pages/views/PageCreate.tsx
View file

@ -54,16 +54,16 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
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<PageCreateProps> = () => {
title: formData.title
}
}
})
}
});
}}
/>
</>
);

39
src/pages/views/PageDetails.tsx
View file

@ -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<PageDetailsProps> = ({
id,

6
src/products/views/ProductCreate.tsx
View file

@ -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:

5
src/products/views/ProductUpdate/handlers.ts
View file

@ -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,