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

Refactor translations in pages section (#124)

Browse source
This commit is contained in:
Dominik Żegleń 2019-08-26 19:48:13 +02:00 committed by dominik-zeglen
parent 3d2d56e227
commit c214cc298d
11 changed files with 599 additions and 253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

238
locale/messages.pot
View file

@ -1,6 +1,6 @@
msgid ""
msgstr ""
"POT-Creation-Date: 2019-08-26T17:42:51.721Z\n"
"POT-Creation-Date: 2019-08-26T17:47:33.625Z\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"MIME-Version: 1.0\n"
@ -75,6 +75,14 @@ msgctxt "button"
msgid "Add Menu"
msgstr ""
#: build/locale/src/pages/components/PageDetailsPage/PageDetailsPage.json
#. [src.pages.components.PageDetailsPage.755314116] - page header
#. defaultMessage is:
#. Add Page
msgctxt "page header"
msgid "Add Page"
msgstr ""
#: build/locale/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.json
#. [src.orders.components.OrderProductAddDialog.2775402904] - dialog header
#. defaultMessage is:
@ -171,6 +179,14 @@ msgctxt "description"
msgid "Add new menu item to begin creating menu"
msgstr ""
#: build/locale/src/pages/components/PageListPage/PageListPage.json
#. [src.pages.components.PageListPage.1767905232] - button
#. defaultMessage is:
#. Add page
msgctxt "button"
msgid "Add page"
msgstr ""
#: build/locale/src/categories/components/CategoryProducts/CategoryProducts.json
#. [src.categories.components.CategoryProducts.3554578821] - button
#. defaultMessage is:
@ -215,6 +231,14 @@ msgctxt "description"
msgid "Add search engine title and description to make this collection easier to find"
msgstr ""
#: build/locale/src/pages/components/PageDetailsPage/PageDetailsPage.json
#. [src.pages.components.PageDetailsPage.1996767833]
#. defaultMessage is:
#. Add search engine title and description to make this page easier to find
msgctxt "description"
msgid "Add search engine title and description to make this page easier to find"
msgstr ""
#: build/locale/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.json
#. [src.orders.components.OrderDraftDetailsSummary.2429341469] - button
#. defaultMessage is:
@ -507,6 +531,14 @@ msgctxt "dialog content"
msgid "Are you sure you want to delete {counter,plural,one{this order draft} other{{displayQuantity} orderDrafts}}?"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.3382708469] - dialog content
#. defaultMessage is:
#. Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?
msgctxt "dialog content"
msgid "Are you sure you want to delete {counter,plural,one{this page} other{{displayQuantity} pages}}?"
msgstr ""
#: build/locale/src/discounts/views/SaleList.json
#. [src.discounts.views.2516361175] - dialog content
#. defaultMessage is:
@ -547,6 +579,14 @@ msgctxt "dialog content"
msgid "Are you sure you want to delete {saleName}?"
msgstr ""
#: build/locale/src/pages/views/PageDetails.json
#. [src.pages.views.754348000] - delete page
#. defaultMessage is:
#. Are you sure you want to delete {title}?
msgctxt "delete page"
msgid "Are you sure you want to delete {title}?"
msgstr ""
#: build/locale/src/discounts/views/VoucherDetails.json
#. [src.discounts.views.3261917848] - dialog content
#. defaultMessage is:
@ -579,6 +619,14 @@ msgctxt "description"
msgid "Are you sure you want to publish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.504298570] - dialog content
#. defaultMessage is:
#. Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?
msgctxt "dialog content"
msgid "Are you sure you want to publish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
msgstr ""
#: build/locale/src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.json
#. [src.orders.components.OrderDraftCancelDialog.3199827590]
#. defaultMessage is:
@ -639,6 +687,14 @@ msgctxt "description"
msgid "Are you sure you want to unpublish {counter,plural,one{this collection} other{{displayQuantity} collections}}?"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.691980200] - dialog content
#. defaultMessage is:
#. Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?
msgctxt "dialog content"
msgid "Are you sure you want to unpublish {counter,plural,one{this page} other{{displayQuantity} pages}}?"
msgstr ""
#: build/locale/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.json
#. [src.orders.components.OrderPaymentVoidDialog.2217048637]
#. defaultMessage is:
@ -1035,6 +1091,14 @@ msgctxt "subheader"
msgid "Contact information"
msgstr ""
#: build/locale/src/pages/components/PageInfo/PageInfo.json
#. [src.pages.components.PageInfo.1116746286] - page content
#. defaultMessage is:
#. Content
msgctxt "page content"
msgid "Content"
msgstr ""
#: build/locale/src/orders/views/OrderDetails/OrderDetailsMessages.json
#. [src.orders.views.OrderDetails.2714957902]
#. defaultMessage is:
@ -1199,6 +1263,14 @@ msgctxt "button"
msgid "Create order"
msgstr ""
#: build/locale/src/pages/views/PageCreate.json
#. [src.pages.views.3785394515] - header
#. defaultMessage is:
#. Create page
msgctxt "header"
msgid "Create page"
msgstr ""
#: build/locale/src/collections/views/CollectionCreate.json
#. [src.collections.views.1597339737]
#. defaultMessage is:
@ -1447,6 +1519,22 @@ msgctxt "dialog header"
msgid "Delete Order Drafts"
msgstr ""
#: build/locale/src/pages/views/PageDetails.json
#. [src.pages.views.3246254285] - dialog header
#. defaultMessage is:
#. Delete Page
msgctxt "dialog header"
msgid "Delete Page"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.2782958373] - dialog header
#. defaultMessage is:
#. Delete Pages
msgctxt "dialog header"
msgid "Delete Pages"
msgstr ""
#: build/locale/src/discounts/views/SaleDetails.json
#. [src.discounts.views.506030254] - dialog header
#. defaultMessage is:
@ -2039,6 +2127,14 @@ msgctxt "subheader"
msgid "Here is some information we gathered about your store"
msgstr ""
#: build/locale/src/pages/components/PageSlug/PageSlug.json
#. [src.pages.components.PageSlug.4210828158]
#. defaultMessage is:
#. If empty, URL will be autogenerated from Page Name
msgctxt "description"
msgid "If empty, URL will be autogenerated from Page Name"
msgstr ""
#: build/locale/src/attributes/components/AttributeProperties/AttributeProperties.json
#. [src.attributes.components.AttributeProperties.787251583]
#. defaultMessage is:
@ -2479,6 +2575,14 @@ msgctxt "description"
msgid "No orders ready to fulfill"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.2489163252]
#. defaultMessage is:
#. No pages found
msgctxt "description"
msgid "No pages found"
msgstr ""
#: build/locale/src/home/components/HomeNotificationTable/HomeNotificationTable.json
#. [homeNotificationsNoPayments]
#. defaultMessage is:
@ -2623,6 +2727,14 @@ msgctxt "voucher has no requirements"
msgid "None"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.3767550649] - page status
#. defaultMessage is:
#. Not Published
msgctxt "page status"
msgid "Not Published"
msgstr ""
#: build/locale/src/collections/components/CollectionList/CollectionList.json
#. [src.collections.components.CollectionList.2341910657] - collection is not published
#. defaultMessage is:
@ -2719,6 +2831,14 @@ msgctxt "voucher application, switch button"
msgid "Only once per order"
msgstr ""
#: build/locale/src/intl.json
#. [src.optionalField] - field is optional
#. defaultMessage is:
#. Optional
msgctxt "field is optional"
msgid "Optional"
msgstr ""
#: build/locale/src/orders/components/OrderDraftDetails/OrderDraftDetails.json
#. [src.orders.components.OrderDraftDetails.2343989342] - section header
#. defaultMessage is:
@ -3183,6 +3303,22 @@ msgctxt "publish collections"
msgid "Publish"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.1547167026] - publish page, button
#. defaultMessage is:
#. Publish
msgctxt "publish page, button"
msgid "Publish"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.2321087286] - dialog header
#. defaultMessage is:
#. Publish Pages
msgctxt "dialog header"
msgid "Publish Pages"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [src.collections.views.2823425739] - dialog title
#. defaultMessage is:
@ -3211,6 +3347,22 @@ msgctxt "product is published"
msgid "Published"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.3640454975] - page status
#. defaultMessage is:
#. Published
msgctxt "page status"
msgid "Published"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.2543350562] - notification
#. defaultMessage is:
#. Published pages
msgctxt "notification"
msgid "Published pages"
msgstr ""
#: build/locale/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.json
#. [src.orders.components.OrderDraftDetailsProducts.2796503714] - quantity of ordered products
#. defaultMessage is:
@ -3327,6 +3479,22 @@ msgctxt "description"
msgid "Removed draft orders"
msgstr ""
#: build/locale/src/pages/views/PageDetails.json
#. [src.pages.views.1457312643]
#. defaultMessage is:
#. Removed page
msgctxt "description"
msgid "Removed page"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.1080715663] - notification
#. defaultMessage is:
#. Removed pages
msgctxt "notification"
msgid "Removed pages"
msgstr ""
#: build/locale/src/discounts/views/SaleDetails.json
#. [src.discounts.views.2534378844]
#. defaultMessage is:
@ -3559,6 +3727,18 @@ msgctxt "site settings section name"
msgid "Site Settings"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.3478065224] - page internal name
#. defaultMessage is:
#. Slug
#: build/locale/src/pages/components/PageSlug/PageSlug.json
#. [src.pages.components.PageSlug.3478065224] - page internal name
#. defaultMessage is:
#. Slug
msgctxt "page internal name"
msgid "Slug"
msgstr ""
#: build/locale/src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.json
#. [src.orders.components.OrderDraftFinalizeDialog.2968256006]
#. defaultMessage is:
@ -3687,6 +3867,14 @@ msgctxt "description"
msgid "Successfully created attribute"
msgstr ""
#: build/locale/src/pages/views/PageCreate.json
#. [src.pages.views.2680158037]
#. defaultMessage is:
#. Successfully created new page
msgctxt "description"
msgid "Successfully created new page"
msgstr ""
#: build/locale/src/discounts/views/SaleCreate.json
#. [src.discounts.views.3707049729]
#. defaultMessage is:
@ -3807,6 +3995,22 @@ msgctxt "time during which sale is active"
msgid "Time Frame"
msgstr ""
#: build/locale/src/pages/components/PageInfo/PageInfo.json
#. [src.pages.components.PageInfo.1124600214] - page title
#. defaultMessage is:
#. Title
msgctxt "page title"
msgid "Title"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.1124600214] - dialog header
#. defaultMessage is:
#. Title
msgctxt "dialog header"
msgid "Title"
msgstr ""
#: build/locale/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.json
#. [homeAnalyticsCardHeader]
#. defaultMessage is:
@ -3919,6 +4123,14 @@ msgctxt "product type"
msgid "Type"
msgstr ""
#: build/locale/src/pages/components/PageSlug/PageSlug.json
#. [src.pages.components.PageSlug.1324178587]
#. defaultMessage is:
#. URL
msgctxt "description"
msgid "URL"
msgstr ""
#: build/locale/src/collections/views/CollectionDetails.json
#. [src.collections.views.870815507] - unassign product from collection, button
#. defaultMessage is:
@ -4063,6 +4275,22 @@ msgctxt "unpublish collections"
msgid "Unpublish"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.2237014112] - unpublish page, button
#. defaultMessage is:
#. Unpublish
msgctxt "unpublish page, button"
msgid "Unpublish"
msgstr ""
#: build/locale/src/pages/views/PageList.json
#. [src.pages.views.158565417] - dialog header
#. defaultMessage is:
#. Unpublish Pages
msgctxt "dialog header"
msgid "Unpublish Pages"
msgstr ""
#: build/locale/src/collections/views/CollectionList.json
#. [src.collections.views.2637364047] - dialog title
#. defaultMessage is:
@ -4223,6 +4451,14 @@ msgctxt "description"
msgid "View and update your site settings"
msgstr ""
#: build/locale/src/pages/components/PageList/PageList.json
#. [src.pages.components.PageList.1459686496] - page status
#. defaultMessage is:
#. Visibility
msgctxt "page status"
msgid "Visibility"
msgstr ""
#: build/locale/src/attributes/components/AttributeList/AttributeList.json
#. [src.attributes.components.AttributeList.643174786] - attribute is visible
#. defaultMessage is:

