crud slider + fix footer
This commit is contained in:
hamid zarghami
@@ -72,6 +72,7 @@ export const Pages = {
|
||||
setting: {
|
||||
shop: "/settings/shop",
|
||||
banners: "/settings/banners",
|
||||
sliders: "/settings/sliders",
|
||||
siteSetting: "/settings/site-setting",
|
||||
},
|
||||
wallet: "/wallet",
|
||||
|
||||
@@ -13,6 +13,12 @@ interface AttributeSelectorProps {
|
||||
onChange: (attributeId: number, values: number[]) => void;
|
||||
}
|
||||
|
||||
interface TextNumberInputProps {
|
||||
attribute: CategoryAttributeType;
|
||||
value: string;
|
||||
onChange: (attributeId: number, value: string) => void;
|
||||
}
|
||||
|
||||
const AttributeSelector: FC<AttributeSelectorProps> = ({ attribute, selectedValues, onChange }) => {
|
||||
const handleValueChange = (valueId: number, checked: boolean) => {
|
||||
if (attribute.multiple) {
|
||||
@@ -61,6 +67,55 @@ const AttributeSelector: FC<AttributeSelectorProps> = ({ attribute, selectedValu
|
||||
);
|
||||
};
|
||||
|
||||
const TextNumberInput: FC<TextNumberInputProps> = ({ attribute, value, onChange }) => {
|
||||
if (attribute.type === 'boolean') {
|
||||
return (
|
||||
<div className="mb-6 p-4 border border-gray-200 rounded-lg bg-gray-50">
|
||||
<label className="block text-sm font-semibold text-gray-800 mb-2">
|
||||
{attribute.title}
|
||||
{attribute.required && <span className="text-red-500 mr-1">*</span>}
|
||||
</label>
|
||||
|
||||
{attribute.hint && (
|
||||
<p className="text-xs text-gray-500 mb-3">{attribute.hint}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value === 'true'}
|
||||
onChange={(e) => onChange(attribute._id, e.target.checked ? 'true' : 'false')}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">بله</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-6 p-4 border border-gray-200 rounded-lg bg-gray-50">
|
||||
<label className="block text-sm font-semibold text-gray-800 mb-2">
|
||||
{attribute.title}
|
||||
{attribute.required && <span className="text-red-500 mr-1">*</span>}
|
||||
</label>
|
||||
|
||||
{attribute.hint && (
|
||||
<p className="text-xs text-gray-500 mb-3">{attribute.hint}</p>
|
||||
)}
|
||||
|
||||
<Input
|
||||
type={attribute.type === 'number' ? 'number' : 'text'}
|
||||
value={value}
|
||||
onChange={(e) => onChange(attribute._id, e.target.value)}
|
||||
placeholder={`مقدار ${attribute.title} را وارد کنید`}
|
||||
className="w-full"
|
||||
required={attribute.required}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface Step2FormProps {
|
||||
onSubmit: (data: Omit<CreateProductAttributeRequestType, 'productId'>) => void;
|
||||
loading: boolean;
|
||||
@@ -69,6 +124,11 @@ interface Step2FormProps {
|
||||
initialData?: Partial<Omit<CreateProductAttributeRequestType, 'productId'>>;
|
||||
}
|
||||
|
||||
interface AttributeWithValue {
|
||||
id: number;
|
||||
values: number[] | string[];
|
||||
}
|
||||
|
||||
// کامپوننت مدیریت تگها
|
||||
interface TagInputProps {
|
||||
tags: string[];
|
||||
@@ -200,7 +260,7 @@ const ListInput: FC<ListInputProps> = ({ items, onChange, placeholder, label })
|
||||
|
||||
const Step2Form: FC<Step2FormProps> = ({ onSubmit, loading, onPrevious, categoryId, initialData }) => {
|
||||
const [formData, setFormData] = useState<Omit<CreateProductAttributeRequestType, 'productId'>>(() => ({
|
||||
attributes: initialData?.attributes || [],
|
||||
attributes: (initialData?.attributes || []) as AttributeWithValue[],
|
||||
description: initialData?.description || '',
|
||||
metaDescription: initialData?.metaDescription || '',
|
||||
tags: initialData?.tags || [],
|
||||
@@ -220,6 +280,16 @@ const Step2Form: FC<Step2FormProps> = ({ onSubmit, loading, onPrevious, category
|
||||
}));
|
||||
};
|
||||
|
||||
const handleTextNumberAttributeChange = (attributeId: number, value: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
attributes: prev.attributes.filter(attr => attr.id !== attributeId).concat({
|
||||
id: attributeId,
|
||||
values: value ? [value] : []
|
||||
})
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onSubmit(formData);
|
||||
@@ -234,12 +304,26 @@ const Step2Form: FC<Step2FormProps> = ({ onSubmit, loading, onPrevious, category
|
||||
{categoryAttributesData.results.data.category.attributes.map((attribute) => {
|
||||
const selectedAttribute = formData.attributes.find(attr => attr.id === attribute._id);
|
||||
const selectedValues = selectedAttribute?.values || [];
|
||||
const attributeValue = selectedValues.length > 0 ? String(selectedValues[0]) : '';
|
||||
|
||||
// برای attributeهای text، number و boolean از TextNumberInput استفاده کن
|
||||
if (attribute.type === 'text' || attribute.type === 'number' || attribute.type === 'boolean') {
|
||||
return (
|
||||
<TextNumberInput
|
||||
key={attribute._id}
|
||||
attribute={attribute}
|
||||
value={attributeValue}
|
||||
onChange={handleTextNumberAttributeChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// برای attributeهای انتخابی از AttributeSelector استفاده کن
|
||||
return (
|
||||
<AttributeSelector
|
||||
key={attribute._id}
|
||||
attribute={attribute}
|
||||
selectedValues={selectedValues}
|
||||
selectedValues={selectedValues as number[]}
|
||||
onChange={handleAttributeChange}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -33,7 +33,7 @@ export type CreateProductDetailResponseType = {
|
||||
// مرحله دوم: ویژگیها و توضیحات
|
||||
export type ProductAttributeType = {
|
||||
id: number;
|
||||
values: number[];
|
||||
values: number[] | string[];
|
||||
};
|
||||
|
||||
export type CreateProductAttributeRequestType = {
|
||||
|
||||
@@ -42,7 +42,6 @@ const validationSchema = Yup.object().shape({
|
||||
footerAddress: Yup.string().trim().required('آدرس فوتر الزامی است'),
|
||||
footerDescription: Yup.string().trim().required('توضیحات فوتر الزامی است'),
|
||||
shopPostalCode: Yup.string().trim(),
|
||||
siteLogo: Yup.string(),
|
||||
downloadAppDetails: Yup.array(),
|
||||
socialMediaLinks: Yup.array()
|
||||
})
|
||||
@@ -50,13 +49,15 @@ const validationSchema = Yup.object().shape({
|
||||
const SiteSetting: FC = () => {
|
||||
|
||||
const { data, isLoading } = useGetSiteSetting()
|
||||
const { data: shopData } = useGetShop()
|
||||
const { data: shopData, isLoading: isShopLoading } = useGetShop()
|
||||
const updateSiteSetting = useUpdateSiteSetting()
|
||||
const [isDataLoaded, setIsDataLoaded] = useState(false)
|
||||
const [uploadingIndexes, setUploadingIndexes] = useState<Set<number>>(new Set())
|
||||
const [pendingFiles, setPendingFiles] = useState<{ [key: string]: File }>({})
|
||||
const singleUpload = useSingleUpload()
|
||||
|
||||
|
||||
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues: {
|
||||
siteLogo: undefined,
|
||||
@@ -119,21 +120,26 @@ const SiteSetting: FC = () => {
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.results?.siteSetting && shopData?.results?.shop) {
|
||||
// وقتی loading تمام شد، دادهها را مقداردهی اولیه کن
|
||||
if (!isLoading && !isShopLoading) {
|
||||
const siteSetting = data?.results?.siteSetting || {}
|
||||
const shop = shopData?.results?.shop || {}
|
||||
|
||||
formik.setValues({
|
||||
siteLogo: data.results.siteSetting.siteLogo || undefined,
|
||||
footerPhone: data.results.siteSetting.footerPhone || '',
|
||||
footerEmail: data.results.siteSetting.footerEmail || '',
|
||||
footerAddress: data.results.siteSetting.footerAddress || '',
|
||||
footerDescription: data.results.siteSetting.footerDescription || '',
|
||||
shopPostalCode: shopData.results.shop.shopPostalCode || '',
|
||||
downloadAppDetails: (data.results.siteSetting.downloadAppDetails || []).map((item: { _id?: string; pic: string; url: string }, index: number) => ({
|
||||
siteLogo: siteSetting.siteLogo || undefined,
|
||||
footerPhone: siteSetting.footerPhone || '',
|
||||
footerEmail: siteSetting.footerEmail || '',
|
||||
footerAddress: siteSetting.footerAddress || '',
|
||||
footerDescription: siteSetting.footerDescription || '',
|
||||
shopPostalCode: (shop && 'shopPostalCode' in shop ? String(shop.shopPostalCode) : '') || '',
|
||||
downloadAppDetails: (siteSetting.downloadAppDetails || []).map((item: { _id?: string; pic: string; url: string }, index: number) => ({
|
||||
id: item._id || `existing-${index}-${Date.now()}`,
|
||||
pic: item.pic,
|
||||
url: item.url
|
||||
})),
|
||||
socialMediaLinks: (data.results.siteSetting.socialMediaLinks || []).map((item: { icon: string; url: string }, index: number) => ({
|
||||
socialMediaLinks: (siteSetting.socialMediaLinks || []).map((item: { icon: string; url: string }, index: number) => ({
|
||||
id: `existing-${index}-${Date.now()}`,
|
||||
icon: item.icon,
|
||||
url: item.url
|
||||
@@ -142,7 +148,7 @@ const SiteSetting: FC = () => {
|
||||
setIsDataLoaded(true)
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data, shopData])
|
||||
}, [data, shopData, isLoading, isShopLoading])
|
||||
|
||||
|
||||
const uploadAllPendingFiles = async (): Promise<{ [key: string]: string }> => {
|
||||
@@ -201,7 +207,9 @@ const SiteSetting: FC = () => {
|
||||
}
|
||||
|
||||
|
||||
if (isLoading) {
|
||||
|
||||
|
||||
if (isLoading || isShopLoading) {
|
||||
return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,214 @@
|
||||
import { useState, type FC } from 'react'
|
||||
import PageTitle from '@/components/PageTitle'
|
||||
import { useDeleteSlider, useGetSliders, useUpdateSlider } from './hooks/useSettingData'
|
||||
import { type SliderItem, type UpdateSliderType } from './types/Types'
|
||||
import PageLoading from '@/components/PageLoading'
|
||||
import Error from '@/components/Error'
|
||||
import Td from '@/components/Td'
|
||||
import { Calendar, Add, Edit, Eye } from 'iconsax-react'
|
||||
import Button from '@/components/Button'
|
||||
import TrashWithConfrim from '@/components/TrashWithConfrim'
|
||||
import Switch from '@/components/Switch'
|
||||
import CreateSliderModal from './components/CreateSliderModal'
|
||||
import EditSliderModal from './components/EditSliderModal'
|
||||
|
||||
const Sliders: FC = () => {
|
||||
const { data, isLoading, error, refetch } = useGetSliders()
|
||||
const updateSlider = useUpdateSlider()
|
||||
const deleteSlider = useDeleteSlider()
|
||||
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
|
||||
const [editingSlider, setEditingSlider] = useState<SliderItem | null>(null)
|
||||
|
||||
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 sliders = data?.results?.sliders || []
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
if (!dateString) return '-'
|
||||
return new Date(dateString).toLocaleDateString('fa-IR')
|
||||
}
|
||||
|
||||
const truncateText = (text: string, maxLength: number = 30) => {
|
||||
if (text.length <= maxLength) return text
|
||||
return text.substring(0, maxLength) + '...'
|
||||
}
|
||||
|
||||
const getDisplayLocationLabel = (location: 'desktop' | 'mobile') => {
|
||||
return location === 'desktop' ? 'دسکتاپ' : 'موبایل'
|
||||
}
|
||||
|
||||
const handleStatusToggle = (slider: SliderItem) => {
|
||||
const updateData: UpdateSliderType = {
|
||||
displayLocation: slider.displayLocation,
|
||||
imageUrl: slider.imageUrl,
|
||||
altText: slider.altText,
|
||||
title: slider.title,
|
||||
linkUrl: slider.linkUrl,
|
||||
isActive: !slider.isActive,
|
||||
}
|
||||
|
||||
updateSlider.mutate({ id: slider._id, params: updateData })
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageTitle />
|
||||
<div className="flex justify-between items-center gap-4 mb-5">
|
||||
<div className='flex items-center gap-3'>
|
||||
<h1>مدیریت اسلایدرها</h1>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
className='w-fit'
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Add size={16} color='#fff' />
|
||||
<span>افزودن اسلایدر جدید</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<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={'تاریخ ایجاد'} />
|
||||
<Td text={'عملیات'} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sliders.length === 0 ? (
|
||||
<tr className='tr'>
|
||||
<td colSpan={8} className="text-center py-8 text-gray-500">
|
||||
هیچ اسلایدری یافت نشد
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
sliders.map((slider: SliderItem) => (
|
||||
<tr key={slider._id} className='tr'>
|
||||
<Td text="">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={slider.imageUrl}
|
||||
alt={slider.altText}
|
||||
className="max-w-20 max-h-20 object-contain rounded"
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="max-w-xs">
|
||||
<span className="font-medium">{slider.title}</span>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="max-w-xs">
|
||||
<span className="text-gray-600 text-sm">
|
||||
{truncateText(slider.altText)}
|
||||
</span>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="max-w-xs">
|
||||
<a
|
||||
href={slider.linkUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1"
|
||||
>
|
||||
<Eye size={14} />
|
||||
{truncateText(slider.linkUrl)}
|
||||
</a>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<span className="px-2 py-1 bg-gray-100 rounded text-xs">
|
||||
{getDisplayLocationLabel(slider.displayLocation)}
|
||||
</span>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<Switch
|
||||
active={slider.isActive}
|
||||
onChange={() => handleStatusToggle(slider)}
|
||||
isLoading={updateSlider.isPending}
|
||||
/>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} color="#8C90A3" />
|
||||
<span>{formatDate(slider.createdAt)}</span>
|
||||
</div>
|
||||
</Td>
|
||||
<Td text="">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setEditingSlider(slider)}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
>
|
||||
<Edit size={16} color="#8C90A3" />
|
||||
</button>
|
||||
<TrashWithConfrim
|
||||
onDelete={() => {
|
||||
deleteSlider.mutate(slider._id, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
}
|
||||
})
|
||||
}}
|
||||
isLoading={deleteSlider.isPending}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<CreateSliderModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
onSuccess={() => {
|
||||
setIsCreateModalOpen(false)
|
||||
refetch()
|
||||
}}
|
||||
/>
|
||||
|
||||
{editingSlider && (
|
||||
<EditSliderModal
|
||||
slider={editingSlider}
|
||||
isOpen={!!editingSlider}
|
||||
onClose={() => setEditingSlider(null)}
|
||||
onSuccess={() => {
|
||||
setEditingSlider(null)
|
||||
refetch()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sliders
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
import React, { useState } from 'react'
|
||||
import { type FC } from 'react'
|
||||
import Button from '@/components/Button'
|
||||
import Input from '@/components/Input'
|
||||
import DefaulModal from '@/components/DefaulModal'
|
||||
import Select from '@/components/Select'
|
||||
import { useCreateSlider } from '../hooks/useSettingData'
|
||||
import { useUploadSingle } from '@/pages/uploader/hooks/useUploaderData'
|
||||
import { type CreateSliderType } from '../types/Types'
|
||||
import { toast } from 'react-toastify'
|
||||
import { extractErrorMessage } from '@/helpers/utils'
|
||||
import UploadBox from '@/components/UploadBox'
|
||||
import Switch from '@/components/Switch'
|
||||
|
||||
interface CreateSliderModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
const CreateSliderModal: FC<CreateSliderModalProps> = ({ isOpen, onClose }) => {
|
||||
const [formData, setFormData] = useState<CreateSliderType>({
|
||||
displayLocation: 'desktop',
|
||||
imageUrl: '',
|
||||
altText: '',
|
||||
title: '',
|
||||
linkUrl: '',
|
||||
isActive: true,
|
||||
})
|
||||
|
||||
const [imageFile, setImageFile] = useState<File[]>([])
|
||||
|
||||
const createSliderMutation = useCreateSlider()
|
||||
const uploadSingle = useUploadSingle()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!formData.title || !formData.altText || !formData.linkUrl) {
|
||||
toast.error('لطفا تمام فیلدهای الزامی را پر کنید')
|
||||
return
|
||||
}
|
||||
|
||||
if (imageFile.length === 0) {
|
||||
toast.error('لطفا تصویر اسلایدر را انتخاب کنید')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// Upload image first
|
||||
const uploadResponse = await uploadSingle.mutateAsync(imageFile[0])
|
||||
const imageUrl = uploadResponse.results?.url?.url
|
||||
|
||||
if (!imageUrl) {
|
||||
toast.error('خطا در آپلود تصویر')
|
||||
return
|
||||
}
|
||||
|
||||
// Create slider with uploaded image URL
|
||||
await createSliderMutation.mutateAsync({
|
||||
displayLocation: formData.displayLocation,
|
||||
imageUrl,
|
||||
altText: formData.altText,
|
||||
title: formData.title,
|
||||
linkUrl: formData.linkUrl,
|
||||
isActive: formData.isActive,
|
||||
}, {
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
|
||||
toast.success('اسلایدر با موفقیت اضافه شد')
|
||||
handleClose()
|
||||
} catch (error) {
|
||||
toast.error('خطا در آپلود تصویر')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setFormData({
|
||||
displayLocation: 'desktop',
|
||||
imageUrl: '',
|
||||
altText: '',
|
||||
title: '',
|
||||
linkUrl: '',
|
||||
isActive: true,
|
||||
})
|
||||
setImageFile([])
|
||||
onClose()
|
||||
}
|
||||
|
||||
const displayLocationOptions = [
|
||||
{ value: 'desktop', label: 'دسکتاپ' },
|
||||
{ value: 'mobile', label: 'موبایل' },
|
||||
]
|
||||
|
||||
return (
|
||||
<DefaulModal open={isOpen} close={handleClose} isHeader={true} title_header="افزودن اسلایدر جدید">
|
||||
<form onSubmit={handleSubmit} className="w-[500px] mt-4 space-y-6">
|
||||
{/* محل نمایش */}
|
||||
<div>
|
||||
<Select
|
||||
label='محل نمایش'
|
||||
value={formData.displayLocation}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, displayLocation: e.target.value as 'desktop' | 'mobile' }))}
|
||||
items={displayLocationOptions}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* تصویر اسلایدر */}
|
||||
<div>
|
||||
<UploadBox
|
||||
label='تصویر اسلایدر'
|
||||
isMultiple={false}
|
||||
onChange={(files) => setImageFile(files)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* عنوان */}
|
||||
<div>
|
||||
<Input
|
||||
label='عنوان اسلایدر'
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||
placeholder="عنوان اسلایدر را وارد کنید"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* متن جایگزین */}
|
||||
<div>
|
||||
<Input
|
||||
label='متن جایگزین (Alt Text)'
|
||||
value={formData.altText}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, altText: e.target.value }))}
|
||||
placeholder="توضیح تصویر برای دسترسی"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* لینک */}
|
||||
<div>
|
||||
<Input
|
||||
label='لینک مقصد'
|
||||
value={formData.linkUrl}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, linkUrl: e.target.value }))}
|
||||
placeholder="/summer-sale"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* وضعیت */}
|
||||
<div>
|
||||
<Switch
|
||||
active={formData.isActive}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, isActive: value }))}
|
||||
label="فعال"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="flex-1"
|
||||
disabled={createSliderMutation.isPending || uploadSingle.isPending}
|
||||
isLoading={createSliderMutation.isPending || uploadSingle.isPending}
|
||||
>
|
||||
{(createSliderMutation.isPending || uploadSingle.isPending) ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={handleClose}
|
||||
disabled={createSliderMutation.isPending || uploadSingle.isPending}
|
||||
>
|
||||
لغو
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateSliderModal
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { type FC } from 'react'
|
||||
import Button from '@/components/Button'
|
||||
import Input from '@/components/Input'
|
||||
import DefaulModal from '@/components/DefaulModal'
|
||||
import Select from '@/components/Select'
|
||||
import { useUpdateSlider } from '../hooks/useSettingData'
|
||||
import { useUploadSingle } from '@/pages/uploader/hooks/useUploaderData'
|
||||
import { type SliderItem, type UpdateSliderType } from '../types/Types'
|
||||
import { toast } from 'react-toastify'
|
||||
import { extractErrorMessage } from '@/helpers/utils'
|
||||
import UploadBox from '@/components/UploadBox'
|
||||
import Switch from '@/components/Switch'
|
||||
|
||||
interface EditSliderModalProps {
|
||||
slider: SliderItem
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
const EditSliderModal: FC<EditSliderModalProps> = ({ slider, isOpen, onClose, onSuccess }) => {
|
||||
const [formData, setFormData] = useState<UpdateSliderType>({
|
||||
displayLocation: 'desktop',
|
||||
imageUrl: '',
|
||||
altText: '',
|
||||
title: '',
|
||||
linkUrl: '',
|
||||
isActive: true,
|
||||
})
|
||||
|
||||
const [imageFile, setImageFile] = useState<File[]>([])
|
||||
|
||||
const updateSliderMutation = useUpdateSlider()
|
||||
const uploadSingle = useUploadSingle()
|
||||
|
||||
useEffect(() => {
|
||||
if (slider) {
|
||||
setFormData({
|
||||
displayLocation: slider.displayLocation,
|
||||
imageUrl: slider.imageUrl,
|
||||
altText: slider.altText,
|
||||
title: slider.title,
|
||||
linkUrl: slider.linkUrl,
|
||||
isActive: slider.isActive,
|
||||
})
|
||||
}
|
||||
}, [slider])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
if (!formData.title || !formData.altText || !formData.linkUrl) {
|
||||
toast.error('لطفا تمام فیلدهای الزامی را پر کنید')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let finalImageUrl = formData.imageUrl
|
||||
|
||||
// Upload new image if selected
|
||||
if (imageFile.length > 0) {
|
||||
const uploadResponse = await uploadSingle.mutateAsync(imageFile[0])
|
||||
finalImageUrl = uploadResponse.results?.url?.url
|
||||
|
||||
if (!finalImageUrl) {
|
||||
toast.error('خطا در آپلود تصویر')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Update slider
|
||||
await updateSliderMutation.mutateAsync({
|
||||
id: slider._id,
|
||||
params: {
|
||||
displayLocation: formData.displayLocation,
|
||||
imageUrl: finalImageUrl,
|
||||
altText: formData.altText,
|
||||
title: formData.title,
|
||||
linkUrl: formData.linkUrl,
|
||||
isActive: formData.isActive,
|
||||
}
|
||||
}, {
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
|
||||
toast.success('اسلایدر با موفقیت بروزرسانی شد')
|
||||
handleClose()
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
toast.error('خطا در آپلود تصویر')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
setFormData({
|
||||
displayLocation: 'desktop',
|
||||
imageUrl: '',
|
||||
altText: '',
|
||||
title: '',
|
||||
linkUrl: '',
|
||||
isActive: true,
|
||||
})
|
||||
setImageFile([])
|
||||
onClose()
|
||||
}
|
||||
|
||||
const displayLocationOptions = [
|
||||
{ value: 'desktop', label: 'دسکتاپ' },
|
||||
{ value: 'mobile', label: 'موبایل' },
|
||||
]
|
||||
|
||||
return (
|
||||
<DefaulModal open={isOpen} close={handleClose} isHeader={true} title_header="ویرایش اسلایدر">
|
||||
<form onSubmit={handleSubmit} className="w-[500px] mt-4 space-y-6">
|
||||
{/* محل نمایش */}
|
||||
<div>
|
||||
<Select
|
||||
label='محل نمایش'
|
||||
value={formData.displayLocation}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, displayLocation: e.target.value as 'desktop' | 'mobile' }))}
|
||||
items={displayLocationOptions}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* تصویر اسلایدر */}
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<img
|
||||
src={formData.imageUrl}
|
||||
alt={formData.altText}
|
||||
className="w-full h-32 object-cover rounded border"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.src = '/placeholder-image.png'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<UploadBox
|
||||
label='تصویر جدید اسلایدر (اختیاری)'
|
||||
isMultiple={false}
|
||||
onChange={(files) => setImageFile(files)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* عنوان */}
|
||||
<div>
|
||||
<Input
|
||||
label='عنوان اسلایدر'
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
|
||||
placeholder="عنوان اسلایدر را وارد کنید"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* متن جایگزین */}
|
||||
<div>
|
||||
<Input
|
||||
label='متن جایگزین (Alt Text)'
|
||||
value={formData.altText}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, altText: e.target.value }))}
|
||||
placeholder="توضیح تصویر برای دسترسی"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* لینک */}
|
||||
<div>
|
||||
<Input
|
||||
label='لینک مقصد'
|
||||
value={formData.linkUrl}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, linkUrl: e.target.value }))}
|
||||
placeholder="/summer-sale"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* وضعیت */}
|
||||
<div>
|
||||
<Switch
|
||||
active={formData.isActive}
|
||||
onChange={(value) => setFormData(prev => ({ ...prev, isActive: value }))}
|
||||
label="فعال"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="flex-1"
|
||||
disabled={updateSliderMutation.isPending || uploadSingle.isPending}
|
||||
isLoading={updateSliderMutation.isPending || uploadSingle.isPending}
|
||||
>
|
||||
{(updateSliderMutation.isPending || uploadSingle.isPending) ? 'در حال بروزرسانی...' : 'بروزرسانی'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={handleClose}
|
||||
disabled={updateSliderMutation.isPending || uploadSingle.isPending}
|
||||
>
|
||||
لغو
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditSliderModal
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as api from "../service/SettingService";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { FaqPageEnum, SiteSettingPageEnum } from "../enum/Enum";
|
||||
import { type CreateFaqType, type CreatePricingItem, type UpdateBannerType } from "../types/Types";
|
||||
import { type CreateFaqType, type CreatePricingItem, type UpdateBannerType, type UpdateSliderType } from "../types/Types";
|
||||
|
||||
export const useGetAboutUs = () => {
|
||||
return useQuery({
|
||||
@@ -179,3 +179,36 @@ export const useCreateBanner = () => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetSliders = () => {
|
||||
return useQuery({
|
||||
queryKey: ["sliders"],
|
||||
queryFn: api.getSliders,
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteSlider = () => {
|
||||
return useMutation({
|
||||
mutationFn: api.deleteSlider,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateSlider = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({id, params}: {id: string, params: UpdateSliderType}) => api.updateSlider(id, params),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["sliders"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateSlider = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: api.createSlider,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["sliders"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -6,14 +6,17 @@ import type {
|
||||
CreateDocumentType,
|
||||
CreateFaqType,
|
||||
CreatePricingItem,
|
||||
CreateSliderType,
|
||||
DocumentTypesResponse,
|
||||
FaqDetailResponse,
|
||||
FaqResponse,
|
||||
PricingResponse,
|
||||
ShopResponse,
|
||||
SlidersResponse,
|
||||
UpdateBannerType,
|
||||
UpdateShopType,
|
||||
UpdateSiteSetting,
|
||||
UpdateSliderType,
|
||||
} from "../types/Types";
|
||||
import { FaqPageEnum, SiteSettingPageEnum } from "../enum/Enum";
|
||||
|
||||
@@ -138,3 +141,23 @@ export const createBanner = async (params: UpdateBannerType) => {
|
||||
const { data } = await axios.post(`/admin/medias/banner`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getSliders = async (): Promise<SlidersResponse> => {
|
||||
const { data } = await axios.get(`/admin/medias/slider`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteSlider = async (id: string) => {
|
||||
const { data } = await axios.delete(`/admin/medias/slider/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateSlider = async (id: string, params: UpdateSliderType) => {
|
||||
const { data } = await axios.post(`/admin/medias/slider/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createSlider = async (params: CreateSliderType) => {
|
||||
const { data } = await axios.post(`/admin/medias/slider`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -251,3 +251,43 @@ export interface UpdateBannerType {
|
||||
isActive: boolean;
|
||||
order: number;
|
||||
}
|
||||
|
||||
export interface SliderItem {
|
||||
_id: string;
|
||||
displayLocation: "desktop" | "mobile";
|
||||
imageUrl: string;
|
||||
altText: string;
|
||||
title: string;
|
||||
linkUrl: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface SlidersResults {
|
||||
sliders: SliderItem[];
|
||||
}
|
||||
|
||||
export interface SlidersResponse {
|
||||
status: number;
|
||||
success: boolean;
|
||||
results: SlidersResults;
|
||||
}
|
||||
|
||||
export interface CreateSliderType {
|
||||
displayLocation: "desktop" | "mobile";
|
||||
imageUrl: string;
|
||||
altText: string;
|
||||
title: string;
|
||||
linkUrl: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateSliderType {
|
||||
displayLocation: "desktop" | "mobile";
|
||||
imageUrl: string;
|
||||
altText: string;
|
||||
title: string;
|
||||
linkUrl: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
@@ -57,6 +57,7 @@ import ManageDocument from '@/pages/setting/ManageDocument'
|
||||
import Pricing from '@/pages/setting/Pricing'
|
||||
import Shop from '@/pages/setting/Shop'
|
||||
import Banners from '@/pages/setting/Banners'
|
||||
import Sliders from '@/pages/setting/Sliders'
|
||||
import SiteSetting from '@/pages/setting/SiteSetting'
|
||||
import JobsList from '@/pages/jobs/List'
|
||||
import Resumes from '@/pages/jobs/Resume'
|
||||
@@ -161,6 +162,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.pages.incomeTariff} element={<Pricing />} />
|
||||
<Route path={Pages.setting.shop} element={<Shop />} />
|
||||
<Route path={Pages.setting.banners} element={<Banners />} />
|
||||
<Route path={Pages.setting.sliders} element={<Sliders />} />
|
||||
<Route path={Pages.setting.siteSetting} element={<SiteSetting />} />
|
||||
|
||||
<Route path={Pages.jobs.list} element={<JobsList />} />
|
||||
|
||||
@@ -37,7 +37,12 @@ const SettingsSubMenu: FC = () => {
|
||||
<SubMenuItem
|
||||
title={'تنظیمات بنرها'}
|
||||
isActive={isActive('banners')}
|
||||
link="/settings/banners"
|
||||
link={Pages.setting.banners}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={'تنظیمات اسلایدرها'}
|
||||
isActive={isActive('sliders')}
|
||||
link={Pages.setting.sliders}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user