edit print form

src/pages/order/hooks/useOrderData.ts

@@ -64,8 +64,16 @@ export const useGetProducts = () => {
 
 export const useGetAttributes = (id?: number) => {
   return useQuery({
-    queryKey: ["attributes"],
+    queryKey: ["attributes", id],
     queryFn: () => api.getAttributes(id),
     enabled: !!id,
   });
 };
+
+export const useGetOrderItem = (id?: number) => {
+  return useQuery({
+    queryKey: ["order-item", id],
+    queryFn: () => api.getOrderItem(id),
+    enabled: !!id,
+  });
+};

src/pages/order/service/OrderService.ts

@@ -3,6 +3,7 @@ import type {
   AddTicketType,
   CreateFinalOrderType,
   OrderDetailResponseType,
+  OrderItemResponseType,
   OrderResponseType,
   TicketsResponseType,
 } from "../types/Types";
@@ -62,3 +63,10 @@ export const getAttributes = async (productId?: number) => {
   );
   return data;
 };
+
+export const getOrderItem = async (itemId?: number) => {
+  const { data } = await axios.get<OrderItemResponseType>(
+    `/admin/orders/item/${itemId}`
+  );
+  return data;
+};

src/pages/order/types/Types.ts

@@ -40,7 +40,10 @@ export interface OrderItem {
   adminDescription: string | null;
   attachments: string[];
   printAttachments: null;
-  printAttributes: null;
+  printAttributes?: {
+    value: string;
+    fieldId: number;
+  }[];
   confirmedAt: string | null;
   createdAt: string;
   deletedAt: string | null;
@@ -48,6 +51,8 @@ export interface OrderItem {
   total: string;
 }
 
+export type OrderItemResponseType = BaseResponse<OrderItem>;
+
 export interface Product {
   id: string;
   createdAt: string;

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>
                         )