122 lines
5.5 KiB
TypeScript
122 lines
5.5 KiB
TypeScript
import { type FC } from 'react'
|
||
import Button from '@/components/Button'
|
||
import { Edit2, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
|
||
import { useGetProducts } from '../hooks/useRequestData'
|
||
import type { RequestItemType } from '../type/Types'
|
||
import { clx } from '@/helpers/utils'
|
||
|
||
type Props = {
|
||
items: RequestItemType[]
|
||
editingIndex: number | null
|
||
onEdit: (index: number) => void
|
||
onRemove: (index: number) => void
|
||
onSubmit: () => void
|
||
isPending: boolean
|
||
}
|
||
|
||
const RequestItemsList: FC<Props> = ({
|
||
items,
|
||
editingIndex,
|
||
onEdit,
|
||
onRemove,
|
||
onSubmit,
|
||
isPending,
|
||
}) => {
|
||
const { data: productsData } = useGetProducts()
|
||
|
||
const getProductTitle = (productId?: string) =>
|
||
productsData?.data?.find((p) => p.id === productId)?.title ?? 'محصول'
|
||
|
||
return (
|
||
<div className='bg-white w-full xl:w-[340px] shrink-0 rounded-3xl xl:sticky xl:top-6 h-fit'>
|
||
{/* Header */}
|
||
<div className='flex items-center gap-2 px-5 pt-5 pb-4 border-b border-[#f0f2f8]'>
|
||
<ShoppingCart size={20} color='black' variant='Bold' />
|
||
<span className='text-sm font-semibold'>اقلام درخواست</span>
|
||
{items.length > 0 && (
|
||
<span className='mr-auto text-xs bg-primary/15 text-primary font-medium rounded-full px-2.5 py-0.5 tabular-nums'>
|
||
{items.length} قلم
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Items */}
|
||
<div className='px-5 py-4'>
|
||
{items.length === 0 ? (
|
||
<div className='flex flex-col items-center justify-center gap-3 py-8 text-center'>
|
||
<div className='size-12 rounded-full bg-gray-50 flex items-center justify-center'>
|
||
<ShoppingCart size={22} color='#c0c4d0' />
|
||
</div>
|
||
<p className='text-description text-xs leading-6 max-w-[200px]'>
|
||
هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<ul className='space-y-2 max-h-[380px] overflow-y-auto -mx-1 px-1'>
|
||
{items.map((item, index) => (
|
||
<li
|
||
key={index}
|
||
className={clx(
|
||
'border rounded-2xl px-4 py-3 transition-all',
|
||
editingIndex === index
|
||
? 'border-primary bg-primary/5 shadow-sm'
|
||
: 'border-[#eef0f6] hover:border-gray-300',
|
||
)}
|
||
>
|
||
<div className='flex items-start justify-between gap-2'>
|
||
<span className='text-sm font-medium truncate leading-6'>
|
||
{getProductTitle(item.productId)}
|
||
</span>
|
||
<span className='text-[10px] text-description shrink-0 bg-gray-100 rounded-full px-2 py-0.5'>
|
||
#{index + 1}
|
||
</span>
|
||
</div>
|
||
<div className='flex gap-3 mt-2'>
|
||
<button
|
||
type='button'
|
||
onClick={() => onEdit(index)}
|
||
className='flex items-center gap-1 text-xs text-primary hover:opacity-75 transition-opacity'
|
||
>
|
||
<Edit2 size={14} color='currentColor' />
|
||
ویرایش
|
||
</button>
|
||
<button
|
||
type='button'
|
||
onClick={() => onRemove(index)}
|
||
className='flex items-center gap-1 text-xs text-red-500 hover:opacity-75 transition-opacity mr-auto'
|
||
>
|
||
<Trash size={14} color='currentColor' />
|
||
حذف
|
||
</button>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
|
||
{/* Submit footer */}
|
||
<div className='px-5 pb-5 pt-3 border-t border-[#f0f2f8]'>
|
||
<Button
|
||
className='w-full'
|
||
onClick={onSubmit}
|
||
isLoading={isPending}
|
||
disabled={items.length === 0}
|
||
>
|
||
<div className='flex gap-2 items-center justify-center'>
|
||
<TickSquare size={20} color='currentColor' />
|
||
<span>ثبت نهایی درخواست</span>
|
||
</div>
|
||
</Button>
|
||
{items.length === 0 && (
|
||
<p className='text-description text-[10px] text-center mt-2'>
|
||
حداقل یک قلم برای ثبت لازم است
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default RequestItemsList
|