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

navigate back

Browse Source
This commit is contained in:
hamid zarghami
2026-07-04 15:21:31 +03:30
parent 6a7d5523a7
commit 9f18e33ef6
2 changed files with 378 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/food/Create.tsx
+279 -301
View File
@@ -1,310 +1,288 @@
import { type FC, useState } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
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 { Checkbox } from '@/components/ui/checkbox'
import CreateFoodSidebar from './components/CreateFoodSidebar'
import WeekDaysSection from './components/WeekDaysSection'
import MealTimesSection from './components/MealTimesSection'
import type { CreateFoodType } from './types/Types'
import { useCreateFood, useGetCategories } from './hooks/useFoodData'
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import Button from "@/components/Button";
import Input from "@/components/Input";
import Select from "@/components/Select";
import Textarea from "@/components/Textarea";
import { Checkbox } from "@/components/ui/checkbox";
import type { ErrorType } from "@/helpers/types";
import { useFormik } from "formik";
import { TickCircle } from "iconsax-react";
import { type FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import * as Yup from "yup";
import { useMultipleUpload } from "../uploader/hooks/useUploaderData";
import CreateFoodSidebar from "./components/CreateFoodSidebar";
import MealTimesSection from "./components/MealTimesSection";
import WeekDaysSection from "./components/WeekDaysSection";
import { useCreateFood, useGetCategories } from "./hooks/useFoodData";
import type { CreateFoodType } from "./types/Types";
const CreateFood: FC = () => {
const { data } = useGetCategories();
const [isActive, setIsActive] = useState<boolean>(true);
const [isSpecial, setIsSpecial] = useState<boolean>(false);
const [imageFiles, setImageFiles] = useState<File[]>([]);
const { mutate: createFood, isPending } = useCreateFood();
const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload();
const navigate = useNavigate();
const categories =
data?.data?.map((category) => ({
label: category.title,
value: category.id,
})) || [];
const { data } = useGetCategories();
const [isActive, setIsActive] = useState<boolean>(true)
const [isSpecial, setIsSpecial] = useState<boolean>(false)
const [imageFiles, setImageFiles] = useState<File[]>([])
const { mutate: createFood, isPending } = useCreateFood()
const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload()
const formik = useFormik<CreateFoodType>({
initialValues: {
title: "",
desc: "",
content: [],
categoryId: "",
price: 0,
discount: 0,
prepareTime: 0,
weekDays: [0, 1, 2, 3, 4, 5, 6],
mealTypes: ["breakfast", "lunch", "dinner"],
pickupServe: true,
inPlaceServe: true,
isActive: true,
images: [],
isSpecialOffer: false,
dailyStock: 0,
availableStock: 0,
order: 0,
},
validationSchema: Yup.object().shape({
title: Yup.string().required("نام غذا الزامی است"),
categoryId: Yup.string().required("دسته‌بندی الزامی است"),
price: Yup.number().required("قیمت الزامی است").min(0, "قیمت باید مثبت باشد"),
prepareTime: Yup.number().required("زمان آماده‌سازی الزامی است").min(0, "زمان آماده‌سازی باید مثبت باشد"),
discount: Yup.number().min(0, "تخفیف باید مثبت باشد"),
dailyStock: Yup.number().required("موجودی روزانه الزامی است").min(0, "موجودی روزانه باید مثبت باشد"),
availableStock: Yup.number().required("موجودی فعلی الزامی است").min(0, "موجودی فعلی باید مثبت باشد"),
content: Yup.array().of(Yup.string()),
weekDays: Yup.array().of(Yup.number()),
mealTypes: Yup.array().of(Yup.string()),
}),
onSubmit: (values) => {
const submitFood = (imageUrls: string[] = []) => {
const foodData: CreateFoodType = {
...values,
isActive,
isSpecialOffer: isSpecial,
images: imageUrls,
content: values.content.filter((item) => item && item.trim().length > 0),
};
const categories = data?.data?.map(category => ({
label: category.title,
value: category.id
})) || []
createFood(foodData, {
onSuccess: () => {
toast.success("غذا با موفقیت ایجاد شد");
navigate(-1);
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0] || "خطا در ایجاد غذا");
},
});
};
const formik = useFormik<CreateFoodType>({
initialValues: {
title: '',
desc: '',
content: [],
categoryId: '',
price: 0,
discount: 0,
prepareTime: 0,
weekDays: [0, 1, 2, 3, 4, 5, 6],
mealTypes: ['breakfast', 'lunch', 'dinner'],
pickupServe: true,
inPlaceServe: true,
isActive: true,
images: [],
isSpecialOffer: false,
dailyStock: 0,
availableStock: 0,
order: 0
},
validationSchema: Yup.object().shape({
title: Yup.string().required('نام غذا الزامی است'),
categoryId: Yup.string().required('دسته‌بندی الزامی است'),
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
availableStock: Yup.number()
.required('موجودی فعلی الزامی است')
.min(0, 'موجودی فعلی باید مثبت باشد'),
content: Yup.array().of(Yup.string()),
weekDays: Yup.array().of(Yup.number()),
mealTypes: Yup.array().of(Yup.string())
}),
onSubmit: (values) => {
const submitFood = (imageUrls: string[] = []) => {
const foodData: CreateFoodType = {
...values,
isActive,
isSpecialOffer: isSpecial,
images: imageUrls,
content: values.content.filter(item => item && item.trim().length > 0)
}
if (imageFiles.length > 0) {
multipleUpload(imageFiles, {
onSuccess: (response) => {
const imageUrls = response?.data?.map((item) => item.url) || [];
submitFood(imageUrls);
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0] || "خطا در آپلود تصاویر");
},
});
} else {
submitFood();
}
},
});
createFood(foodData, {
onSuccess: () => {
toast.success('غذا با موفقیت ایجاد شد')
window.location.href = Pages.foods.list
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0] || 'خطا در ایجاد غذا')
}
})
}
if (imageFiles.length > 0) {
multipleUpload(imageFiles, {
onSuccess: (response) => {
const imageUrls = response?.data?.map(item => item.url) || []
submitFood(imageUrls)
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0] || 'خطا در آپلود تصاویر')
}
})
} else {
submitFood()
}
}
})
return (
<div className='w-full mt-4'>
<div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
<div className='text-lg font-light'>
غذای جدید
</div>
<div>
<Button
className='px-5 w-full sm:w-auto'
onClick={() => formik.handleSubmit()}
isloading={isPending || isUploading}
>
<div className='flex gap-2 items-center'>
<TickCircle className='size-5' color='white' />
<div>ثبت غذا</div>
</div>
</Button>
</div>
</div>
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
<div className='flex-1'>
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
<Input
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-5 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 : ''}
/>
<Input
name='availableStock'
label='موجودی فعلی'
placeholder='عدد'
type='number'
seprator={true}
value={formik.values.availableStock}
onChange={(e) => formik.setFieldValue('availableStock', Number(e.target.value))}
error_text={formik.touched.availableStock && formik.errors.availableStock ? formik.errors.availableStock : ''}
/>
</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 className='w-full lg:w-auto'>
<CreateFoodSidebar
isActive={isActive}
isSpecial={isSpecial}
onChangeActive={setIsActive}
onChangeSpecial={setIsSpecial}
onChangeImages={setImageFiles}
/>
</div>
return (
<div className="w-full mt-4">
<div className="flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4">
<div className="text-lg font-light">غذای جدید</div>
<div>
<Button className="px-5 w-full sm:w-auto" onClick={() => formik.handleSubmit()} isloading={isPending || isUploading}>
<div className="flex gap-2 items-center">
<TickCircle className="size-5" color="white" />
<div>ثبت غذا</div>
</div>
</Button>
</div>
)
}
</div>
export default CreateFood
<div className="flex flex-col lg:flex-row gap-6 mt-6">
<div className="flex-1">
<div className="bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl">
<Input
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-5 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 : ""}
/>
<Input
name="availableStock"
label="موجودی فعلی"
placeholder="عدد"
type="number"
seprator={true}
value={formik.values.availableStock}
onChange={(e) => formik.setFieldValue("availableStock", Number(e.target.value))}
error_text={formik.touched.availableStock && formik.errors.availableStock ? formik.errors.availableStock : ""}
/>
</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 className="w-full lg:w-auto">
<CreateFoodSidebar isActive={isActive} isSpecial={isSpecial} onChangeActive={setIsActive} onChangeSpecial={setIsSpecial} onChangeImages={setImageFiles} />
</div>
</div>
</div>
);
};
export default CreateFood;
src/pages/food/Update.tsx
+99 -104
View File
@@ -1,47 +1,47 @@
import { type FC, useState, useEffect } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { TickCircle } from 'iconsax-react'
import { toast } from 'react-toastify'
import { useNavigate, useParams } from 'react-router-dom'
import Button from '@/components/Button'
import CreateFoodSidebar from './components/CreateFoodSidebar'
import BasicInfoSection from './components/BasicInfoSection'
import FoodContentSection from './components/FoodContentSection'
import MealTimesSection from './components/MealTimesSection'
import WeekDaysSection from './components/WeekDaysSection'
import ServiceOptionsSection from './components/ServiceOptionsSection'
import type { CreateFoodType } from './types/Types'
import { useUpdateFood, useGetFoodDetails, useGetCategories } from './hooks/useFoodData'
import { useMultipleUpload } from '../uploader/hooks/useUploaderData'
import { Pages } from '@/config/Pages'
import type { ErrorType } from '@/helpers/types'
import { extractErrorMessage } from '@/config/func'
import Button from "@/components/Button";
import { extractErrorMessage } from "@/config/func";
import type { ErrorType } from "@/helpers/types";
import { useFormik } from "formik";
import { TickCircle } from "iconsax-react";
import { type FC, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "react-toastify";
import * as Yup from "yup";
import { useMultipleUpload } from "../uploader/hooks/useUploaderData";
import BasicInfoSection from "./components/BasicInfoSection";
import CreateFoodSidebar from "./components/CreateFoodSidebar";
import FoodContentSection from "./components/FoodContentSection";
import MealTimesSection from "./components/MealTimesSection";
import ServiceOptionsSection from "./components/ServiceOptionsSection";
import WeekDaysSection from "./components/WeekDaysSection";
import { useGetCategories, useGetFoodDetails, useUpdateFood } from "./hooks/useFoodData";
import type { CreateFoodType } from "./types/Types";
const UpdateFood: FC = () => {
const { id } = useParams<{ id: string }>()
const { data: foodData, isLoading } = useGetFoodDetails(id || '')
const { data: categoriesData } = useGetCategories()
const [isActive, setIsActive] = useState<boolean>(true)
const [isSpecial, setIsSpecial] = useState<boolean>(false)
const [imageFiles, setImageFiles] = useState<File[]>([])
const [existingImages, setExistingImages] = useState<string[]>([])
const { mutate: updateFood, isPending } = useUpdateFood()
const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload()
const navigate = useNavigate()
const categories = categoriesData?.data?.map(category => ({
label: category.title,
value: category.id
})) || []
const { id } = useParams<{ id: string }>();
const { data: foodData, isLoading } = useGetFoodDetails(id || "");
const { data: categoriesData } = useGetCategories();
const [isActive, setIsActive] = useState<boolean>(true);
const [isSpecial, setIsSpecial] = useState<boolean>(false);
const [imageFiles, setImageFiles] = useState<File[]>([]);
const [existingImages, setExistingImages] = useState<string[]>([]);
const { mutate: updateFood, isPending } = useUpdateFood();
const { mutate: multipleUpload, isPending: isUploading } = useMultipleUpload();
const navigate = useNavigate();
const categories =
categoriesData?.data?.map((category) => ({
label: category.title,
value: category.id,
})) || [];
const food = foodData?.data
const food = foodData?.data;
const formik = useFormik<CreateFoodType>({
initialValues: {
title: '',
desc: '',
title: "",
desc: "",
content: [],
categoryId: '',
categoryId: "",
price: 0,
discount: 0,
prepareTime: 0,
@@ -54,72 +54,73 @@ const UpdateFood: FC = () => {
isSpecialOffer: false,
dailyStock: 0,
availableStock: 0,
order: 0
order: 0,
},
validationSchema: Yup.object().shape({
title: Yup.string().required('نام غذا الزامی است'),
categoryId: Yup.string().required('دسته‌بندی الزامی است'),
price: Yup.number().required('قیمت الزامی است').min(0, 'قیمت باید مثبت باشد'),
prepareTime: Yup.number().required('زمان آماده‌سازی الزامی است').min(0, 'زمان آماده‌سازی باید مثبت باشد'),
discount: Yup.number().min(0, 'تخفیف باید مثبت باشد'),
dailyStock: Yup.number().required('موجودی روزانه الزامی است').min(0, 'موجودی روزانه باید مثبت باشد'),
availableStock: Yup.number()
.required('موجودی فعلی الزامی است')
.min(0, 'موجودی فعلی باید مثبت باشد'),
title: Yup.string().required("نام غذا الزامی است"),
categoryId: Yup.string().required("دسته‌بندی الزامی است"),
price: Yup.number().required("قیمت الزامی است").min(0, "قیمت باید مثبت باشد"),
prepareTime: Yup.number().required("زمان آماده‌سازی الزامی است").min(0, "زمان آماده‌سازی باید مثبت باشد"),
discount: Yup.number().min(0, "تخفیف باید مثبت باشد"),
dailyStock: Yup.number().required("موجودی روزانه الزامی است").min(0, "موجودی روزانه باید مثبت باشد"),
availableStock: Yup.number().required("موجودی فعلی الزامی است").min(0, "موجودی فعلی باید مثبت باشد"),
content: Yup.array().of(Yup.string()),
weekDays: Yup.array().of(Yup.number()),
mealTypes: Yup.array().of(Yup.string())
mealTypes: Yup.array().of(Yup.string()),
}),
onSubmit: (values) => {
if (!id) {
toast.error('شناسه غذا یافت نشد')
return
toast.error("شناسه غذا یافت نشد");
return;
}
const submitFood = (newImageUrls: string[] = []) => {
const allImages = [...values.images, ...newImageUrls]
const allImages = [...values.images, ...newImageUrls];
const foodData: CreateFoodType = {
...values,
isActive,
isSpecialOffer: isSpecial,
images: allImages,
content: values.content.filter(item => item && item.trim().length > 0)
}
content: values.content.filter((item) => item && item.trim().length > 0),
};
updateFood({ id, params: foodData }, {
onSuccess: () => {
toast.success('غذا با موفقیت به‌روزرسانی شد')
navigate(Pages.foods.list)
updateFood(
{ id, params: foodData },
{
onSuccess: () => {
toast.success("غذا با موفقیت به‌روزرسانی شد");
navigate(-1);
},
onError: (error: ErrorType) => {
toast.error(extractErrorMessage(error));
},
},
onError: (error: ErrorType) => {
toast.error(extractErrorMessage(error))
}
})
}
);
};
if (imageFiles.length > 0) {
multipleUpload(imageFiles, {
onSuccess: (response) => {
const imageUrls = response?.data?.map(item => item.url) || []
submitFood(imageUrls)
const imageUrls = response?.data?.map((item) => item.url) || [];
submitFood(imageUrls);
},
onError: (error: ErrorType) => {
toast.error(error?.response?.data?.error?.message[0] || 'خطا در آپلود تصاویر')
}
})
toast.error(error?.response?.data?.error?.message[0] || "خطا در آپلود تصاویر");
},
});
} else {
submitFood()
submitFood();
}
}
})
},
});
useEffect(() => {
if (food) {
formik.setValues({
title: food.title || '',
desc: food.desc || '',
title: food.title || "",
desc: food.desc || "",
content: food.content || [],
categoryId: food.category?.id || '',
categoryId: food.category?.id || "",
price: food.price || 0,
discount: food.discount || 0,
prepareTime: food.prepareTime || 0,
@@ -132,59 +133,53 @@ const UpdateFood: FC = () => {
isSpecialOffer: food.isSpecialOffer || false,
dailyStock: food.inventory?.totalStock || 0,
availableStock: food.inventory?.availableStock || 0,
order: food.order || 0
})
setIsActive(food.isActive || false)
setIsSpecial(food.isSpecialOffer || false)
setExistingImages(food.images || [])
order: food.order || 0,
});
setIsActive(food.isActive || false);
setIsSpecial(food.isSpecialOffer || false);
setExistingImages(food.images || []);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [food])
}, [food]);
useEffect(() => {
formik.setFieldValue('images', existingImages)
formik.setFieldValue("images", existingImages);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [existingImages])
}, [existingImages]);
if (isLoading) {
return (
<div className='w-full mt-4 flex justify-center items-center'>
<div className="w-full mt-4 flex justify-center items-center">
<div>در حال بارگذاری...</div>
</div>
)
);
}
if (!food) {
return (
<div className='w-full mt-4 flex justify-center items-center'>
<div className="w-full mt-4 flex justify-center items-center">
<div>غذا یافت نشد</div>
</div>
)
);
}
return (
<div className='w-full mt-4'>
<div className='flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4'>
<div className='text-lg font-light'>
ویرایش غذا
</div>
<div className="w-full mt-4">
<div className="flex flex-col sm:flex-row w-full justify-between items-start sm:items-center gap-4">
<div className="text-lg font-light">ویرایش غذا</div>
<div>
<Button
className='px-5 w-full sm:w-auto'
onClick={() => formik.handleSubmit()}
isloading={isPending || isUploading}
>
<div className='flex gap-2 items-center'>
<TickCircle className='size-5' color='white' />
<Button className="px-5 w-full sm:w-auto" onClick={() => formik.handleSubmit()} isloading={isPending || isUploading}>
<div className="flex gap-2 items-center">
<TickCircle className="size-5" color="white" />
<div>ذخیره تغییرات</div>
</div>
</Button>
</div>
</div>
<div className='flex flex-col lg:flex-row gap-6 mt-6'>
<div className='flex-1'>
<div className='bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl'>
<div className="flex flex-col lg:flex-row gap-6 mt-6">
<div className="flex-1">
<div className="bg-white py-6 sm:py-8 xl:px-10 px-4 rounded-3xl">
<BasicInfoSection formik={formik} categories={categories} />
<FoodContentSection formik={formik} />
<MealTimesSection formik={formik} />
@@ -193,7 +188,7 @@ const UpdateFood: FC = () => {
</div>
</div>
<div className='w-full lg:w-auto'>
<div className="w-full lg:w-auto">
<CreateFoodSidebar
isActive={isActive}
isSpecial={isSpecial}
@@ -206,7 +201,7 @@ const UpdateFood: FC = () => {
</div>
</div>
</div>
)
}
);
};
export default UpdateFood
export default UpdateFood;