danak/negareh-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor new req
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
morteza-mortezai
2026-07-21 12:44:16 +03:30
parent cd8677648e
commit 830e229cf3
5 changed files with 300 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/request/components/RequestItemsList.tsx
+65 -50
View File
@@ -1,6 +1,6 @@
import { type FC } from 'react'
import Button from '@/components/Button'
import { Edit, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
import { Edit2, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
import { useGetProducts } from '../hooks/useRequestData'
import type { RequestItemType } from '../type/Types'
import { clx } from '@/helpers/utils'
@@ -28,60 +28,75 @@ const RequestItemsList: FC<Props> = ({
productsData?.data?.find((p) => p.id === productId)?.title ?? 'محصول'
return (
<div className='bg-white w-full xl:w-[320px] shrink-0 py-6 px-5 h-fit rounded-3xl xl:sticky xl:top-6'>
<div className='flex items-center gap-2'>
<ShoppingCart size={20} color='black' />
<span className='text-sm font-medium'>اقلام درخواست</span>
<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='text-xs bg-primary/20 text-black rounded-full px-2 py-0.5 mr-auto'>
{items.length}
<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.length === 0 ? (
<p className='text-description text-xs mt-6 leading-6'>
هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
</p>
) : (
<ul className='mt-4 space-y-3 max-h-[360px] overflow-y-auto'>
{items.map((item, index) => (
<li
key={index}
className={clx(
'border rounded-2xl p-3 transition-colors',
editingIndex === index
? 'border-primary bg-primary/5'
: 'border-[#f0f2f8]'
)}
>
<div className='text-sm font-medium truncate'>
{getProductTitle(item.productId)}
</div>
<div className='flex gap-2 mt-3'>
<button
type='button'
onClick={() => onEdit(index)}
className='flex items-center gap-1 text-xs text-[#3B82F6] hover:opacity-80'
>
<Edit size={16} color='#3B82F6' />
ویرایش
</button>
<button
type='button'
onClick={() => onRemove(index)}
className='flex items-center gap-1 text-xs text-red-500 hover:opacity-80 mr-auto'
>
<Trash size={16} color='#ef4444' />
حذف
</button>
</div>
</li>
))}
</ul>
)}
{/* 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>
<div className='mt-6 pt-4 border-t border-[#f0f2f8]'>
{/* Submit footer */}
<div className='px-5 pb-5 pt-3 border-t border-[#f0f2f8]'>
<Button
className='w-full'
onClick={onSubmit}
@@ -89,7 +104,7 @@ const RequestItemsList: FC<Props> = ({
disabled={items.length === 0}
>
<div className='flex gap-2 items-center justify-center'>
<TickSquare size={20} color='black' />
<TickSquare size={20} color='currentColor' />
<span>ثبت نهایی درخواست</span>
</div>
</Button>