feat: product info in product select
This commit is contained in:
@ -20,16 +20,22 @@ type Props = {
|
|||||||
product: ProductSchema;
|
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 ProductFieldsList: FC<Props> = ({ product }) => {
|
||||||
const fieldList = Object.entries(product).map(([key, value]) => {
|
const fieldList = getProductFieldList(product);
|
||||||
const fieldName = ProductFieldNames[key as keyof ProductSchema];
|
|
||||||
if (!fieldName || isNil(value) || value === "") return null;
|
|
||||||
return (
|
|
||||||
<Text key={fieldName}>
|
|
||||||
{fieldName}: {value.toString()}{" "}
|
|
||||||
</Text>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
return <>{fieldList}</>;
|
return <>{fieldList}</>;
|
||||||
};
|
};
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user