food admin
This commit is contained in:
hamid zarghami
@@ -0,0 +1,212 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import Table from '@/components/Table'
|
||||
import Button from '@/components/Button'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import SwitchComponent from '@/components/Switch'
|
||||
import UploadBox from '@/components/UploadBox'
|
||||
import { type RowActionItem } from '@/components/RowActionsDropdown'
|
||||
import { Add } from 'iconsax-react'
|
||||
import Filters from '@/components/Filters'
|
||||
|
||||
interface CategoryData {
|
||||
id: number
|
||||
name: string
|
||||
icon: string
|
||||
iconColor: string
|
||||
order: number
|
||||
foodCount: number
|
||||
status: boolean
|
||||
[key: string]: string | number | boolean
|
||||
}
|
||||
|
||||
const CategoryFood: FC = () => {
|
||||
const [selectedRow, setSelectedRow] = useState<number | null>(null)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
|
||||
// فرم دستهبندی جدید
|
||||
const [formData, setFormData] = useState({
|
||||
isActive: true,
|
||||
categoryStatus: '',
|
||||
title: '',
|
||||
order: '',
|
||||
icon: [] as File[]
|
||||
})
|
||||
|
||||
// دادههای تستی
|
||||
const [categories] = useState<CategoryData[]>([
|
||||
{ id: 1, name: 'ایرانی', icon: '🍕', iconColor: '#FF6B6B', order: 1, foodCount: 14, status: true },
|
||||
{ id: 2, name: 'پیتزا آمریکایی', icon: '🍕', iconColor: '#FF6B6B', order: 2, foodCount: 14, status: true },
|
||||
{ id: 3, name: 'پیتزا آمریکایی', icon: '🍕', iconColor: '#FF6B6B', order: 3, foodCount: 14, status: true },
|
||||
{ id: 4, name: 'پیتزا آمریکایی', icon: '🍕', iconColor: '#FF6B6B', order: 4, foodCount: 14, status: true },
|
||||
{ id: 5, name: 'پیتزا آمریکایی', icon: '🍕', iconColor: '#FF6B6B', order: 5, foodCount: 14, status: true },
|
||||
{ id: 6, name: 'پیتزا آمریکایی', icon: '🍕', iconColor: '#FF6B6B', order: 6, foodCount: 14, status: true },
|
||||
])
|
||||
|
||||
const orderOptions = Array.from({ length: 20 }, (_, i) => ({
|
||||
value: String(i + 1),
|
||||
label: String(i + 1)
|
||||
}))
|
||||
|
||||
const handleSave = () => {
|
||||
console.log('ذخیره:', formData)
|
||||
// پاک کردن فرم بعد از ذخیره
|
||||
setFormData({
|
||||
isActive: true,
|
||||
categoryStatus: '',
|
||||
title: '',
|
||||
order: '',
|
||||
icon: []
|
||||
})
|
||||
}
|
||||
|
||||
const rowActions = (item: CategoryData): RowActionItem[] => [
|
||||
{
|
||||
label: 'ویرایش',
|
||||
onClick: () => {
|
||||
console.log('ویرایش', item)
|
||||
// بارگذاری دادهها در فرم
|
||||
setFormData({
|
||||
isActive: item.status,
|
||||
categoryStatus: '',
|
||||
title: item.name,
|
||||
order: String(item.order),
|
||||
icon: []
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'حذف',
|
||||
onClick: () => console.log('حذف', item)
|
||||
}
|
||||
]
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'آیکون',
|
||||
key: 'icon',
|
||||
render: (item: CategoryData) => (
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center text-lg"
|
||||
style={{ backgroundColor: item.iconColor }}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'عنوان',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'ترتیب نمایش',
|
||||
key: 'order',
|
||||
},
|
||||
{
|
||||
title: 'تعداد غذا',
|
||||
key: 'foodCount',
|
||||
},
|
||||
{
|
||||
title: 'وضعیت',
|
||||
key: 'status',
|
||||
render: (item: CategoryData) => (
|
||||
<SwitchComponent
|
||||
active={item.status}
|
||||
onChange={(value) => console.log('تغییر وضعیت:', item.id, value)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex gap-6 p-6">
|
||||
{/* بخش اصلی - جدول */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-lg font-light">دسته بندی غذا</h1>
|
||||
</div>
|
||||
<div>
|
||||
<Filters
|
||||
fields={[
|
||||
{
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'جستجو',
|
||||
}
|
||||
]}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={categories}
|
||||
selectable
|
||||
rowActions={rowActions}
|
||||
onRowClick={(id) => setSelectedRow(id as number)}
|
||||
rowClassName={(item) =>
|
||||
selectedRow === item.id ? 'bg-blue-50 border-2 border-blue-400 border-dashed' : ''
|
||||
}
|
||||
pagination={{
|
||||
currentPage,
|
||||
totalPages: 2,
|
||||
onPageChange: setCurrentPage
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* سایدبار - فرم اضافه کردن */}
|
||||
<div className="w-[300px] bg-white rounded-3xl p-6 h-fit sticky top-6">
|
||||
<h2 className="font-light mb-6">اضافه کردن دسته بندی</h2>
|
||||
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="text-sm">فعال</div>
|
||||
<SwitchComponent
|
||||
active={formData.isActive}
|
||||
onChange={(value) => setFormData({ ...formData, isActive: value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
label="وضعیت دسته بندی"
|
||||
value={formData.categoryStatus}
|
||||
onChange={(e) => setFormData({ ...formData, categoryStatus: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<Input
|
||||
label="عنوان دسته بندی"
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<Select
|
||||
label="ترتیب نمایش"
|
||||
items={orderOptions}
|
||||
value={formData.order}
|
||||
onChange={(e) => setFormData({ ...formData, order: e.target.value })}
|
||||
placeholder="انتخاب کنید"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<UploadBox
|
||||
label="آیکون دسته بندی"
|
||||
onChange={(files) => setFormData({ ...formData, icon: files })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave} className="w-full">
|
||||
<Add size={20} className="ml-2" />
|
||||
ذخیره
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategoryFood
|
||||
Reference in New Issue
Block a user