create product
This commit is contained in:
hamid zarghami
+156
-38
@@ -1,13 +1,87 @@
|
||||
import Button from '@/components/Button'
|
||||
import GridWrapper from '@/components/GridWrapper';
|
||||
import Input from '@/components/Input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import UploadBox from '@/components/UploadBox';
|
||||
import { clx } from '@/helpers/utils';
|
||||
import { useFormik } from 'formik';
|
||||
import { AddSquare } from 'iconsax-react'
|
||||
import { type FC } from 'react'
|
||||
import { useState, type FC } from 'react'
|
||||
import type { CreateProductType } from './types/Types';
|
||||
import * as Yup from 'yup'
|
||||
import Textarea from '@/components/Textarea';
|
||||
import CategoriesSelect from './components/CategoriesSelect';
|
||||
import SwitchComponent from '@/components/Switch';
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble';
|
||||
import { useMultiUpload } from '../uploader/hooks/useUploader';
|
||||
import { useCreateProduct } from './hooks/useProductData';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { ErrorType } from '@/helpers/types';
|
||||
import { extractErrorMessage } from '@/config/func';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const CreateProduct: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const { mutate: upload, isPending: isUploading } = useMultiUpload()
|
||||
const { mutate: createProduct, isPending } = useCreateProduct()
|
||||
|
||||
const handleSave = (values: CreateProductType) => {
|
||||
values.categoryId = Number(values.categoryId)
|
||||
createProduct(values, {
|
||||
onSuccess: () => {
|
||||
toast.success('عملیات با موفقیت انجام شد')
|
||||
formik.resetForm()
|
||||
navigate(-1)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const formik = useFormik<CreateProductType>({
|
||||
initialValues: {
|
||||
categoryId: undefined,
|
||||
desc: '',
|
||||
images: [],
|
||||
isActive: true,
|
||||
linkUrl: '',
|
||||
order: 1,
|
||||
quantities: [],
|
||||
title: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
categoryId: Yup.string().required('این فیلد اجباری می باشد.'),
|
||||
title: Yup.string().required('این فیلد اجباری می باشد.'),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (files.length > 0) {
|
||||
upload(files, {
|
||||
onSuccess: (data) => {
|
||||
const imagesUrl: string[] = []
|
||||
data.data?.map((item) => {
|
||||
imagesUrl.push(item.url)
|
||||
})
|
||||
values.images = imagesUrl
|
||||
handleSave(values)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
handleSave(values)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleQuantities = (value: number) => {
|
||||
const array = [...formik.values.quantities]
|
||||
const index: number = array.findIndex(o => o === value)
|
||||
if (index > -1) {
|
||||
array.splice(index, 1)
|
||||
} else {
|
||||
array.push(value)
|
||||
}
|
||||
formik.setFieldValue('quantities', array)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
@@ -15,6 +89,8 @@ const CreateProduct: FC = () => {
|
||||
<h1 className='text-lg font-light'>محصول جدید</h1>
|
||||
<Button
|
||||
className='w-fit px-6'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={isUploading || isPending}
|
||||
>
|
||||
<div className='flex gap-1.5'>
|
||||
<AddSquare size={18} color='black' />
|
||||
@@ -23,46 +99,88 @@ const CreateProduct: FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl '>
|
||||
<div className='font-light'>
|
||||
اطلاعات محصول
|
||||
<div className='flex gap-6'>
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
|
||||
<div className='font-light'>
|
||||
اطلاعات محصول
|
||||
</div>
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label='عنوان محصول'
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
<Input
|
||||
label='لینک در وبسایت'
|
||||
{...formik.getFieldProps('linkUrl')}
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<CategoriesSelect
|
||||
{...formik.getFieldProps('categoryId')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label='ترتیب'
|
||||
{...formik.getFieldProps('order')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
{...formik.getFieldProps('desc')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<div>بسته تعداد</div>
|
||||
<div className='mt-2.5 flex gap-4'>
|
||||
{
|
||||
[100, 150, 200, 250, 300, 350, 500, 1000].map((item) => {
|
||||
return (
|
||||
<div key={item} className={clx(
|
||||
'h-8 w-[72px] cursor-pointer text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center',
|
||||
formik.values.quantities.includes(item) && 'border-primary'
|
||||
)}
|
||||
onClick={() => handleQuantities(item)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<Input
|
||||
label='عنوان محصول'
|
||||
name='title'
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<Input
|
||||
label='لینک در وبسایت'
|
||||
name='title'
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
<div className='bg-white p-6 mt-8 rounded-3xl w-[250px]'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>وضعیت</div>
|
||||
<SwitchComponent
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<UploadBox
|
||||
label='تصویر محصول'
|
||||
onChange={() => { }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<div>بسته تعداد</div>
|
||||
<div className='mt-2.5 flex gap-4'>
|
||||
<div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
|
||||
<div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
|
||||
<div className='h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center'>100</div>
|
||||
<div className={clx(
|
||||
'h-8 w-[72px] text-sm rounded-lg border border-[#C3C7DD] flex items-center justify-center',
|
||||
'border-primary '
|
||||
)}>100</div>
|
||||
<div className='mt-6'>
|
||||
<div className='text-sm mb-4'>
|
||||
تصاویر محصول
|
||||
</div>
|
||||
<UploadBoxDraggble
|
||||
label='آپلود تصاویر'
|
||||
onChange={setFiles}
|
||||
isMultiple
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 bg-white p-6 rounded-3xl '>
|
||||
{/* <div className='mt-8 bg-white p-6 rounded-3xl '>
|
||||
<h1 className='font-light text-lg'>
|
||||
ویژگی های محصول
|
||||
</h1>
|
||||
@@ -110,7 +228,7 @@ const CreateProduct: FC = () => {
|
||||
</div>
|
||||
</GridWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user