form builder

2026-01-29 11:17:20 +03:30
parent f9899f108c
commit acbd06425b
9 changed files with 234 additions and 22 deletions
@@ -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 { 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: number,
+    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