From 1f946333684468056794c65e83c7e43bbf2490e8 Mon Sep 17 00:00:00 2001 From: kris-liu-smile Date: Thu, 2 Mar 2023 15:38:54 +0800 Subject: [PATCH] feat: upload component --- apps/storefront/src/App.tsx | 1 - .../src/components/B3HoverButton.tsx | 2 +- .../src/components/B3MasquradeGobalTip.tsx | 1 + apps/storefront/src/components/index.ts | 4 + .../src/components/upload/B3Upload.tsx | 209 ++++++++++++++++++ .../components/upload/B3UploadLoadding.tsx | 102 +++++++++ .../storefront/src/components/upload/utils.ts | 23 ++ .../storefront/src/pages/quote/QuoteDraft.tsx | 4 +- .../pages/quote/components/QuoteItemCard.tsx | 4 +- .../src/shared/global/context/config.ts | 2 +- apps/storefront/src/shared/routes/routes.ts | 2 + packages/hooks/useB3AppOpen.ts | 2 +- 12 files changed, 348 insertions(+), 8 deletions(-) create mode 100644 apps/storefront/src/components/upload/B3Upload.tsx create mode 100644 apps/storefront/src/components/upload/B3UploadLoadding.tsx create mode 100644 apps/storefront/src/components/upload/utils.ts diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx index 932ba18b..9013eea3 100644 --- a/apps/storefront/src/App.tsx +++ b/apps/storefront/src/App.tsx @@ -200,7 +200,6 @@ export default function App() { } } // background login enter judgment and refresh - console.log(!(customerId && !window.location.hash)) if (!href.includes('checkout') && !(customerId && !window.location.hash)) { gotoAllowedAppPage(+userInfo.role, userInfo.isAgenting, gotoPage) } diff --git a/apps/storefront/src/components/B3HoverButton.tsx b/apps/storefront/src/components/B3HoverButton.tsx index 3fecdcb4..62a925e0 100644 --- a/apps/storefront/src/components/B3HoverButton.tsx +++ b/apps/storefront/src/components/B3HoverButton.tsx @@ -79,7 +79,7 @@ export const B3HoverButton = (props: B3HoverButtonProps) => { height: '42px', }} onClick={() => { - B3SStorage.set('nextPath', '/') + // B3SStorage.set('nextPath', '/') setOpenPage({ isOpen: true, openUrl: '/quoteDraft', diff --git a/apps/storefront/src/components/B3MasquradeGobalTip.tsx b/apps/storefront/src/components/B3MasquradeGobalTip.tsx index bc6fdd1e..ddaa818d 100644 --- a/apps/storefront/src/components/B3MasquradeGobalTip.tsx +++ b/apps/storefront/src/components/B3MasquradeGobalTip.tsx @@ -123,6 +123,7 @@ export const B3MasquradeGobalTip = (props: B3MasquradeGobalTipProps) => { backgroundColor: '#ED6C02', borderRadius: '4px', height: '52px', + color: '#FFFFFF', ...sx, }} anchorOrigin={{ diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts index 52723720..fd96250a 100644 --- a/apps/storefront/src/components/index.ts +++ b/apps/storefront/src/components/index.ts @@ -72,3 +72,7 @@ export { export { CheckoutTip, } from './extraTip/CheckoutTip' + +export { + B3Upload, +} from './upload/B3Upload' diff --git a/apps/storefront/src/components/upload/B3Upload.tsx b/apps/storefront/src/components/upload/B3Upload.tsx new file mode 100644 index 00000000..794c8ad9 --- /dev/null +++ b/apps/storefront/src/components/upload/B3Upload.tsx @@ -0,0 +1,209 @@ +import { + Box, + Button, +} from '@mui/material' + +import Grid from '@mui/material/Unstable_Grid2' + +import { + useRef, + useState, +} from 'react' + +import { + DropzoneArea, +} from 'react-mui-dropzone' + +import styled from '@emotion/styled' + +import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile' +import { + B3Dialog, +} from '../B3Dialog' + +import { + B3UploadLoadding, +} from './B3UploadLoadding' + +import { + removeEmptyRow, + parseEmptyData, +} from './utils' + +const FileUploadContainer = styled(Box)(() => ({ + width: '100%', + border: '1px dashed #1976D2', + borderRadius: '5px', + position: 'relative', + '& .file-upload-area': { + height: '200px', + '& .MuiSvgIcon-root': { + display: 'none', + }, + }, +})) + +export const B3Upload = () => { + const uploadRef = useRef(null) + const [step, setStep] = useState('init') + + const handleChange = async (files: File[]) => { + // init loadding end + const file = files.length > 0 ? files[0] : null + + if (file) { + const reader = new FileReader() + + reader.addEventListener('load', async (b: any) => { + const csvdata = b.target.result + + if (csvdata) { + setStep('loadding') + const content = csvdata.split('\n') + const EmptyData = removeEmptyRow(content) + const parseData = parseEmptyData(EmptyData) + console.log(EmptyData, parseData) + + // DOTO: + await new Promise((r) => { + setTimeout(() => { + r('1') + }, 5000) + }) + setStep('end') + } + }) + + reader.readAsBinaryString(file) + } + } + + const openFile = () => { + if (uploadRef.current) uploadRef.current.children[1].click() + } + + const content = ( + + + + + + + + + Drag & drop file here + + + + + + File types: CSV, maximum size: 50MB. + + + Download sample + + + + + + + + + + ) + + return ( + + + + + { + step === 'init' && ( + + {content} + + + ) + } + + { + step === 'loadding' && + } + + { + step === 'end' && 123123 + } + + + ) +} diff --git a/apps/storefront/src/components/upload/B3UploadLoadding.tsx b/apps/storefront/src/components/upload/B3UploadLoadding.tsx new file mode 100644 index 00000000..1f561074 --- /dev/null +++ b/apps/storefront/src/components/upload/B3UploadLoadding.tsx @@ -0,0 +1,102 @@ +import { + useState, + useEffect, +} from 'react' + +import CircularProgress, { + CircularProgressProps, +} from '@mui/material/CircularProgress' +import Typography from '@mui/material/Typography' +import { + Box, +} from '@mui/material' + +function CircularProgressWithLabel( + props: CircularProgressProps & { value: number }, +) { + return ( + + + + + {`${Math.round(props.value)}%`} + + + + + ) +} + +interface B3UploadLoaddingProps { + step: string, +} + +const B3UploadLoadding = (props: B3UploadLoaddingProps) => { + const { + step, + } = props + const [progress, setProgress] = useState(0) + + useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => (prevProgress === 95 ? 95 : prevProgress + 1)) + if (step === 'end') { + setProgress(100) + clearInterval(timer) + } + }, 100) + return () => { + if (timer) clearInterval(timer) + } + }, []) + return ( + + + + Uploading file... + + + + ) +} + +export { + B3UploadLoadding, +} diff --git a/apps/storefront/src/components/upload/utils.ts b/apps/storefront/src/components/upload/utils.ts new file mode 100644 index 00000000..ffde73e7 --- /dev/null +++ b/apps/storefront/src/components/upload/utils.ts @@ -0,0 +1,23 @@ +export const removeEmptyRow = (arr: string[]) => { + const tmpArr = arr + if (tmpArr[tmpArr.length - 1] === '') { + tmpArr.pop() + } + tmpArr.shift() + + return tmpArr +} + +export const parseEmptyData = (arr: string[]) => { + if (arr.length) { + const tmpArr = arr.map((item: string) => { + const products = item.split(',') + return { + sku: products[0], + qty: products[1].replace(/[\r\n]/g, ''), + } + }) + return tmpArr + } + return [] +} diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx index f05e8ad3..9e2c02b4 100644 --- a/apps/storefront/src/pages/quote/QuoteDraft.tsx +++ b/apps/storefront/src/pages/quote/QuoteDraft.tsx @@ -222,6 +222,7 @@ const QuoteDraft = ({ } } else { B3LStorage.set('MyQuoteInfo', {}) + B3LStorage.set('b2bQuoteDraftList', []) } if (isB2BUser) { @@ -336,7 +337,8 @@ const QuoteDraft = ({ } = getDefaultCurrencyInfo() const getQuoteTableDetails = async (params: CustomFieldItems) => { - const quoteDraftAllList = B3LStorage.get('b2bQuoteDraftList') || [] + const quoteDraftUserId = B3LStorage.get('quoteDraftUserId') + const quoteDraftAllList = +B3UserId === +quoteDraftUserId ? B3LStorage.get('b2bQuoteDraftList') : [] const startIndex = +params.offset const endIndex = +params.first + startIndex diff --git a/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx b/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx index 8123dc21..1307fdd9 100644 --- a/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx +++ b/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx @@ -88,9 +88,7 @@ export const QuoteItemCard = (props: QuoteItemCardProps) => { ] return ( - + { cartQuoteEnabled, } = globalState + console.log(isB2BUser, role, isAgenting, storefrontConfig, productQuoteEnabled, cartQuoteEnabled) + return routes.filter((item: RouteItem) => { const { permissions = [], diff --git a/packages/hooks/useB3AppOpen.ts b/packages/hooks/useB3AppOpen.ts index ef746470..fa50809a 100644 --- a/packages/hooks/useB3AppOpen.ts +++ b/packages/hooks/useB3AppOpen.ts @@ -55,7 +55,7 @@ export const useB3AppOpen = (initOpenState: OpenPageState) => { e.stopPropagation() const href = (e.target as any)?.href || '' - const gotoUrl = registerArr.includes(e.target) ? getCurrentLoginUrl(href) : '/login' + const gotoUrl = registerArr.includes(e.target) ? getCurrentLoginUrl(href) : '/orders' setOpenPage({ isOpen: true,