55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { Drawer, rem } from "@mantine/core";
|
|
import ExcelDropzone from "../../../../components/ExcelDropzone/ExcelDropzone.tsx";
|
|
import styles from "../PrefillDealWithExcelDrawer/PrefillDealsWithExcelDrawer.module.css";
|
|
import { usePrefillDealsWithExcelContext } from "../../contexts/PrefillDealsWithExcelContext.tsx";
|
|
import ProductsPreview from "./components/ProductsPreview.tsx";
|
|
import { BoardSchema } from "../../../../client";
|
|
|
|
type Props = {
|
|
board: BoardSchema | null;
|
|
}
|
|
|
|
const PrefillDealsWithExcelDrawer = ({ board }: Props) => {
|
|
const {
|
|
prefillWithExcelOpened,
|
|
prefillWithExcelOnClose,
|
|
barcodeProductsMap,
|
|
onDrop,
|
|
excelDropzone,
|
|
} = usePrefillDealsWithExcelContext();
|
|
|
|
const getBody = () => {
|
|
if (!board || board.dealStatuses.length === 0) return;
|
|
|
|
if (barcodeProductsMap?.size === 0) {
|
|
return <ExcelDropzone dropzone={excelDropzone} onDrop={onDrop} />;
|
|
}
|
|
return <ProductsPreview status={board.dealStatuses[0]}/>;
|
|
};
|
|
|
|
return (
|
|
<Drawer
|
|
size={"calc(77vw)"}
|
|
position={"right"}
|
|
onClose={prefillWithExcelOnClose}
|
|
removeScrollProps={{ allowPinchZoom: true }}
|
|
withCloseButton={false}
|
|
opened={prefillWithExcelOpened}
|
|
styles={{
|
|
body: {
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: rem(20),
|
|
},
|
|
}}
|
|
>
|
|
<div className={styles["deal-container"]}>
|
|
{getBody()}
|
|
</div>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default PrefillDealsWithExcelDrawer;
|