hosseintaromi
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: streamline image and variant handling in ProductDetailPage and ProductsListPage

This commit is contained in:
hossein taromi 2025-07-30 17:11:07 +03:30
parent b97f72aeae
commit a851fc4a50
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/products/product-detail/ProductDetailPage.tsx
View File

@ -24,6 +24,11 @@ const ProductDetailPage = () => {
return new Intl.NumberFormat('fa-IR').format(num); 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 ( return (
<PageContainer> <PageContainer>
<div className="flex items-center justify-between mb-6"> <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"> <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"> <SectionTitle className="flex items-center gap-2 mb-4">
<Image className="h-5 w-5" /> <Image className="h-5 w-5" />
تصاویر محصول تصاویر محصول
</SectionTitle> </SectionTitle>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <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"> <div key={image.id || index} className="relative group">
<img <img
src={image.url} 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"> <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"> <SectionTitle className="flex items-center gap-2 mb-4">
<Layers className="h-5 w-5" /> <Layers className="h-5 w-5" />
نسخه‌های محصول نسخه‌های محصول
</SectionTitle> </SectionTitle>
<div className="space-y-6"> <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 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"> <div className="flex items-center justify-between mb-4">
<h4 className="font-medium text-gray-900 dark:text-gray-100"> <h4 className="font-medium text-gray-900 dark:text-gray-100">
@ -378,7 +383,7 @@ const ProductDetailPage = () => {
</span> </span>
</div> </div>
{product.variants && ( {variants.length > 0 && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Layers className="h-4 w-4 text-blue-500" /> <Layers className="h-4 w-4 text-blue-500" />
@ -387,12 +392,12 @@ const ProductDetailPage = () => {
</span> </span>
</div> </div>
<span className="font-semibold text-gray-900 dark:text-gray-100"> <span className="font-semibold text-gray-900 dark:text-gray-100">
{formatNumber(product.variants.length)} {formatNumber(variants.length)}
</span> </span>
</div> </div>
)} )}
{product.file_ids && ( {images.length > 0 && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Image className="h-4 w-4 text-purple-500" /> <Image className="h-4 w-4 text-purple-500" />
@ -401,7 +406,7 @@ const ProductDetailPage = () => {
</span> </span>
</div> </div>
<span className="font-semibold text-gray-900 dark:text-gray-100"> <span className="font-semibold text-gray-900 dark:text-gray-100">
{formatNumber(product.file_ids.length)} {formatNumber(images.length)}
</span> </span>
</div> </div>
)} )}

4
src/pages/products/product-form/ProductFormPage.tsx
View File

@ -223,7 +223,7 @@ const ProductFormPage = () => {
stock_number: variant.stock_number, stock_number: variant.stock_number,
weight: variant.weight, weight: variant.weight,
product_option_id: variant.product_option_id || null, 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 : {}, attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {} meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
})) || []; })) || [];
@ -248,7 +248,7 @@ const ProductFormPage = () => {
stock_number: variant.stock_number, stock_number: variant.stock_number,
weight: variant.weight, weight: variant.weight,
product_option_id: variant.product_option_id || null, 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 : {}, attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {} meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
})) || []; })) || [];

14
src/pages/products/products-list/ProductsListPage.tsx
View File

@ -123,6 +123,12 @@ const ProductsListPage = () => {
return new Intl.NumberFormat('fa-IR').format(price) + ' تومان'; 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) => { const getStatusBadge = (status: string) => {
switch (status) { switch (status) {
case 'active': case 'active':
@ -281,9 +287,9 @@ const ProductsListPage = () => {
<td className="px-6 py-4 whitespace-nowrap"> <td className="px-6 py-4 whitespace-nowrap">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{product.file_ids && product.file_ids.length > 0 ? ( {getFirstImageUrl(product) ? (
<img <img
src={product.file_ids[0].url} src={getFirstImageUrl(product) as string}
alt={product.name} alt={product.name}
className="w-10 h-10 object-cover rounded" 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 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 gap-3 mb-3">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{product.file_ids && product.file_ids.length > 0 ? ( {getFirstImageUrl(product) ? (
<img <img
src={product.file_ids[0].url} src={getFirstImageUrl(product) as string}
alt={product.name} alt={product.name}
className="w-12 h-12 object-cover rounded" className="w-12 h-12 object-cover rounded"
/> />