create foor
This commit is contained in:
hamid zarghami
@@ -25,7 +25,7 @@ const Select: FC<Props> = (props: Props) => {
|
||||
</label>
|
||||
}
|
||||
<select {...props} className={clx(
|
||||
'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
|
||||
'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-[10px] bg-gray',
|
||||
props.className,
|
||||
props.label && 'mt-1'
|
||||
)}>
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Fragment } from 'react'
|
||||
import { Switch } from '@headlessui/react'
|
||||
import MoonLoader from 'react-spinners/MoonLoader'
|
||||
|
||||
interface Props {
|
||||
active: boolean,
|
||||
onChange: (value: boolean) => void,
|
||||
isLoading?: boolean,
|
||||
label?: string,
|
||||
}
|
||||
|
||||
const SwitchComponent = (props: Props) => {
|
||||
|
||||
const handleChange = (value: boolean) => {
|
||||
props.onChange(value)
|
||||
}
|
||||
|
||||
if (props.isLoading) {
|
||||
return (
|
||||
<MoonLoader size={20} color='black' className='ml-4' />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='dltr w-fit flex gap-2 items-center'>
|
||||
<Switch checked={props.active} onChange={handleChange} as={Fragment}>
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${checked ? 'bg-primary' : 'bg-gray-200'
|
||||
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
||||
>
|
||||
<span className="sr-only">Enable notifications</span>
|
||||
<span
|
||||
className={`${checked ? 'translate-x-6' : 'translate-x-1'
|
||||
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</Switch>
|
||||
{
|
||||
props.label &&
|
||||
<div className='text-sm'>
|
||||
: {props.label}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SwitchComponent
|
||||
@@ -39,3 +39,7 @@ textarea::placeholder {
|
||||
--width-sidebar: 300px;
|
||||
--border-radius-2.5: 10px;
|
||||
}
|
||||
|
||||
.dltr {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
@@ -7,6 +7,7 @@ import { clx } from '../helpers/utils'
|
||||
import { useSharedStore } from '../shared/store/sharedStore'
|
||||
import FoodsList from '@/pages/food/List'
|
||||
import { Pages } from '@/config/Pages'
|
||||
import CreateFood from '@/pages/food/Create'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
@@ -26,6 +27,7 @@ const MainRouter: FC = () => {
|
||||
<div className='pb-20'>
|
||||
<Routes>
|
||||
<Route path={Pages.foods.list} element={<FoodsList />} />
|
||||
<Route path={Pages.foods.add} element={<CreateFood />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user