danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create types create food + update form

Browse Source
This commit is contained in:
hamid zarghami
2025-11-15 09:57:19 +03:30
parent 76a4db8c4e
commit fd799577fe
3 changed files with 251 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+1
View File
@@ -31,6 +31,7 @@ textarea::placeholder {
@theme {
--color-primary: black;
--color-primary-foreground: white;
--color-secondary: #f4f5f9;
--color-border: #d0d0d0;
--color-description: #888888;
src/pages/food/Create.tsx
+223 -70
View File
@@ -6,18 +6,11 @@ import Input from '@/components/Input'
import Select from '@/components/Select'
import Textarea from '@/components/Textarea'
import Button from '@/components/Button'
import { Checkbox } from '@/components/ui/checkbox'
import CreateFoodSidebar from './components/CreateFoodSidebar'
import type { CreateFoodType } from './types/Types'
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)
@@ -34,29 +27,49 @@ const CreateFood: FC = () => {
const formik = useFormik<CreateFoodType>({
initialValues: {
name: '',
categoryId: '',
order: '',
ingredients: '',
price: '',
discountedPrice: '',
preparationTime: '',
description: ''
title: '',
content: '',
categoryIds: [],
price: 0,
discount: 0,
points: 0,
prepareTime: 0,
stock: 0,
stockDefault: 0,
rate: 0,
breakfast: false,
noon: false,
dinner: false,
mon: false,
tue: false,
wed: false,
thu: false,
fri: false,
sat: false,
sun: false,
isPickup: false,
pickupServe: false,
inPlaceServe: false,
isActive: true,
images: []
},
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('زمان آماده‌سازی الزامی است')
title: Yup.string().required('نام غذا الزامی است'),
categoryIds: Yup.array().min(1, 'حداقل یک دسته‌بندی الزامی است'),
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
stock: Yup.number().required('موجودی الزامی است').min(0, 'موجودی باید مثبت باشد'),
stockDefault: Yup.number().required('موجودی پیش‌فرض الزامی است').min(0, 'موجودی پیش‌فرض باید مثبت باشد'),
points: Yup.number().min(0, 'امتیاز باید مثبت باشد'),
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
rate: Yup.number().min(0, 'امتیاز باید مثبت باشد').max(5, 'امتیاز نمی‌تواند بیشتر از ۵ باشد')
}),
onSubmit: async (values) => {
const imageUrls = imageFiles.map(file => URL.createObjectURL(file))
console.log('Form values:', {
...values,
isActive,
isSpecial,
images: imageFiles
images: imageUrls
})
}
})
@@ -85,88 +98,228 @@ const CreateFood: FC = () => {
<div className='bg-white py-8 xl:px-10 px-4 rounded-3xl'>
<Input
label='نام غذا'
name='name'
name='title'
placeholder=''
value={formik.values.name}
value={formik.values.title}
onChange={formik.handleChange}
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
/>
<div className='grid grid-cols-2 gap-4 mt-5'>
<div className='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 : ''}
name='categoryIds'
value={formik.values.categoryIds[0] || ''}
onChange={(e) => {
const value = e.target.value
formik.setFieldValue('categoryIds', value ? [value] : [])
}}
error_text={formik.touched.categoryIds && formik.errors.categoryIds ? String(formik.errors.categoryIds) : ''}
/>
</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'>
<div className='grid grid-cols-3 gap-4 mt-5'>
<Input
name='price'
label='قیمت'
placeholder='ریال'
type='number'
seprator={true}
value={formik.values.price}
onChange={formik.handleChange}
onChange={(e) => formik.setFieldValue('price', Number(e.target.value))}
error_text={formik.touched.price && formik.errors.price ? formik.errors.price : ''}
/>
<Input
name='discountedPrice'
label='قیمت بعد از تخفیف'
name='discount'
label='تخفیف'
placeholder='ریال'
type='number'
seprator={true}
value={formik.values.discountedPrice}
onChange={formik.handleChange}
error_text={formik.touched.discountedPrice && formik.errors.discountedPrice ? formik.errors.discountedPrice : ''}
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='points'
label='امتیاز'
placeholder=''
type='number'
value={formik.values.points}
onChange={(e) => formik.setFieldValue('points', Number(e.target.value))}
error_text={formik.touched.points && formik.errors.points ? formik.errors.points : ''}
/>
</div>
<div className='grid grid-cols-3 gap-4 mt-5'>
<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='stock'
label='موجودی'
placeholder=''
type='number'
value={formik.values.stock}
onChange={(e) => formik.setFieldValue('stock', Number(e.target.value))}
error_text={formik.touched.stock && formik.errors.stock ? formik.errors.stock : ''}
/>
<Input
name='stockDefault'
label='موجودی پیش‌فرض'
placeholder=''
type='number'
value={formik.values.stockDefault}
onChange={(e) => formik.setFieldValue('stockDefault', Number(e.target.value))}
error_text={formik.touched.stockDefault && formik.errors.stockDefault ? formik.errors.stockDefault : ''}
/>
</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 : ''}
name='rate'
label='امتیاز (۰ تا ۵)'
placeholder=''
type='number'
min='0'
max='5'
step='0.1'
value={formik.values.rate}
onChange={(e) => formik.setFieldValue('rate', Number(e.target.value))}
error_text={formik.touched.rate && formik.errors.rate ? formik.errors.rate : ''}
/>
</div>
<div className='mt-5'>
<Textarea
name='description'
name='content'
label='توضیحات تکمیلی'
placeholder=''
value={formik.values.description}
value={formik.values.content}
onChange={formik.handleChange}
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
/>
</div>
<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.breakfast}
onCheckedChange={(checked) => formik.setFieldValue('breakfast', checked)}
/>
<label className='text-xs cursor-pointer'>صبحانه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.noon}
onCheckedChange={(checked) => formik.setFieldValue('noon', checked)}
/>
<label className='text-xs cursor-pointer'>ناهار</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.dinner}
onCheckedChange={(checked) => formik.setFieldValue('dinner', checked)}
/>
<label className='text-xs cursor-pointer'>شام</label>
</div>
</div>
</div>
<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.sat}
onCheckedChange={(checked) => formik.setFieldValue('sat', checked)}
/>
<label className='text-xs cursor-pointer'>شنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.sun}
onCheckedChange={(checked) => formik.setFieldValue('sun', checked)}
/>
<label className='text-xs cursor-pointer'>یکشنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.mon}
onCheckedChange={(checked) => formik.setFieldValue('mon', checked)}
/>
<label className='text-xs cursor-pointer'>دوشنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.tue}
onCheckedChange={(checked) => formik.setFieldValue('tue', checked)}
/>
<label className='text-xs cursor-pointer'>سه‌شنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.wed}
onCheckedChange={(checked) => formik.setFieldValue('wed', checked)}
/>
<label className='text-xs cursor-pointer'>چهارشنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.thu}
onCheckedChange={(checked) => formik.setFieldValue('thu', checked)}
/>
<label className='text-xs cursor-pointer'>پنج‌شنبه</label>
</div>
<div className='flex items-center gap-2'>
<Checkbox
checked={formik.values.fri}
onCheckedChange={(checked) => formik.setFieldValue('fri', checked)}
/>
<label className='text-xs cursor-pointer'>جمعه</label>
</div>
</div>
</div>
<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.isPickup}
onCheckedChange={(checked) => formik.setFieldValue('isPickup', checked)}
/>
<label className='text-xs cursor-pointer'>تحویل بیرون‌بر</label>
</div>
<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>
src/pages/food/types/Types.ts
+27
View File
@@ -0,0 +1,27 @@
export type CreateFoodType = {
breakfast: false;
tue: false;
wed: false;
thu: false;
fri: false;
title: string;
content: string;
price: number;
points: number;
prepareTime: number;
sat: boolean;
sun: boolean;
mon: boolean;
noon: false;
dinner: boolean;
isPickup: false;
stock: number;
stockDefault: number;
isActive: boolean;
images: string[];
inPlaceServe: false;
pickupServe: boolean;
rate: number;
discount: number;
categoryIds: string[];
};