4
src/intl.ts
View file

@ -28,6 +28,10 @@ export const commonMessages = defineMessages({
lastName: {
defaultMessage: "Last Name"
},
optionalField: {
defaultMessage: "Optional",
description: "field is optional"
},
properties: {
defaultMessage: "Properties"
},

21
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -5,6 +5,7 @@ import {
RawDraftContentState
} from "draft-js";
import React from "react";
import { useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader";
import CardSpacer from "@saleor/components/CardSpacer";
@ -16,7 +17,7 @@ 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 i18n from "../../../i18n";
import { sectionNames } from "@saleor/intl";
import { maybe } from "../../../misc";
import { UserError } from "../../../types";
import { PageDetails_page } from "../../types/PageDetails";
@ -52,6 +53,8 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
onRemove,
onSubmit
}) => {
const intl = useIntl();
const initialForm: FormData = {
content: maybe(
() => JSON.parse(page.contentJson),
@ -68,12 +71,15 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
{({ change, data, errors: formErrors, hasChanged, submit }) => (
<Container>
<AppHeader onBack={onBack}>{i18n.t("Pages")}</AppHeader>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.pages)}
</AppHeader>
<PageHeader
title={
page === null
? i18n.t("Add Page", {
context: "header"
? intl.formatMessage({
defaultMessage: "Add Page",
description: "page header"
})
: maybe(() => page.title)
}
@ -99,9 +105,10 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
onChange={change}
title={data.seoTitle}
titlePlaceholder={data.title}
helperText={i18n.t(
"Add search engine title and description to make this page easier to find"
)}
helperText={intl.formatMessage({
defaultMessage:
"Add search engine title and description to make this page easier to find"
})}
/>
</div>
<div>

67
src/pages/components/PageInfo/PageInfo.tsx
View file

@ -3,11 +3,12 @@ import CardContent from "@material-ui/core/CardContent";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import FormSpacer from "@saleor/components/FormSpacer";
import RichTextEditor from "@saleor/components/RichTextEditor";
import i18n from "../../../i18n";
import { commonMessages } from "@saleor/intl";
import { maybe } from "../../../misc";
import { FormErrors } from "../../../types";
import { PageDetails_page } from "../../types/PageDetails";
@ -37,33 +38,45 @@ const PageInfo = withStyles(styles, {
errors,
page,
onChange
}: PageInfoProps & WithStyles<typeof styles>) => (
<Card className={classes.root}>
<CardTitle title={i18n.t("General Information")} />
<CardContent>
<TextField
disabled={disabled}
error={!!errors.title}
fullWidth
helperText={errors.title}
label={i18n.t("Title")}
name={"title" as keyof FormData}
value={data.title}
onChange={onChange}
}: PageInfoProps & WithStyles<typeof styles>) => {
const intl = useIntl();
return (
<Card className={classes.root}>
<CardTitle
title={intl.formatMessage(commonMessages.generalInformations)}
/>
<FormSpacer />
<RichTextEditor
disabled={disabled}
error={!!errors.contentJson}
helperText={errors.contentJson}
initial={maybe(() => JSON.parse(page.contentJson))}
label={i18n.t("Content")}
name={"content" as keyof FormData}
onChange={onChange}
/>
</CardContent>
</Card>
)
<CardContent>
<TextField
disabled={disabled}
error={!!errors.title}
fullWidth
helperText={errors.title}
label={intl.formatMessage({
defaultMessage: "Title",
description: "page title"
})}
name={"title" as keyof FormData}
value={data.title}
onChange={onChange}
/>
<FormSpacer />
<RichTextEditor
disabled={disabled}
error={!!errors.contentJson}
helperText={errors.contentJson}
initial={maybe(() => JSON.parse(page.contentJson))}
label={intl.formatMessage({
defaultMessage: "Content",
description: "page content"
})}
name={"content" as keyof FormData}
onChange={onChange}
/>
</CardContent>
</Card>
);
}
);
PageInfo.displayName = "PageInfo";
export default PageInfo;

205
src/pages/components/PageList/PageList.tsx
View file

@ -11,13 +11,13 @@ import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
import i18n from "@saleor/i18n";
import { maybe, renderCollection } from "@saleor/misc";
import { ListActions, ListProps } from "@saleor/types";
import { PageList_pages_edges_node } from "../../types/PageList";
@ -63,100 +63,121 @@ const PageList = withStyles(styles, { name: "PageList" })(
toggle,
toggleAll,
toolbar
}: PageListProps & WithStyles<typeof styles>) => (
<Card>
<Table>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={pages}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colTitle} padding="dense">
{i18n.t("Title", { context: "table header" })}
</TableCell>
<TableCell className={classes.colSlug} padding="dense">
{i18n.t("Slug", { context: "table header" })}
</TableCell>
<TableCell className={classes.colVisibility} padding="dense">
{i18n.t("Visibility", { context: "table header" })}
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
pages,
page => {
const isSelected = page ? isChecked(page.id) : false;
}: PageListProps & WithStyles<typeof styles>) => {
const intl = useIntl();
return (
<TableRow
hover={!!page}
className={!!page ? classes.link : undefined}
onClick={page ? onRowClick(page.id) : undefined}
key={page ? page.id : "skeleton"}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(page.id)}
/>
</TableCell>
<TableCell className={classes.colTitle}>
{maybe<React.ReactNode>(() => page.title, <Skeleton />)}
</TableCell>
<TableCell className={classes.colSlug}>
{maybe<React.ReactNode>(() => page.slug, <Skeleton />)}
</TableCell>
<TableCell className={classes.colVisibility}>
{maybe<React.ReactNode>(
() => (
<StatusLabel
label={
page.isPublished
? i18n.t("Published")
: i18n.t("Not Published")
}
status={page.isPublished ? "success" : "error"}
/>
),
<Skeleton />
)}
return (
<Card>
<Table>
<TableHead
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={pages}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCell className={classes.colTitle} padding="dense">
<FormattedMessage
defaultMessage="Title"
description="dialog header"
/>
</TableCell>
<TableCell className={classes.colSlug} padding="dense">
<FormattedMessage
defaultMessage="Slug"
description="page internal name"
/>
</TableCell>
<TableCell className={classes.colVisibility} padding="dense">
<FormattedMessage
defaultMessage="Visibility"
description="page status"
/>
</TableCell>
</TableHead>
<TableFooter>
<TableRow>
<TablePagination
colSpan={numberOfColumns}
settings={settings}
hasNextPage={
pageInfo && !disabled ? pageInfo.hasNextPage : false
}
onNextPage={onNextPage}
onUpdateListSettings={onUpdateListSettings}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
}
onPreviousPage={onPreviousPage}
/>
</TableRow>
</TableFooter>
<TableBody>
{renderCollection(
pages,
page => {
const isSelected = page ? isChecked(page.id) : false;
return (
<TableRow
hover={!!page}
className={!!page ? classes.link : undefined}
onClick={page ? onRowClick(page.id) : undefined}
key={page ? page.id : "skeleton"}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
disabled={disabled}
disableClickPropagation
onChange={() => toggle(page.id)}
/>
</TableCell>
<TableCell className={classes.colTitle}>
{maybe<React.ReactNode>(() => page.title, <Skeleton />)}
</TableCell>
<TableCell className={classes.colSlug}>
{maybe<React.ReactNode>(() => page.slug, <Skeleton />)}
</TableCell>
<TableCell className={classes.colVisibility}>
{maybe<React.ReactNode>(
() => (
<StatusLabel
label={
page.isPublished
? intl.formatMessage({
defaultMessage: "Published",
description: "page status"
})
: intl.formatMessage({
defaultMessage: "Not Published",
description: "page status"
})
}
status={page.isPublished ? "success" : "error"}
/>
),
<Skeleton />
)}
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="No pages found" />
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
{i18n.t("No pages found")}
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
</Card>
)
)
)}
</TableBody>
</Table>
</Card>
);
}
);
PageList.displayName = "PageList";
export default PageList;

