create base product
This commit is contained in:
+21
-175
@@ -3,14 +3,9 @@ import { useFormik } from 'formik'
|
|||||||
import * as Yup from 'yup'
|
import * as Yup from 'yup'
|
||||||
import { TickCircle } from 'iconsax-react'
|
import { TickCircle } from 'iconsax-react'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import Input from '@/components/Input'
|
|
||||||
import Select from '@/components/Select'
|
|
||||||
import Textarea from '@/components/Textarea'
|
|
||||||
import Button from '@/components/Button'
|
import Button from '@/components/Button'
|
||||||
import { Checkbox } from '@/components/ui/checkbox'
|
|
||||||
import CreateProductSidebar from './components/CreateProductSidebar'
|
import CreateProductSidebar from './components/CreateProductSidebar'
|
||||||
import WeekDaysSection from './components/WeekDaysSection'
|
import BasicInfoSection from './components/BasicInfoSection'
|
||||||
import MealTimesSection from './components/MealTimesSection'
|
|
||||||
import type { CreateProductType } from './types/Types'
|
import type { CreateProductType } from './types/Types'
|
||||||
import { useCreateProduct, useGetCategories } from './hooks/useProductData'
|
import { useCreateProduct, useGetCategories } from './hooks/useProductData'
|
||||||
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
|
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
|
||||||
@@ -35,42 +30,44 @@ const CreateProduct: FC = () => {
|
|||||||
|
|
||||||
const formik = useFormik<CreateProductType>({
|
const formik = useFormik<CreateProductType>({
|
||||||
initialValues: {
|
initialValues: {
|
||||||
title: '',
|
|
||||||
desc: '',
|
|
||||||
content: [],
|
|
||||||
categoryId: '',
|
categoryId: '',
|
||||||
|
title: '',
|
||||||
|
attribute: '',
|
||||||
|
variants: [],
|
||||||
|
desc: '',
|
||||||
price: 0,
|
price: 0,
|
||||||
discount: 0,
|
|
||||||
prepareTime: 0,
|
|
||||||
weekDays: [0, 1, 2, 3, 4, 5, 6],
|
|
||||||
mealTypes: ['breakfast', 'lunch', 'dinner'],
|
|
||||||
pickupServe: true,
|
|
||||||
inPlaceServe: true,
|
|
||||||
isActive: true,
|
isActive: true,
|
||||||
images: [],
|
images: [],
|
||||||
|
discount: 0,
|
||||||
isSpecialOffer: false,
|
isSpecialOffer: false,
|
||||||
dailyStock: 0,
|
|
||||||
order: 0
|
order: 0
|
||||||
},
|
},
|
||||||
validationSchema: Yup.object().shape({
|
validationSchema: Yup.object().shape({
|
||||||
title: Yup.string().required('نام کالا الزامی است'),
|
title: Yup.string().required('نام کالا الزامی است'),
|
||||||
categoryId: Yup.string().required('دستهبندی الزامی است'),
|
categoryId: Yup.string().required('دستهبندی الزامی است'),
|
||||||
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
|
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
|
||||||
prepareTime: Yup.number().required('زمان آمادهسازی الزامی است').min(0, 'زمان آمادهسازی باید مثبت باشد'),
|
|
||||||
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
|
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
|
||||||
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
|
attribute: Yup.string(),
|
||||||
content: Yup.array().of(Yup.string()),
|
variants: Yup.array().of(
|
||||||
weekDays: Yup.array().of(Yup.number()),
|
Yup.object().shape({
|
||||||
mealTypes: Yup.array().of(Yup.string())
|
id: Yup.string(),
|
||||||
|
value: Yup.string(),
|
||||||
|
price: Yup.number().min(0)
|
||||||
|
})
|
||||||
|
)
|
||||||
}),
|
}),
|
||||||
onSubmit: (values) => {
|
onSubmit: (values) => {
|
||||||
const submitProduct = (imageUrls: string[] = []) => {
|
const submitProduct = (imageUrls: string[] = []) => {
|
||||||
|
const variants =
|
||||||
|
values.variants.length > 0
|
||||||
|
? values.variants
|
||||||
|
: [{ value: '', price: values.price }]
|
||||||
const productData: CreateProductType = {
|
const productData: CreateProductType = {
|
||||||
...values,
|
...values,
|
||||||
|
variants,
|
||||||
isActive,
|
isActive,
|
||||||
isSpecialOffer: isSpecial,
|
isSpecialOffer: isSpecial,
|
||||||
images: imageUrls,
|
images: imageUrls
|
||||||
content: values.content.filter(item => item && item.trim().length > 0)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createProduct(productData, {
|
createProduct(productData, {
|
||||||
@@ -123,158 +120,7 @@ const CreateProduct: FC = () => {
|
|||||||
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
|
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
|
||||||
<div className='flex-1'>
|
<div className='flex-1'>
|
||||||
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
|
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
|
||||||
<Input
|
<BasicInfoSection formik={formik} categories={categories} />
|
||||||
label='نام کالا'
|
|
||||||
name='title'
|
|
||||||
placeholder=''
|
|
||||||
value={formik.values.title}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className='mt-5'>
|
|
||||||
<Select
|
|
||||||
items={categories}
|
|
||||||
label='دسته بندی'
|
|
||||||
placeholder='انتخاب کنید'
|
|
||||||
name='categoryId'
|
|
||||||
value={formik.values.categoryId}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.target.value
|
|
||||||
formik.setFieldValue('categoryId', value)
|
|
||||||
}}
|
|
||||||
error_text={formik.touched.categoryId && formik.errors.categoryId ? String(formik.errors.categoryId) : ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
|
|
||||||
<Input
|
|
||||||
name='price'
|
|
||||||
label='قیمت'
|
|
||||||
placeholder='تومان'
|
|
||||||
type='number'
|
|
||||||
seprator={true}
|
|
||||||
value={formik.values.price}
|
|
||||||
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
name='discount'
|
|
||||||
label='تخفیف'
|
|
||||||
placeholder='تومان'
|
|
||||||
type='number'
|
|
||||||
seprator={true}
|
|
||||||
value={formik.values.discount}
|
|
||||||
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
name='prepareTime'
|
|
||||||
label='زمان آماده سازی'
|
|
||||||
placeholder='دقیقه'
|
|
||||||
type='number'
|
|
||||||
value={formik.values.prepareTime}
|
|
||||||
onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
name='dailyStock'
|
|
||||||
label='موجودی روزانه'
|
|
||||||
placeholder='عدد'
|
|
||||||
type='number'
|
|
||||||
seprator={true}
|
|
||||||
value={formik.values.dailyStock}
|
|
||||||
onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-5'>
|
|
||||||
<Textarea
|
|
||||||
name='desc'
|
|
||||||
label='توضیحات کالا'
|
|
||||||
placeholder=''
|
|
||||||
value={formik.values.desc}
|
|
||||||
onChange={formik.handleChange}
|
|
||||||
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-5'>
|
|
||||||
<Input
|
|
||||||
name='order'
|
|
||||||
label='اولویت'
|
|
||||||
placeholder='عدد'
|
|
||||||
type='number'
|
|
||||||
value={formik.values.order}
|
|
||||||
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='mt-5'>
|
|
||||||
<div className='text-sm mb-2'>محتوای کالا</div>
|
|
||||||
<div className='space-y-2'>
|
|
||||||
{formik.values.content.map((item, index) => (
|
|
||||||
<div key={index} className='flex gap-2 items-center'>
|
|
||||||
<Input
|
|
||||||
placeholder='متن محتوا'
|
|
||||||
value={item}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newContent = [...formik.values.content]
|
|
||||||
newContent[index] = e.target.value
|
|
||||||
formik.setFieldValue('content', newContent)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
type='button'
|
|
||||||
className='px-3 bg-red-500 hover:bg-red-600 w-auto'
|
|
||||||
onClick={() => {
|
|
||||||
const newContent = formik.values.content.filter((_, i) => i !== index)
|
|
||||||
formik.setFieldValue('content', newContent)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
حذف
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
type='button'
|
|
||||||
className='w-full bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
||||||
onClick={() => {
|
|
||||||
formik.setFieldValue('content', [...formik.values.content, ''])
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
افزودن محتوا
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MealTimesSection formik={formik} />
|
|
||||||
<WeekDaysSection formik={formik} />
|
|
||||||
|
|
||||||
<div className='mt-6'>
|
|
||||||
<div className='text-sm mb-3'>گزینههای سرویس</div>
|
|
||||||
<div className='flex gap-6 flex-wrap'>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<Checkbox
|
|
||||||
checked={formik.values.pickupServe}
|
|
||||||
onCheckedChange={(checked) => formik.setFieldValue('pickupServe', checked)}
|
|
||||||
/>
|
|
||||||
<label className='text-xs cursor-pointer'> بیرونبر</label>
|
|
||||||
</div>
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<Checkbox
|
|
||||||
checked={formik.values.inPlaceServe}
|
|
||||||
onCheckedChange={(checked) => formik.setFieldValue('inPlaceServe', checked)}
|
|
||||||
/>
|
|
||||||
<label className='text-xs cursor-pointer'>سرو در محل</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -7,10 +7,6 @@ import { useNavigate, useParams } from 'react-router-dom'
|
|||||||
import Button from '@/components/Button'
|
import Button from '@/components/Button'
|
||||||
import CreateProductSidebar from './components/CreateProductSidebar'
|
import CreateProductSidebar from './components/CreateProductSidebar'
|
||||||
import BasicInfoSection from './components/BasicInfoSection'
|
import BasicInfoSection from './components/BasicInfoSection'
|
||||||
import ProductContentSection from './components/ProductContentSection'
|
|
||||||
import MealTimesSection from './components/MealTimesSection'
|
|
||||||
import WeekDaysSection from './components/WeekDaysSection'
|
|
||||||
import ServiceOptionsSection from './components/ServiceOptionsSection'
|
|
||||||
import type { CreateProductType } from './types/Types'
|
import type { CreateProductType } from './types/Types'
|
||||||
import { useUpdateProduct, useGetProductDetails, useGetCategories } from './hooks/useProductData'
|
import { useUpdateProduct, useGetProductDetails, useGetCategories } from './hooks/useProductData'
|
||||||
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
|
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
|
||||||
@@ -38,33 +34,31 @@ const UpdateProduct: FC = () => {
|
|||||||
|
|
||||||
const formik = useFormik<CreateProductType>({
|
const formik = useFormik<CreateProductType>({
|
||||||
initialValues: {
|
initialValues: {
|
||||||
title: '',
|
|
||||||
desc: '',
|
|
||||||
content: [],
|
|
||||||
categoryId: '',
|
categoryId: '',
|
||||||
|
title: '',
|
||||||
|
attribute: '',
|
||||||
|
variants: [],
|
||||||
|
desc: '',
|
||||||
price: 0,
|
price: 0,
|
||||||
discount: 0,
|
|
||||||
prepareTime: 0,
|
|
||||||
weekDays: [],
|
|
||||||
mealTypes: [],
|
|
||||||
pickupServe: false,
|
|
||||||
inPlaceServe: false,
|
|
||||||
isActive: true,
|
isActive: true,
|
||||||
images: [],
|
images: [],
|
||||||
|
discount: 0,
|
||||||
isSpecialOffer: false,
|
isSpecialOffer: false,
|
||||||
dailyStock: 0,
|
|
||||||
order: 0
|
order: 0
|
||||||
},
|
},
|
||||||
validationSchema: Yup.object().shape({
|
validationSchema: Yup.object().shape({
|
||||||
title: Yup.string().required('نام کالا الزامی است'),
|
title: Yup.string().required('نام کالا الزامی است'),
|
||||||
categoryId: Yup.string().required('دستهبندی الزامی است'),
|
categoryId: Yup.string().required('دستهبندی الزامی است'),
|
||||||
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
|
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
|
||||||
prepareTime: Yup.number().required('زمان آمادهسازی الزامی است').min(0, 'زمان آمادهسازی باید مثبت باشد'),
|
|
||||||
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
|
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
|
||||||
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
|
attribute: Yup.string(),
|
||||||
content: Yup.array().of(Yup.string()),
|
variants: Yup.array().of(
|
||||||
weekDays: Yup.array().of(Yup.number()),
|
Yup.object().shape({
|
||||||
mealTypes: Yup.array().of(Yup.string())
|
id: Yup.string(),
|
||||||
|
value: Yup.string(),
|
||||||
|
price: Yup.number().min(0)
|
||||||
|
})
|
||||||
|
)
|
||||||
}),
|
}),
|
||||||
onSubmit: (values) => {
|
onSubmit: (values) => {
|
||||||
if (!id) {
|
if (!id) {
|
||||||
@@ -74,12 +68,16 @@ const UpdateProduct: FC = () => {
|
|||||||
|
|
||||||
const submitProduct = (newImageUrls: string[] = []) => {
|
const submitProduct = (newImageUrls: string[] = []) => {
|
||||||
const allImages = [...values.images, ...newImageUrls]
|
const allImages = [...values.images, ...newImageUrls]
|
||||||
|
const variants =
|
||||||
|
values.variants.length > 0
|
||||||
|
? values.variants
|
||||||
|
: [{ value: '', price: values.price }]
|
||||||
const productData: CreateProductType = {
|
const productData: CreateProductType = {
|
||||||
...values,
|
...values,
|
||||||
|
variants,
|
||||||
isActive,
|
isActive,
|
||||||
isSpecialOffer: isSpecial,
|
isSpecialOffer: isSpecial,
|
||||||
images: allImages,
|
images: allImages
|
||||||
content: values.content.filter(item => item && item.trim().length > 0)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
updateProduct({ id, params: productData }, {
|
updateProduct({ id, params: productData }, {
|
||||||
@@ -112,22 +110,17 @@ const UpdateProduct: FC = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (product) {
|
if (product) {
|
||||||
formik.setValues({
|
formik.setValues({
|
||||||
title: product.title || '',
|
|
||||||
desc: product.desc || '',
|
|
||||||
content: product.content || [],
|
|
||||||
categoryId: product.category?.id || '',
|
categoryId: product.category?.id || '',
|
||||||
|
title: product.title || '',
|
||||||
|
attribute: product.attribute || '',
|
||||||
|
variants: product.variants || [],
|
||||||
|
desc: product.desc || '',
|
||||||
price: product.price || 0,
|
price: product.price || 0,
|
||||||
discount: product.discount || 0,
|
|
||||||
prepareTime: product.prepareTime || 0,
|
|
||||||
weekDays: product.weekDays || [],
|
|
||||||
mealTypes: product.mealTypes || [],
|
|
||||||
pickupServe: product.pickupServe || false,
|
|
||||||
inPlaceServe: product.inPlaceServe || false,
|
|
||||||
isActive: product.isActive || false,
|
isActive: product.isActive || false,
|
||||||
images: product.images || [],
|
images: product.images || [],
|
||||||
|
discount: product.discount || 0,
|
||||||
isSpecialOffer: product.isSpecialOffer || false,
|
isSpecialOffer: product.isSpecialOffer || false,
|
||||||
dailyStock: product.inventory?.totalStock || 0,
|
order: product.order ?? 0
|
||||||
order: product.order || 0
|
|
||||||
})
|
})
|
||||||
setIsActive(product.isActive || false)
|
setIsActive(product.isActive || false)
|
||||||
setIsSpecial(product.isSpecialOffer || false)
|
setIsSpecial(product.isSpecialOffer || false)
|
||||||
@@ -180,11 +173,11 @@ const UpdateProduct: FC = () => {
|
|||||||
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
|
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
|
||||||
<div className='flex-1'>
|
<div className='flex-1'>
|
||||||
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
|
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
|
||||||
<BasicInfoSection formik={formik} categories={categories} />
|
<BasicInfoSection
|
||||||
<ProductContentSection formik={formik} />
|
formik={formik}
|
||||||
<MealTimesSection formik={formik} />
|
categories={categories}
|
||||||
<WeekDaysSection formik={formik} />
|
initialHasVariants={(product?.variants?.length ?? 0) > 0}
|
||||||
<ServiceOptionsSection formik={formik} />
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,59 @@
|
|||||||
import { type FC } from 'react'
|
import { type FC, useState, useEffect } from 'react'
|
||||||
import type { FormikProps } from 'formik'
|
import type { FormikProps } from 'formik'
|
||||||
import Input from '@/components/Input'
|
import Input from '@/components/Input'
|
||||||
import Select from '@/components/Select'
|
import Select from '@/components/Select'
|
||||||
import Textarea from '@/components/Textarea'
|
import Textarea from '@/components/Textarea'
|
||||||
import type { CreateProductType } from '../types/Types'
|
import Button from '@/components/Button'
|
||||||
|
import RadioGroup from '@/components/RadioGroup'
|
||||||
|
import type { CreateProductType, ProductVariant } from '../types/Types'
|
||||||
|
import { Add, Trash } from 'iconsax-react'
|
||||||
|
|
||||||
type BasicInfoSectionProps = {
|
type BasicInfoSectionProps = {
|
||||||
formik: FormikProps<CreateProductType>
|
formik: FormikProps<CreateProductType>
|
||||||
categories: Array<{ label: string; value: string }>
|
categories: Array<{ label: string; value: string }>
|
||||||
|
/** در صفحه ویرایش، اگر کالا تنوع دارد مقدار true پاس داده شود */
|
||||||
|
initialHasVariants?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) => {
|
const newVariant = (): ProductVariant => ({ value: '', price: 0 })
|
||||||
|
|
||||||
|
const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories, initialHasVariants }) => {
|
||||||
|
const [hasVariants, setHasVariants] = useState<boolean>(initialHasVariants ?? false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialHasVariants !== undefined) {
|
||||||
|
setHasVariants(initialHasVariants)
|
||||||
|
}
|
||||||
|
}, [initialHasVariants])
|
||||||
|
|
||||||
|
const handleHasVariantsChange = (value: string | boolean) => {
|
||||||
|
const next = value === true
|
||||||
|
setHasVariants(next)
|
||||||
|
if (!next) {
|
||||||
|
formik.setFieldValue('variants', [])
|
||||||
|
formik.setFieldValue('attribute', '')
|
||||||
|
} else if (formik.values.variants.length === 0) {
|
||||||
|
formik.setFieldValue('variants', [newVariant()])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addVariant = () => {
|
||||||
|
formik.setFieldValue('variants', [...formik.values.variants, newVariant()])
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateVariant = (index: number, field: keyof ProductVariant, value: string | number) => {
|
||||||
|
const next = [...formik.values.variants]
|
||||||
|
next[index] = { ...next[index], [field]: value }
|
||||||
|
formik.setFieldValue('variants', next)
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeVariant = (index: number) => {
|
||||||
|
formik.setFieldValue(
|
||||||
|
'variants',
|
||||||
|
formik.values.variants.filter((_, i) => i !== index)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Input
|
<Input
|
||||||
@@ -37,50 +80,131 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-5'>
|
{/* بخش قیمتگذاری و تنوع */}
|
||||||
|
<div className='mt-6 p-5 sm:p-6 rounded-2xl border border-gray-200/80 bg-gray-50/50'>
|
||||||
|
<div className='text-sm font-medium text-gray-800 mb-1'>قیمتگذاری و تنوع</div>
|
||||||
|
<p className='text-xs text-gray-500 mb-4'>تعیین کنید کالا دارای تنوع (مثلاً رنگ، سایز) است یا یک قیمت ثابت دارد.</p>
|
||||||
|
|
||||||
|
<div className='mb-5'>
|
||||||
|
<label className='block text-sm text-gray-700 mb-2'>کالای شما دارای تنوع است؟</label>
|
||||||
|
<RadioGroup
|
||||||
|
items={[
|
||||||
|
{ label: 'خیر، فقط یک قیمت دارد', value: false },
|
||||||
|
{ label: 'بله، دارای تنوع است', value: true }
|
||||||
|
]}
|
||||||
|
selected={hasVariants}
|
||||||
|
onChange={handleHasVariantsChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!hasVariants ? (
|
||||||
|
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
|
||||||
<Input
|
<Input
|
||||||
name='price'
|
name='price'
|
||||||
label='قیمت'
|
label='قیمت (تومان)'
|
||||||
placeholder='تومان'
|
placeholder='۰'
|
||||||
type='number'
|
type='number'
|
||||||
seprator={true}
|
seprator={true}
|
||||||
value={formik.values.price}
|
value={formik.values.price}
|
||||||
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
|
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
|
||||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
name='discount'
|
name='discount'
|
||||||
label='تخفیف'
|
label='تخفیف (تومان)'
|
||||||
placeholder='تومان'
|
placeholder='۰'
|
||||||
type='number'
|
type='number'
|
||||||
seprator={true}
|
seprator={true}
|
||||||
value={formik.values.discount}
|
value={formik.values.discount}
|
||||||
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
||||||
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
name='prepareTime'
|
name='order'
|
||||||
label='زمان آماده سازی'
|
label='اولویت'
|
||||||
placeholder='دقیقه'
|
|
||||||
type='number'
|
|
||||||
value={formik.values.prepareTime}
|
|
||||||
onChange={(e) => formik.setFieldValue('prepareTime', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.prepareTime && formik.errors.prepareTime ? formik.errors.prepareTime : ''}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
name='dailyStock'
|
|
||||||
label='موجودی روزانه'
|
|
||||||
placeholder='عدد'
|
placeholder='عدد'
|
||||||
type='number'
|
type='number'
|
||||||
seprator={true}
|
value={formik.values.order}
|
||||||
value={formik.values.dailyStock}
|
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
||||||
onChange={(e) => formik.setFieldValue('dailyStock', Number(e.target.value))}
|
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||||
error_text={formik.touched.dailyStock && formik.errors.dailyStock ? formik.errors.dailyStock : ''}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className='space-y-5'>
|
||||||
|
<Input
|
||||||
|
name='attribute'
|
||||||
|
label='نام ویژگی تنوع (مثلاً رنگ، سایز)'
|
||||||
|
placeholder='مثلاً رنگ، سایز'
|
||||||
|
value={formik.values.attribute}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
error_text={formik.touched.attribute && formik.errors.attribute ? formik.errors.attribute : ''}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
||||||
|
<Input
|
||||||
|
name='discount'
|
||||||
|
label='تخفیف (تومان)'
|
||||||
|
placeholder='۰'
|
||||||
|
type='number'
|
||||||
|
seprator={true}
|
||||||
|
value={formik.values.discount}
|
||||||
|
onChange={(e) => formik.setFieldValue('discount', Number(e.target.value))}
|
||||||
|
error_text={formik.touched.discount && formik.errors.discount ? formik.errors.discount : ''}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
name='order'
|
||||||
|
label='اولویت'
|
||||||
|
placeholder='عدد'
|
||||||
|
type='number'
|
||||||
|
value={formik.values.order}
|
||||||
|
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
||||||
|
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className='block text-sm font-medium text-gray-700 mb-2'>تنوعها و قیمت هر کدام</label>
|
||||||
|
<div className='space-y-3'>
|
||||||
|
{formik.values.variants.map((v, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className='flex flex-nowrap gap-3 items-center p-3 rounded-xl border border-gray-200 bg-white shadow-sm'
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder='مقدار (مثلاً قرمز، M)'
|
||||||
|
value={v.value}
|
||||||
|
onChange={(e) => updateVariant(index, 'value', e.target.value)}
|
||||||
|
className='flex-1 min-w-0'
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder='قیمت'
|
||||||
|
type='number'
|
||||||
|
seprator={true}
|
||||||
|
value={v.price}
|
||||||
|
onChange={(e) => updateVariant(index, 'price', Number(e.target.value))}
|
||||||
|
className='flex-1 min-w-0 shrink-0'
|
||||||
|
/>
|
||||||
|
<div className='min-w-5'>
|
||||||
|
<Trash
|
||||||
|
onClick={() => removeVariant(index)}
|
||||||
|
color='red' size={20} />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type='button'
|
||||||
|
className='mt-3 w-fit px-5 !bg-white border border-dashed border-gray-300 text-gray-600 hover:!bg-gray-100 hover:border-gray-400'
|
||||||
|
onClick={addVariant}
|
||||||
|
>
|
||||||
|
<Add color='gray' className='size-5 ml-2 inline' />
|
||||||
|
افزودن تنوع
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='mt-5'>
|
<div className='mt-5'>
|
||||||
<Textarea
|
<Textarea
|
||||||
@@ -92,18 +216,6 @@ const BasicInfoSection: FC<BasicInfoSectionProps> = ({ formik, categories }) =>
|
|||||||
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
|
error_text={formik.touched.desc && formik.errors.desc ? formik.errors.desc : ''}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='mt-5'>
|
|
||||||
<Input
|
|
||||||
name='order'
|
|
||||||
label='اولویت'
|
|
||||||
placeholder='عدد'
|
|
||||||
type='number'
|
|
||||||
value={formik.values.order}
|
|
||||||
onChange={(e) => formik.setFieldValue('order', Number(e.target.value))}
|
|
||||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { Eye } from 'iconsax-react'
|
import { Eye } from 'iconsax-react'
|
||||||
import type { ColumnType } from '@/components/types/TableTypes'
|
import type { ColumnType } from '@/components/types/TableTypes'
|
||||||
import type { Product } from '../types/Types'
|
import type { Product } from '../types/Types'
|
||||||
import { formatPrice, formatTime } from '../utils/formatters'
|
import { formatPrice } from '../utils/formatters'
|
||||||
import Status from '@/components/Status'
|
import Status from '@/components/Status'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { Pages } from '@/config/Pages'
|
import { Pages } from '@/config/Pages'
|
||||||
@@ -53,19 +53,14 @@ export const getProductTableColumns = ({ onDelete, isDeleting }: GetProductTable
|
|||||||
return formatPrice(item.price)
|
return formatPrice(item.price)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
key: 'prepareTime',
|
|
||||||
title: 'زمان آماده سازی',
|
|
||||||
render: (item: Product) => {
|
|
||||||
return formatTime(item.prepareTime || 0)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
key: 'inventory',
|
key: 'inventory',
|
||||||
title: 'موجودی',
|
title: 'موجودی',
|
||||||
render: (item: Product) => {
|
render: (item: Product) => {
|
||||||
const availableStock = item.inventory.availableStock
|
const inv = item.inventory
|
||||||
const totalStock = item.inventory.totalStock
|
if (!inv) return '-'
|
||||||
|
const availableStock = inv.availableStock
|
||||||
|
const totalStock = inv.totalStock
|
||||||
return (
|
return (
|
||||||
<div className='flex flex-col gap-1'>
|
<div className='flex flex-col gap-1'>
|
||||||
<span className='text-sm'>
|
<span className='text-sm'>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import type {
|
|||||||
import type { FilterValues } from "@/components/Filters";
|
import type { FilterValues } from "@/components/Filters";
|
||||||
|
|
||||||
export const createProduct = async (params: CreateProductType) => {
|
export const createProduct = async (params: CreateProductType) => {
|
||||||
const { data } = await axios.post(`/admin/foods`, params);
|
const { data } = await axios.post(`/admin/products`, params);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@ export const getProducts = async (
|
|||||||
params?: GetProductsParams,
|
params?: GetProductsParams,
|
||||||
filters?: FilterValues,
|
filters?: FilterValues,
|
||||||
): Promise<GetProductsResponseType> => {
|
): Promise<GetProductsResponseType> => {
|
||||||
const { data } = await axios.get<GetProductsResponseType>(`/admin/foods`, {
|
const { data } = await axios.get<GetProductsResponseType>(`/admin/products`, {
|
||||||
params: {
|
params: {
|
||||||
...params,
|
...params,
|
||||||
...filters,
|
...filters,
|
||||||
@@ -32,13 +32,13 @@ export const getProductDetails = async (
|
|||||||
id: string,
|
id: string,
|
||||||
): Promise<GetProductDetailsResponseType> => {
|
): Promise<GetProductDetailsResponseType> => {
|
||||||
const { data } = await axios.get<GetProductDetailsResponseType>(
|
const { data } = await axios.get<GetProductDetailsResponseType>(
|
||||||
`/admin/foods/${id}`,
|
`/admin/products/${id}`,
|
||||||
);
|
);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const updateProduct = async (id: string, params: CreateProductType) => {
|
export const updateProduct = async (id: string, params: CreateProductType) => {
|
||||||
const { data } = await axios.patch(`/admin/foods/${id}`, params);
|
const { data } = await axios.patch(`/admin/products/${id}`, params);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -50,7 +50,7 @@ export const getCategories = async (): Promise<GetCategoriesResponseType> => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const deleteProduct = async (id: string) => {
|
export const deleteProduct = async (id: string) => {
|
||||||
const { data } = await axios.delete(`/admin/foods/${id}`);
|
const { data } = await axios.delete(`/admin/products/${id}`);
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,21 +1,22 @@
|
|||||||
import type { IResponse } from "@/types/response.types";
|
import type { IResponse } from "@/types/response.types";
|
||||||
|
|
||||||
|
export type ProductVariant = {
|
||||||
|
id?: string;
|
||||||
|
value: string;
|
||||||
|
price: number;
|
||||||
|
};
|
||||||
|
|
||||||
export type CreateProductType = {
|
export type CreateProductType = {
|
||||||
categoryId: string;
|
categoryId: string;
|
||||||
title: string;
|
title: string;
|
||||||
|
attribute: string;
|
||||||
|
variants: ProductVariant[];
|
||||||
desc: string;
|
desc: string;
|
||||||
content: string[];
|
|
||||||
weekDays: number[];
|
|
||||||
mealTypes: string[];
|
|
||||||
price: number;
|
price: number;
|
||||||
prepareTime: number;
|
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
images: string[];
|
images: string[];
|
||||||
inPlaceServe: boolean;
|
|
||||||
pickupServe: boolean;
|
|
||||||
discount: number;
|
discount: number;
|
||||||
isSpecialOffer: boolean;
|
isSpecialOffer: boolean;
|
||||||
dailyStock: number;
|
|
||||||
order: number;
|
order: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -61,20 +62,16 @@ export type Product = {
|
|||||||
deletedAt: string | null;
|
deletedAt: string | null;
|
||||||
restaurant: string;
|
restaurant: string;
|
||||||
category: ProductDetailsCategory;
|
category: ProductDetailsCategory;
|
||||||
inventory: Inventory;
|
inventory?: Inventory;
|
||||||
title: string;
|
title: string;
|
||||||
desc: string;
|
desc: string;
|
||||||
content: string[];
|
attribute?: string;
|
||||||
|
variants?: ProductVariant[];
|
||||||
price: number;
|
price: number;
|
||||||
order: number | null;
|
order: number | null;
|
||||||
prepareTime: number | null;
|
|
||||||
weekDays: number[];
|
|
||||||
mealTypes: string[];
|
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
images: string[];
|
images: string[];
|
||||||
inPlaceServe: boolean;
|
score?: number;
|
||||||
pickupServe: boolean;
|
|
||||||
score: number;
|
|
||||||
discount: number;
|
discount: number;
|
||||||
isSpecialOffer: boolean;
|
isSpecialOffer: boolean;
|
||||||
};
|
};
|
||||||
@@ -96,20 +93,16 @@ export type ProductDetails = {
|
|||||||
deletedAt: string | null;
|
deletedAt: string | null;
|
||||||
restaurant: string;
|
restaurant: string;
|
||||||
category: ProductDetailsCategory;
|
category: ProductDetailsCategory;
|
||||||
inventory: Inventory;
|
inventory?: Inventory;
|
||||||
title: string;
|
title: string;
|
||||||
desc: string;
|
desc: string;
|
||||||
content: string[];
|
attribute?: string;
|
||||||
|
variants?: ProductVariant[];
|
||||||
price: number;
|
price: number;
|
||||||
order: number | null;
|
order: number | null;
|
||||||
prepareTime: number;
|
|
||||||
weekDays: number[];
|
|
||||||
mealTypes: string[];
|
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
images: string[];
|
images: string[];
|
||||||
inPlaceServe: boolean;
|
score?: number;
|
||||||
pickupServe: boolean;
|
|
||||||
score: number;
|
|
||||||
discount: number;
|
discount: number;
|
||||||
isSpecialOffer: boolean;
|
isSpecialOffer: boolean;
|
||||||
};
|
};
|
||||||
@@ -122,7 +115,9 @@ export type PaginationMeta = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type GetCategoriesResponseType = IResponse<Category[]>;
|
export type GetCategoriesResponseType = IResponse<Category[]>;
|
||||||
export type GetProductsResponseType = IResponse<Product[]> & { meta: PaginationMeta };
|
export type GetProductsResponseType = IResponse<Product[]> & {
|
||||||
|
meta: PaginationMeta;
|
||||||
|
};
|
||||||
export type GetProductDetailsResponseType = IResponse<ProductDetails>;
|
export type GetProductDetailsResponseType = IResponse<ProductDetails>;
|
||||||
|
|
||||||
export type CreateCategoryType = {
|
export type CreateCategoryType = {
|
||||||
|
|||||||
Reference in New Issue
Block a user