2020-07-31 16:57:37 -07:00
|
|
|
import * as React from "react";
|
2020-07-31 22:11:32 -07:00
|
|
|
import gql from "graphql-tag";
|
|
|
|
import { useQuery } from "@apollo/react-hooks";
|
2020-07-31 16:57:37 -07:00
|
|
|
import {
|
|
|
|
Badge,
|
|
|
|
Box,
|
|
|
|
Drawer,
|
|
|
|
DrawerBody,
|
|
|
|
DrawerCloseButton,
|
|
|
|
DrawerContent,
|
|
|
|
DrawerHeader,
|
|
|
|
DrawerOverlay,
|
|
|
|
FormControl,
|
2020-07-31 22:11:32 -07:00
|
|
|
FormErrorMessage,
|
2020-07-31 16:57:37 -07:00
|
|
|
FormHelperText,
|
|
|
|
FormLabel,
|
|
|
|
Link,
|
|
|
|
Select,
|
2020-07-31 22:11:32 -07:00
|
|
|
Spinner,
|
|
|
|
useBreakpointValue,
|
2020-07-31 16:57:37 -07:00
|
|
|
} from "@chakra-ui/core";
|
|
|
|
import { ExternalLinkIcon } from "@chakra-ui/icons";
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ItemSupportDrawer shows Support UI for the item when open.
|
|
|
|
*
|
|
|
|
* This component controls the drawer element. The actual content is imported
|
|
|
|
* from another lazy-loaded component!
|
|
|
|
*/
|
|
|
|
function ItemSupportDrawer({ item, isOpen, onClose }) {
|
2020-07-31 22:11:32 -07:00
|
|
|
const placement = useBreakpointValue({
|
|
|
|
base: "bottom",
|
|
|
|
lg: "right",
|
|
|
|
|
|
|
|
// TODO: There's a bug in the Chakra RC that doesn't read the breakpoint
|
|
|
|
// specification correctly - we need these extra keys until it's fixed!
|
|
|
|
// https://github.com/chakra-ui/chakra-ui/issues/1444
|
|
|
|
0: "bottom",
|
|
|
|
1: "bottom",
|
|
|
|
2: "right",
|
|
|
|
3: "right",
|
|
|
|
});
|
|
|
|
|
2020-07-31 16:57:37 -07:00
|
|
|
return (
|
|
|
|
<Drawer
|
2020-07-31 22:11:32 -07:00
|
|
|
placement={placement}
|
2020-07-31 16:57:37 -07:00
|
|
|
isOpen={isOpen}
|
|
|
|
onClose={onClose}
|
|
|
|
// blockScrollOnMount doesn't matter on our fullscreen UI, but the
|
|
|
|
// default implementation breaks out layout somehow 🤔 idk, let's not!
|
|
|
|
blockScrollOnMount={false}
|
|
|
|
>
|
|
|
|
<DrawerOverlay>
|
|
|
|
<DrawerContent>
|
|
|
|
<DrawerCloseButton />
|
|
|
|
<DrawerHeader>
|
|
|
|
{item.name}
|
2020-07-31 22:11:32 -07:00
|
|
|
<Badge colorScheme="pink" marginLeft="3">
|
2020-07-31 16:57:37 -07:00
|
|
|
Support <span aria-hidden="true">💖</span>
|
|
|
|
</Badge>
|
|
|
|
</DrawerHeader>
|
|
|
|
<DrawerBody>
|
|
|
|
<Box paddingBottom="5">
|
|
|
|
<SpecialColorFields item={item} />
|
|
|
|
</Box>
|
|
|
|
</DrawerBody>
|
|
|
|
</DrawerContent>
|
|
|
|
</DrawerOverlay>
|
|
|
|
</Drawer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function SpecialColorFields({ item }) {
|
2020-07-31 22:31:28 -07:00
|
|
|
const { loading, error, data } = useQuery(
|
|
|
|
gql`
|
|
|
|
query ItemSupportDrawerSpecialColorFields($itemId: ID!) {
|
|
|
|
allColors {
|
|
|
|
id
|
|
|
|
name
|
|
|
|
isStandard
|
|
|
|
}
|
|
|
|
|
|
|
|
item(id: $itemId) {
|
|
|
|
manualSpecialColor {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
2020-07-31 22:11:32 -07:00
|
|
|
}
|
2020-07-31 22:31:28 -07:00
|
|
|
`,
|
|
|
|
{ variables: { itemId: item.id } }
|
|
|
|
);
|
2020-07-31 22:11:32 -07:00
|
|
|
|
|
|
|
const nonStandardColors = data?.allColors?.filter((c) => !c.isStandard) || [];
|
|
|
|
nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
|
2020-07-31 16:57:37 -07:00
|
|
|
return (
|
2020-07-31 22:11:32 -07:00
|
|
|
<FormControl isInvalid={error ? true : false}>
|
2020-07-31 16:57:37 -07:00
|
|
|
<FormLabel>Special color</FormLabel>
|
2020-07-31 22:11:32 -07:00
|
|
|
<Select
|
2020-07-31 22:31:28 -07:00
|
|
|
placeholder={
|
|
|
|
loading ? "Loading…" : "Default: Auto-detect from item description"
|
|
|
|
}
|
2020-07-31 22:11:32 -07:00
|
|
|
icon={loading ? <Spinner /> : undefined}
|
2020-07-31 22:31:28 -07:00
|
|
|
value={data?.item?.manualSpecialColor?.id}
|
2020-07-31 22:11:32 -07:00
|
|
|
>
|
|
|
|
{nonStandardColors.map((color) => (
|
|
|
|
<option key={color.id} value={color.id}>
|
|
|
|
{color.name}
|
|
|
|
</option>
|
|
|
|
))}
|
2020-07-31 16:57:37 -07:00
|
|
|
</Select>
|
2020-07-31 22:11:32 -07:00
|
|
|
{error && <FormErrorMessage>{error.message}</FormErrorMessage>}
|
|
|
|
{!error && (
|
|
|
|
<FormHelperText>
|
|
|
|
This controls which previews we show on the{" "}
|
|
|
|
<Link
|
|
|
|
href={`https://impress.openneo.net/items/${
|
|
|
|
item.id
|
|
|
|
}-${item.name.replace(/ /g, "-")}`}
|
|
|
|
color="green.500"
|
|
|
|
isExternal
|
|
|
|
>
|
|
|
|
item page <ExternalLinkIcon />
|
|
|
|
</Link>
|
|
|
|
.
|
|
|
|
</FormHelperText>
|
|
|
|
)}
|
2020-07-31 16:57:37 -07:00
|
|
|
</FormControl>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ItemSupportDrawer;
|