69
src/pages/components/PageListPage/PageListPage.tsx
View file

@ -1,11 +1,12 @@
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import i18n from "@saleor/i18n";
import { sectionNames } from "@saleor/intl";
import { ListActions, PageListProps } from "@saleor/types";
import { PageList_pages_edges_node } from "../../types/PageList";
import PageList from "../PageList/PageList";
@ -31,36 +32,42 @@ const PageListPage: React.StatelessComponent<PageListPageProps> = ({
toggle,
toggleAll,
toolbar
}) => (
<Container>
<AppHeader onBack={onBack}>{i18n.t("Configuration")}</AppHeader>
<PageHeader title={i18n.t("Pages")}>
<Button
}) => {
const intl = useIntl();
return (
<Container>
<AppHeader onBack={onBack}>
{intl.formatMessage(sectionNames.configuration)}
</AppHeader>
<PageHeader title={intl.formatMessage(sectionNames.pages)}>
<Button
disabled={disabled}
onClick={onAdd}
variant="contained"
color="primary"
>
<FormattedMessage defaultMessage="Add page" description="button" />
<AddIcon />
</Button>
</PageHeader>
<PageList
disabled={disabled}
onClick={onAdd}
variant="contained"
color="primary"
>
{i18n.t("Add page")}
<AddIcon />
</Button>
</PageHeader>
<PageList
disabled={disabled}
settings={settings}
pages={pages}
onNextPage={onNextPage}
onPreviousPage={onPreviousPage}
onUpdateListSettings={onUpdateListSettings}
onRowClick={onRowClick}
pageInfo={pageInfo}
isChecked={isChecked}
selected={selected}
toggle={toggle}
toggleAll={toggleAll}
toolbar={toolbar}
/>
</Container>
);
settings={settings}
pages={pages}
onNextPage={onNextPage}
onPreviousPage={onPreviousPage}
onUpdateListSettings={onUpdateListSettings}
onRowClick={onRowClick}
pageInfo={pageInfo}
isChecked={isChecked}
selected={selected}
toggle={toggle}
toggleAll={toggleAll}
toolbar={toolbar}
/>
</Container>
);
};
PageListPage.displayName = "PageListPage";
export default PageListPage;

