create foor
This commit is contained in:
hamid zarghami
@@ -0,0 +1,185 @@
|
||||
import { type FC, useState } from 'react'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import Button from '@/components/Button'
|
||||
import CreateFoodSidebar from './components/CreateFoodSidebar'
|
||||
|
||||
type CreateFoodType = {
|
||||
name: string
|
||||
categoryId: string
|
||||
order: string
|
||||
ingredients: string
|
||||
price: string
|
||||
discountedPrice: string
|
||||
preparationTime: string
|
||||
description: string
|
||||
}
|
||||
|
||||
const CreateFood: FC = () => {
|
||||
const [isActive, setIsActive] = useState<boolean>(true)
|
||||
const [isSpecial, setIsSpecial] = useState<boolean>(false)
|
||||
const [imageFiles, setImageFiles] = useState<File[]>([])
|
||||
|
||||
// دستهبندیهای نمونه
|
||||
const categories = [
|
||||
{ label: 'غذای اصلی', value: '1' },
|
||||
{ label: 'پیش غذا', value: '2' },
|
||||
{ label: 'دسر', value: '3' },
|
||||
{ label: 'نوشیدنی', value: '4' }
|
||||
]
|
||||
|
||||
const formik = useFormik<CreateFoodType>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
categoryId: '',
|
||||
order: '',
|
||||
ingredients: '',
|
||||
price: '',
|
||||
discountedPrice: '',
|
||||
preparationTime: '',
|
||||
description: ''
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
name: Yup.string().required('نام غذا الزامی است'),
|
||||
categoryId: Yup.string().required('دستهبندی الزامی است'),
|
||||
order: Yup.string().required('ترتیب نمایش الزامی است'),
|
||||
ingredients: Yup.string().required('مواد تشکیل دهنده الزامی است'),
|
||||
price: Yup.string().required('قیمت الزامی است'),
|
||||
preparationTime: Yup.string().required('زمان آمادهسازی الزامی است')
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
console.log('Form values:', {
|
||||
...values,
|
||||
isActive,
|
||||
isSpecial,
|
||||
images: imageFiles
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='w-full mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div className='text-xl font-bold'>
|
||||
غذای جدید
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle className='size-5' color='black' />
|
||||
<div>ثبت غذا</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-6 mt-6'>
|
||||
<div className='flex-1'>
|
||||
<div className='bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<Input
|
||||
label='نام غذا'
|
||||
name='name'
|
||||
placeholder=''
|
||||
value={formik.values.name}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-5'>
|
||||
<Select
|
||||
items={categories}
|
||||
label='دسته بندی'
|
||||
placeholder='انتخاب کنید'
|
||||
name='categoryId'
|
||||
value={formik.values.categoryId}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
name='order'
|
||||
label='ترتیب نمایش'
|
||||
placeholder=''
|
||||
value={formik.values.order}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.order && formik.errors.order ? formik.errors.order : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
name='ingredients'
|
||||
label='مواد تشکیل دهنده'
|
||||
placeholder=''
|
||||
value={formik.values.ingredients}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.ingredients && formik.errors.ingredients ? formik.errors.ingredients : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 mt-5'>
|
||||
<Input
|
||||
name='price'
|
||||
label='قیمت'
|
||||
placeholder='ریال'
|
||||
seprator={true}
|
||||
value={formik.values.price}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
name='discountedPrice'
|
||||
label='قیمت بعد از تخفیف'
|
||||
placeholder='ریال'
|
||||
seprator={true}
|
||||
value={formik.values.discountedPrice}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.discountedPrice && formik.errors.discountedPrice ? formik.errors.discountedPrice : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
name='preparationTime'
|
||||
label='زمان آماده سازی'
|
||||
placeholder='دقیقه'
|
||||
value={formik.values.preparationTime}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.preparationTime && formik.errors.preparationTime ? formik.errors.preparationTime : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Textarea
|
||||
name='description'
|
||||
label='توضیحات تکمیلی'
|
||||
placeholder=''
|
||||
value={formik.values.description}
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CreateFoodSidebar
|
||||
isActive={isActive}
|
||||
isSpecial={isSpecial}
|
||||
onChangeActive={setIsActive}
|
||||
onChangeSpecial={setIsSpecial}
|
||||
onChangeImages={setImageFiles}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateFood
|
||||
@@ -0,0 +1,59 @@
|
||||
import { type FC } from 'react'
|
||||
import { Add } from 'iconsax-react'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
|
||||
import SwitchComponent from '@/components/Switch'
|
||||
|
||||
type Props = {
|
||||
isActive: boolean
|
||||
isSpecial: boolean
|
||||
onChangeActive: (value: boolean) => void
|
||||
onChangeSpecial: (value: boolean) => void
|
||||
onChangeImages: (files: File[]) => void
|
||||
}
|
||||
|
||||
const CreateFoodSidebar: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<div className='bg-white w-[300px] text-xs h-fit px-5 py-7 rounded-3xl'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='text-sm font-bold'>ثبت غذا</div>
|
||||
<button className='flex items-center justify-center w-8 h-8 bg-black rounded-lg'>
|
||||
<Add size={20} color='white' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div>وضعیت سرویس</div>
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={(value) => props.onChangeActive(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<div className='flex items-start gap-2'>
|
||||
<Checkbox
|
||||
checked={props.isSpecial}
|
||||
onCheckedChange={(checked) => props.onChangeSpecial(checked as boolean)}
|
||||
/>
|
||||
<label className='text-xs leading-tight cursor-pointer'>
|
||||
این غذا پیشنهاد ویژه رستوران هست.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div className='text-sm mb-2'>تصاویر غذا</div>
|
||||
<UploadBoxDraggble
|
||||
label='تصویر غذا را آپلود کنید'
|
||||
isMultiple={true}
|
||||
onChange={(files: File[]) => props.onChangeImages(files)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateFoodSidebar
|
||||
Reference in New Issue
Block a user