feat(product-options): implement product options management system
- Add product options models, requests and hooks - Implement product options list page with search and CRUD operations - Add product option form page with TagInput for values management - Include real-time preview and help sections for better UX - Support for color, size, material and other product variations
This commit is contained in:
parent
6bcdf72512
commit
b17c8bb408
|
|
@ -0,0 +1,90 @@
|
||||||
|
import { QUERY_KEYS } from "@/utils/query-key";
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import {
|
||||||
|
getProductOptions,
|
||||||
|
getProductOption,
|
||||||
|
createProductOption,
|
||||||
|
updateProductOption,
|
||||||
|
deleteProductOption,
|
||||||
|
} from "./_requests";
|
||||||
|
import {
|
||||||
|
CreateProductOptionRequest,
|
||||||
|
UpdateProductOptionRequest,
|
||||||
|
ProductOptionFilters,
|
||||||
|
} from "./_models";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
|
||||||
|
export const useProductOptions = (filters?: ProductOptionFilters) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTIONS, filters],
|
||||||
|
queryFn: () => getProductOptions(filters),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useProductOption = (id: string, enabled: boolean = true) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTION, id],
|
||||||
|
queryFn: () => getProductOption(id),
|
||||||
|
enabled: enabled && !!id,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCreateProductOption = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.CREATE_PRODUCT_OPTION],
|
||||||
|
mutationFn: (data: CreateProductOptionRequest) => createProductOption(data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTIONS],
|
||||||
|
});
|
||||||
|
toast.success("گزینه محصول با موفقیت ایجاد شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Create product option error:", error);
|
||||||
|
toast.error(error?.message || "خطا در ایجاد گزینه محصول");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useUpdateProductOption = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.UPDATE_PRODUCT_OPTION],
|
||||||
|
mutationFn: (data: UpdateProductOptionRequest) => updateProductOption(data),
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTIONS],
|
||||||
|
});
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTION, variables.id.toString()],
|
||||||
|
});
|
||||||
|
toast.success("گزینه محصول با موفقیت ویرایش شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Update product option error:", error);
|
||||||
|
toast.error(error?.message || "خطا در ویرایش گزینه محصول");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDeleteProductOption = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.DELETE_PRODUCT_OPTION],
|
||||||
|
mutationFn: (id: string) => deleteProductOption(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PRODUCT_OPTIONS],
|
||||||
|
});
|
||||||
|
toast.success("گزینه محصول با موفقیت حذف شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Delete product option error:", error);
|
||||||
|
toast.error(error?.message || "خطا در حذف گزینه محصول");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
export interface ProductOption {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
values: string[];
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductOptionFormData {
|
||||||
|
name: string;
|
||||||
|
values: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductOptionFilters {
|
||||||
|
search?: string;
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateProductOptionRequest {
|
||||||
|
name: string;
|
||||||
|
values: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateProductOptionRequest {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
values: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductOptionsResponse {
|
||||||
|
product_options: ProductOption[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProductOptionResponse {
|
||||||
|
product_option: ProductOption;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateProductOptionResponse {
|
||||||
|
product_option: ProductOption;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateProductOptionResponse {
|
||||||
|
product_option: ProductOption;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeleteProductOptionResponse {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
import {
|
||||||
|
httpGetRequest,
|
||||||
|
httpPostRequest,
|
||||||
|
httpPutRequest,
|
||||||
|
httpDeleteRequest,
|
||||||
|
APIUrlGenerator,
|
||||||
|
} from "@/utils/baseHttpService";
|
||||||
|
import { API_ROUTES } from "@/constant/routes";
|
||||||
|
import {
|
||||||
|
ProductOption,
|
||||||
|
CreateProductOptionRequest,
|
||||||
|
UpdateProductOptionRequest,
|
||||||
|
ProductOptionsResponse,
|
||||||
|
ProductOptionResponse,
|
||||||
|
CreateProductOptionResponse,
|
||||||
|
UpdateProductOptionResponse,
|
||||||
|
DeleteProductOptionResponse,
|
||||||
|
ProductOptionFilters,
|
||||||
|
} from "./_models";
|
||||||
|
|
||||||
|
export const getProductOptions = async (filters?: ProductOptionFilters) => {
|
||||||
|
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<ProductOptionsResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.GET_PRODUCT_OPTIONS, queryParams)
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("Product Options API Response:", response);
|
||||||
|
|
||||||
|
if (
|
||||||
|
response.data &&
|
||||||
|
response.data.product_options &&
|
||||||
|
Array.isArray(response.data.product_options)
|
||||||
|
) {
|
||||||
|
return response.data.product_options;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn("Product options is null or not an array:", response.data);
|
||||||
|
return [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching product options:", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getProductOption = async (id: string) => {
|
||||||
|
const response = await httpGetRequest<ProductOptionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.GET_PRODUCT_OPTION(id))
|
||||||
|
);
|
||||||
|
return response.data.product_option;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createProductOption = async (data: CreateProductOptionRequest) => {
|
||||||
|
const response = await httpPostRequest<CreateProductOptionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.CREATE_PRODUCT_OPTION),
|
||||||
|
data
|
||||||
|
);
|
||||||
|
return response.data.product_option;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateProductOption = async (data: UpdateProductOptionRequest) => {
|
||||||
|
const response = await httpPutRequest<UpdateProductOptionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.UPDATE_PRODUCT_OPTION(data.id.toString())),
|
||||||
|
data
|
||||||
|
);
|
||||||
|
return response.data.product_option;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteProductOption = async (id: string) => {
|
||||||
|
const response = await httpDeleteRequest<DeleteProductOptionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.DELETE_PRODUCT_OPTION(id))
|
||||||
|
);
|
||||||
|
return response.data;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
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 { useProductOption, useCreateProductOption, useUpdateProductOption } from '../core/_hooks';
|
||||||
|
import { ProductOptionFormData } from '../core/_models';
|
||||||
|
import { Button } from "@/components/ui/Button";
|
||||||
|
import { Input } from "@/components/ui/Input";
|
||||||
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||||
|
import { TagInput } from "@/components/ui/TagInput";
|
||||||
|
import { ArrowRight, Settings } from "lucide-react";
|
||||||
|
|
||||||
|
const productOptionSchema = yup.object({
|
||||||
|
name: yup.string().required('نام گزینه الزامی است').min(2, 'نام گزینه باید حداقل 2 کاراکتر باشد'),
|
||||||
|
values: yup.array().of(yup.string()).min(1, 'حداقل یک مقدار باید وارد شود').required('مقادیر الزامی است'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const ProductOptionFormPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const isEdit = !!id;
|
||||||
|
|
||||||
|
const { data: productOption, isLoading: isLoadingOption } = useProductOption(id || '', isEdit);
|
||||||
|
const { mutate: createOption, isPending: isCreating } = useCreateProductOption();
|
||||||
|
const { mutate: updateOption, isPending: isUpdating } = useUpdateProductOption();
|
||||||
|
|
||||||
|
const isLoading = isCreating || isUpdating;
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isValid, isDirty },
|
||||||
|
setValue,
|
||||||
|
watch,
|
||||||
|
control
|
||||||
|
} = useForm<ProductOptionFormData>({
|
||||||
|
resolver: yupResolver(productOptionSchema) as any,
|
||||||
|
mode: 'onChange',
|
||||||
|
defaultValues: {
|
||||||
|
name: '',
|
||||||
|
values: []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const formValues = watch();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit && productOption) {
|
||||||
|
setValue('name', productOption.name, { shouldValidate: true });
|
||||||
|
setValue('values', productOption.values, { shouldValidate: true });
|
||||||
|
}
|
||||||
|
}, [isEdit, productOption, setValue]);
|
||||||
|
|
||||||
|
const onSubmit = (data: ProductOptionFormData) => {
|
||||||
|
if (isEdit && id) {
|
||||||
|
updateOption({
|
||||||
|
id: parseInt(id),
|
||||||
|
name: data.name,
|
||||||
|
values: data.values
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
navigate('/product-options');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
createOption({
|
||||||
|
name: data.name,
|
||||||
|
values: data.values
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
navigate('/product-options');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
navigate('/product-options');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleValuesChange = (values: string[]) => {
|
||||||
|
setValue('values', values, { shouldValidate: true, shouldDirty: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit && isLoadingOption) {
|
||||||
|
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">
|
||||||
|
<Settings 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="مثال: رنگ، سایز، جنس"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TagInput
|
||||||
|
label="مقادیر گزینه"
|
||||||
|
values={watch('values') || []}
|
||||||
|
onChange={handleValuesChange}
|
||||||
|
placeholder="مقدار جدید اضافه کنید..."
|
||||||
|
error={errors.values?.message}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Preview */}
|
||||||
|
{formValues.values && formValues.values.length > 0 && (
|
||||||
|
<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>
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<strong>مقادیر:</strong>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{formValues.values.map((value, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="inline-flex items-center px-2 py-1 rounded-md text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200"
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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>• برای اضافه کردن مقدار جدید، آن را تایپ کنید و Enter بزنید</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProductOptionFormPage;
|
||||||
|
|
@ -0,0 +1,317 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useProductOptions, useDeleteProductOption } from '../core/_hooks';
|
||||||
|
import { ProductOption } from '../core/_models';
|
||||||
|
import { Button } from "@/components/ui/Button";
|
||||||
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||||
|
import { Trash2, Edit3, Plus, Settings, Tag } from "lucide-react";
|
||||||
|
import { Modal } from "@/components/ui/Modal";
|
||||||
|
|
||||||
|
const ProductOptionsTableSkeleton = () => (
|
||||||
|
<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 ProductOptionsListPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [deleteOptionId, setDeleteOptionId] = useState<string | null>(null);
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
search: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: productOptions, isLoading, error } = useProductOptions(filters);
|
||||||
|
const { mutate: deleteOption, isPending: isDeleting } = useDeleteProductOption();
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
navigate('/product-options/create');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (optionId: number) => {
|
||||||
|
navigate(`/product-options/${optionId}/edit`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = () => {
|
||||||
|
if (deleteOptionId) {
|
||||||
|
deleteOption(deleteOptionId, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setDeleteOptionId(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">
|
||||||
|
<Settings 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>
|
||||||
|
|
||||||
|
{/* Product Options Table */}
|
||||||
|
{isLoading ? (
|
||||||
|
<ProductOptionsTableSkeleton />
|
||||||
|
) : (
|
||||||
|
<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">
|
||||||
|
{(productOptions || []).map((option: ProductOption) => (
|
||||||
|
<tr key={option.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">
|
||||||
|
{option.name}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">
|
||||||
|
<div className="flex flex-wrap gap-1 max-w-xs">
|
||||||
|
{option.values.slice(0, 3).map((value, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="inline-flex items-center px-2 py-1 rounded-md text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
|
||||||
|
>
|
||||||
|
<Tag className="h-3 w-3 mr-1" />
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{option.values.length > 3 && (
|
||||||
|
<span className="inline-flex items-center px-2 py-1 rounded-md text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
|
||||||
|
+{option.values.length - 3} بیشتر
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
|
||||||
|
{new Date(option.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(option.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={() => setDeleteOptionId(option.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">
|
||||||
|
{(productOptions || []).map((option: ProductOption) => (
|
||||||
|
<div key={option.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">
|
||||||
|
{option.name}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-2">
|
||||||
|
{option.values.slice(0, 3).map((value, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="inline-flex items-center px-2 py-1 rounded-md text-xs bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-gray-200"
|
||||||
|
>
|
||||||
|
<Tag className="h-3 w-3 mr-1" />
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{option.values.length > 3 && (
|
||||||
|
<span className="inline-flex items-center px-2 py-1 rounded-md text-xs bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
|
||||||
|
+{option.values.length - 3} بیشتر
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||||||
|
تاریخ ایجاد: {new Date(option.created_at).toLocaleDateString('fa-IR')}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handleEdit(option.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={() => setDeleteOptionId(option.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 */}
|
||||||
|
{(!productOptions || productOptions.length === 0) && !isLoading && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Settings 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={!!deleteOptionId}
|
||||||
|
onClose={() => setDeleteOptionId(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={() => setDeleteOptionId(null)}
|
||||||
|
disabled={isDeleting}
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
onClick={handleDeleteConfirm}
|
||||||
|
loading={isDeleting}
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProductOptionsListPage;
|
||||||
Loading…
Reference in New Issue