feat: product info in product select

This commit is contained in:
2025-10-25 19:25:58 +04:00
parent 5b754865cf
commit d9da3d1bc5
2 changed files with 42 additions and 28 deletions

View File

@ -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}</>;
};

View File

@ -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>
);
};