feat: product info in product select
This commit is contained in:
@ -20,16 +20,22 @@ type Props = {
|
||||
product: ProductSchema;
|
||||
};
|
||||
|
||||
export const getProductFieldList = (product: ProductSchema) => {
|
||||
return Object.entries(product)
|
||||
.map(([key, value]) => {
|
||||
const fieldName = ProductFieldNames[key as keyof ProductSchema];
|
||||
if (!fieldName || isNil(value) || value === "") return null;
|
||||
return (
|
||||
<Text key={fieldName}>
|
||||
{fieldName}: {value.toString()}{" "}
|
||||
</Text>
|
||||
);
|
||||
})
|
||||
.filter(obj => !!obj);
|
||||
};
|
||||
|
||||
const ProductFieldsList: FC<Props> = ({ product }) => {
|
||||
const fieldList = Object.entries(product).map(([key, value]) => {
|
||||
const fieldName = ProductFieldNames[key as keyof ProductSchema];
|
||||
if (!fieldName || isNil(value) || value === "") return null;
|
||||
return (
|
||||
<Text key={fieldName}>
|
||||
{fieldName}: {value.toString()}{" "}
|
||||
</Text>
|
||||
);
|
||||
});
|
||||
const fieldList = getProductFieldList(product);
|
||||
|
||||
return <>{fieldList}</>;
|
||||
};
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
import {
|
||||
Box,
|
||||
ComboboxItem,
|
||||
ComboboxLikeRenderOptionInput,
|
||||
Image,
|
||||
rem,
|
||||
SelectProps,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { ProductSchema } from "@/lib/client";
|
||||
import ProductFieldsList from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductView/components/ProductFieldsList";
|
||||
import ProductFieldsList, {
|
||||
getProductFieldList,
|
||||
} from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductView/components/ProductFieldsList";
|
||||
|
||||
const renderProductOption = (
|
||||
products: ProductSchema[]
|
||||
@ -15,34 +22,35 @@ const renderProductOption = (
|
||||
product => product.id === Number(item.option.value)
|
||||
);
|
||||
if (!product) return item.option.label;
|
||||
// const imageUrl =
|
||||
// product.images && product.images[0]
|
||||
// ? product.images[0].imageUrl
|
||||
// : undefined;
|
||||
|
||||
const fieldsList = getProductFieldList(product);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
style={{ whiteSpace: "pre-line" }}
|
||||
multiline
|
||||
disabled={fieldsList.length === 0 && !product.imageUrl}
|
||||
label={
|
||||
<>
|
||||
<Stack
|
||||
gap={"xs"}
|
||||
maw={rem(250)}>
|
||||
<ProductFieldsList product={product} />
|
||||
{/*{imageUrl && (*/}
|
||||
{/* <Image*/}
|
||||
{/* src={imageUrl}*/}
|
||||
{/* alt={product.name}*/}
|
||||
{/* maw={rem(250)}*/}
|
||||
{/* />*/}
|
||||
{/*)}*/}
|
||||
</>
|
||||
{product.imageUrl && (
|
||||
<Image
|
||||
src={product.imageUrl}
|
||||
alt={product.name}
|
||||
maw={rem(250)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
}>
|
||||
<div>
|
||||
<Box w={"100%"}>
|
||||
{product.name}
|
||||
<br />
|
||||
{/*{product.barcodes && (*/}
|
||||
{/* <Text size={"xs"}>{product.barcodes[0]}</Text>*/}
|
||||
{/*)}*/}
|
||||
</div>
|
||||
{product.barcodes && (
|
||||
<Text size={"xs"}>{product.barcodes[0]}</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user