diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx index b170245..b691bcc 100644 --- a/src/config/Paths.tsx +++ b/src/config/Paths.tsx @@ -92,4 +92,5 @@ export const Paths = { form: '/print/form/', }, convertToOrder: '/convert-to-order', + orderPrint: '/order/print/' }; diff --git a/src/pages/order/List.tsx b/src/pages/order/List.tsx index 9f04257..c0e475f 100644 --- a/src/pages/order/List.tsx +++ b/src/pages/order/List.tsx @@ -1,7 +1,7 @@ import Filters from '@/components/Filters' import { type FC } from 'react' import Table from '@/components/Table' -import { Edit2, Eye, Receipt21, Setting2 } from 'iconsax-react' +import { Edit2, Eye, Printer, Receipt21 } from 'iconsax-react' import { useGetOrders } from './hooks/useOrderData' import moment from 'moment-jalaali' import { Link } from 'react-router-dom' @@ -101,6 +101,12 @@ const OrdersList: FC = () => { render: (item) => { return (
+ + + @@ -110,7 +116,6 @@ const OrdersList: FC = () => { -
) } diff --git a/src/pages/order/Print.tsx b/src/pages/order/Print.tsx new file mode 100644 index 0000000..f292146 --- /dev/null +++ b/src/pages/order/Print.tsx @@ -0,0 +1,74 @@ +import { type FC } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { useFormik } from 'formik' +import { useGetSections } from '../print/hooks/usePrintData' +import { useSubmitOrderPrint } from './hooks/useOrderData' +import type { OrderPrintFormType } from './types/Types' +import ManageForms from '../print/components/ManageForms' +import Button from '@/components/Button' +import { TickSquare } from 'iconsax-react' +import { toast } from '@/shared/toast' +import { extractErrorMessage } from '@/config/func' + +const OrderPrint: FC = () => { + const { id: orderId } = useParams() + const navigate = useNavigate() + const { data } = useGetSections() + const { isPending, mutate } = useSubmitOrderPrint() + + const formik = useFormik({ + initialValues: { + fields: [] + }, + onSubmit: (values) => { + if (!orderId) return + mutate( + { orderId, params: values }, + { + onSuccess: () => { + toast('با موفقیت ذخیره شد', 'success') + navigate(-1) + }, + onError: (error) => { + toast(extractErrorMessage(error), 'error') + } + } + ) + } + }) + + return ( +
+
+

فرم چاپ سفارش

+ +
+
+ {data?.data?.map((section) => ( +
+
{section.title}
+ +
+ ))} +
+
+ ) +} + +export default OrderPrint diff --git a/src/pages/order/hooks/useOrderData.ts b/src/pages/order/hooks/useOrderData.ts index 5b56fce..e442fc2 100644 --- a/src/pages/order/hooks/useOrderData.ts +++ b/src/pages/order/hooks/useOrderData.ts @@ -1,6 +1,10 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import * as api from "../service/OrderService"; -import type { AddTicketType, CreateFinalOrderType } from "../types/Types"; +import type { + AddTicketType, + CreateFinalOrderType, + OrderPrintFormType, +} from "../types/Types"; export const useGetOrders = () => { return useQuery({ @@ -97,3 +101,15 @@ export const useGetOrderItem = (id?: string) => { enabled: !!id, }); }; + +export const useSubmitOrderPrint = () => { + return useMutation({ + mutationFn: ({ + orderId, + params, + }: { + orderId: string; + params: OrderPrintFormType; + }) => api.submitOrderPrint(orderId, params), + }); +}; diff --git a/src/pages/order/service/OrderService.ts b/src/pages/order/service/OrderService.ts index 85b647a..c93c5a9 100644 --- a/src/pages/order/service/OrderService.ts +++ b/src/pages/order/service/OrderService.ts @@ -6,6 +6,7 @@ import type { OrderDetailResponseType, OrderItemResponseType, OrderListResponseType, + OrderPrintFormType, TicketsResponseType, } from "../types/Types"; import type { @@ -90,3 +91,11 @@ export const converToOrder = async (params: ConvertToOrderItemType) => { const { data } = await axios.post(`/admin/orders`, params); return data; }; + +export const submitOrderPrint = async ( + orderId: string, + params: OrderPrintFormType, +) => { + const { data } = await axios.post(`/admin/orders/${orderId}/print`, params); + return data; +}; diff --git a/src/pages/order/types/Types.ts b/src/pages/order/types/Types.ts index 4b1092d..18fbbb8 100644 --- a/src/pages/order/types/Types.ts +++ b/src/pages/order/types/Types.ts @@ -207,3 +207,12 @@ export type ConvertToOrderItemType = { description?: string; attachments: string[]; }; + +export type OrderPrintFieldType = { + fieldId: string; + value: string; +}; + +export type OrderPrintFormType = { + fields: OrderPrintFieldType[]; +}; diff --git a/src/pages/print/Update.tsx b/src/pages/print/Update.tsx index 7252336..1327063 100644 --- a/src/pages/print/Update.tsx +++ b/src/pages/print/Update.tsx @@ -14,7 +14,7 @@ const UpdateSection: FC = () => { const { id } = useParams() const navigate = useNavigate() - const { data } = useGetSectionsDetail(+id!) + const { data } = useGetSectionsDetail(id!) const { isPending, mutate } = useUpdateSection() const formik = useFormik({ @@ -26,7 +26,7 @@ const UpdateSection: FC = () => { title: Yup.string().required('این فیلد اجباری می باشد.') }), onSubmit: (values) => { - mutate({ id: +id!, params: values }, { + mutate({ id: id!, params: values }, { onSuccess: () => { toast('با موفقیت ثبت شد', 'success') navigate(-1) diff --git a/src/pages/print/components/ManageForms.tsx b/src/pages/print/components/ManageForms.tsx index c723466..2792c7b 100644 --- a/src/pages/print/components/ManageForms.tsx +++ b/src/pages/print/components/ManageForms.tsx @@ -10,25 +10,29 @@ import type { FormikProps } from 'formik' import type { CreatePrintFormType } from '../types/Types' import type { EntityType } from '@/pages/formBuilder/types/Types' import { FieldTypeEnum } from '@/pages/formBuilder/enum/Enum' +import type { OrderPrintFormType } from '@/pages/order/types/Types' type Props = { - attributes?: EntityType[], - formik: FormikProps + attributes?: EntityType[] + formik: FormikProps | FormikProps + formFieldKey?: keyof CreatePrintFormType | keyof OrderPrintFormType } const ManageForms: FC = (props) => { - const { attributes, formik } = props + const { attributes, formik, formFieldKey = 'printAttributes' } = props + + const fields = ((formik.values as Record)[formFieldKey] ?? []) const handleChange = (attributeId: string, value: string) => { - const attribute = formik.values.printAttributes + const attribute = [...fields] const index: number = attribute.findIndex(o => o.fieldId === attributeId) if (index > -1) { attribute[index].value = value } else { attribute.push({ fieldId: attributeId, value: value }) } - formik.setFieldValue('printAttributes', attribute) + formik.setFieldValue(formFieldKey as string, attribute) } @@ -39,7 +43,7 @@ const ManageForms: FC = (props) => { )}> { attributes?.map((item) => { - const value = formik.values.printAttributes?.find(o => o.fieldId === item.id) + const value = fields.find(o => o.fieldId === item.id) if (item?.type === FieldTypeEnum.select) return (
diff --git a/src/pages/print/hooks/usePrintData.ts b/src/pages/print/hooks/usePrintData.ts index 10e669e..200ed7f 100644 --- a/src/pages/print/hooks/usePrintData.ts +++ b/src/pages/print/hooks/usePrintData.ts @@ -9,7 +9,7 @@ export const useGetSections = () => { }); }; -export const useGetSectionsDetail = (id: number) => { +export const useGetSectionsDetail = (id: string) => { return useQuery({ queryKey: ["section", id], queryFn: () => api.getSectionDetail(id), @@ -31,7 +31,7 @@ export const useCreateSection = () => { export const useUpdateSection = () => { const queryClient = useQueryClient(); return useMutation({ - mutationFn: ({ id, params }: { id: number; params: CreateSectionType }) => + mutationFn: ({ id, params }: { id: string; params: CreateSectionType }) => api.updateSection(id, params), onSuccess: (_, params) => { queryClient.refetchQueries({ @@ -47,7 +47,7 @@ export const useUpdateSection = () => { export const useDeleteSection = () => { const queryClient = useQueryClient(); return useMutation({ - mutationFn: (id: number) => api.deleteSection(id), + mutationFn: (id: string) => api.deleteSection(id), onSuccess: () => { queryClient.refetchQueries({ queryKey: ["sections"], diff --git a/src/pages/print/service/PrintService.ts b/src/pages/print/service/PrintService.ts index 152af08..1b6a5a8 100644 --- a/src/pages/print/service/PrintService.ts +++ b/src/pages/print/service/PrintService.ts @@ -16,19 +16,19 @@ export const createSection = async (params: CreateSectionType) => { return data; }; -export const updateSection = async (id: number, params: CreateSectionType) => { +export const updateSection = async (id: string, params: CreateSectionType) => { const { data } = await axios.patch(`/admin/section/${id}`, params); return data; }; -export const getSectionDetail = async (id: number) => { +export const getSectionDetail = async (id: string) => { const { data } = await axios.get( `/admin/section/${id}`, ); return data; }; -export const deleteSection = async (id: number) => { +export const deleteSection = async (id: string) => { const { data } = await axios.delete(`/admin/section/${id}`); return data; }; diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx index f8d0d20..253b9bf 100644 --- a/src/router/MainRouter.tsx +++ b/src/router/MainRouter.tsx @@ -48,6 +48,7 @@ import CreateAdmin from "@/pages/admin/Create"; import EditAdmin from "@/pages/admin/Update"; import RequestDetail from "@/pages/requests/Detail"; import ConvertToOrders from "@/pages/order/ConvertToOrders"; +import OrderPrint from "@/pages/order/Print"; const MainRouter: FC = () => { return ( @@ -89,6 +90,7 @@ const MainRouter: FC = () => { } /> } /> } /> + } /> } /> } />