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

Require permissions in home section

Browse source
This commit is contained in:
dominik-zeglen 2019-10-08 16:19:24 +02:00
parent 9f08550b34
commit 3c2a41a185
3 changed files with 150 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
View file

@ -14,7 +14,10 @@ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import RequirePermissions from "@saleor/components/RequirePermissions";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import { UserPermissionProps } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
@ -26,7 +29,7 @@ const styles = (theme: Theme) =>
} }
}); });
interface HomeNotificationTableProps extends WithStyles<typeof styles> { interface HomeNotificationTableProps extends UserPermissionProps {
ordersToCapture: number; ordersToCapture: number;
ordersToFulfill: number; ordersToFulfill: number;
productsOutOfStock: number; productsOutOfStock: number;
@ -45,101 +48,112 @@ const HomeNotificationTable = withStyles(styles, {
onProductsOutOfStockClick, onProductsOutOfStockClick,
ordersToCapture, ordersToCapture,
ordersToFulfill, ordersToFulfill,
productsOutOfStock productsOutOfStock,
}: HomeNotificationTableProps) => ( userPermissions
}: HomeNotificationTableProps & WithStyles<typeof styles>) => (
<Card> <Card>
<Table> <Table>
<TableBody className={classes.tableRow}> <TableBody className={classes.tableRow}>
<TableRow hover={true} onClick={onOrdersToFulfillClick}> <RequirePermissions
<TableCell> userPermissions={userPermissions}
{ordersToFulfill === undefined ? ( requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
<Skeleton /> >
) : ordersToFulfill === 0 ? ( <TableRow hover={true} onClick={onOrdersToFulfillClick}>
<Typography> <TableCell>
<FormattedMessage {ordersToFulfill === undefined ? (
defaultMessage="No orders ready to fulfill" <Skeleton />
id="homeNotificationTableNoOrders" ) : ordersToFulfill === 0 ? (
/> <Typography>
</Typography> <FormattedMessage
) : ( defaultMessage="No orders ready to fulfill"
<Typography> id="homeNotificationTableNoOrders"
<FormattedMessage />
defaultMessage="{amount, plural, </Typography>
) : (
<Typography>
<FormattedMessage
defaultMessage="{amount, plural,
one {One order} one {One order}
other {{amount} Orders} other {{amount} Orders}
} are ready to fulfill" } are ready to fulfill"
id="homeNotificationTableOrders" id="homeNotificationTableOrders"
values={{ values={{
amount: <strong>{ordersToFulfill}</strong> amount: <strong>{ordersToFulfill}</strong>
}} }}
/> />
</Typography> </Typography>
)} )}
</TableCell> </TableCell>
<TableCell className={classes.arrowIcon}> <TableCell className={classes.arrowIcon}>
<KeyboardArrowRight /> <KeyboardArrowRight />
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow hover={true} onClick={onOrdersToCaptureClick}> <TableRow hover={true} onClick={onOrdersToCaptureClick}>
<TableCell> <TableCell>
{ordersToCapture === undefined ? ( {ordersToCapture === undefined ? (
<Skeleton /> <Skeleton />
) : ordersToCapture === 0 ? ( ) : ordersToCapture === 0 ? (
<Typography> <Typography>
<FormattedMessage <FormattedMessage
defaultMessage="No payments waiting for capture" defaultMessage="No payments waiting for capture"
id="homeNotificationsNoPayments" id="homeNotificationsNoPayments"
/> />
</Typography> </Typography>
) : ( ) : (
<Typography> <Typography>
<FormattedMessage <FormattedMessage
defaultMessage="{amount, plural, defaultMessage="{amount, plural,
one {One payment} one {One payment}
other {{amount} Payments} other {{amount} Payments}
} to capture" } to capture"
id="homeNotificationTablePayments" id="homeNotificationTablePayments"
values={{ values={{
amount: <strong>{ordersToCapture}</strong> amount: <strong>{ordersToCapture}</strong>
}} }}
/> />
</Typography> </Typography>
)} )}
</TableCell> </TableCell>
<TableCell className={classes.arrowIcon}> <TableCell className={classes.arrowIcon}>
<KeyboardArrowRight /> <KeyboardArrowRight />
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow hover={true} onClick={onProductsOutOfStockClick}> </RequirePermissions>
<TableCell> <RequirePermissions
{productsOutOfStock === undefined ? ( userPermissions={userPermissions}
<Skeleton /> requiredPermissions={[PermissionEnum.MANAGE_PRODUCTS]}
) : productsOutOfStock === 0 ? ( >
<Typography> <TableRow hover={true} onClick={onProductsOutOfStockClick}>
<FormattedMessage <TableCell>
defaultMessage="No products out of stock" {productsOutOfStock === undefined ? (
id="homeNotificationsTableNoProducts" <Skeleton />
/> ) : productsOutOfStock === 0 ? (
</Typography> <Typography>
) : ( <FormattedMessage
<Typography> defaultMessage="No products out of stock"
<FormattedMessage id="homeNotificationsTableNoProducts"
defaultMessage="{amount, plural, />
</Typography>
) : (
<Typography>
<FormattedMessage
defaultMessage="{amount, plural,
one {One product} one {One product}
other {{amount} Products} other {{amount} Products}
} out of stock" } out of stock"
id="homeNotificationTableProducts" id="homeNotificationTableProducts"
values={{ values={{
amount: <strong>{productsOutOfStock}</strong> amount: <strong>{productsOutOfStock}</strong>
}} }}
/> />
</Typography> </Typography>
)} )}
</TableCell> </TableCell>
<TableCell className={classes.arrowIcon}> <TableCell className={classes.arrowIcon}>
<KeyboardArrowRight /> <KeyboardArrowRight />
</TableCell> </TableCell>
</TableRow> </TableRow>
</RequirePermissions>
</TableBody> </TableBody>
</Table> </Table>
</Card> </Card>

