refactor: streamline image and variant handling in ProductDetailPage and ProductsListPage
This commit is contained in:
parent
b97f72aeae
commit
a851fc4a50
|
|
@ -24,6 +24,11 @@ const ProductDetailPage = () => {
|
|||
return new Intl.NumberFormat('fa-IR').format(num);
|
||||
};
|
||||
|
||||
// تصاویر محصول (حاصل تجمیع دو فیلد مختلف از API)
|
||||
const images = (product.file_ids && product.file_ids.length > 0) ? product.file_ids : ((product as any).files || []);
|
||||
|
||||
const variants = (product.variants && product.variants.length > 0) ? product.variants : ((product as any).product_variants || []);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
|
|
@ -184,14 +189,14 @@ const ProductDetailPage = () => {
|
|||
)}
|
||||
|
||||
{/* تصاویر محصول */}
|
||||
{product.file_ids && product.file_ids.length > 0 && (
|
||||
{images.length > 0 && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<SectionTitle className="flex items-center gap-2 mb-4">
|
||||
<Image className="h-5 w-5" />
|
||||
تصاویر محصول
|
||||
</SectionTitle>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{product.file_ids.map((image, index) => (
|
||||
{images.map((image: any, index: number) => (
|
||||
<div key={image.id || index} className="relative group">
|
||||
<img
|
||||
src={image.url}
|
||||
|
|
@ -208,14 +213,14 @@ const ProductDetailPage = () => {
|
|||
)}
|
||||
|
||||
{/* نسخههای محصول */}
|
||||
{product.variants && product.variants.length > 0 && (
|
||||
{(variants.length > 0) && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
||||
<SectionTitle className="flex items-center gap-2 mb-4">
|
||||
<Layers className="h-5 w-5" />
|
||||
نسخههای محصول
|
||||
</SectionTitle>
|
||||
<div className="space-y-6">
|
||||
{product.variants.map((variant, index) => (
|
||||
{variants.map((variant, index) => (
|
||||
<div key={variant.id || index} className="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100">
|
||||
|
|
@ -378,7 +383,7 @@ const ProductDetailPage = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
{product.variants && (
|
||||
{variants.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Layers className="h-4 w-4 text-blue-500" />
|
||||
|
|
@ -387,12 +392,12 @@ const ProductDetailPage = () => {
|
|||
</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{formatNumber(product.variants.length)}
|
||||
{formatNumber(variants.length)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{product.file_ids && (
|
||||
{images.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image className="h-4 w-4 text-purple-500" />
|
||||
|
|
@ -401,7 +406,7 @@ const ProductDetailPage = () => {
|
|||
</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{formatNumber(product.file_ids.length)}
|
||||
{formatNumber(images.length)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -223,7 +223,7 @@ const ProductFormPage = () => {
|
|||
stock_number: variant.stock_number,
|
||||
weight: variant.weight,
|
||||
product_option_id: variant.product_option_id || null,
|
||||
file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.filter((id: any) => typeof id === 'number' && !isNaN(id)) : [],
|
||||
file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.map((file: any) => Number(typeof file === 'object' ? file.id : file)).filter((id: number) => !isNaN(id)) : [],
|
||||
attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
|
||||
meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
|
||||
})) || [];
|
||||
|
|
@ -248,7 +248,7 @@ const ProductFormPage = () => {
|
|||
stock_number: variant.stock_number,
|
||||
weight: variant.weight,
|
||||
product_option_id: variant.product_option_id || null,
|
||||
file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.filter((id: any) => typeof id === 'number' && !isNaN(id)) : [],
|
||||
file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.map((file: any) => Number(typeof file === 'object' ? file.id : file)).filter((id: number) => !isNaN(id)) : [],
|
||||
attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
|
||||
meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
|
||||
})) || [];
|
||||
|
|
|
|||
|
|
@ -123,6 +123,12 @@ const ProductsListPage = () => {
|
|||
return new Intl.NumberFormat('fa-IR').format(price) + ' تومان';
|
||||
};
|
||||
|
||||
const getFirstImageUrl = (p: any): string | null => {
|
||||
if (p.file_ids && p.file_ids.length > 0) return p.file_ids[0].url;
|
||||
if (p.files && p.files.length > 0) return p.files[0].url;
|
||||
return null;
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'active':
|
||||
|
|
@ -281,9 +287,9 @@ const ProductsListPage = () => {
|
|||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0">
|
||||
{product.file_ids && product.file_ids.length > 0 ? (
|
||||
{getFirstImageUrl(product) ? (
|
||||
<img
|
||||
src={product.file_ids[0].url}
|
||||
src={getFirstImageUrl(product) as string}
|
||||
alt={product.name}
|
||||
className="w-10 h-10 object-cover rounded"
|
||||
/>
|
||||
|
|
@ -352,9 +358,9 @@ const ProductsListPage = () => {
|
|||
<div key={product.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div className="flex gap-3 mb-3">
|
||||
<div className="flex-shrink-0">
|
||||
{product.file_ids && product.file_ids.length > 0 ? (
|
||||
{getFirstImageUrl(product) ? (
|
||||
<img
|
||||
src={product.file_ids[0].url}
|
||||
src={getFirstImageUrl(product) as string}
|
||||
alt={product.name}
|
||||
className="w-12 h-12 object-cover rounded"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue