From beb2357d3b601d226ea62bb6676624a04344a253 Mon Sep 17 00:00:00 2001 From: ngyngcphu Date: Sat, 28 Oct 2023 23:09:17 +0700 Subject: [PATCH] feat(upload&preview): complete reponsive for desktop --- src/components/home/Orders.tsx | 4 +- src/components/order/common/FormFooter.tsx | 36 +++ src/components/order/common/index.ts | 1 + .../order/desktop/UploadAndPreviewDocBox.tsx | 298 +++++++++++------- .../order/mobile/ConfirmOrderForm.tsx | 3 +- src/components/order/mobile/FormFooter.tsx | 31 -- src/components/order/mobile/OrderList.tsx | 15 +- src/components/order/mobile/OrderListForm.tsx | 17 +- .../order/mobile/UploadDocumentForm.tsx | 4 +- src/components/order/mobile/index.ts | 1 - src/constants/home.ts | 9 +- src/pages/HomePage.tsx | 10 +- src/states/order/orderPrint.ts | 4 +- src/types/order/orderPrint.d.ts | 4 +- 14 files changed, 258 insertions(+), 179 deletions(-) create mode 100644 src/components/order/common/FormFooter.tsx delete mode 100644 src/components/order/mobile/FormFooter.tsx diff --git a/src/components/home/Orders.tsx b/src/components/home/Orders.tsx index a5dc2d0..0a1b20f 100644 --- a/src/components/home/Orders.tsx +++ b/src/components/home/Orders.tsx @@ -3,7 +3,7 @@ import { Card, CardBody } from '@material-tailwind/react'; import { ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; import { MapPinIcon } from '@heroicons/react/24/solid'; import coin from '@assets/coin.png'; -import { ORDER_STATUS } from '@constants'; +import { ORDER_STATUS_COLOR } from '@constants'; export const Orders: Component<{ orders: OrderData[] }> = ({ orders }) => { const sliderRef = useRef(null); @@ -36,7 +36,7 @@ export const Orders: Component<{ orders: OrderData[] }> = ({ orders }) => {
{order.id} - + {order.status}
diff --git a/src/components/order/common/FormFooter.tsx b/src/components/order/common/FormFooter.tsx new file mode 100644 index 0000000..242c015 --- /dev/null +++ b/src/components/order/common/FormFooter.tsx @@ -0,0 +1,36 @@ +import { ReactNode } from 'react'; +import coin from '@assets/coin.png'; +import { useUserInfoStore } from '@states/home'; + +export const FormFooter: Component<{ children: ReactNode; totalCost: number }> = ({ + children, + totalCost +}) => { + const { userInfoData } = useUserInfoStore(); + + return ( +
+
+
+

Balance:

+
+
+ Ballance Coin +
+ {userInfoData.coins} +
+
+
+

Total Cost

+
+
+ Total Cost +
+ {totalCost} +
+
+
+ {children} +
+ ); +}; diff --git a/src/components/order/common/index.ts b/src/components/order/common/index.ts index 97fe229..fea580d 100644 --- a/src/components/order/common/index.ts +++ b/src/components/order/common/index.ts @@ -2,4 +2,5 @@ * @file Automatically generated by barrelsby. */ +export * from './FormFooter'; export * from './LayoutSide'; diff --git a/src/components/order/desktop/UploadAndPreviewDocBox.tsx b/src/components/order/desktop/UploadAndPreviewDocBox.tsx index 7d1b7f4..8eb64ee 100644 --- a/src/components/order/desktop/UploadAndPreviewDocBox.tsx +++ b/src/components/order/desktop/UploadAndPreviewDocBox.tsx @@ -1,24 +1,54 @@ -import { useState } from 'react'; +import { useMemo, useState } from 'react'; +import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer'; import { + Button, Dialog, DialogBody, + DialogHeader, + IconButton, Input, Option, Radio, - Select, - Typography + Select } from '@material-tailwind/react'; -import { ExclamationCircleIcon, MinusIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline'; +import { MinusIcon, PlusIcon, TrashIcon, XMarkIcon } from '@heroicons/react/24/outline'; +import { ExclamationCircleIcon } from '@heroicons/react/24/solid'; import coinImage from '@assets/coin.png'; +import { useLayoutSide, FormFooter } from '@components/order/common'; +import { LAYOUT_SIDE, ORDER_STATUS } from '@constants'; import { useFileStore } from '@states/home'; +import { useOrderPrintStore } from '@states/order'; import { formatFileSize } from '@utils'; export function useUploadAndPreviewDocBox() { - const { fileTarget } = useFileStore(); const [openDialog, setOpenDialog] = useState(false); + const { fileTarget } = useFileStore(); + + const PreviewDocument = () => + useMemo(() => { + if (fileTarget.url) { + return ( + + ); + } else return null; + }, []); const UploadAndPreviewDocBox = () => { + const COINS_PER_DOC = 200; + const [numOfCopy, setNumOfCopy] = useState(1); + const [selectedLayout, setSelectedLayout] = useState(LAYOUT_SIDE.portrait); + const { openLayoutSide, LayoutSide } = useLayoutSide(); + const { totalCost, setTotalCost, setOrderPrintList } = useOrderPrintStore(); const handleOpenDialog = () => setOpenDialog(!openDialog); const handleDecrease = () => { @@ -29,132 +59,166 @@ export function useUploadAndPreviewDocBox() { const handleIncrease = () => { setNumOfCopy(numOfCopy + 1); }; + const handleLayoutChange = (e: React.ChangeEvent) => { + setSelectedLayout(e.target.value); + }; + const handleSaveOrderPrintList = () => { + setOrderPrintList({ + status: ORDER_STATUS.ready, + location: 'BK-B6', + fileName: fileTarget.name, + coins: COINS_PER_DOC * numOfCopy, + size: fileTarget.size, + number: numOfCopy, + pageNumber: 20, + paid: 'Not paid' + }); + setTotalCost(totalCost + COINS_PER_DOC * numOfCopy); + }; return ( - -
-
-
- Upload document -

- {fileTarget.name} - {`(${formatFileSize(fileTarget.size)})`} -

-

- - 200 x {numOfCopy} copies = - - {200 * numOfCopy} -

-
-
-
- - - - {numOfCopy > 0 && {numOfCopy}} - - - + + setOpenDialog(false)} tabIndex={-1}> + + + + +
+
+
+
+ Upload document +

+ {fileTarget.name} + {`(${formatFileSize(fileTarget.size)})`} +

+

+ + + {COINS_PER_DOC} x {numOfCopy} copies ={' '} + + + {COINS_PER_DOC * numOfCopy} +

- -
-
-
-
- Layout -
- {/* - */} +
+
+ + + + {numOfCopy > 0 && {numOfCopy}} + + + +
+
-
- Pages -
- - - - } - crossOrigin='' - /> +
+
+ Layout +
+ + +
-
-
- Pages per sheet - -
-
- Page Side -
- -
- {/* + Pages +
+ + + + } crossOrigin='' - defaultChecked - label={ - selectedLayout === 'Portrait' ? ( - - ) : ( - - ) - } - /> */} - '' - - {/* */} +
+
+
+ Pages per sheet + +
+
+ Page Side +
+ +
+ + + + + + + ) : ( + + ) + } + /> + + +
+ + +
-
B
+
{}
 ); diff --git a/src/components/order/mobile/ConfirmOrderForm.tsx b/src/components/order/mobile/ConfirmOrderForm.tsx index b80a18c..35e0e86 100644 --- a/src/components/order/mobile/ConfirmOrderForm.tsx +++ b/src/components/order/mobile/ConfirmOrderForm.tsx @@ -11,7 +11,8 @@ import { } from '@heroicons/react/24/solid'; import { Typography, Select, Option, Alert, Button } from '@material-tailwind/react'; import { useUserInfoStore } from '@states/home'; -import { ConfirmOrderItem, FormFooter } from '@components/order/mobile'; +import { FormFooter } from '@components/order/common'; +import { ConfirmOrderItem } from '@components/order/mobile'; import coin from '@assets/coin.png'; // Tan's third-task in here. diff --git a/src/components/order/mobile/FormFooter.tsx b/src/components/order/mobile/FormFooter.tsx deleted file mode 100644 index 55cfcf7..0000000 --- a/src/components/order/mobile/FormFooter.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import coin from '@assets/coin.png'; -// import { ILayout } from '@interfaces'; -import { useUserInfoStore } from '@states/home'; -import { ReactNode } from 'react'; -export const FormFooter: Component<{ children: ReactNode; totalCost: number }> = ({ - children, - totalCost -}) => { - const { userInfoData } = useUserInfoStore(); - return ( -
-
-
-
Balance:
-
- - {userInfoData.coins} -
-
-
-
Total Cost
-
- - {totalCost} -
-
-
- {children} -
- ); -}; diff --git a/src/components/order/mobile/OrderList.tsx b/src/components/order/mobile/OrderList.tsx index 0b34476..723d16d 100644 --- a/src/components/order/mobile/OrderList.tsx +++ b/src/components/order/mobile/OrderList.tsx @@ -1,6 +1,6 @@ import { OrderListItem } from './OrderListItem'; import { useEffect, useState } from 'react'; -import { useOrderPrintStore } from '@states/order'; +// import { useOrderPrintStore } from '@states/order'; export const OrderList: Component<{ orders: OrderData[]; updateTotalCost: (newTotalCost: number) => void; @@ -8,7 +8,7 @@ export const OrderList: Component<{ const [currentNumbers, setCurrentNumbers] = useState( orders.map((order) => order.number) ); - const { orderPrintList, setOrderPrintList } = useOrderPrintStore(); + // const { orderPrintList, setOrderPrintList } = useOrderPrintStore(); const updateCurrentNumber = (newNumber: number, index: number) => { setCurrentNumbers((prevNumbers) => { const updatedNumbers = [...prevNumbers]; @@ -23,10 +23,10 @@ export const OrderList: Component<{ ); updateTotalCost(totalCost); }, [orders, updateTotalCost, currentNumbers]); - const handleRemove = (id: string) => { - const newOrderPrintList = orderPrintList.filter((orderPrintItem) => orderPrintItem.id !== id); - setOrderPrintList(newOrderPrintList); - }; + // const handleRemove = (id: string) => { + // const newOrderPrintList = orderPrintList.filter((orderPrintItem) => orderPrintItem.id !== id); + // setOrderPrintList(newOrderPrintList); + // }; return (
{orders.map((order, index) => ( @@ -38,7 +38,8 @@ export const OrderList: Component<{ coins={order.coins} number={currentNumbers[index]} updateCurrentNumber={(newNumber) => updateCurrentNumber(newNumber, index)} - handleRemove={() => handleRemove(order.id)} + //handleRemove={() => handleRemove(order.id)} + handleRemove={() => null} />
))} diff --git a/src/components/order/mobile/OrderListForm.tsx b/src/components/order/mobile/OrderListForm.tsx index d2f2c9c..e582e76 100644 --- a/src/components/order/mobile/OrderListForm.tsx +++ b/src/components/order/mobile/OrderListForm.tsx @@ -9,16 +9,17 @@ import { import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order'; import { ChevronLeftIcon } from '@heroicons/react/24/solid'; import { useOrderStore } from '@states/home'; -import { OrderList, FormFooter, FileBox } from '@components/order/mobile'; +import { FormFooter } from '@components/order/common'; +import { /*OrderList,*/ FileBox } from '@components/order/mobile'; import { useState } from 'react'; // Tan's second-task in here. export function OrderListForm() { const [totalCost, setTotalCost] = useState(0); - const { orderPrintList, setOrderPrintList /*setTotal*/ } = useOrderPrintStore(); - const handleTotalCostChange = (newTotalCost: number) => { - setTotalCost(newTotalCost); // Cập nhật state với giá trị từ OrderListItem - }; + const { orderPrintList /*setOrderPrintList*/ /*setTotal*/ } = useOrderPrintStore(); + // const handleTotalCostChange = (newTotalCost: number) => { + // setTotalCost(newTotalCost); // Cập nhật state với giá trị từ OrderListItem + // }; const [openDialogBackToHome, setOpenDiaLogBackToHome] = useState(false); const handleOpenDialogBackToHome = () => { setOpenDiaLogBackToHome(!openDialogBackToHome); @@ -26,7 +27,7 @@ export function OrderListForm() { const { setMobileOrderStep } = useOrderWorkflowStore(); const { totalSize } = useOrderStore(); const handleBackToHome = () => { - setOrderPrintList([]); + // setOrderPrintList([]); setMobileOrderStep(0); window.location.reload(); }; @@ -84,7 +85,7 @@ export function OrderListForm() {
- + {/* */} ) : (
@@ -96,7 +97,7 @@ export function OrderListForm() { color={orderPrintList.length > 0 ? 'blue' : 'gray'} className='rounded-none w-[30%]' onClick={() => { - setOrderPrintList(orderPrintList); + // setOrderPrintList(orderPrintList[0]); setTotalCost(totalCost); setMobileOrderStep(3); }} diff --git a/src/components/order/mobile/UploadDocumentForm.tsx b/src/components/order/mobile/UploadDocumentForm.tsx index f2d335a..d894813 100644 --- a/src/components/order/mobile/UploadDocumentForm.tsx +++ b/src/components/order/mobile/UploadDocumentForm.tsx @@ -12,8 +12,8 @@ import { IconButton } from '@material-tailwind/react'; import { XMarkIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'; -import { useLayoutSide } from '@components/order/common'; -import { UploadDocumentItem, FormFooter } from '@components/order/mobile'; +import { useLayoutSide, FormFooter } from '@components/order/common'; +import { UploadDocumentItem } from '@components/order/mobile'; import { useOrderStore } from '@states/home'; import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order'; diff --git a/src/components/order/mobile/index.ts b/src/components/order/mobile/index.ts index 5e0fda4..86fb27e 100644 --- a/src/components/order/mobile/index.ts +++ b/src/components/order/mobile/index.ts @@ -5,7 +5,6 @@ export * from './ConfirmOrderForm'; export * from './ConfirmOrderItem'; export * from './FileBox'; -export * from './FormFooter'; export * from './OrderList'; export * from './OrderListForm'; export * from './OrderListItem'; diff --git a/src/constants/home.ts b/src/constants/home.ts index 7e4052a..4144cd4 100644 --- a/src/constants/home.ts +++ b/src/constants/home.ts @@ -1,4 +1,11 @@ -export const ORDER_STATUS = { +export const ORDER_STATUS: { [key: string]: OrderStatus } = { + progressing: 'progressing', + ready: 'ready', + done: 'done', + canceled: 'canceled' +}; + +export const ORDER_STATUS_COLOR = { progressing: 'amber', ready: 'green', done: 'indigo', diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 79a85bc..767e08d 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -2,12 +2,12 @@ import { useEffect } from 'react'; import { ArrowRightIcon, PrinterIcon } from '@heroicons/react/24/outline'; import { Orders, Slides, useChooseFileBox } from '@components/home'; import { useOrderStore, useSlideStore, useUserInfoStore } from '@states/home'; -import { useOrderExtraStore, useOrderPrintStore, useOrderWorkflowStore } from '@states/order'; +import { useOrderExtraStore, /*useOrderPrintStore,*/ useOrderWorkflowStore } from '@states/order'; export function HomePage() { const { orderData, getOrderData } = useOrderStore(); const { slideData, getSlideData } = useSlideStore(); - const { setOrderPrintList } = useOrderPrintStore(); + // const { setOrderPrintList } = useOrderPrintStore(); const { getUserInfoData } = useUserInfoStore(); const { getOrderExtraData } = useOrderExtraStore(); @@ -21,9 +21,9 @@ export function HomePage() { getOrderExtraData(); }, [getOrderData, getSlideData, getUserInfoData, getOrderExtraData]); - useEffect(() => { - setOrderPrintList(orderData); - }, [orderData, setOrderPrintList]); + // useEffect(() => { + // setOrderPrintList(orderData); + // }, [orderData, setOrderPrintList]); if (desktopOrderStep === 0) { return ( diff --git a/src/states/order/orderPrint.ts b/src/states/order/orderPrint.ts index 94c06d6..22df7fd 100644 --- a/src/states/order/orderPrint.ts +++ b/src/states/order/orderPrint.ts @@ -3,8 +3,8 @@ import { create } from 'zustand'; export const useOrderPrintStore = create()((set) => ({ totalCost: 0, orderPrintList: [], - setOrderPrintList: (orderPrintList) => { - set({ orderPrintList: orderPrintList }); + setOrderPrintList: (payload) => { + set((state) => ({ orderPrintList: [...state.orderPrintList, payload] })); }, setTotalCost: (totalCost) => { set({ totalCost: totalCost }); diff --git a/src/types/order/orderPrint.d.ts b/src/types/order/orderPrint.d.ts index ea3207d..c6ab737 100644 --- a/src/types/order/orderPrint.d.ts +++ b/src/types/order/orderPrint.d.ts @@ -1,6 +1,6 @@ type OrderPrintStore = { totalCost: number; - orderPrintList: OrderData[]; - setOrderPrintList: (orderPrintList: OrderData[]) => void; + orderPrintList: Omit[]; + setOrderPrintList: (payload: Omit) => void; setTotalCost: (totalCost: number) => void; };