From 66cd66cbe1279a701b1c8b563cc5eece35fd9287 Mon Sep 17 00:00:00 2001 From: ngyngcphu Date: Sat, 2 Dec 2023 17:03:14 +0700 Subject: [PATCH] fix(order-list): handle total cost and CloseForm --- src/components/common/AppNavigation.tsx | 46 ++++++++++------ src/components/order/common/CloseForm.tsx | 39 +++++++++----- src/components/order/common/FileBox.tsx | 18 +++---- .../order/desktop/ConfirmOrderDesktop.tsx | 7 +-- .../order/desktop/OrderListDesktop.tsx | 54 ++++++++++++++----- .../order/desktop/UploadAndPreviewDesktop.tsx | 28 +++++++++- src/components/order/mobile/OrderListForm.tsx | 5 +- .../order/mobile/UploadDocumentForm.tsx | 27 +++++++++- src/hooks/useEvent.ts | 6 ++- src/openapi-spec.ts | 5 +- 10 files changed, 168 insertions(+), 67 deletions(-) diff --git a/src/components/common/AppNavigation.tsx b/src/components/common/AppNavigation.tsx index 325321b..c146c69 100644 --- a/src/components/common/AppNavigation.tsx +++ b/src/components/common/AppNavigation.tsx @@ -2,8 +2,9 @@ import { useMemo } from 'react'; import { ChevronLeftIcon, UserCircleIcon } from '@heroicons/react/24/solid'; import coin from '@assets/coin.png'; import { AppDrawer, DesktopNavbar, ToggleSidebarBtn, useSidebarMenu } from '@components/common'; +import { useCloseForm } from '@components/order/common'; import { ScreenSize } from '@constants'; -import { useScreenSize, useUserQuery, usePrintingRequestQuery } from '@hooks'; +import { useScreenSize, useUserQuery, usePrintingRequestQuery, emitEvent } from '@hooks'; import { useMenuBarStore, useOrderWorkflowStore } from '@states'; import { formatFileSize } from '@utils'; @@ -16,6 +17,8 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu const { selectedMenu } = useMenuBarStore(); const { desktopOrderStep } = useOrderWorkflowStore(); + const { openCloseForm, CloseForm } = useCloseForm(); + const { remainCoins: { data } } = useUserQuery(); @@ -61,21 +64,34 @@ export const AppNavigation: Component<{ mainMenu: RouteMenu; subMenu: RouteMenu <>
{desktopOrderStep === 1 && ( -
-
- -

Order list

-
-
-

Size limit:

-

- {`${ - totalSize && formatFileSize(totalSize) - } / `} - 1GB -

+ <> +
+
+ +

Order list

+
+
+

Size limit:

+

+ {`${ + totalSize && formatFileSize(totalSize) + } / `} + 1GB +

+
-
+ { + emitEvent('appNavigation:save'); + }} + handleExist={() => { + emitEvent('appNavigation:exist'); + }} + /> + )} {desktopOrderStep === 2 && (
diff --git a/src/components/order/common/CloseForm.tsx b/src/components/order/common/CloseForm.tsx index 0ef0356..96744bc 100644 --- a/src/components/order/common/CloseForm.tsx +++ b/src/components/order/common/CloseForm.tsx @@ -16,14 +16,15 @@ export function useCloseForm() { handleExist: () => Promise | void; }> = ({ handleSave, handleExist }) => useMemo(() => { - const handleOpenDialog = () => { - setOpenDialog(!openDialog); - }; - return ( - + setOpenDialog(false)} size='xs'> - + setOpenDialog(false)} + > - - - Do you want to save your changes? + + + Bạn có muốn tiếp tục đặt hàng? - Your changes will be lost if you don't save them
- + -
diff --git a/src/components/order/common/FileBox.tsx b/src/components/order/common/FileBox.tsx index ce2a71e..61cb66b 100644 --- a/src/components/order/common/FileBox.tsx +++ b/src/components/order/common/FileBox.tsx @@ -1,13 +1,11 @@ import { useCallback } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import { ArrowUpTrayIcon } from '@heroicons/react/24/solid'; -import { ScreenSize } from '@constants'; -import { useScreenSize, usePrintingRequestMutation } from '@hooks'; +import { usePrintingRequestMutation } from '@hooks'; import { useOrderPrintStore, useOrderWorkflowStore } from '@states'; export function FileBox() { const queryClient = useQueryClient(); - const { screenSize } = useScreenSize(); const { setIsFileUploadSuccess } = useOrderPrintStore(); const { mobileOrderStep, setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore(); const { uploadFile } = usePrintingRequestMutation(); @@ -24,18 +22,14 @@ export function FileBox() { file: event.target.files[0] }); setIsFileUploadSuccess(true); - if (screenSize <= ScreenSize.MD) { - setMobileOrderStep({ - current: 0, - prev: mobileOrderStep.current - }); - } else { - setDesktopOrderStep(0); - } + setMobileOrderStep({ + current: 0, + prev: mobileOrderStep.current + }); + setDesktopOrderStep(0); } }, [ - screenSize, mobileOrderStep, uploadFile, queryClient, diff --git a/src/components/order/desktop/ConfirmOrderDesktop.tsx b/src/components/order/desktop/ConfirmOrderDesktop.tsx index 527c833..7b601a3 100644 --- a/src/components/order/desktop/ConfirmOrderDesktop.tsx +++ b/src/components/order/desktop/ConfirmOrderDesktop.tsx @@ -20,9 +20,12 @@ import { QuestionMarkCircleIcon } from '@heroicons/react/24/solid'; import coinImage from '@assets/coin.png'; +import { useOrderPrintStore } from '@states'; import { formatFileSize } from '@utils'; export function ConfirmOrderDektop() { + const { totalCost } = useOrderPrintStore(); + const User_Balance = 200; const FEE = [ { name: 'Print fee', price: 2400 }, @@ -248,9 +251,7 @@ export function ConfirmOrderDektop() { Total cost
Coin Icon - - {FEE.reduce((total, item) => total + item.price, 0)} - + {totalCost}
diff --git a/src/components/order/desktop/OrderListDesktop.tsx b/src/components/order/desktop/OrderListDesktop.tsx index e566c98..8319685 100644 --- a/src/components/order/desktop/OrderListDesktop.tsx +++ b/src/components/order/desktop/OrderListDesktop.tsx @@ -1,4 +1,4 @@ -import { MutableRefObject, useCallback, useMemo, useState } from 'react'; +import { MutableRefObject, useCallback, useEffect, useMemo, useState } from 'react'; import { useQueryClient } from '@tanstack/react-query'; import { createColumnHelper, @@ -13,14 +13,13 @@ import { DialogBody, DialogHeader, IconButton, - Spinner, Typography } from '@material-tailwind/react'; import { TrashIcon, ClipboardDocumentListIcon } from '@heroicons/react/24/outline'; import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid'; import coinImage from '@assets/coin.png'; import { FileBox } from '@components/order/common'; -import { usePrintingRequestMutation, usePrintingRequestQuery } from '@hooks'; +import { usePrintingRequestMutation, usePrintingRequestQuery, useListenEvent } from '@hooks'; import { useOrderPrintStore, useOrderWorkflowStore } from '@states'; import { formatFileSize } from '@utils'; import { usePreviewDocumentDesktop } from './PreviewDocumentDesktop'; @@ -29,15 +28,17 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject { const queryClient = useQueryClient(); - const { updateAmountFile, deleteFile } = usePrintingRequestMutation(); + const printingRequestId = queryClient.getQueryData(['printingRequestId']); + const { updateAmountFile, deleteFile, cancelPrintingRequest } = usePrintingRequestMutation(); const { listFiles: { data: listFiles, isFetching, isError, refetch: refetchListFiles } } = usePrintingRequestQuery(); const { openPreviewDocumentDesktop, PreviewDocumentDesktop } = usePreviewDocumentDesktop(); - const { totalCost, setIsOrderUpdate, setTotalCost } = useOrderPrintStore(); - const { setDesktopOrderStep } = useOrderWorkflowStore(); + const { totalCost, setIsOrderUpdate, setIsFileUploadSuccess, setTotalCost } = + useOrderPrintStore(); + const { setDesktopOrderStep, setMobileOrderStep } = useOrderWorkflowStore(); const [openDialog, setOpenDialog] = useState(false); const [fileDeletedParams, setFileDeletedParams] = useState<{ fileId: string; @@ -49,10 +50,29 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject { + setTotalCost(initialTotalCost.current); + }, [initialTotalCost, setTotalCost]); + const handleSaveOrderUpdate = () => { initialTotalCost.current = totalCost; setIsOrderUpdate(false); setDesktopOrderStep(2); + setMobileOrderStep({ + current: 3, + prev: 2 + }); + }; + + const handleExistOrderUpdate = async () => { + initialTotalCost.current = 0; + setTotalCost(0); + setIsFileUploadSuccess(false); + setIsOrderUpdate(false); + setDesktopOrderStep(0); + if (printingRequestId?.id) { + await cancelPrintingRequest.mutateAsync(printingRequestId?.id); + } }; const handleDeleteFile = async (fileId: string, fileCoin: number, numOfCopies: number) => { @@ -95,6 +115,9 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject(); const columnDefs = useMemo( () => [ @@ -244,14 +267,15 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject {listFiles && listFiles.length > 0 ? ( isFetching ? ( - - -
- - Đang tải dữ liệu... -
- - + fileTable.getRowModel().rows.map((row) => ( + + {row.getAllCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) ) : isError ? ( @@ -318,7 +342,9 @@ export const OrderListDesktop: Component<{ initialTotalCost: MutableRefObject diff --git a/src/components/order/desktop/UploadAndPreviewDesktop.tsx b/src/components/order/desktop/UploadAndPreviewDesktop.tsx index 33c7297..f96a597 100644 --- a/src/components/order/desktop/UploadAndPreviewDesktop.tsx +++ b/src/components/order/desktop/UploadAndPreviewDesktop.tsx @@ -97,6 +97,10 @@ export const UploadAndPreviewDesktop: Component<{ emitEvent('listFiles:refetch'); } setDesktopOrderStep(1); + setMobileOrderStep({ + current: 2, + prev: 0 + }); } else { initialTotalCost.current = 0; setTotalCost(0); @@ -122,9 +126,31 @@ export const UploadAndPreviewDesktop: Component<{ setTotalCost, setIsFileUploadSuccess, setDesktopOrderStep, + setMobileOrderStep, handleCloseUploadForm ]); + const handleOpenCloseForm = async () => { + if (fileMetadata?.fileId) { + openCloseForm(); + } else { + if (isOrderUpdate) { + if (fileMetadata?.fileId) { + openCloseForm(); + } else { + setDesktopOrderStep(1); + setMobileOrderStep({ + current: 2, + prev: 0 + }); + } + } else { + setIsFileUploadSuccess(false); + handleCloseUploadForm(); + } + } + }; + const handleLayoutChange = (e: ChangeEvent) => { setPageBothSide( e.target.value === LAYOUT_SIDE.portrait @@ -171,7 +197,7 @@ export const UploadAndPreviewDesktop: Component<{ return ( <>
- + diff --git a/src/components/order/mobile/OrderListForm.tsx b/src/components/order/mobile/OrderListForm.tsx index 58edb63..7f69e3c 100644 --- a/src/components/order/mobile/OrderListForm.tsx +++ b/src/components/order/mobile/OrderListForm.tsx @@ -16,7 +16,7 @@ export const OrderListForm: Component<{ const { totalCost, setTotalCost, setIsFileUploadSuccess, setIsOrderUpdate } = useOrderPrintStore(); - const { setMobileOrderStep } = useOrderWorkflowStore(); + const { setMobileOrderStep, setDesktopOrderStep } = useOrderWorkflowStore(); const { openCloseForm, CloseForm } = useCloseForm(); const totalSize = useMemo( @@ -47,7 +47,8 @@ export const OrderListForm: Component<{ current: 3, prev: 2 }); - }, [initialTotalCost, totalCost, setIsOrderUpdate, setMobileOrderStep]); + setDesktopOrderStep(2); + }, [initialTotalCost, totalCost, setIsOrderUpdate, setMobileOrderStep, setDesktopOrderStep]); return (
diff --git a/src/components/order/mobile/UploadDocumentForm.tsx b/src/components/order/mobile/UploadDocumentForm.tsx index 62d09f3..3e9e9a8 100644 --- a/src/components/order/mobile/UploadDocumentForm.tsx +++ b/src/components/order/mobile/UploadDocumentForm.tsx @@ -99,6 +99,7 @@ export const UploadDocumentForm: Component<{ current: 2, prev: 0 }); + setDesktopOrderStep(1); } else { initialTotalCost.current = 0; setTotalCost(0); @@ -119,9 +120,31 @@ export const UploadDocumentForm: Component<{ clearSpecificPageAndPageBothSide, setTotalCost, setIsFileUploadSuccess, - setMobileOrderStep + setMobileOrderStep, + setDesktopOrderStep ]); + const handleOpenCloseForm = async () => { + if (fileMetadata?.fileId) { + openCloseForm(); + } else { + if (isOrderUpdate) { + if (fileMetadata?.fileId) { + openCloseForm(); + } else { + setMobileOrderStep({ + current: 2, + prev: 0 + }); + setDesktopOrderStep(1); + } + } else { + setIsFileUploadSuccess(false); + await handleExistOrderForm(); + } + } + }; + const handleLayoutChange = (e: ChangeEvent) => { setPageBothSide( e.target.value === LAYOUT_SIDE.portrait @@ -147,7 +170,7 @@ export const UploadDocumentForm: Component<{ <>
Upload document - + diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts index 387da50..0e725d2 100644 --- a/src/hooks/useEvent.ts +++ b/src/hooks/useEvent.ts @@ -1,6 +1,10 @@ import { useEffect } from 'react'; -type EventKey = 'listFiles:refetch' | 'amountFiles:update'; +type EventKey = + | 'listFiles:refetch' + | 'amountFiles:update' + | 'appNavigation:save' + | 'appNavigation:exist'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export function useListenEvent(event: EventKey, listener: (...args: any[]) => void) { diff --git a/src/openapi-spec.ts b/src/openapi-spec.ts index 2563288..e9c8791 100644 --- a/src/openapi-spec.ts +++ b/src/openapi-spec.ts @@ -719,10 +719,7 @@ export interface paths { delete?: never; options?: never; head?: never; - /** - * Change the amount of prints for multiple files - * @deprecated - */ + /** Change the amount of prints for multiple files */ patch: { parameters: { query?: never;