edit print form

src/pages/print/Form.tsx

@@ -1,4 +1,4 @@
-import { type FC } from 'react'
+import { useEffect, type FC } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useCreatePrintForm, useGetSections } from './hooks/usePrintData'
 import { useFormik } from 'formik'
@@ -8,14 +8,17 @@ import { toast } from '@/shared/toast'
 import { extractErrorMessage } from '@/config/func'
 import Button from '@/components/Button'
 import { TickSquare } from 'iconsax-react'
+import { useGetOrderItem } from '../order/hooks/useOrderData'
 
 const PrintForm: FC = () => {
 
     const navigate = useNavigate()
     const { itemId, orderId } = useParams()
+    const { data: item } = useGetOrderItem(+itemId!)
     const { isPending, mutate } = useCreatePrintForm()
     const { data } = useGetSections()
 
+
     const formik = useFormik<CreatePrintFormType>({
         initialValues: {
             printAttributes: []
@@ -33,6 +36,17 @@ const PrintForm: FC = () => {
         }
     })
 
+    useEffect(() => {
+
+        if (item?.data && item?.data?.printAttributes?.length) {
+            formik.setValues({
+                printAttributes: item?.data?.printAttributes
+            })
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [item?.data])
+
 
     return (
         <div className='mt-5'>

src/pages/print/components/ManageForms.tsx

@@ -34,11 +34,12 @@ const ManageForms: FC<Props> = (props) => {
 
     return (
         <div className={clx(
-            'grid grid-cols-1 md:grid-cols-2 gap-6',
+            'grid grid-cols-1 md:grid-cols-2 gap-6 mt-4',
             !attributes && 'hidden'
         )}>
             {
                 attributes?.map((item) => {
+                    const value = formik.values.printAttributes?.find(o => o.fieldId === item.id)
                     if (item?.type === FieldTypeEnum.select)
                         return (
                             <div key={item.id}>
@@ -52,6 +53,7 @@ const ManageForms: FC<Props> = (props) => {
                                         }
                                     })}
                                     onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
                                 />
                             </div>
                         )
@@ -62,13 +64,12 @@ const ManageForms: FC<Props> = (props) => {
                                 <div className='flex gap-5 flex-wrap'>
                                     {
                                         item.options?.map((value) => {
-                                            const object = formik.values.printAttributes.find(o => o.fieldId === item.id)
                                             return (
                                                 <div key={value.id} className='flex gap-2 items-center'>
                                                     <div>{value.value}</div>
                                                     <Checkbox
                                                         name={item.id + ''}
-                                                        checked={object?.value === value.value}
+                                                        checked={value?.value === value.value}
                                                         onCheckedChange={(checked) => handleChange(item.id, checked ? value.value : '')}
                                                     />
                                                 </div>
@@ -79,7 +80,6 @@ const ManageForms: FC<Props> = (props) => {
                             </div>
                         )
                     else if (item.type === FieldTypeEnum.radio) {
-                        const object = formik.values.printAttributes.find(o => o.fieldId === item.id)
                         return (
                             <div key={item.id}>
                                 <div className='text-sm mb-3'>{item.name}</div>
@@ -91,7 +91,7 @@ const ManageForms: FC<Props> = (props) => {
                                         }
                                     })}
                                     onChange={(v) => handleChange(item.id, v)}
-                                    selected={object?.value + '' || ''}
+                                    selected={value?.value + '' || ''}
                                 />
                             </div>
                         )
@@ -104,6 +104,7 @@ const ManageForms: FC<Props> = (props) => {
                                     onChange={(date) => handleChange(item.id, date)}
                                     placeholder=''
                                     label={item.name}
+                                    defaultValue={value?.value}
                                 />
                             </div>
                         )
@@ -114,6 +115,7 @@ const ManageForms: FC<Props> = (props) => {
                                     label={item.name}
                                     type={item.type}
                                     onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
                                 />
                             </div>
                         )
@@ -123,6 +125,7 @@ const ManageForms: FC<Props> = (props) => {
                                 <Textarea
                                     label={item.name}
                                     onChange={(e) => handleChange(item.id, e.target.value)}
+                                    value={value?.value}
                                 />
                             </div>
                         )