121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
import Card from "@material-ui/core/Card";
|
|
import CardContent from "@material-ui/core/CardContent";
|
|
import {
|
|
createStyles,
|
|
Theme,
|
|
withStyles,
|
|
WithStyles
|
|
} from "@material-ui/core/styles";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import React from "react";
|
|
|
|
import CardTitle from "@saleor/components/CardTitle";
|
|
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
|
|
import Skeleton from "@saleor/components/Skeleton";
|
|
import i18n from "../../../i18n";
|
|
import { StaffMemberDetails_shop_permissions } from "../../types/StaffMemberDetails";
|
|
|
|
const styles = (theme: Theme) =>
|
|
createStyles({
|
|
checkboxContainer: {
|
|
marginTop: theme.spacing.unit
|
|
},
|
|
hr: {
|
|
backgroundColor: "#eaeaea",
|
|
border: "none",
|
|
height: 1,
|
|
marginBottom: 0,
|
|
marginTop: 0
|
|
}
|
|
});
|
|
|
|
interface StaffPermissionsProps extends WithStyles<typeof styles> {
|
|
permissions: StaffMemberDetails_shop_permissions[];
|
|
data: {
|
|
hasFullAccess: boolean;
|
|
permissions: string[];
|
|
};
|
|
disabled: boolean;
|
|
onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
|
|
}
|
|
|
|
const StaffPermissions = withStyles(styles, { name: "StaffPermissions" })(
|
|
({
|
|
classes,
|
|
data,
|
|
disabled,
|
|
permissions,
|
|
onChange
|
|
}: StaffPermissionsProps) => {
|
|
const handleFullAccessChange = (event: React.ChangeEvent<any>) =>
|
|
onChange(event, () =>
|
|
onChange({
|
|
target: {
|
|
name: "permissions",
|
|
value: event.target.value ? permissions.map(perm => perm.code) : []
|
|
}
|
|
} as any)
|
|
);
|
|
const handlePermissionChange = (event: React.ChangeEvent<any>) => {
|
|
onChange({
|
|
target: {
|
|
name: "permissions",
|
|
value: event.target.value
|
|
? data.permissions.concat([event.target.name])
|
|
: data.permissions.filter(perm => perm !== event.target.name)
|
|
}
|
|
} as any);
|
|
};
|
|
return (
|
|
<Card>
|
|
<CardTitle title={i18n.t("Permissions")} />
|
|
<CardContent>
|
|
<Typography>
|
|
{i18n.t(
|
|
"Expand or restrict user's permissions to access certain part of saleor system."
|
|
)}
|
|
</Typography>
|
|
<div className={classes.checkboxContainer}>
|
|
<ControlledCheckbox
|
|
checked={data.hasFullAccess}
|
|
disabled={disabled}
|
|
label={i18n.t("User has full access to the store", {
|
|
context: "checkbox label"
|
|
})}
|
|
name="hasFullAccess"
|
|
onChange={handleFullAccessChange}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
{!data.hasFullAccess && (
|
|
<>
|
|
<hr className={classes.hr} />
|
|
<CardContent>
|
|
{permissions === undefined ? (
|
|
<Skeleton />
|
|
) : (
|
|
permissions.map(perm => (
|
|
<div key={perm.code}>
|
|
<ControlledCheckbox
|
|
checked={
|
|
data.permissions.filter(
|
|
userPerm => userPerm === perm.code
|
|
).length === 1
|
|
}
|
|
disabled={disabled}
|
|
label={perm.name.replace(/\./, "")}
|
|
name={perm.code}
|
|
onChange={handlePermissionChange}
|
|
/>
|
|
</div>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
);
|
|
StaffPermissions.displayName = "StaffPermissions";
|
|
export default StaffPermissions;
|