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

Fix configuration page

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-12 16:38:40 +02:00
parent 78132229af
commit ad4975bd84
6 changed files with 196 additions and 331 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/components/AppLayout/MenuList.tsx
View file

@ -173,6 +173,13 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
});
const intl = useIntl();
const configutationMenu = createConfigurationMenu(intl).map(menu => {
menu.menuItems.map(item => {
return user.permissions
.map(perm => perm.code)
.includes(item.permission);
});
});
const handleSubMenu = itemLabel => {
setActiveSubMenu({
isActive:
@ -304,35 +311,30 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
</a>
);
})}
{renderConfigure &&
createConfigurationMenu(intl).filter(menuItem =>
user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
).length > 0 && (
<a
className={classes.menuListItem}
href={createHref(configurationMenuUrl)}
onClick={event => closeSubMenu(configurationMenuUrl, event)}
>
<div className={classes.menuItemHover}>
<SVG
className={classNames(classes.menuIcon, {
[classes.menuIconDark]: isDark
})}
src={configureIcon}
/>
<Typography
aria-label="configuration"
className={classNames(classes.menuListItemText, {
[classes.menuListItemTextHide]: !isMenuSmall
})}
>
<FormattedMessage {...sectionNames.configuration} />
</Typography>
</div>
</a>
)}
{renderConfigure && configutationMenu.length > 0 && (
<a
className={classes.menuListItem}
href={createHref(configurationMenuUrl)}
onClick={event => closeSubMenu(configurationMenuUrl, event)}
>
<div className={classes.menuItemHover}>
<SVG
className={classNames(classes.menuIcon, {
[classes.menuIconDark]: isDark
})}
src={configureIcon}
/>
<Typography
aria-label="configuration"
className={classNames(classes.menuListItemText, {
[classes.menuListItemTextHide]: !isMenuSmall
})}
>
<FormattedMessage {...sectionNames.configuration} />
</Typography>
</div>
</a>
)}
</div>
);
}

