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,8 +20,9 @@ type Props = {
product: ProductSchema; product: ProductSchema;
}; };
const ProductFieldsList: FC<Props> = ({ product }) => { export const getProductFieldList = (product: ProductSchema) => {
const fieldList = Object.entries(product).map(([key, value]) => { return Object.entries(product)
.map(([key, value]) => {
const fieldName = ProductFieldNames[key as keyof ProductSchema]; const fieldName = ProductFieldNames[key as keyof ProductSchema];
if (!fieldName || isNil(value) || value === "") return null; if (!fieldName || isNil(value) || value === "") return null;
return ( return (
@ -29,7 +30,12 @@ const ProductFieldsList: FC<Props> = ({ product }) => {
{fieldName}: {value.toString()}{" "} {fieldName}: {value.toString()}{" "}
</Text> </Text>
); );
}); })
.filter(obj => !!obj);
};
const ProductFieldsList: FC<Props> = ({ product }) => {
const fieldList = getProductFieldList(product);
return <>{fieldList}</>; return <>{fieldList}</>;
}; };

View File

@ -1,11 +1,18 @@
import { import {
Box,
ComboboxItem, ComboboxItem,
ComboboxLikeRenderOptionInput, ComboboxLikeRenderOptionInput,
Image,
rem,
SelectProps, SelectProps,
Stack,
Text,
Tooltip, Tooltip,
} from "@mantine/core"; } from "@mantine/core";
import { ProductSchema } from "@/lib/client"; 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 = ( const renderProductOption = (
products: ProductSchema[] products: ProductSchema[]
@ -15,34 +22,35 @@ const renderProductOption = (
product => product.id === Number(item.option.value) product => product.id === Number(item.option.value)
); );
if (!product) return item.option.label; if (!product) return item.option.label;
// const imageUrl =
// product.images && product.images[0] const fieldsList = getProductFieldList(product);
// ? product.images[0].imageUrl
// : undefined;
return ( return (
<Tooltip <Tooltip
style={{ whiteSpace: "pre-line" }} style={{ whiteSpace: "pre-line" }}
multiline multiline
disabled={fieldsList.length === 0 && !product.imageUrl}
label={ label={
<> <Stack
gap={"xs"}
maw={rem(250)}>
<ProductFieldsList product={product} /> <ProductFieldsList product={product} />
{/*{imageUrl && (*/} {product.imageUrl && (
{/* <Image*/} <Image
{/* src={imageUrl}*/} src={product.imageUrl}
{/* alt={product.name}*/} alt={product.name}
{/* maw={rem(250)}*/} maw={rem(250)}
{/* />*/} />
{/*)}*/} )}
</> </Stack>
}> }>
<div> <Box w={"100%"}>
{product.name} {product.name}
<br /> <br />
{/*{product.barcodes && (*/} {product.barcodes && (
{/* <Text size={"xs"}>{product.barcodes[0]}</Text>*/} <Text size={"xs"}>{product.barcodes[0]}</Text>
{/*)}*/} )}
</div> </Box>
</Tooltip> </Tooltip>
); );
}; };