diff --git a/src/App.tsx b/src/App.tsx index 1320586..4fec84d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,8 +2,8 @@ import { useEffect } from 'react'; import { NavigateFunction, useNavigate, useLocation } from 'react-router-dom'; import { AppSkeleton } from '@components/common'; import { MAIN_MENU, SUB_MENU } from '@constants'; -import { AppLayout, AuthLayout } from '@layouts'; -import { AuthPage, HomePage } from '@pages'; +import { AppLayout /*AuthLayout*/ } from '@layouts'; +import { /*AuthPage,*/ HomePage } from '@pages'; import { useUserStore } from '@states/common'; export default function App() { @@ -26,13 +26,13 @@ export default function App() { return ; } - if (userStatus === 'REJECT') { - return ( - - - - ); - } + // if (userStatus === 'REJECT') { + // return ( + // + // + // + // ); + // } return ( - {} {} diff --git a/src/components/order/OrderWorkflowBox.tsx b/src/components/order/OrderWorkflowBox.tsx index 12d7b9d..6130eeb 100644 --- a/src/components/order/OrderWorkflowBox.tsx +++ b/src/components/order/OrderWorkflowBox.tsx @@ -5,7 +5,8 @@ import { OrderListForm, ConfirmOrderForm, TopupWalletForm, - OrderSuccessForm + OrderSuccessForm, + PreviewDocument } from '@components/order'; import { HomePage } from '@pages'; import { useOrderWorkflowStore } from '@states/order'; @@ -27,6 +28,8 @@ export function useOrderWorkflowBox() { return ; } else if (orderStep === 5) { return ; + } else if (orderStep === 6) { + return ; } }; diff --git a/src/components/order/PreviewDocument.tsx b/src/components/order/PreviewDocument.tsx new file mode 100644 index 0000000..4d7d785 --- /dev/null +++ b/src/components/order/PreviewDocument.tsx @@ -0,0 +1,42 @@ +import DocViewer, { DocViewerRenderers, IHeaderOverride } from '@cyntler/react-doc-viewer'; +import { XMarkIcon } from '@heroicons/react/24/solid'; +import { useFileStore } from '@states/home'; + +export function PreviewDocument() { + const { fileTarget } = useFileStore(); + + const MyHeader: IHeaderOverride = (state) => { + console.log(state.currentDocument?.fileType); + return ( +
+ Preview document + +
+ ); + }; + + return ( + <> +
+ {fileTarget && ( + + )} +
+ + ); +} diff --git a/src/components/order/UploadDocumentForm.tsx b/src/components/order/UploadDocumentForm.tsx index 8da0d9c..caff9a7 100644 --- a/src/components/order/UploadDocumentForm.tsx +++ b/src/components/order/UploadDocumentForm.tsx @@ -1,5 +1,4 @@ -// import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer'; -// import { useFileStore } from '@states/home'; +import React, { useState } from 'react'; import { Button, Radio, @@ -12,17 +11,16 @@ import { DialogBody, IconButton } from '@material-tailwind/react'; -import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order'; import { XMarkIcon, ExclamationCircleIcon } from '@heroicons/react/24/solid'; -import React, { useState } from 'react'; import { UploadDocumentItem, FormFooter, DialogForm } from '@components/order'; import { useOrderStore } from '@states/home'; +import { useOrderWorkflowStore, useOrderPrintStore } from '@states/order'; // Tan's first-task in here. export function UploadDocumentForm() { const [open, setOpen] = useState(false); const [openXDialog, setOpenXDialog] = useState(false); - const { setOrderList, orderPrintList } = useOrderPrintStore(); + //const { orderPrintList, setOrderPrintList } = useOrderPrintStore(); const handleOpen = () => { setOpen(!open); }; @@ -31,39 +29,30 @@ export function UploadDocumentForm() { }; const { orderData } = useOrderStore(); const { setOrderStep } = useOrderWorkflowStore(); - //const { fileTarget } = useFileStore(); - // return ( - // <> - //
UploadDocumentForm
- // {fileTarget && ( - // - // )} - // - // const { totalCost } = useOrderPrintStore(); const [selectedLayout, setSelectedLayout] = useState('Portrait'); const handleLayoutChange = (e: React.ChangeEvent) => { setSelectedLayout(e.target.value); }; const handleSave = () => { - const newOrderPrintItem = { - id: '1278-cfdb', - status: 'ready', - location: 'aaa', - fileName: 'showMaker.txt', - coins: 50, - size: 50, - number: 50, - pageNumber: 20, - paid: 'Not paid' - }; - const newOrderPrintList = [...orderPrintList, newOrderPrintItem]; - setOrderList(newOrderPrintList); + // const newOrderPrintItem = { + // id: '1278-cfdb', + // status: 'ready', + // location: 'aaa', + // fileName: 'showMaker.txt', + // coins: 50, + // size: 50, + // number: 50, + // pageNumber: 20, + // paid: 'Not paid' + // }; + //const newOrderPrintList = [...orderPrintList, newOrderPrintItem]; + //setOrderPrintList(newOrderPrintList); setOrderStep(2); }; return ( -
+ <>
Upload document @@ -97,13 +86,7 @@ export function UploadDocumentForm() {
{/* {} */} - +
Layout @@ -202,6 +185,6 @@ export function UploadDocumentForm() { Save -
+ ); } diff --git a/src/components/order/UploadDocumentItem.tsx b/src/components/order/UploadDocumentItem.tsx index 1286bad..1e104ea 100644 --- a/src/components/order/UploadDocumentItem.tsx +++ b/src/components/order/UploadDocumentItem.tsx @@ -1,31 +1,34 @@ -import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid'; -import coin from '../../assets/coin.png'; import { useState } from 'react'; +import { EyeIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/solid'; +import coin from '@assets/coin.png'; +import { useOrderWorkflowStore } from '@states/order'; export const UploadDocumentItem: Component<{ - id: string; fileName: string; size: number; coins: number; - number: number; -}> = ({ id, fileName, size, coins, number }) => { - const [currentNumber, setCurrentNumber] = useState(number); + numberItem: number; +}> = ({ fileName, size, coins, numberItem }) => { + const { setOrderStep } = useOrderWorkflowStore(); + const [currentNumber, setCurrentNumber] = useState(numberItem); + const handleDecrease = () => { if (currentNumber > 1) { - id = id; setCurrentNumber(currentNumber - 1); - // updateCurrentNumber(currentNumber - 1); } }; const handleIncrease = () => { setCurrentNumber(currentNumber + 1); - // updateCurrentNumber(currentNumber + 1); }; + return (
-
- -
Preview
+
setOrderStep(6)} + > + + Preview
diff --git a/src/components/order/index.ts b/src/components/order/index.ts index 2e90894..e23f7df 100644 --- a/src/components/order/index.ts +++ b/src/components/order/index.ts @@ -12,6 +12,7 @@ export * from './OrderListForm'; export * from './OrderListItem'; export * from './OrderSuccessForm'; export * from './OrderWorkflowBox'; +export * from './PreviewDocument'; export * from './TopupWalletForm'; export * from './UploadDocumentForm'; export * from './UploadDocumentItem'; diff --git a/src/index.css b/src/index.css index 672a9f0..1172073 100644 --- a/src/index.css +++ b/src/index.css @@ -29,3 +29,7 @@ } .grayscale { filter: grayscale(100%); } + +#react-doc-viewer #pdf-controls { + z-index: 5; +} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 75bd6e5..993bd20 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -7,7 +7,7 @@ import { useOrderExtraStore, useOrderPrintStore } from '@states/order'; export function HomePage() { const { orderData, getOrderData } = useOrderStore(); const { slideData, getSlideData } = useSlideStore(); - const { setOrderList } = useOrderPrintStore(); + const { setOrderPrintList } = useOrderPrintStore(); const { getUserInfoData } = useUserInfoStore(); const { getOrderExtraData } = useOrderExtraStore(); @@ -21,8 +21,8 @@ export function HomePage() { }, [getOrderData, getSlideData, getUserInfoData, getOrderExtraData]); useEffect(() => { - setOrderList(orderData); - }, []); + setOrderPrintList(orderData); + }, [orderData, setOrderPrintList]); return ( <> diff --git a/src/states/order/orderPrint.ts b/src/states/order/orderPrint.ts index be40a6e..94c06d6 100644 --- a/src/states/order/orderPrint.ts +++ b/src/states/order/orderPrint.ts @@ -1,13 +1,12 @@ import { create } from 'zustand'; -// import { useOrderStore } from "@states/home"; export const useOrderPrintStore = create()((set) => ({ totalCost: 0, orderPrintList: [], - setOrderList: (orderPrintList) => { + setOrderPrintList: (orderPrintList) => { set({ orderPrintList: orderPrintList }); }, - setCost: (totalCost) => { + setTotalCost: (totalCost) => { set({ totalCost: totalCost }); } })); diff --git a/src/types/order/orderPrint.d.ts b/src/types/order/orderPrint.d.ts index 31f65a6..ea3207d 100644 --- a/src/types/order/orderPrint.d.ts +++ b/src/types/order/orderPrint.d.ts @@ -1,18 +1,6 @@ -type OrderPrintData = { - id: string; - status: string; - location: string; - number: number; - fileName: string; - pageNumber: number; - coins: number; - paid: string; - size: number; -}; - type OrderPrintStore = { totalCost: number; - orderPrintList: OrderPrintData[]; - setOrderList: (orderPrintList: OrderPrintData[]) => void; - setCost: (totalCost: number) => void; + orderPrintList: OrderData[]; + setOrderPrintList: (orderPrintList: OrderData[]) => void; + setTotalCost: (totalCost: number) => void; };