82
src/home/components/HomePage/HomePage.tsx
View file

@ -10,7 +10,10 @@ import CardSpacer from "@saleor/components/CardSpacer";
import Container from "@saleor/components/Container"; import Container from "@saleor/components/Container";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import RequirePermissions from "@saleor/components/RequirePermissions";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import { UserPermissionProps } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
import Orders from "../../../icons/Orders"; import Orders from "../../../icons/Orders";
import Sales from "../../../icons/Sales"; import Sales from "../../../icons/Sales";
import { 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[]; activities: Home_activities_edges_node[];
orders: number; orders: number;
ordersToCapture: number; ordersToCapture: number;
@ -68,35 +71,41 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
onProductsOutOfStockClick, onProductsOutOfStockClick,
ordersToCapture, ordersToCapture,
ordersToFulfill, ordersToFulfill,
productsOutOfStock productsOutOfStock,
}: HomePageProps) => ( userPermissions
}: HomePageProps & WithStyles<typeof styles>) => (
<Container> <Container>
<HomeHeader userName={userName} /> <HomeHeader userName={userName} />
<CardSpacer /> <CardSpacer />
<Grid> <Grid>
<div> <div>
<div className={classes.cardContainer}> <RequirePermissions
<HomeAnalyticsCard userPermissions={userPermissions}
title={"Sales"} requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />} >
> <div className={classes.cardContainer}>
{sales ? ( <HomeAnalyticsCard
<Money money={sales} /> title={"Sales"}
) : ( icon={<Sales fontSize={"inherit"} viewBox="0 0 64 64" />}
<Skeleton style={{ width: "5em" }} /> >
)} {sales ? (
</HomeAnalyticsCard> <Money money={sales} />
<HomeAnalyticsCard ) : (
title={"Orders"} <Skeleton style={{ width: "5em" }} />
icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />} )}
> </HomeAnalyticsCard>
{orders === undefined ? ( <HomeAnalyticsCard
<Skeleton style={{ width: "5em" }} /> title={"Orders"}
) : ( icon={<Orders fontSize={"inherit"} viewBox="0 0 64 64" />}
orders >
)} {orders === undefined ? (
</HomeAnalyticsCard> <Skeleton style={{ width: "5em" }} />
</div> ) : (
orders
)}
</HomeAnalyticsCard>
</div>
</RequirePermissions>
<HomeNotificationTable <HomeNotificationTable
onOrdersToCaptureClick={onOrdersToCaptureClick} onOrdersToCaptureClick={onOrdersToCaptureClick}
onOrdersToFulfillClick={onOrdersToFulfillClick} onOrdersToFulfillClick={onOrdersToFulfillClick}
@ -104,16 +113,27 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
ordersToCapture={ordersToCapture} ordersToCapture={ordersToCapture}
ordersToFulfill={ordersToFulfill} ordersToFulfill={ordersToFulfill}
productsOutOfStock={productsOutOfStock} productsOutOfStock={productsOutOfStock}
userPermissions={userPermissions}
/> />
<CardSpacer /> <CardSpacer />
<HomeProductListCard <RequirePermissions
onRowClick={onProductClick} userPermissions={userPermissions}
topProducts={topProducts} requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
/> >
<CardSpacer /> <HomeProductListCard
onRowClick={onProductClick}
topProducts={topProducts}
/>
<CardSpacer />
</RequirePermissions>
</div> </div>
<div> <div>
<HomeActivityCard activities={activities} /> <RequirePermissions
userPermissions={userPermissions}
requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
>
<HomeActivityCard activities={activities} />
</RequirePermissions>
</div> </div>
</Grid> </Grid>
</Container> </Container>

1
src/home/views/index.tsx
View file

@ -56,6 +56,7 @@ const HomeSection = () => {
ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)} ordersToFulfill={maybe(() => data.ordersToFulfill.totalCount)}
productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)} productsOutOfStock={maybe(() => data.productsOutOfStock.totalCount)}
userName={getUserName(user, true)} userName={getUserName(user, true)}
userPermissions={maybe(() => user.permissions, [])}
/> />
)} )}
</HomePageQuery> </HomePageQuery>