5
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -61,8 +61,7 @@ const styles = (theme: Theme) =>
paddingRight: theme.spacing.unit
},
chipLabel: {
color: theme.palette.common.white,
fontSize: "16px"
color: theme.palette.primary.contrastText
},
container: {
flexGrow: 1,
@ -276,7 +275,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
{displayValues.map(value => (
<div className={classes.chip} key={value.value}>
<div className={classes.chipInner}>
<Typography className={classes.chipLabel} variant="caption">
<Typography className={classes.chipLabel}>
{value.label}
</Typography>
<IconButton

245
src/configuration/ConfigurationPage.tsx
View file

@ -12,19 +12,23 @@ import { useIntl } from "react-intl";
import { IconProps } from "@material-ui/core/Icon";
import { sectionNames } from "@saleor/intl";
import { ConfigurationCategoryEnum } from "@saleor/types";
import { hasPermission } from "../auth/misc";
import { User } from "../auth/types/User";
import Container from "../components/Container";
import PageHeader from "../components/PageHeader";
import { PermissionEnum } from "../types/globalTypes";
export interface MenuItem {
category: ConfigurationCategoryEnum;
description: string;
icon: React.ReactElement<IconProps>;
permission: PermissionEnum;
title: string;
url?: string;
label: string;
menuItems: [
{
description: string;
icon: React.ReactElement<IconProps>;
permission: PermissionEnum;
title: string;
url?: string;
}
];
}
const styles = (theme: Theme) =>
@ -70,6 +74,9 @@ const styles = (theme: Theme) =>
configurationLabel: {
paddingBottom: 20
},
header: {
margin: 0
},
icon: {
color: theme.palette.primary.main,
fontSize: 48
@ -99,191 +106,45 @@ export const ConfigurationPage = withStyles(styles, {
const intl = useIntl();
return (
<Container>
<PageHeader title={intl.formatMessage(sectionNames.configuration)} />
<div className={classes.configurationCategory}>
<div className={classes.configurationLabel}>
<Typography>
{intl.formatMessage({
defaultMessage: "Attributes and Product Types",
description: "configuration category"
})}
</Typography>
</div>
<div className={classes.configurationItem}>
{menu
.filter(menuItem =>
user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
)
.map(
(menuItem, menuItemIndex) =>
menuItem.category ===
ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES && (
<Card
className={
menuItem.url ? classes.card : classes.cardDisabled
}
onClick={() => onSectionClick(menuItem.url)}
key={menuItemIndex}
>
<CardContent className={classes.cardContent}>
<div className={classes.icon}>{menuItem.icon}</div>
<div>
<Typography
className={classes.sectionTitle}
color="primary"
>
{menuItem.title}
</Typography>
<Typography className={classes.sectionDescription}>
{menuItem.description}
</Typography>
</div>
</CardContent>
</Card>
)
)}
</div>
</div>
<div className={classes.configurationCategory}>
<div className={classes.configurationLabel}>
<Typography>
{intl.formatMessage({
defaultMessage: "Product Settings",
description: "configuration category"
})}
</Typography>
</div>
<div className={classes.configurationItem}>
{menu
.filter(menuItem =>
user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
)
.map(
(menuItem, menuItemIndex) =>
menuItem.category ===
ConfigurationCategoryEnum.PRODUCT_SETTINGS && (
<Card
className={
menuItem.url ? classes.card : classes.cardDisabled
}
onClick={() => onSectionClick(menuItem.url)}
key={menuItemIndex}
>
<CardContent className={classes.cardContent}>
<div className={classes.icon}>{menuItem.icon}</div>
<div>
<Typography
className={classes.sectionTitle}
color="primary"
>
{menuItem.title}
</Typography>
<Typography className={classes.sectionDescription}>
{menuItem.description}
</Typography>
</div>
</CardContent>
</Card>
)
)}
</div>
</div>
<div className={classes.configurationCategory}>
<div className={classes.configurationLabel}>
<Typography>
{intl.formatMessage({
defaultMessage: "Staff Settings",
description: "configuration category"
})}
</Typography>
</div>
<div className={classes.configurationItem}>
{menu
.filter(menuItem =>
user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
)
.map(
(menuItem, menuItemIndex) =>
menuItem.category ===
ConfigurationCategoryEnum.STAFF_SETTINGS && (
<Card
className={
menuItem.url ? classes.card : classes.cardDisabled
}
onClick={() => onSectionClick(menuItem.url)}
key={menuItemIndex}
>
<CardContent className={classes.cardContent}>
<div className={classes.icon}>{menuItem.icon}</div>
<div>
<Typography
className={classes.sectionTitle}
color="primary"
>
{menuItem.title}
</Typography>
<Typography className={classes.sectionDescription}>
{menuItem.description}
</Typography>
</div>
</CardContent>
</Card>
)
)}
</div>
</div>
<div className={classes.configurationCategory}>
<div className={classes.configurationLabel}>
<Typography>
{intl.formatMessage({
defaultMessage: "Miscellaneous",
description: "configuration category"
})}
</Typography>
</div>
<div className={classes.configurationItem}>
{menu
.filter(menuItem =>
user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
)
.map(
(menuItem, menuItemIndex) =>
menuItem.category ===
ConfigurationCategoryEnum.MISCELLANEOUS && (
<Card
className={
menuItem.url ? classes.card : classes.cardDisabled
}
onClick={() => onSectionClick(menuItem.url)}
key={menuItemIndex}
>
<CardContent className={classes.cardContent}>
<div className={classes.icon}>{menuItem.icon}</div>
<div>
<Typography
className={classes.sectionTitle}
color="primary"
>
{menuItem.title}
</Typography>
<Typography className={classes.sectionDescription}>
{menuItem.description}
</Typography>
</div>
</CardContent>
</Card>
)
)}
</div>
</div>
<PageHeader
className={classes.header}
title={intl.formatMessage(sectionNames.configuration)}
/>
{menu
.filter(menu =>
menu.menuItems.map(item => hasPermission(item.permission, user))
)
.map((menu, menuIndex) => (
<div className={classes.configurationCategory}>
<div className={classes.configurationLabel}>
<Typography>{menu.label}</Typography>
</div>
<div className={classes.configurationItem}>
{menu.menuItems.map(item => (
<Card
className={item.url ? classes.card : classes.cardDisabled}
onClick={() => onSectionClick(item.url)}
key={menuIndex}
>
<CardContent className={classes.cardContent}>
<div className={classes.icon}>{item.icon}</div>
<div>
<Typography
className={classes.sectionTitle}
color="primary"
>
{item.title}
</Typography>
<Typography className={classes.sectionDescription}>
{item.description}
</Typography>
</div>
</CardContent>
</Card>
))}
</div>
</div>
))}
</Container>
);
}

206
src/configuration/index.tsx
View file

@ -24,116 +24,126 @@ import { shippingZonesListUrl } from "@saleor/shipping/urls";
import { siteSettingsUrl } from "@saleor/siteSettings/urls";
import { staffListUrl } from "@saleor/staff/urls";
import { taxSection } from "@saleor/taxes/urls";
import { ConfigurationCategoryEnum } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
import ConfigurationPage, { MenuItem } from "./ConfigurationPage";
export function createConfigurationMenu(intl: IntlShape): MenuItem[] {
return [
{
category: ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES,
description: intl.formatMessage({
defaultMessage: "Determine attributes used to create product types",
id: "configurationMenuAttributes"
}),
icon: <Attributes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.attributes),
url: attributeListUrl()
label: "Attributes and Product Types",
menuItems: [
{
description: intl.formatMessage({
defaultMessage: "Determine attributes used to create product types",
id: "configurationMenuAttributes"
}),
icon: <Attributes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.attributes),
url: attributeListUrl()
},
{
description: intl.formatMessage({
defaultMessage: "Define types of products you sell",
id: "configurationMenuProductTypes"
}),
icon: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.productTypes),
url: productTypeListUrl()
}
]
},
{
category: ConfigurationCategoryEnum.ATTRUBUTES_PRODUCT_TYPES,
description: intl.formatMessage({
defaultMessage: "Define types of products you sell",
id: "configurationMenuProductTypes"
}),
icon: <ProductTypes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.productTypes),
url: productTypeListUrl()
label: "Product Settings",
menuItems: [
{
description: intl.formatMessage({
defaultMessage: "Manage how you ship out orders",
id: "configurationMenuShipping"
}),
icon: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_SHIPPING,
title: intl.formatMessage(sectionNames.shipping),
url: shippingZonesListUrl()
},
{
description: intl.formatMessage({
defaultMessage: "Manage how your store charges tax",
id: "configurationMenuTaxes"
}),
icon: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.taxes),
url: taxSection
}
]
},
{
category: ConfigurationCategoryEnum.STAFF_SETTINGS,
description: intl.formatMessage({
defaultMessage: "Manage your employees and their permissions",
id: "configurationMenuStaff"
}),
icon: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_STAFF,
title: intl.formatMessage(sectionNames.staff),
url: staffListUrl()
label: "Staff Settings",
menuItems: [
{
description: intl.formatMessage({
defaultMessage: "Manage your employees and their permissions",
id: "configurationMenuStaff"
}),
icon: <StaffMembers fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_STAFF,
title: intl.formatMessage(sectionNames.staff),
url: staffListUrl()
}
]
},
{
category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
description: intl.formatMessage({
defaultMessage: "Manage how you ship out orders",
id: "configurationMenuShipping"
}),
icon: <ShippingMethods fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_SHIPPING,
title: intl.formatMessage(sectionNames.shipping),
url: shippingZonesListUrl()
},
{
category: ConfigurationCategoryEnum.PRODUCT_SETTINGS,
description: intl.formatMessage({
defaultMessage: "Manage how your store charges tax",
id: "configurationMenuTaxes"
}),
icon: <Taxes fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PRODUCTS,
title: intl.formatMessage(sectionNames.taxes),
url: taxSection
},
{
category: ConfigurationCategoryEnum.MISCELLANEOUS,
description: intl.formatMessage({
defaultMessage: "Define how users can navigate through your store",
id: "configurationMenuNavigation"
}),
icon: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_MENUS,
title: intl.formatMessage(sectionNames.navigation),
url: menuListUrl()
},
{
category: ConfigurationCategoryEnum.MISCELLANEOUS,
description: intl.formatMessage({
defaultMessage: "View and update your site settings",
id: "configurationMenuSiteSettings"
}),
icon: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_SETTINGS,
title: intl.formatMessage(sectionNames.siteSettings),
url: siteSettingsUrl()
},
{
category: ConfigurationCategoryEnum.MISCELLANEOUS,
description: intl.formatMessage({
defaultMessage: "Manage and add additional pages",
id: "configurationMenuPages"
}),
icon: <Pages fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PAGES,
title: intl.formatMessage(sectionNames.pages),
url: pageListUrl()
},
{
category: ConfigurationCategoryEnum.MISCELLANEOUS,
description: intl.formatMessage({
defaultMessage: "View and update your plugins and their settings.",
id: "configurationPluginsPages"
}),
icon: (
<Plugins
fontSize="inherit"
viewBox="-8 -5 44 44"
preserveAspectRatio="xMinYMin meet"
/>
),
permission: PermissionEnum.MANAGE_SETTINGS,
title: intl.formatMessage(sectionNames.plugins),
url: pluginsListUrl()
label: "Miscellaneous",
menuItems: [
{
description: intl.formatMessage({
defaultMessage: "Define how users can navigate through your store",
id: "configurationMenuNavigation"
}),
icon: <Navigation fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_MENUS,
title: intl.formatMessage(sectionNames.navigation),
url: menuListUrl()
},
{
description: intl.formatMessage({
defaultMessage: "View and update your site settings",
id: "configurationMenuSiteSettings"
}),
icon: <SiteSettings fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_SETTINGS,
title: intl.formatMessage(sectionNames.siteSettings),
url: siteSettingsUrl()
},
{
description: intl.formatMessage({
defaultMessage: "Manage and add additional pages",
id: "configurationMenuPages"
}),
icon: <Pages fontSize="inherit" viewBox="0 0 44 44" />,
permission: PermissionEnum.MANAGE_PAGES,
title: intl.formatMessage(sectionNames.pages),
url: pageListUrl()
},
{
description: intl.formatMessage({
defaultMessage: "View and update your plugins and their settings.",
id: "configurationPluginsPages"
}),
icon: (
<Plugins
fontSize="inherit"
viewBox="-8 -5 44 44"
preserveAspectRatio="xMinYMin meet"
/>
),
permission: PermissionEnum.MANAGE_SETTINGS,
title: intl.formatMessage(sectionNames.plugins),
url: pluginsListUrl()
}
]
}
];
}

4
src/index.tsx
View file

@ -227,8 +227,8 @@ const Routes: React.FC = () => {
path={attributeSection}
component={AttributeSection}
/>
{createConfigurationMenu(intl).filter(menuItem =>
hasPermission(menuItem.permission, user)
{createConfigurationMenu(intl).filter(menu =>
menu.menuItems.map(item => hasPermission(item.permission, user))
).length > 0 && (
<SectionRoute
exact

7
src/types.ts
View file

@ -134,10 +134,3 @@ export interface FetchMoreProps {
hasMore: boolean;
onFetchMore: () => void;
}
export enum ConfigurationCategoryEnum {
ATTRUBUTES_PRODUCT_TYPES = "ATTRUBUTES_PRODUCT_TYPES",
PRODUCT_SETTINGS = "PRODUCT_SETTINGS",
STAFF_SETTINGS = "STAFF_SETTINGS",
MISCELLANEOUS = "MISCELLANEOUS"
}