all comments and aprove them
This commit is contained in:
hamid zarghami
+1
-1
@@ -1,7 +1,7 @@
|
||||
import { type FC, useEffect, useState } from 'react'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
// import 'swiper/swiper-bundle.css';
|
||||
// import 'rc-rate/assets/index.css';
|
||||
import 'rc-rate/assets/index.css';
|
||||
// import "react-multi-date-picker/styles/layouts/mobile.css"
|
||||
import './assets/fonts/irancell/style.css'
|
||||
import i18next from 'i18next'
|
||||
|
||||
@@ -15,6 +15,7 @@ export const PageTitles = {
|
||||
[Pages.products.warranty.list]: "لیست گارانتیها",
|
||||
[Pages.products.warranty.create]: "افزودن گارانتی جدید",
|
||||
[Pages.products.warranty.update]: "ویرایش گارانتی",
|
||||
[Pages.products.reviews.list]: "نظرات محصولات",
|
||||
|
||||
// Categories
|
||||
[Pages.category.list]: "لیست دستهبندیها",
|
||||
|
||||
@@ -168,6 +168,12 @@ export const Pages = {
|
||||
create: "/products/warranty/create",
|
||||
update: "/products/warranty/update/",
|
||||
},
|
||||
reviews: {
|
||||
list: "/products/reviews",
|
||||
},
|
||||
questions: {
|
||||
list: "/products/questions",
|
||||
},
|
||||
},
|
||||
orders: {
|
||||
native: "/orders/native",
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useGetProductReviews, useApproveProductReview } from './hooks/useProductData'
|
||||
import { type ProductReviewType } from './types/Types'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Error from '../../components/Error'
|
||||
import PageTitle from '../../components/PageTitle'
|
||||
import Td from '../../components/Td'
|
||||
import PaginationUi from '../../components/PaginationUi'
|
||||
import StatusWithText from '../../components/StatusWithText'
|
||||
import { ReviewModal } from './components'
|
||||
import Rate from 'rc-rate'
|
||||
import { Eye } from 'iconsax-react'
|
||||
|
||||
const Reviews: FC = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [selectedReview, setSelectedReview] = useState<ProductReviewType | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const { data, isLoading, error, refetch } = useGetProductReviews(currentPage);
|
||||
const approveMutation = useApproveProductReview();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-[400px]">
|
||||
<PageLoading />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-[400px]">
|
||||
<Error errorText="خطا در بارگذاری نظرات" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const reviews = data?.results?.comments || [];
|
||||
const pager = data?.results?.pager;
|
||||
|
||||
const getStatusVariant = (status: string) => {
|
||||
switch (status) {
|
||||
case 'accepted': return 'success';
|
||||
case 'rejected': return 'error';
|
||||
case 'pending': return 'warning';
|
||||
default: return 'warning';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'accepted': return 'تایید شده';
|
||||
case 'rejected': return 'رد شده';
|
||||
case 'pending': return 'در انتظار';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewReview = (review: ProductReviewType) => {
|
||||
setSelectedReview(review);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setSelectedReview(null);
|
||||
};
|
||||
|
||||
const handleApproveReview = async (reviewId: string) => {
|
||||
try {
|
||||
await approveMutation.mutateAsync(reviewId);
|
||||
await refetch();
|
||||
handleCloseModal();
|
||||
} catch (error) {
|
||||
console.error('خطا در تایید کامنت:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageTitle />
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
|
||||
<table className='w-full text-sm'>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={'نام کاربر'} />
|
||||
<Td text={'محصول'} />
|
||||
<Td text={'عنوان نظر'} />
|
||||
<Td text={'امتیاز'} />
|
||||
<Td text={'وضعیت'} />
|
||||
<Td text={'تاریخ'} />
|
||||
<Td text={'عملیات'} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reviews.length === 0 ? (
|
||||
<tr className='tr'>
|
||||
<td colSpan={6} className="text-center py-8 text-gray-500">
|
||||
هیچ نظری یافت نشد
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
reviews.map((review: ProductReviewType) => (
|
||||
<tr key={review._id} className='tr'>
|
||||
<Td text="">
|
||||
<div className="font-medium text-gray-900">
|
||||
{review.user?.[0]?.fullName || 'کاربر ناشناس'}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={review.product?.imagesUrl?.cover || '/placeholder-image.png'}
|
||||
alt={review.product?.title_fa}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">
|
||||
{review.product?.title_fa}
|
||||
</div>
|
||||
<div className="text-gray-500 text-xs">
|
||||
{review.product?.title_en}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={review.title} />
|
||||
<Td text="">
|
||||
<Rate value={review.rate} disabled />
|
||||
</Td>
|
||||
<Td text="">
|
||||
<StatusWithText
|
||||
variant={getStatusVariant(review.status)}
|
||||
text={getStatusText(review.status)}
|
||||
/>
|
||||
</Td>
|
||||
<Td text={review.createdAt} />
|
||||
<Td text="">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye
|
||||
size={16}
|
||||
color="#8C90A3"
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleViewReview(review)}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<PaginationUi
|
||||
pager={pager}
|
||||
onPageChange={(page) => {
|
||||
setCurrentPage(page);
|
||||
}}
|
||||
/>
|
||||
|
||||
<ReviewModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
review={selectedReview}
|
||||
onApprove={handleApproveReview}
|
||||
isApproving={approveMutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Reviews
|
||||
@@ -0,0 +1,153 @@
|
||||
import { type FC } from 'react'
|
||||
import { type ProductReviewType } from '../types/Types'
|
||||
import DefaulModal from '../../../components/DefaulModal'
|
||||
import StatusWithText from '../../../components/StatusWithText'
|
||||
import Rate from 'rc-rate'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
|
||||
interface ReviewModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
review: ProductReviewType | null
|
||||
onApprove: (reviewId: string) => void
|
||||
isApproving?: boolean
|
||||
}
|
||||
|
||||
const ReviewModal: FC<ReviewModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
review,
|
||||
onApprove,
|
||||
isApproving = false
|
||||
}) => {
|
||||
const getStatusVariant = (status: string) => {
|
||||
switch (status) {
|
||||
case 'accepted': return 'success';
|
||||
case 'rejected': return 'error';
|
||||
case 'pending': return 'warning';
|
||||
default: return 'warning';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'accepted': return 'تایید شده';
|
||||
case 'rejected': return 'رد شده';
|
||||
case 'pending': return 'در انتظار';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
const handleApprove = () => {
|
||||
if (review) {
|
||||
onApprove(review._id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaulModal
|
||||
open={isOpen}
|
||||
close={onClose}
|
||||
isHeader={true}
|
||||
title_header="مشاهده کامنت"
|
||||
width={600}
|
||||
>
|
||||
{review && (
|
||||
<div className="space-y-4 mt-5 w-[400px]">
|
||||
{/* اطلاعات کاربر و محصول */}
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg overflow-hidden">
|
||||
<img
|
||||
src={review.product?.imagesUrl?.cover || '/placeholder-image.png'}
|
||||
alt={review.product?.title_fa}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900 text-sm">
|
||||
{review.product?.title_fa}
|
||||
</div>
|
||||
<div className="text-gray-500 text-xs">
|
||||
توسط {review.user?.[0]?.fullName || 'کاربر ناشناس'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* عنوان کامنت */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">{review.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* امتیاز */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">امتیاز:</span>
|
||||
<Rate value={review.rate} disabled />
|
||||
</div>
|
||||
|
||||
{/* محتوای کامنت */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-gray-900 mb-2">متن کامنت:</h4>
|
||||
<p className="text-gray-700 leading-relaxed">{review.content}</p>
|
||||
</div>
|
||||
|
||||
{/* مزایا */}
|
||||
{review.advantage && review.advantage.length > 0 && (
|
||||
<div className="bg-green-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-green-900 mb-2">مزایا:</h4>
|
||||
<ul className="list-disc list-inside text-green-800 space-y-1">
|
||||
{review.advantage.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* معایب */}
|
||||
{review.disAdvantage && review.disAdvantage.length > 0 && (
|
||||
<div className="bg-red-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-red-900 mb-2">معایب:</h4>
|
||||
<ul className="list-disc list-inside text-red-800 space-y-1">
|
||||
{review.disAdvantage.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* وضعیت */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-600">وضعیت:</span>
|
||||
<StatusWithText
|
||||
variant={getStatusVariant(review.status)}
|
||||
text={getStatusText(review.status)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* تاریخ */}
|
||||
<div className="text-sm text-gray-500">
|
||||
تاریخ ارسال: {review.createdAt}
|
||||
</div>
|
||||
|
||||
{/* دکمه تایید */}
|
||||
{review.status !== 'accepted' && (
|
||||
<div className="flex justify-end pt-4 border-t">
|
||||
<Button
|
||||
onClick={handleApprove}
|
||||
disabled={isApproving}
|
||||
className="bg-green-600 hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
<TickCircle color="#fff" size={16} className="" />
|
||||
{isApproving ? 'در حال تایید...' : 'تایید کامنت'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReviewModal
|
||||
@@ -2,3 +2,4 @@ export { default as StepIndicator } from "./StepIndicator";
|
||||
export { default as Step1Form } from "./Step1Form";
|
||||
export { default as Step2Form } from "./Step2Form";
|
||||
export { default as Step3Form } from "./Step3Form";
|
||||
export { default as ReviewModal } from "./ReviewModal";
|
||||
|
||||
@@ -104,3 +104,16 @@ export const useDeleteProduct = () => {
|
||||
mutationFn: (id: number) => api.deleteProduct(id),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetProductReviews = (page: number = 1, limit: number = 10) => {
|
||||
return useQuery({
|
||||
queryKey: ['product-reviews', page, limit],
|
||||
queryFn: () => api.getProductReviews(page, limit),
|
||||
});
|
||||
};
|
||||
|
||||
export const useApproveProductReview = () => {
|
||||
return useMutation({
|
||||
mutationFn: api.approveProductReview,
|
||||
});
|
||||
};
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
type SaveProductResponseType,
|
||||
type GetProductsResponseType,
|
||||
type GetProductVariantsResponseType,
|
||||
type GetProductReviewsResponseType,
|
||||
type CreateProductVariantRequestType,
|
||||
type CreateProductVariantResponseType,
|
||||
type GetProductByIdResponseType,
|
||||
@@ -99,3 +100,14 @@ export const deleteProduct = async (id: number) => {
|
||||
const { data } = await axios.delete(`/admin/products/${id}/delete`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getProductReviews = async (page: number = 1, limit: number = 10): Promise<GetProductReviewsResponseType> => {
|
||||
const params: Record<string, string | number> = { page, limit };
|
||||
const { data } = await axios.get(`/admin/products/comments`, { params });
|
||||
return data;
|
||||
};
|
||||
|
||||
export const approveProductReview = async (id: string) => {
|
||||
const { data } = await axios.post(`/admin/products/comments/${id}/approve`);
|
||||
return data;
|
||||
};
|
||||
@@ -402,6 +402,60 @@ export type UpdateVariantResponseType = {
|
||||
};
|
||||
};
|
||||
|
||||
// تایپهای مربوط به reviews/comments محصول
|
||||
export type ProductReviewUserType = {
|
||||
fullName: string;
|
||||
};
|
||||
|
||||
export type ProductReviewProductType = {
|
||||
_id: number;
|
||||
title_fa: string;
|
||||
title_en: string;
|
||||
seoTitle: string;
|
||||
seoDescription: string | null;
|
||||
source: string;
|
||||
description: string;
|
||||
metaDescription: string;
|
||||
tags: string[];
|
||||
advantages: string[];
|
||||
disAdvantages: string[];
|
||||
imagesUrl: ProductImagesType;
|
||||
isFake: string;
|
||||
voice: string | null;
|
||||
specifications: ProductSpecificationType[];
|
||||
brand: {
|
||||
_id: string;
|
||||
};
|
||||
category: {
|
||||
_id: string;
|
||||
};
|
||||
variants: {
|
||||
_id: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export type ProductReviewType = {
|
||||
_id: string;
|
||||
title: string;
|
||||
advantage: string[];
|
||||
disAdvantage: string[];
|
||||
content: string;
|
||||
status: string;
|
||||
rate: number;
|
||||
user: ProductReviewUserType[];
|
||||
product: ProductReviewProductType;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export type GetProductReviewsResponseType = {
|
||||
status: number;
|
||||
success: boolean;
|
||||
results: {
|
||||
pager: PagerType;
|
||||
comments: ProductReviewType[];
|
||||
};
|
||||
};
|
||||
|
||||
// تایپهای مربوط به آپدیت محصول سه مرحلهای
|
||||
|
||||
// مرحله اول: آپدیت جزئیات محصول
|
||||
|
||||
@@ -77,6 +77,7 @@ import Category from '@/pages/ticket/Category'
|
||||
import CreateCategory from '@/pages/ticket/Create'
|
||||
import UpdateCategory from '@/pages/ticket/Update'
|
||||
import TicketMessages from '@/pages/ticket/TicketMessages'
|
||||
import Reviews from '@/pages/products/Reviews'
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
const { hasSubMenu } = useSharedStore()
|
||||
@@ -187,6 +188,8 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.sellers.learningCreate} element={<CreateLearning />} />
|
||||
<Route path={`${Pages.sellers.learningUpdate}:id`} element={<UpdateLearning />} />
|
||||
<Route path={Pages.sellers.contract} element={<ContractPage />} />
|
||||
|
||||
<Route path={Pages.products.reviews.list} element={<Reviews />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,6 +44,18 @@ const ProductsSubMenu: FC = () => {
|
||||
isActive={isActive('warranty')}
|
||||
link={Pages.products.warranty.list}
|
||||
/>
|
||||
|
||||
<SubMenuItem
|
||||
title={'نظرات محصولات'}
|
||||
isActive={isActive('reviews')}
|
||||
link={Pages.products.reviews.list}
|
||||
/>
|
||||
|
||||
<SubMenuItem
|
||||
title={'پرسش های محصولات'}
|
||||
isActive={isActive('questions')}
|
||||
link={Pages.products.questions.list}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user