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

edit order

Browse Source
This commit is contained in:
hamid zarghami
2026-02-01 16:13:40 +03:30
parent 5c536667b1
commit 3d53661c9a
13 changed files with 631 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/components/ManageAttributeEdit.tsx
+138
View File
@@ -0,0 +1,138 @@
import { type FC } from 'react'
import type { CreateOrderType } from '../types/Types'
import { clx } from '@/helpers/utils'
import Select from '@/components/Select'
import { Checkbox } from '@/components/ui/checkbox'
import RadioGroup from '@/components/RadioGroup'
import DatePickerComponent from '@/components/DatePicker'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import type { FormikProps } from 'formik'
import { FieldTypeEnum } from '@/pages/product/enum/Enum'
import type { FieldType } from '@/pages/product/types/Types'
type Props = {
attributes?: FieldType[],
formik: FormikProps<CreateOrderType>,
}
const ManageAttributeEdit: FC<Props> = (props) => {
const { attributes, formik } = props
const handleChange = (attributeId: number, value: string) => {
const attribute = formik.values.attributes
const index: number = attribute.findIndex(o => o.attributeId === attributeId)
if (index > -1) {
attribute[index].value = value
} else {
attribute.push({ attributeId: attributeId, value: value })
}
formik.setFieldValue('attributes', attribute)
}
return (
<div className={clx(
!attributes && 'hidden'
)}>
{
attributes?.map((item) => {
const value = formik.values.attributes.find(o => Number(o.attributeId) === Number(item.id))
if (item?.type === FieldTypeEnum.select)
return (
<div className='mt-6' key={item.id}>
<Select
placeholder={`انتخاب ${item.isRequired ? '(اجباری)' : '(اختاری)'}`}
label={item.name}
items={item.options?.map((value) => {
return {
label: value.value,
value: value.value
}
})}
onChange={(e) => handleChange(item.id, e.target.value)}
value={value?.value}
/>
</div>
)
else if (item.type === FieldTypeEnum.checkbox)
return (
<div key={item.id} className='mt-6'>
<div className='text-sm mb-3'>{item.name}</div>
<div className='flex gap-5 flex-wrap'>
{
item.options?.map((value) => {
return (
<div key={value.id} className='flex gap-2 items-center'>
<div>{value.value}</div>
<Checkbox
name={item.id + ''}
checked={value?.value === value.value}
onCheckedChange={(checked) => handleChange(item.id, checked ? value.value : '')}
/>
</div>
)
})
}
</div>
</div>
)
else if (item.type === FieldTypeEnum.radio) {
return (
<div key={item.id} className='mt-6'>
<div className='text-sm mb-3'>{item.name}</div>
<RadioGroup
items={item.options?.map((value) => {
return {
label: value.value,
value: value.value
}
})}
onChange={(v) => handleChange(item.id, v)}
selected={value?.value + '' || ''}
/>
</div>
)
}
else if (item.type === FieldTypeEnum.date)
return (
<div key={item.id} className='mt-6'>
<DatePickerComponent
onChange={(date) => handleChange(item.id, date)}
placeholder=''
label={item.name}
defaultValue={value?.value.toString()}
/>
</div>
)
else if (item.type === FieldTypeEnum.number || item.type === FieldTypeEnum.text)
return (
<div key={item.id} className='mt-6'>
<Input
label={item.name}
type={item.type}
onChange={(e) => handleChange(item.id, e.target.value)}
value={value?.value}
/>
</div>
)
else if (item.type === FieldTypeEnum.textarea)
return (
<div key={item.id} className='mt-6'>
<Textarea
label={item.name}
onChange={(e) => handleChange(item.id, e.target.value)}
value={value?.value}
/>
</div>
)
})
}
</div>
)
}
export default ManageAttributeEdit
src/pages/order/components/SingleOrderEdit.tsx
+272
View File
@@ -0,0 +1,272 @@
import { useEffect, useState, type FC } from 'react'
import Button from '@/components/Button'
import Input from '@/components/Input'
import Select from '@/components/Select'
import UploadBox from '@/components/UploadBox'
import VoiceRecorder from '@/components/VoiceRecorder'
import { COLORS } from '@/constants/colors'
import { AddSquare, Edit, Link } from 'iconsax-react'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import type { AttachmentsType, CreateOrderType } from '../types/Types'
import { useGetAttributes, useGetProducts } from '../hooks/useOrderData'
import { useMultiUpload, useSingleUpload } from '@/pages/uploader/hooks/useUploader'
import { useOrderStore } from '../store/OrderStore'
import { clx } from '@/helpers/utils'
import ProductsSelect from './ProductsSelect'
import type { ProductType } from '@/pages/product/types/Types'
import VoicePlayer from '@/components/VoicePlayer'
import { getFileNameAndExtensionFromUrl } from '@/config/func'
import ManageAttributeEdit from './ManageAttributeEdit'
import TrashWithConfrim from '@/components/TrashWithConfrim'
type Props = {
addNewItem: () => void,
initialValues: CreateOrderType
}
const EditOrder: FC<Props> = ({ addNewItem, initialValues }) => {
const { data } = useGetProducts()
const { setItems, items } = useOrderStore()
const [indexOrder, setIndexOrder] = useState<number>(-1)
const [isEditMode, setIsEditMode] = useState<boolean>(false)
const [productSelected, setProductSelected] = useState<ProductType>()
const [voiceFile, setVoiceFile] = useState<File>()
const [files, setFiles] = useState<File[]>([])
const { data: attributes } = useGetAttributes(productSelected?.id)
const singleUpload = useSingleUpload()
const multiUpload = useMultiUpload()
const formik = useFormik<CreateOrderType>({
initialValues: initialValues || {
productId: undefined,
attachments: [],
quantity: undefined,
description: '',
attributes: [],
discount: undefined,
unitPrice: undefined,
},
validationSchema: Yup.object({
productId: Yup.number().required('این فیلد اجباری می باشد'),
quantity: Yup.number().required('این فیلد اجباری می باشد'),
unitPrice: Yup.number().required('این فیلد اجباری می باشد'),
}),
onSubmit: async (values) => {
const attachments: AttachmentsType[] = []
if (files.length) {
await multiUpload.mutateAsync(files, {
onSuccess: (data) => {
data?.data?.map((item) => {
attachments.push({
type: 'uploads_attach',
url: item.url
})
})
}
})
}
if (voiceFile) {
await singleUpload.mutateAsync(voiceFile, {
onSuccess: (data) => {
attachments.push({
type: 'voice',
url: data?.data?.url
})
}
})
}
if (indexOrder === -1) {
values.attachments = attachments
setIndexOrder(items.length)
setItems([...items, values])
addNewItem()
setIsEditMode(true)
} else {
if (values.attachments.length) {
values.attachments = [...values.attachments, ...attachments]
}
const items_edit = [...items]
items_edit[indexOrder] = values
setItems(items_edit)
}
}
})
const handleChange = (id: number) => {
const productId = id
const product = data?.data?.find(o => Number(o.id) === Number(productId))
if (product) {
if (product.quantities[0] !== 0) {
product.quantities.unshift(0)
}
setProductSelected(product)
formik.setFieldValue('productId', productId)
}
}
useEffect(() => {
if (data?.data) {
handleChange(initialValues.productId!)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialValues, data])
const handleDeleteAttachment = (url: string) => {
const attachments = [...formik.values.attachments]
const index = attachments.findIndex(o => o.url === url)
if (index > -1) {
attachments.splice(index, 1)
formik.setFieldValue('attachments', attachments)
}
}
return (
<div className='bg-white rounded-3xl p-6 mt-8'>
<div className='font-light'>اطلاعات سفارش</div>
<div className='mt-6 rowTwoInput'>
<ProductsSelect
{...formik.getFieldProps('productId')}
onChange={(e) => handleChange(Number(e.target.value))}
error_text={formik.touched.productId && formik.errors.productId ? formik.errors.productId : ''}
/>
</div>
<div>
<ManageAttributeEdit
attributes={attributes?.data}
formik={formik}
/>
</div>
<div className='mt-6 rowTwoInput'>
<Select
items={productSelected?.quantities?.map((item) => {
return {
label: item === 0 ? 'انتخاب دلخواه' : item + '',
value: item
}
}) || []}
label='تعداد'
placeholder='انتخاب'
{...formik.getFieldProps('quantity')}
error_text={formik.touched.quantity && formik.errors.quantity ? formik.errors.quantity : ''}
/>
<Input
label='تعداد دلخواه'
readOnly={Number(formik.values.quantity) !== 0}
{...formik.getFieldProps('quantity')}
type='number'
error_text={formik.touched.quantity && formik.errors.quantity ? formik.errors.quantity : ''}
/>
</div>
<div className='rowTwoInput mt-6'>
<Input
{...formik.getFieldProps('unitPrice')}
label='مبلغ واحد'
error_text={formik.touched.unitPrice && formik.errors.unitPrice ? formik.errors.unitPrice : ''}
/>
<Input
{...formik.getFieldProps('discount')}
label='مبلغ تخفیف به تومان'
/>
</div>
<div className='mt-6'>
<VoiceRecorder
onChange={(value) => formik.setFieldValue('description', value)}
label='پیام صوتی'
value={formik.values.description}
onRecordingComplete={(blob) => {
const file = new File([blob], "recording.wav", { type: blob.type });
setVoiceFile(file);
}}
/>
</div>
<div className='mt-5 text-sm'>پیغام صوتی</div>
{
formik.values.attachments?.map((row) => {
if (row.type === 'voice')
return (
<VoicePlayer
key={row.url}
url={row.url}
/>
)
})
}
<div className='mt-6'>
<UploadBox
label='آپلود فایل'
isMultiple
onChange={setFiles}
/>
</div>
<div>
<div className='mt-5 text-sm'>پیوست ها</div>
<div className='flex flex-wrap gap-4'>
{
formik.values.attachments?.map((row) => {
if (row.type !== 'voice')
return (
<div key={row.url} className='flex mt-2 px-2 py-2 rounded-lg items-center gap-2 text-xs text-[#0037FF] border border-[#0037FF]'>
<Link size={16} color='#0037FF' />
<div>
{getFileNameAndExtensionFromUrl(row.url).fileName}
</div>
<div className='w-9 flex justify-end'>
<TrashWithConfrim
colorIcon='red'
onDelete={() => handleDeleteAttachment(row.url)}
/>
</div>
</div>
)
})
}
</div>
</div>
<div className='mt-6 flex justify-end'>
<Button
className={clx(
'bg-transparent border border-primary text-primary w-fit px-6',
isEditMode && 'bg-transparent border-[#3B82F6] text-[#3B82F6] '
)}
onClick={() => formik.handleSubmit()}
isLoading={singleUpload.isPending || multiUpload.isPending}
>
<div className='flex gap-1'>
{
isEditMode ?
<Edit color='#3B82F6' size={20} />
:
<AddSquare color={COLORS.primary} size={20} />
}
<div>
{isEditMode ? 'ویرایش کردن' : 'اضافه کردن'}
</div>
</div>
</Button>
</div>
</div>
)
}
export default EditOrder