hamid zarghami
110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
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 { CreateFieldValueType } from '../types/Types'
|
||
import * as Yup from 'yup'
|
||
import Input from '@/components/Input'
|
||
import { useGetFieldValueDetail, useUpdateFieldValue } from '../hooks/useFormBuilderData'
|
||
import { extractErrorMessage } from '@/config/func'
|
||
import { toast } from 'react-toastify'
|
||
|
||
type Props = {
|
||
id: string,
|
||
refetch: () => void,
|
||
}
|
||
|
||
const UpdateValue: FC<Props> = ({ id, refetch }) => {
|
||
|
||
|
||
const [showModal, setShowModal] = useState<boolean>(false)
|
||
const { mutate: updateValue } = useUpdateFieldValue()
|
||
const { data, refetch: refetchDeetail } = useGetFieldValueDetail(id, showModal)
|
||
|
||
const formik = useFormik<CreateFieldValueType>({
|
||
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 |