56
src/pages/components/PageSlug/PageSlug.tsx
View file

@ -2,10 +2,10 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import React from "react";
import { useIntl } from "react-intl";
import slugify from "slugify";
import CardTitle from "@saleor/components/CardTitle";
import i18n from "../../../i18n";
import { FormData } from "../PageDetailsPage";
export interface PageSlugProps {
@ -20,26 +20,40 @@ const PageSlug: React.StatelessComponent<PageSlugProps> = ({
disabled,
errors,
onChange
}) => (
<Card>
<CardTitle title={i18n.t("URL")} />
<CardContent>
<TextField
name={"slug" as keyof FormData}
disabled={disabled}
error={!!errors.slug}
label={i18n.t("Slug")}
helperText={
errors.slug ||
i18n.t("If empty, URL will be autogenerated from Page Name")
}
placeholder={slugify(data.title)}
value={data.slug}
onChange={onChange}
fullWidth
}) => {
const intl = useIntl();
return (
<Card>
<CardTitle
title={intl.formatMessage({
defaultMessage: "URL"
})}
/>
</CardContent>
</Card>
);
<CardContent>
<TextField
name={"slug" as keyof FormData}
disabled={disabled}
error={!!errors.slug}
label={intl.formatMessage({
defaultMessage: "Slug",
description: "page internal name"
})}
helperText={
errors.slug ||
intl.formatMessage({
defaultMessage:
"If empty, URL will be autogenerated from Page Name"
})
}
placeholder={slugify(data.title)}
value={data.slug}
onChange={onChange}
fullWidth
/>
</CardContent>
</Card>
);
};
PageSlug.displayName = "PageSlug";
export default PageSlug;

