category compelete
This commit is contained in:
hamid zarghami
+154
-165
@@ -1,126 +1,165 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { toast } from 'react-toastify'
|
||||
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'
|
||||
import CategoryForm from './components/CategoryForm'
|
||||
import CategoryTableColumns from './components/CategoryTableColumns'
|
||||
import type { Category, CreateCategoryType } from './types/Types'
|
||||
import type { ErrorType } from '@/helpers/types'
|
||||
import {
|
||||
useGetCategories,
|
||||
useCreateCategory,
|
||||
useUpdateCategory,
|
||||
useDeleteCategory
|
||||
} from './hooks/useFoodData'
|
||||
import { useSingleUpload } from '../uploader/hooks/useUploaderData'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
|
||||
interface CategoryData {
|
||||
id: number
|
||||
name: string
|
||||
icon: string
|
||||
iconColor: string
|
||||
order: number
|
||||
foodCount: number
|
||||
status: boolean
|
||||
[key: string]: string | number | boolean
|
||||
type CategoryFormValues = {
|
||||
title: string
|
||||
icon: File[]
|
||||
}
|
||||
|
||||
const CategoryFood: FC = () => {
|
||||
const [selectedRow, setSelectedRow] = useState<number | null>(null)
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [isActive, setIsActive] = useState<boolean>(true)
|
||||
const [iconFiles, setIconFiles] = useState<File[]>([])
|
||||
const [editingCategory, setEditingCategory] = useState<Category | null>(null)
|
||||
const [filters, setFilters] = useState<{ search?: string | null }>({})
|
||||
|
||||
// فرم دستهبندی جدید
|
||||
const [formData, setFormData] = useState({
|
||||
isActive: true,
|
||||
categoryStatus: '',
|
||||
title: '',
|
||||
order: '',
|
||||
icon: [] as File[]
|
||||
const { data: categoriesData, isLoading } = useGetCategories()
|
||||
const { mutate: createCategory, isPending: isCreating } = useCreateCategory()
|
||||
const { mutate: updateCategory, isPending: isUpdating } = useUpdateCategory()
|
||||
const { mutate: deleteCategory, isPending: isDeleting } = useDeleteCategory()
|
||||
const { mutate: singleUpload, isPending: isUploading } = useSingleUpload()
|
||||
|
||||
const categories = categoriesData?.data || []
|
||||
|
||||
const filteredCategories = categories.filter((category) => {
|
||||
if (filters.search) {
|
||||
return category.title.toLowerCase().includes(filters.search.toLowerCase())
|
||||
}
|
||||
return true
|
||||
})
|
||||
|
||||
// دادههای تستی
|
||||
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: '',
|
||||
const formik = useFormik<CategoryFormValues>({
|
||||
initialValues: {
|
||||
title: '',
|
||||
order: '',
|
||||
icon: []
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
title: Yup.string().required('عنوان دستهبندی الزامی است')
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
const submitCategory = (avatarUrl?: string) => {
|
||||
const categoryData: CreateCategoryType = {
|
||||
title: values.title,
|
||||
isActive,
|
||||
avatarUrl: avatarUrl || editingCategory?.avatarUrl || ''
|
||||
}
|
||||
|
||||
if (editingCategory) {
|
||||
updateCategory(
|
||||
{ id: editingCategory.id, params: categoryData },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی با موفقیت بهروزرسانی شد')
|
||||
resetForm()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
createCategory(categoryData, {
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی با موفقیت ایجاد شد')
|
||||
resetForm()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (iconFiles.length > 0) {
|
||||
singleUpload(iconFiles[0], {
|
||||
onSuccess: (response) => {
|
||||
const avatarUrl = response?.data?.url || ''
|
||||
submitCategory(avatarUrl)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error, 'خطا در آپلود تصویر'))
|
||||
}
|
||||
})
|
||||
} else {
|
||||
submitCategory()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const resetForm = () => {
|
||||
formik.resetForm()
|
||||
setIsActive(true)
|
||||
setIconFiles([])
|
||||
setEditingCategory(null)
|
||||
}
|
||||
|
||||
const handleEdit = (category: Category) => {
|
||||
formik.setValues({
|
||||
title: category.title,
|
||||
icon: []
|
||||
})
|
||||
setIsActive(category.isActive)
|
||||
setIconFiles([])
|
||||
setEditingCategory(category)
|
||||
}
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteCategory(id, {
|
||||
onSuccess: () => {
|
||||
toast.success('دستهبندی با موفقیت حذف شد')
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const rowActions = (item: CategoryData): RowActionItem[] => [
|
||||
{
|
||||
label: 'ویرایش',
|
||||
onClick: () => {
|
||||
console.log('ویرایش', item)
|
||||
// بارگذاری دادهها در فرم
|
||||
setFormData({
|
||||
isActive: item.status,
|
||||
categoryStatus: '',
|
||||
title: item.name,
|
||||
order: String(item.order),
|
||||
icon: []
|
||||
})
|
||||
const handleStatusChange = (id: string, value: boolean) => {
|
||||
const category = categories.find((cat) => cat.id === id)
|
||||
if (category) {
|
||||
const categoryData: CreateCategoryType = {
|
||||
title: category.title,
|
||||
isActive: value,
|
||||
avatarUrl: category.avatarUrl
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'حذف',
|
||||
onClick: () => console.log('حذف', item)
|
||||
updateCategory(
|
||||
{ id, params: categoryData },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success('وضعیت دستهبندی با موفقیت تغییر کرد')
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
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)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
]
|
||||
const columns = CategoryTableColumns({
|
||||
onStatusChange: handleStatusChange,
|
||||
onEdit: handleEdit,
|
||||
onDelete: handleDelete,
|
||||
isDeleting
|
||||
})
|
||||
|
||||
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>
|
||||
@@ -131,80 +170,30 @@ const CategoryFood: FC = () => {
|
||||
{
|
||||
type: 'input',
|
||||
name: 'search',
|
||||
placeholder: 'جستجو',
|
||||
placeholder: 'جستجو'
|
||||
}
|
||||
]}
|
||||
onChange={() => { }}
|
||||
onChange={(filters) => setFilters(filters)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={categories}
|
||||
data={filteredCategories}
|
||||
isLoading={isLoading}
|
||||
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>
|
||||
<CategoryForm
|
||||
formik={formik}
|
||||
isActive={isActive}
|
||||
onActiveChange={setIsActive}
|
||||
onIconChange={setIconFiles}
|
||||
iconFiles={iconFiles}
|
||||
isSubmitting={isCreating || isUpdating || isUploading}
|
||||
isEditing={!!editingCategory}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user