update value
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
import { useEffect, useState, type FC } from 'react'
|
||||
import Button from '@/components/Button'
|
||||
import { Edit, TickCircle } from 'iconsax-react'
|
||||
import DefaulModal from '@/components/DefaulModal'
|
||||
import { useFormik } from 'formik'
|
||||
import type { CreateAttributeValueType } from '../types/Types'
|
||||
import * as Yup from 'yup'
|
||||
import Input from '@/components/Input'
|
||||
import { useGetAttributeValueDetail, useUpdateAttributeValue } from '../hooks/useProductData'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
type Props = {
|
||||
id: number,
|
||||
refetch: () => void,
|
||||
}
|
||||
|
||||
const UpdateValue: FC<Props> = ({ id, refetch }) => {
|
||||
|
||||
|
||||
const [showModal, setShowModal] = useState<boolean>(false)
|
||||
const { mutate: updateValue } = useUpdateAttributeValue()
|
||||
const { data, refetch: refetchDeetail } = useGetAttributeValueDetail(id, showModal)
|
||||
|
||||
const formik = useFormik<CreateAttributeValueType>({
|
||||
initialValues: {
|
||||
value: '',
|
||||
order: 1
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
value: Yup.string().required('این فیلد اجباری است')
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
updateValue({ id: id, params: values }, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
refetchDeetail()
|
||||
setShowModal(false)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (data) {
|
||||
formik.setValues({
|
||||
value: data?.data.value,
|
||||
order: data?.data.order
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data])
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Edit
|
||||
onClick={() => setShowModal(true)}
|
||||
size={20}
|
||||
color='#0037FF'
|
||||
/>
|
||||
|
||||
<DefaulModal
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
isHeader
|
||||
title_header='ویرایش مقدار'
|
||||
>
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
label='مقدار'
|
||||
{...formik.getFieldProps('value')}
|
||||
error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
label='ترتیب اولویت'
|
||||
{...formik.getFieldProps('order')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex justify-end'>
|
||||
<Button
|
||||
className='w-fit px-6'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
size={18}
|
||||
color='black'
|
||||
/>
|
||||
<div>ذخیره</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</DefaulModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateValue
|
||||
Reference in New Issue
Block a user