27
src/pages/index.tsx
View file

@ -1,9 +1,10 @@
import { parse as parseQs } from "qs";
import React from "react";
import { useIntl } from "react-intl";
import { Route, RouteComponentProps, Switch } from "react-router-dom";
import { sectionNames } from "@saleor/intl";
import { WindowTitle } from "../components/WindowTitle";
import i18n from "../i18n";
import {
pageCreatePath,
pageListPath,
@ -37,15 +38,19 @@ const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
);
};
const Component = () => (
<>
<WindowTitle title={i18n.t("Pages")} />
<Switch>
<Route exact path={pageListPath} component={PageList} />
<Route exact path={pageCreatePath} component={PageCreate} />
<Route path={pagePath(":id")} component={PageDetails} />
</Switch>
</>
);
const Component = () => {
const intl = useIntl();
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.pages)} />
<Switch>
<Route exact path={pageListPath} component={PageList} />
<Route exact path={pageCreatePath} component={PageCreate} />
<Route path={pagePath(":id")} component={PageDetails} />
</Switch>
</>
);
};
export default Component;

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

@ -1,9 +1,9 @@
import React from "react";
import { useIntl } from "react-intl";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import i18n from "../../i18n";
import { getMutationState, maybe } from "../../misc";
import PageDetailsPage from "../components/PageDetailsPage";
import { TypedPageCreate } from "../mutations";
@ -17,12 +17,13 @@ export interface PageCreateProps {
export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const handlePageCreate = (data: PageCreateData) => {
if (data.pageCreate.errors.length === 0) {
notify({
text: i18n.t("Successfully created new page", {
context: "notification"
text: intl.formatMessage({
defaultMessage: "Successfully created new page"
})
});
navigate(pageUrl(data.pageCreate.page.id));
@ -40,7 +41,12 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
return (
<>
<WindowTitle title={i18n.t("Create page")} />
<WindowTitle
title={intl.formatMessage({
defaultMessage: "Create page",
description: "header"
})}
/>
<PageDetailsPage
disabled={pageCreateOpts.loading}
errors={maybe(() => pageCreateOpts.data.pageCreate.errors, [])}

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

@ -1,11 +1,11 @@
import DialogContentText from "@material-ui/core/DialogContentText";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import i18n from "../../i18n";
import { getMutationState, maybe } from "../../misc";
import { PageInput } from "../../types/globalTypes";
import PageDetailsPage, { FormData } from "../components/PageDetailsPage";
@ -45,12 +45,13 @@ export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
}) => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const handlePageRemove = (data: PageRemove) => {
if (data.pageDelete.errors.length === 0) {
notify({
text: i18n.t("Removed page", {
context: "notification"
text: intl.formatMessage({
defaultMessage: "Removed page"
})
});
navigate(pageListUrl());
@ -107,25 +108,30 @@ export const PageDetails: React.StatelessComponent<PageDetailsProps> = ({
<ActionDialog
open={params.action === "remove"}
confirmButtonState={removeTransitionState}
title={i18n.t("Remove Page")}
title={intl.formatMessage({
defaultMessage: "Delete Page",
description: "dialog header"
})}
onClose={() => navigate(pageUrl(id))}
onConfirm={pageRemove}
variant="delete"
>
<DialogContentText
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to remove <strong>{{ title }}</strong>?",
{
context: "page remove",
title: maybe(
() => pageDetails.data.page.title,
"..."
)
}
)
}}
/>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {title}?"
description="delete page"
values={{
title: (
<strong>
{maybe(
() => pageDetails.data.page.title,
"..."
)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
</>
);

109
src/pages/views/PageList.tsx
View file

@ -3,6 +3,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { configurationMenuUrl } from "@saleor/configuration";
@ -13,7 +14,6 @@ import useNotifier from "@saleor/hooks/useNotifier";
import usePaginator, {
createPaginationState
} from "@saleor/hooks/usePaginator";
import i18n from "@saleor/i18n";
import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import PageListPage from "../components/PageListPage/PageListPage";
@ -45,6 +45,8 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
const { updateListSettings, settings } = useListSettings(
ListViews.PAGES_LIST
);
const intl = useIntl();
const paginationState = createPaginationState(settings.rowNumber, params);
return (
@ -79,7 +81,10 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
if (data.pageBulkPublish.errors.length === 0) {
closeModal();
notify({
text: i18n.t("Published pages")
text: intl.formatMessage({
defaultMessage: "Published pages",
description: "notification"
})
});
reset();
refetch();
@ -90,7 +95,10 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
if (data.pageBulkDelete.errors.length === 0) {
closeModal();
notify({
text: i18n.t("Removed pages")
text: intl.formatMessage({
defaultMessage: "Removed pages",
description: "notification"
})
});
reset();
refetch();
@ -137,13 +145,19 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
openModal("unpublish", listElements)
}
>
{i18n.t("Unpublish")}
<FormattedMessage
defaultMessage="Unpublish"
description="unpublish page, button"
/>
</Button>
<Button
color="primary"
onClick={() => openModal("publish", listElements)}
>
{i18n.t("Publish")}
<FormattedMessage
defaultMessage="Publish"
description="publish page, button"
/>
</Button>
<IconButton
color="primary"
@ -170,21 +184,28 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
}
})
}
title={i18n.t("Publish pages")}
title={intl.formatMessage({
defaultMessage: "Publish Pages",
description: "dialog header"
})}
>
<DialogContentText
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to publish <strong>{{ number }}</strong> pages?",
{
number: maybe(
() => params.ids.length.toString(),
"..."
)
}
)
}}
/>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to publish {counter, plural,
one {this page}
other {{displayQuantity} pages}
}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
)
}}
/>
</DialogContentText>
</ActionDialog>
<ActionDialog
open={params.action === "unpublish"}
@ -198,18 +219,21 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
}
})
}
title={i18n.t("Unpublish pages")}
title={intl.formatMessage({
defaultMessage: "Unpublish Pages",
description: "dialog header"
})}
>
<DialogContentText
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to unpublish <strong>{{ number }}</strong> pages?",
{
number: maybe(
() => params.ids.length.toString(),
"..."
)
}
<FormattedMessage
defaultMessage="Are you sure you want to unpublish {counter, plural,
one {this page}
other {{displayQuantity} pages}
}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
@ -226,18 +250,21 @@ export const PageList: React.StatelessComponent<PageListProps> = ({
})
}
variant="delete"
title={i18n.t("Remove pages")}
title={intl.formatMessage({
defaultMessage: "Delete Pages",
description: "dialog header"
})}
>
<DialogContentText
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to remove <strong>{{ number }}</strong> pages?",
{
number: maybe(
() => params.ids.length.toString(),
"..."
)
}
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter, plural,
one {this page}
other {{displayQuantity} pages}
}?"
description="dialog content"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>