diff --git a/src/components/PutAwayScan/PutAwayModal.tsx b/src/components/PutAwayScan/PutAwayModal.tsx index 7ad89cc..331fa2b 100644 --- a/src/components/PutAwayScan/PutAwayModal.tsx +++ b/src/components/PutAwayScan/PutAwayModal.tsx @@ -36,6 +36,7 @@ import { QrCodeScanner } from "../QrCodeScannerProvider/QrCodeScannerProvider"; import { msg } from "../Swal/CustomAlerts"; import { PutAwayRecord } from "."; import FgStockInForm from "../StockIn/FgStockInForm"; +import Swal from "sweetalert2"; interface Props extends Omit { @@ -153,18 +154,22 @@ const PutAwayModal: React.FC = ({ open, onClose, warehouse, stockInLineId scanner.startScan(); console.log("%c Scanning started ", "color:cyan"); }; - useEffect(() => { if (warehouseId > 0) { // Scanned Warehouse if (scanner.isScanning) { setIsOpenScanner(false); setVerified(true); - msg("貨倉掃瞄成功!") + msg("貨倉掃瞄成功!"); scanner.resetScan(); console.log("%c Scanner reset", "color:cyan"); } } }, [warehouseId]) + + const warehouseDisplay = useMemo(() => { + const wh = warehouse.find((w) => w.id == warehouseId) ?? warehouse.find((w) => w.id == 1); + return <>{wh?.name}
[{wh?.code}]; + }, [warehouse, warehouseId, verified]); // useEffect(() => { // Restart scanner for changing warehouse // if (warehouseId > 0) { @@ -379,20 +384,21 @@ const PutAwayModal: React.FC = ({ open, onClose, warehouse, stockInLineId - {warehouseId > 0 ? `${warehouse.find((w) => w.id == warehouseId)?.name}` - : `${warehouse.find((w) => w.id == 1)?.name} (建議)`} + {warehouseDisplay} {verified ? "" : `(建議)`} - + = ({ open, onClose, warehouse, stockInLineId borderColor: "black", }, "& .MuiInputLabel-root": { - fontSize: "30px", + fontSize: 30, top: "-5px", color: "black", }, diff --git a/src/components/PutAwayScan/PutAwayScan.tsx b/src/components/PutAwayScan/PutAwayScan.tsx index 4fda256..1e26d42 100644 --- a/src/components/PutAwayScan/PutAwayScan.tsx +++ b/src/components/PutAwayScan/PutAwayScan.tsx @@ -30,7 +30,7 @@ type Props = { warehouse : WarehouseResult[]; }; -type ScanStatusType = "pending" | "rescan"; +type ScanStatusType = "pending" | "scanning" | "retry"; const PutAwayScan: React.FC = ({ warehouse }) => { const { t } = useTranslation("putAway"); @@ -54,7 +54,7 @@ const PutAwayScan: React.FC = ({ warehouse }) => { const resetScan = (error : string = "") => { if (error !== "") { console.log("%c Scan failed, error: ", "color:red", error); - setScanDisplay("rescan"); + setScanDisplay("retry"); } else { console.log("%c Scan reset", "color:red"); } @@ -111,6 +111,31 @@ const PutAwayScan: React.FC = ({ warehouse }) => { } }, [scanner.result]); + // Get Scanner State + useEffect(() => { + if (scanner.state) { + // + } + }, [scanner.state]); + + const displayText = useMemo(() => { + switch (scanner.state) { + case "pending": + return t("Pending scan"); + case "scanning": + return t("Scanning"); + case "retry": + return t("Rescan"); + default: + return t("Pending scan"); + } + // if (scanDisplay == "pending") { + // return t("Pending scan"); + // } else if (scanDisplay == "retry") { + // return t("Rescan"); + // } + }, [scanner.state]); + return (<> = ({ warehouse }) => { textAlign: 'center',}} > - {scanDisplay == "pending" ? t("Pending scan") : t("Rescan")} + {displayText} diff --git a/src/components/QrCodeScannerProvider/QrCodeScannerProvider.tsx b/src/components/QrCodeScannerProvider/QrCodeScannerProvider.tsx index 270010a..b3aed36 100644 --- a/src/components/QrCodeScannerProvider/QrCodeScannerProvider.tsx +++ b/src/components/QrCodeScannerProvider/QrCodeScannerProvider.tsx @@ -16,6 +16,8 @@ export interface QrCodeScanner { stopScan: () => void; resetScan: () => void; result: QrCodeInfo | undefined; + state: "scanning" | "pending" | "retry"; + error: string | undefined; } interface QrCodeScannerProviderProps { @@ -35,6 +37,8 @@ const QrCodeScannerProvider: React.FC = ({ const [leftCurlyBraceCount, setLeftCurlyBraceCount] = useState(0); const [rightCurlyBraceCount, setRightCurlyBraceCount] = useState(0); const [scanResult, setScanResult] = useState() + const [scanState, setScanState] = useState<"scanning" | "pending" | "retry">("pending"); + const [scanError, setScanError] = useState() // TODO return scan error message const resetScannerInput = useCallback(() => { setKeys(() => []); @@ -51,6 +55,8 @@ const QrCodeScannerProvider: React.FC = ({ if (error.length > 0) { console.log("%c Error:", "color:red", error); + console.log("%c key:", "color:red", keys); + setScanState("retry"); } }, []); @@ -127,10 +133,15 @@ const QrCodeScannerProvider: React.FC = ({ // Update Qr Code Scanner Values useEffect(() => { if (rightCurlyBraceCount > leftCurlyBraceCount || leftCurlyBraceCount > 1) { // Prevent multiple scan + setScanState("retry"); + setScanError("Too many scans at once"); resetQrCodeScanner("Too many scans at once"); } else { if (leftCurlyBraceCount == 1 && keys.length == 1) - { console.log("%c Scan detected, waiting for inputs...", "color:cyan"); } + { + setScanState("scanning"); + console.log("%c Scan detected, waiting for inputs...", "color:cyan"); + } if ( leftCurlyBraceCount !== 0 && rightCurlyBraceCount !== 0 && @@ -138,6 +149,7 @@ const QrCodeScannerProvider: React.FC = ({ ) { const startBrace = keys.indexOf("{"); const endBrace = keys.lastIndexOf("}"); + setScanState("pending"); setQrCodeScannerValues((value) => [ ...value, keys.join("").substring(startBrace, endBrace + 1), @@ -201,6 +213,8 @@ const QrCodeScannerProvider: React.FC = ({ stopScan: endQrCodeScanner, resetScan: resetQrCodeScanner, result: scanResult, + state: scanState, + error: scanError, }} > {children} diff --git a/src/components/StockIn/FgStockInForm.tsx b/src/components/StockIn/FgStockInForm.tsx index 467f3e6..af46970 100644 --- a/src/components/StockIn/FgStockInForm.tsx +++ b/src/components/StockIn/FgStockInForm.tsx @@ -67,7 +67,7 @@ const textfieldSx = { transform: "translate(14px, 1.2rem) scale(1)", "&.MuiInputLabel-shrink": { fontSize: 24, - transform: "translate(14px, -9px) scale(1)", + transform: "translate(14px, -0.5rem) scale(1)", }, // [theme.breakpoints.down("sm")]: { // fontSize: "1rem", diff --git a/src/components/StockIn/StockInForm.tsx b/src/components/StockIn/StockInForm.tsx index e48c0d9..8b88692 100644 --- a/src/components/StockIn/StockInForm.tsx +++ b/src/components/StockIn/StockInForm.tsx @@ -60,7 +60,7 @@ const textfieldSx = { transform: "translate(14px, 1.2rem) scale(1)", "&.MuiInputLabel-shrink": { fontSize: 24, - transform: "translate(14px, -9px) scale(1)", + transform: "translate(14px, -0.5rem) scale(1)", }, // [theme.breakpoints.down("sm")]: { // fontSize: "1rem", diff --git a/src/i18n/zh/putAway.json b/src/i18n/zh/putAway.json index 90eb045..50abb3e 100644 --- a/src/i18n/zh/putAway.json +++ b/src/i18n/zh/putAway.json @@ -20,5 +20,6 @@ "lotNo": "貨品批號", "poCode": "採購訂單編號", "itemCode": "貨品編號", - "uom": "單位" + "uom": "單位", + "Scanning": "掃瞄中,請稍後..." }