121 lines
5.1 KiB
TypeScript
121 lines
5.1 KiB
TypeScript
import { type FC } from 'react'
|
||
import type { RequestDetailItemType } from '../types/Types'
|
||
import { useGetEntityField } from '@/pages/formBuilder/hooks/useFormBuilderData'
|
||
import { Paperclip2 } from 'iconsax-react'
|
||
import placeholderProductImage from '@/assets/images/placeholder-product.svg'
|
||
|
||
type Props = {
|
||
item: RequestDetailItemType
|
||
}
|
||
|
||
const RequestItem: FC<Props> = ({ item }) => {
|
||
const { data: fields } = useGetEntityField(String(item.product?.id ?? ''))
|
||
const attributes = item.attributes ?? []
|
||
|
||
const getAttributeFieldId = (attribute: NonNullable<RequestDetailItemType['attributes']>[number]) =>
|
||
attribute.fieldId ?? attribute.attributeId ?? attribute.field?.id
|
||
|
||
const fieldRows = fields?.data?.map((field) => ({
|
||
id: field.id,
|
||
name: field.name,
|
||
value: attributes.find((attribute) => String(getAttributeFieldId(attribute)) === String(field.id))?.value,
|
||
})) ?? []
|
||
|
||
const matchedFieldIds = new Set(fieldRows.map((field) => String(field.id)))
|
||
const extraAttributeRows = attributes
|
||
.filter((attribute) => {
|
||
const fieldId = getAttributeFieldId(attribute)
|
||
return fieldId && !matchedFieldIds.has(String(fieldId))
|
||
})
|
||
.map((attribute) => ({
|
||
id: String(getAttributeFieldId(attribute)),
|
||
name: attribute.field?.name ?? String(getAttributeFieldId(attribute)),
|
||
value: attribute.value,
|
||
}))
|
||
const attributeRows = [...fieldRows, ...extraAttributeRows]
|
||
|
||
const handleOpenAttachment = (url: string) => {
|
||
window.open(url, '_blank')
|
||
}
|
||
|
||
const productImage = item.product?.images?.[0]
|
||
|
||
return (
|
||
<div key={item.product?.id} className='border border-border rounded-3xl p-6'>
|
||
<div className="flex items-center gap-6">
|
||
{/* Product Image */}
|
||
<div className='size-[86px] rounded-lg overflow-hidden bg-gray-100'>
|
||
<img
|
||
src={productImage || placeholderProductImage}
|
||
alt={item.product?.title ?? 'محصول'}
|
||
className='size-full object-cover'
|
||
onError={(e) => {
|
||
e.currentTarget.src = placeholderProductImage
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Request Details */}
|
||
<div className="flex-1 flex gap-20 pr-10 flex-wrap">
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">عنوان:</div>
|
||
<div className="text-sm font-medium text-black">{item.product?.title}</div>
|
||
</div>
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">تعداد:</div>
|
||
<div className="text-sm font-medium text-black">{item.quantity}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Description */}
|
||
{item.description && (
|
||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||
<div className="text-sm font-medium mb-2 text-desc">شرح درخواست:</div>
|
||
<p className="text-sm font-light text-black leading-6">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Attributes */}
|
||
{attributeRows.length ? (
|
||
<>
|
||
<div className='font-bold mb-5 mt-7'>ویژگی ها</div>
|
||
{
|
||
attributeRows.map((field) => (
|
||
<div className='flex gap-3 items-center mt-3' key={field.id}>
|
||
<div className='text-sm text-gray-500'>{field.name}:</div>
|
||
<div className='text-sm -mt-px'>{field.value || '-'}</div>
|
||
</div>
|
||
))
|
||
}
|
||
</>
|
||
) : null}
|
||
|
||
{/* Attachments */}
|
||
{item.attachments?.length ? (
|
||
<div className='mt-6 pt-6 border-t border-dashed border-desc'>
|
||
<div className='text-sm font-medium mb-2 text-desc'>ضمایم:</div>
|
||
<div className="flex gap-3 flex-wrap">
|
||
{item.attachments
|
||
?.filter((url): url is string => typeof url === 'string')
|
||
.map((url, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => handleOpenAttachment(url as string)}
|
||
className="flex cursor-pointer items-center gap-1.5 text-[#0047FF] hover:underline"
|
||
>
|
||
<Paperclip2 size={20} color="#0047FF" />
|
||
<span className="text-xs">فایل {index + 1}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default RequestItem
|