feat(categories): implement product categories management system
- Add categories models, requests and hooks with full CRUD support - Implement categories list page with search, filtering and pagination - Add category form page for creating and editing categories - Include responsive design for mobile and desktop views - Add real-time preview and validation for better user experience
This commit is contained in:
parent
b17c8bb408
commit
5dbe901ac7
|
|
@ -0,0 +1,295 @@
|
|||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCategories, useDeleteCategory } from '../core/_hooks';
|
||||
import { Category } from '../core/_models';
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||
import { Trash2, Edit3, Plus, FolderOpen, Folder } from "lucide-react";
|
||||
import { Modal } from "@/components/ui/Modal";
|
||||
|
||||
const CategoriesTableSkeleton = () => (
|
||||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
<div className="hidden md:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
نام دستهبندی
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
توضیحات
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
تاریخ ایجاد
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
عملیات
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<tr key={i}>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex gap-2">
|
||||
<div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
|
||||
<div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CategoriesListPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [deleteCategoryId, setDeleteCategoryId] = useState<string | null>(null);
|
||||
const [filters, setFilters] = useState({
|
||||
search: ''
|
||||
});
|
||||
|
||||
const { data: categories, isLoading, error } = useCategories(filters);
|
||||
const { mutate: deleteCategory, isPending: isDeleting } = useDeleteCategory();
|
||||
|
||||
const handleCreate = () => {
|
||||
navigate('/categories/create');
|
||||
};
|
||||
|
||||
const handleEdit = (categoryId: number) => {
|
||||
navigate(`/categories/${categoryId}/edit`);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
if (deleteCategoryId) {
|
||||
deleteCategory(deleteCategoryId, {
|
||||
onSuccess: () => {
|
||||
setDeleteCategoryId(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFilters(prev => ({ ...prev, search: e.target.value }));
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="text-center py-12">
|
||||
<p className="text-red-600 dark:text-red-400">خطا در بارگذاری دستهبندیها</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<FolderOpen className="h-6 w-6" />
|
||||
مدیریت دستهبندیها
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
مدیریت دستهبندیهای محصولات
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleCreate} className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
دستهبندی جدید
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
جستجو
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجو در نام دستهبندی..."
|
||||
value={filters.search}
|
||||
onChange={handleSearchChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Categories Table */}
|
||||
{isLoading ? (
|
||||
<CategoriesTableSkeleton />
|
||||
) : (
|
||||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||
{/* Desktop Table */}
|
||||
<div className="hidden md:block">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
نام دستهبندی
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
توضیحات
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
تاریخ ایجاد
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||
عملیات
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{(categories || []).map((category: Category) => (
|
||||
<tr key={category.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<Folder className="h-4 w-4 text-amber-500" />
|
||||
{category.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
|
||||
<div className="max-w-xs truncate">
|
||||
{category.description || 'بدون توضیحات'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||
{new Date(category.created_at).toLocaleDateString('fa-IR')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleEdit(category.id)}
|
||||
className="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
|
||||
title="ویرایش"
|
||||
>
|
||||
<Edit3 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteCategoryId(category.id.toString())}
|
||||
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
|
||||
title="حذف"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<div className="md:hidden p-4 space-y-4">
|
||||
{(categories || []).map((category: Category) => (
|
||||
<div key={category.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<Folder className="h-4 w-4 text-amber-500" />
|
||||
{category.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{category.description || 'بدون توضیحات'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||||
تاریخ ایجاد: {new Date(category.created_at).toLocaleDateString('fa-IR')}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleEdit(category.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300"
|
||||
>
|
||||
<Edit3 className="h-3 w-3" />
|
||||
ویرایش
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeleteCategoryId(category.id.toString())}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{(!categories || categories.length === 0) && !isLoading && (
|
||||
<div className="text-center py-12">
|
||||
<FolderOpen className="mx-auto h-12 w-12 text-gray-400" />
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
دستهبندیای موجود نیست
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
برای شروع، اولین دستهبندی محصولات خود را ایجاد کنید.
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Button onClick={handleCreate} className="flex items-center gap-2 mx-auto">
|
||||
<Plus className="h-4 w-4" />
|
||||
ایجاد دستهبندی جدید
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
<Modal
|
||||
isOpen={!!deleteCategoryId}
|
||||
onClose={() => setDeleteCategoryId(null)}
|
||||
title="حذف دستهبندی"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
آیا از حذف این دستهبندی اطمینان دارید؟ این عمل قابل بازگشت نیست و ممکن است بر محصولاتی که در این دستهبندی قرار دارند تأثیر بگذارد.
|
||||
</p>
|
||||
<div className="flex justify-end space-x-2 space-x-reverse">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setDeleteCategoryId(null)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleDeleteConfirm}
|
||||
loading={isDeleting}
|
||||
>
|
||||
حذف
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoriesListPage;
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import * as yup from 'yup';
|
||||
import { useCategory, useCreateCategory, useUpdateCategory } from '../core/_hooks';
|
||||
import { CategoryFormData } from '../core/_models';
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||
import { ArrowRight, FolderOpen } from "lucide-react";
|
||||
|
||||
const categorySchema = yup.object({
|
||||
name: yup.string().required('نام دستهبندی الزامی است').min(2, 'نام دستهبندی باید حداقل 2 کاراکتر باشد'),
|
||||
description: yup.string().optional(),
|
||||
});
|
||||
|
||||
const CategoryFormPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const isEdit = !!id;
|
||||
|
||||
const { data: category, isLoading: isLoadingCategory } = useCategory(id || '', isEdit);
|
||||
const { mutate: createCategory, isPending: isCreating } = useCreateCategory();
|
||||
const { mutate: updateCategory, isPending: isUpdating } = useUpdateCategory();
|
||||
|
||||
const isLoading = isCreating || isUpdating;
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isValid, isDirty },
|
||||
setValue,
|
||||
watch
|
||||
} = useForm<CategoryFormData>({
|
||||
resolver: yupResolver(categorySchema) as any,
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
});
|
||||
|
||||
const formValues = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && category) {
|
||||
setValue('name', category.name, { shouldValidate: true });
|
||||
setValue('description', category.description || '', { shouldValidate: true });
|
||||
}
|
||||
}, [isEdit, category, setValue]);
|
||||
|
||||
const onSubmit = (data: CategoryFormData) => {
|
||||
if (isEdit && id) {
|
||||
updateCategory({
|
||||
id: parseInt(id),
|
||||
name: data.name,
|
||||
description: data.description || undefined
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
navigate('/categories');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createCategory({
|
||||
name: data.name,
|
||||
description: data.description || undefined
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
navigate('/categories');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
navigate('/categories');
|
||||
};
|
||||
|
||||
if (isEdit && isLoadingCategory) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleBack}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
بازگشت
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<FolderOpen className="h-6 w-6" />
|
||||
{isEdit ? 'ویرایش دستهبندی' : 'ایجاد دستهبندی جدید'}
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
{isEdit ? 'ویرایش اطلاعات دستهبندی' : 'اطلاعات دستهبندی جدید را وارد کنید'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
<Input
|
||||
label="نام دستهبندی"
|
||||
{...register('name')}
|
||||
error={errors.name?.message}
|
||||
placeholder="مثال: لباس، کفش، لوازم الکترونیکی"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
توضیحات (اختیاری)
|
||||
</label>
|
||||
<textarea
|
||||
{...register('description')}
|
||||
rows={4}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
|
||||
placeholder="توضیحات کوتاهی در مورد این دستهبندی..."
|
||||
/>
|
||||
{errors.description && (
|
||||
<p className="text-red-500 text-sm mt-1">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{formValues.name && (
|
||||
<div className="border border-gray-200 dark:border-gray-600 rounded-lg p-4 bg-gray-50 dark:bg-gray-700">
|
||||
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
|
||||
پیشنمایش دستهبندی
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<strong>نام:</strong> {formValues.name}
|
||||
</div>
|
||||
{formValues.description && (
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<strong>توضیحات:</strong> {formValues.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end space-x-4 space-x-reverse pt-6 border-t border-gray-200 dark:border-gray-600">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={handleBack}
|
||||
disabled={isLoading}
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
disabled={!isValid || isLoading}
|
||||
>
|
||||
{isEdit ? 'بهروزرسانی' : 'ایجاد'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Help Section */}
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<h3 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
|
||||
راهنما
|
||||
</h3>
|
||||
<ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
|
||||
<li>• دستهبندیها برای سازماندهی محصولات استفاده میشوند</li>
|
||||
<li>• نام دستهبندی باید واضح و قابل فهم باشد</li>
|
||||
<li>• توضیحات کمک میکند تا دستهبندی بهتر شناخته شود</li>
|
||||
<li>• بعد از ایجاد، میتوانید محصولات را به این دستهبندی اختصاص دهید</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoryFormPage;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { QUERY_KEYS } from "@/utils/query-key";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
getCategories,
|
||||
getCategory,
|
||||
createCategory,
|
||||
updateCategory,
|
||||
deleteCategory,
|
||||
} from "./_requests";
|
||||
import {
|
||||
CreateCategoryRequest,
|
||||
UpdateCategoryRequest,
|
||||
CategoryFilters,
|
||||
} from "./_models";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export const useCategories = (filters?: CategoryFilters) => {
|
||||
return useQuery({
|
||||
queryKey: [QUERY_KEYS.GET_CATEGORIES, filters],
|
||||
queryFn: () => getCategories(filters),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCategory = (id: string, enabled: boolean = true) => {
|
||||
return useQuery({
|
||||
queryKey: [QUERY_KEYS.GET_CATEGORY, id],
|
||||
queryFn: () => getCategory(id),
|
||||
enabled: enabled && !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateCategory = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationKey: [QUERY_KEYS.CREATE_CATEGORY],
|
||||
mutationFn: (data: CreateCategoryRequest) => createCategory(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_CATEGORIES] });
|
||||
toast.success("دستهبندی با موفقیت ایجاد شد");
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Create category error:", error);
|
||||
toast.error(error?.message || "خطا در ایجاد دستهبندی");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateCategory = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationKey: [QUERY_KEYS.UPDATE_CATEGORY],
|
||||
mutationFn: (data: UpdateCategoryRequest) => updateCategory(data),
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_CATEGORIES] });
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: [QUERY_KEYS.GET_CATEGORY, variables.id.toString()],
|
||||
});
|
||||
toast.success("دستهبندی با موفقیت ویرایش شد");
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Update category error:", error);
|
||||
toast.error(error?.message || "خطا در ویرایش دستهبندی");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteCategory = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationKey: [QUERY_KEYS.DELETE_CATEGORY],
|
||||
mutationFn: (id: string) => deleteCategory(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_CATEGORIES] });
|
||||
toast.success("دستهبندی با موفقیت حذف شد");
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.error("Delete category error:", error);
|
||||
toast.error(error?.message || "خطا در حذف دستهبندی");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
export interface Category {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CategoryFormData {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface CategoryFilters {
|
||||
search?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
export interface CreateCategoryRequest {
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface UpdateCategoryRequest {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface CategoriesResponse {
|
||||
categories: Category[] | null;
|
||||
}
|
||||
|
||||
export interface CategoryResponse {
|
||||
category: Category;
|
||||
}
|
||||
|
||||
export interface CreateCategoryResponse {
|
||||
category: Category;
|
||||
}
|
||||
|
||||
export interface UpdateCategoryResponse {
|
||||
category: Category;
|
||||
}
|
||||
|
||||
export interface DeleteCategoryResponse {
|
||||
message: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import {
|
||||
httpGetRequest,
|
||||
httpPostRequest,
|
||||
httpPutRequest,
|
||||
httpDeleteRequest,
|
||||
APIUrlGenerator,
|
||||
} from "@/utils/baseHttpService";
|
||||
import { API_ROUTES } from "@/constant/routes";
|
||||
import {
|
||||
Category,
|
||||
CreateCategoryRequest,
|
||||
UpdateCategoryRequest,
|
||||
CategoriesResponse,
|
||||
CategoryResponse,
|
||||
CreateCategoryResponse,
|
||||
UpdateCategoryResponse,
|
||||
DeleteCategoryResponse,
|
||||
CategoryFilters,
|
||||
} from "./_models";
|
||||
|
||||
export const getCategories = async (filters?: CategoryFilters) => {
|
||||
try {
|
||||
const queryParams: Record<string, string | number | null> = {};
|
||||
|
||||
if (filters?.search) queryParams.search = filters.search;
|
||||
if (filters?.page) queryParams.page = filters.page;
|
||||
if (filters?.limit) queryParams.limit = filters.limit;
|
||||
|
||||
const response = await httpGetRequest<CategoriesResponse>(
|
||||
APIUrlGenerator(API_ROUTES.GET_CATEGORIES, queryParams)
|
||||
);
|
||||
|
||||
console.log("Categories API Response:", response);
|
||||
|
||||
if (
|
||||
response.data &&
|
||||
response.data.categories &&
|
||||
Array.isArray(response.data.categories)
|
||||
) {
|
||||
return response.data.categories;
|
||||
}
|
||||
|
||||
console.warn("Categories is null or not an array:", response.data);
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error("Error fetching categories:", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const getCategory = async (id: string) => {
|
||||
const response = await httpGetRequest<CategoryResponse>(
|
||||
APIUrlGenerator(API_ROUTES.GET_CATEGORY(id))
|
||||
);
|
||||
return response.data.category;
|
||||
};
|
||||
|
||||
export const createCategory = async (data: CreateCategoryRequest) => {
|
||||
const response = await httpPostRequest<CreateCategoryResponse>(
|
||||
APIUrlGenerator(API_ROUTES.CREATE_CATEGORY),
|
||||
data
|
||||
);
|
||||
return response.data.category;
|
||||
};
|
||||
|
||||
export const updateCategory = async (data: UpdateCategoryRequest) => {
|
||||
const response = await httpPutRequest<UpdateCategoryResponse>(
|
||||
APIUrlGenerator(API_ROUTES.UPDATE_CATEGORY(data.id.toString())),
|
||||
data
|
||||
);
|
||||
return response.data.category;
|
||||
};
|
||||
|
||||
export const deleteCategory = async (id: string) => {
|
||||
const response = await httpDeleteRequest<DeleteCategoryResponse>(
|
||||
APIUrlGenerator(API_ROUTES.DELETE_CATEGORY(id))
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
Loading…
Reference in New Issue