Require permissions in home section
This commit is contained in:
dominik-zeglen
parent
9f08550b34
commit
3c2a41a185
3 changed files with 150 additions and 115 deletions
|
|
@ -14,7 +14,10 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
|
|||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
import RequirePermissions from "@saleor/components/RequirePermissions";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { UserPermissionProps } from "@saleor/types";
|
||||
import { PermissionEnum } from "@saleor/types/globalTypes";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
|
|
@ -26,7 +29,7 @@ const styles = (theme: Theme) =>
|
|||
}
|
||||
});
|
||||
|
||||
interface HomeNotificationTableProps extends WithStyles<typeof styles> {
|
||||
interface HomeNotificationTableProps extends UserPermissionProps {
|
||||
ordersToCapture: number;
|
||||
ordersToFulfill: number;
|
||||
productsOutOfStock: number;
|
||||
|
|
@ -45,101 +48,112 @@ const HomeNotificationTable = withStyles(styles, {
|
|||
onProductsOutOfStockClick,
|
||||
ordersToCapture,
|
||||
ordersToFulfill,
|
||||
productsOutOfStock
|
||||
}: HomeNotificationTableProps) => (
|
||||
productsOutOfStock,
|
||||
userPermissions
|
||||
}: HomeNotificationTableProps & WithStyles<typeof styles>) => (
|
||||
<Card>
|
||||
<Table>
|
||||
<TableBody className={classes.tableRow}>
|
||||
<TableRow hover={true} onClick={onOrdersToFulfillClick}>
|
||||
<TableCell>
|
||||
{ordersToFulfill === undefined ? (
|
||||
<Skeleton />
|
||||
) : ordersToFulfill === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No orders ready to fulfill"
|
||||
id="homeNotificationTableNoOrders"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
<RequirePermissions
|
||||
userPermissions={userPermissions}
|
||||
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
|
||||
>
|
||||
<TableRow hover={true} onClick={onOrdersToFulfillClick}>
|
||||
<TableCell>
|
||||
{ordersToFulfill === undefined ? (
|
||||
<Skeleton />
|
||||
) : ordersToFulfill === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No orders ready to fulfill"
|
||||
id="homeNotificationTableNoOrders"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
one {One order}
|
||||
other {{amount} Orders}
|
||||
} are ready to fulfill"
|
||||
id="homeNotificationTableOrders"
|
||||
values={{
|
||||
amount: <strong>{ordersToFulfill}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow hover={true} onClick={onOrdersToCaptureClick}>
|
||||
<TableCell>
|
||||
{ordersToCapture === undefined ? (
|
||||
<Skeleton />
|
||||
) : ordersToCapture === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No payments waiting for capture"
|
||||
id="homeNotificationsNoPayments"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
id="homeNotificationTableOrders"
|
||||
values={{
|
||||
amount: <strong>{ordersToFulfill}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow hover={true} onClick={onOrdersToCaptureClick}>
|
||||
<TableCell>
|
||||
{ordersToCapture === undefined ? (
|
||||
<Skeleton />
|
||||
) : ordersToCapture === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No payments waiting for capture"
|
||||
id="homeNotificationsNoPayments"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
one {One payment}
|
||||
other {{amount} Payments}
|
||||
} to capture"
|
||||
id="homeNotificationTablePayments"
|
||||
values={{
|
||||
amount: <strong>{ordersToCapture}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow hover={true} onClick={onProductsOutOfStockClick}>
|
||||
<TableCell>
|
||||
{productsOutOfStock === undefined ? (
|
||||
<Skeleton />
|
||||
) : productsOutOfStock === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No products out of stock"
|
||||
id="homeNotificationsTableNoProducts"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
id="homeNotificationTablePayments"
|
||||
values={{
|
||||
amount: <strong>{ordersToCapture}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</RequirePermissions>
|
||||
<RequirePermissions
|
||||
userPermissions={userPermissions}
|
||||
requiredPermissions={[PermissionEnum.MANAGE_PRODUCTS]}
|
||||
>
|
||||
<TableRow hover={true} onClick={onProductsOutOfStockClick}>
|
||||
<TableCell>
|
||||
{productsOutOfStock === undefined ? (
|
||||
<Skeleton />
|
||||
) : productsOutOfStock === 0 ? (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="No products out of stock"
|
||||
id="homeNotificationsTableNoProducts"
|
||||
/>
|
||||
</Typography>
|
||||
) : (
|
||||
<Typography>
|
||||
<FormattedMessage
|
||||
defaultMessage="{amount, plural,
|
||||
one {One product}
|
||||
other {{amount} Products}
|
||||
} out of stock"
|
||||
id="homeNotificationTableProducts"
|
||||
values={{
|
||||
amount: <strong>{productsOutOfStock}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
id="homeNotificationTableProducts"
|
||||
values={{
|
||||
amount: <strong>{productsOutOfStock}</strong>
|
||||
}}
|
||||
/>
|
||||
</Typography>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className={classes.arrowIcon}>
|
||||
<KeyboardArrowRight />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</RequirePermissions>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@ import CardSpacer from "@saleor/components/CardSpacer";
|
|||
import Container from "@saleor/components/Container";
|
||||
import Grid from "@saleor/components/Grid";
|
||||
import Money from "@saleor/components/Money";
|
||||
import RequirePermissions from "@saleor/components/RequirePermissions";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import { UserPermissionProps } from "@saleor/types";
|
||||
import { PermissionEnum } from "@saleor/types/globalTypes";
|
||||
import Orders from "../../../icons/Orders";
|
||||
import Sales from "../../../icons/Sales";
|
||||
import {
|
||||
|
|
@ -39,7 +42,7 @@ const styles = (theme: Theme) =>
|
|||
}
|
||||
});
|
||||
|
||||
export interface HomePageProps extends WithStyles<typeof styles> {
|
||||
export interface HomePageProps extends UserPermissionProps {
|
||||
activities: Home_activities_edges_node[];
|
||||
orders: number;
|
||||
ordersToCapture: number;
|
||||
|
|
@ -68,35 +71,41 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
|
|||
onProductsOutOfStockClick,
|
||||
ordersToCapture,
|
||||
ordersToFulfill,
|
||||
productsOutOfStock
|
||||
}: HomePageProps) => (
|
||||
productsOutOfStock,
|
||||
userPermissions
|
||||
}: HomePageProps & WithStyles<typeof styles>) => (
|
||||
<Container>
|
||||
<HomeHeader userName={userName} />
|
||||
<CardSpacer />
|
||||
<Grid>
|
||||
<div>
|
||||
<div className={classes.cardContainer}>
|
||||
<HomeAnalyticsCard
|
||||
title={"Sales"}
|
||||
icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />}
|
||||
>
|
||||
{sales ? (
|
||||
<Money money={sales} />
|
||||
) : (
|
||||
<Skeleton style={{ width: "5em" }} />
|
||||
)}
|
||||
</HomeAnalyticsCard>
|
||||
<HomeAnalyticsCard
|
||||
title={"Orders"}
|
||||
icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />}
|
||||
>
|
||||
{orders === undefined ? (
|
||||
<Skeleton style={{ width: "5em" }} />
|
||||
) : (
|
||||
orders
|
||||
)}
|
||||
</HomeAnalyticsCard>
|
||||
</div>
|
||||
<RequirePermissions
|
||||
userPermissions={userPermissions}
|
||||
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
|
||||
>
|
||||
<div className={classes.cardContainer}>
|
||||
<HomeAnalyticsCard
|
||||
title={"Sales"}
|
||||
icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />}
|
||||
>
|
||||
{sales ? (
|
||||
<Money money={sales} />
|
||||
) : (
|
||||
<Skeleton style={{ width: "5em" }} />
|
||||
)}
|
||||
</HomeAnalyticsCard>
|
||||
<HomeAnalyticsCard
|
||||
title={"Orders"}
|
||||
icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />}
|
||||
>
|
||||
{orders === undefined ? (
|
||||
<Skeleton style={{ width: "5em" }} />
|
||||
) : (
|
||||
orders
|
||||
)}
|
||||
</HomeAnalyticsCard>
|
||||
</div>
|
||||
</RequirePermissions>
|
||||
<HomeNotificationTable
|
||||
onOrdersToCaptureClick={onOrdersToCaptureClick}
|
||||
onOrdersToFulfillClick={onOrdersToFulfillClick}
|
||||
|
|
@ -104,16 +113,27 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
|
|||
ordersToCapture={ordersToCapture}
|
||||
ordersToFulfill={ordersToFulfill}
|
||||
productsOutOfStock={productsOutOfStock}
|
||||
userPermissions={userPermissions}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<HomeProductListCard
|
||||
onRowClick={onProductClick}
|
||||
topProducts={topProducts}
|
||||
/>
|
||||
<CardSpacer />
|
||||
<RequirePermissions
|
||||
userPermissions={userPermissions}
|
||||
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
|
||||
>
|
||||
<HomeProductListCard
|
||||
onRowClick={onProductClick}
|
||||
topProducts={topProducts}
|
||||
/>
|
||||
<CardSpacer />
|
||||
</RequirePermissions>
|
||||
</div>
|
||||
<div>
|
||||
<HomeActivityCard activities={activities} />
|
||||
<RequirePermissions
|
||||
userPermissions={userPermissions}
|
||||
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
|
||||
>
|
||||
<HomeActivityCard activities={activities} />
|
||||
</RequirePermissions>
|
||||
</div>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ const HomeSection = () => {
|
|||
ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)}
|
||||
productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)}
|
||||
userName={getUserName(user, true)}
|
||||
userPermissions={maybe(() => user.permissions, [])}
|
||||
/>
|
||||
)}
|
||||
</HomePageQuery>
|
||||
|
|
|
|||
Loading…
Reference in a new issue