jason
/
FPSMS-frontend
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Tablet UI FIX

master
kelvin.yau 2 weeks ago
parent
cc3aa86c0a
commit
c090d62fb5
1 changed files with 249 additions and 185 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +249
    -185
      src/components/PutAwayScan/PutAwayModal.tsx

+ 249
- 185
src/components/PutAwayScan/PutAwayModal.tsx View File

@@ -52,11 +52,15 @@ const style = {
left: "50%",
transform: "translate(-50%, -50%)",
bgcolor: "background.paper",
pt: 5,
px: 5,
pb: 5,
// width: "auto",
width: { xs: "90%", sm: "90%", md: "90%" },
pt: { xs: 0.5, sm: 1, md: 1.5 },
px: { xs: 1, sm: 1.5, md: 2 },
pb: { xs: 0.5, sm: 1, md: 1.5 },
width: { xs: "95%", sm: "85%", md: "75%", lg: "70%" },
maxWidth: "900px",
maxHeight: { xs: "98vh", sm: "95vh", md: "90vh" },
overflow: "hidden",
display: "flex",
flexDirection: "column",
};

const scannerStyle = {
@@ -65,11 +69,11 @@ const scannerStyle = {
left: "50%",
transform: "translate(-50%, -50%)",
bgcolor: "background.paper",
pt: 5,
px: 5,
pb: 10,
// width: "auto",
width: { xs: "60%", sm: "60%", md: "60%" },
pt: { xs: 2, sm: 3, md: 4 },
px: { xs: 2, sm: 3, md: 4 },
pb: { xs: 6, sm: 7, md: 8 },
width: { xs: "85%", sm: "70%", md: "60%" },
maxWidth: "600px",
};

const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId, warehouseId, scanner, addPutAwayHistory }) => {
@@ -334,191 +338,249 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
component="form"
onSubmit={formProps.handleSubmit(onSubmit)}
>
<Grid container xs={12}>
<Grid item xs={12}>
{itemDetail != undefined ? (
<>
<Stack direction="column" justifyContent="flex-end" gap={1}>
<Typography variant="h4">
處理上架
</Typography>
<Grid item xs={12}>
{itemDetail.jobOrderId ? (
<FgStockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
) : (
<StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
)}
</Grid>
<Paper sx={{ mt: 2, padding: 2, width: "100%", backgroundColor: verified ? '#bceb19' : '#FCD34D' }}>
<Grid
container
spacing={2}
direction="row"
justifyContent="space-between"
alignItems="strecth"
sx={{ width: '100%' }}
>
<Grid item xs={5}>
<Box sx={{
mb: 2, p: 2, backgroundColor: verified ? '#bceb19' : '#FCD34D', borderRadius: 0,
display: 'flex', flexDirection: 'row', gap: 1, flexWrap: 'wrap' }}
>
<Grid container>
{verified? (
<>
<CheckCircle sx={{color:"green", fontSize: "35px", mr: 1}}/>
<Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
掃瞄完成
</Typography>
</>
) : (
<>
<ErrorOutline sx={{color:"red", fontSize: "35px", mr: 1}}/>
<Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
請掃瞄倉庫二維碼
</Typography>
</>
)
}
<QrCode sx={{fontSize: "35px"}}/>
</Grid>
<Grid container>
<Typography variant="h4" sx={{ fontWeight: 'bold', color: 'black' }} noWrap>
{warehouseDisplay} <span style={{fontSize: "45px", color: "black"}}>{verified ? "" : `(建議)`}</span>
</Typography>
</Grid>

</Box>
<Box sx={{ overflow: "hidden", flex: 1, display: "flex", flexDirection: "column" }}>
<Grid container xs={12}>
<Grid item xs={12}>
{itemDetail != undefined ? (
<>
<Stack direction="column" justifyContent="flex-end" gap={0.25} sx={{ mb: 0.5 }}>
<Typography variant="h4" sx={{ fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" }, mb: 0.25, lineHeight: 1.2 }}>
處理上架
</Typography>
<Box sx={{ "& .MuiFormControl-root": { mb: 0.5 }, "& .MuiTextField-root": { mb: 0.5 }, "& .MuiGrid-item": { mb: 0.25 } }}>
<Grid item xs={12}>
{itemDetail.jobOrderId ? (
<FgStockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
) : (
<StockInForm itemDetail={itemDetail} disabled={true} putawayMode={true}/>
)}
</Grid>
<Grid item xs={3}>
<Box sx={{ height: '100%', p: 2, textAlign: 'center', display: "flex",
flexDirection: "column", justifyContent: "center", }}>
<TextField
type="number"
label={t("putQty")}
fullWidth
sx={{
flex: 1,
"& .MuiInputBase-input": {
padding: "20px 14px 5px",
fontSize: "50px",
fontWeight: "bold",
},
"& .MuiInputBase-root": {
height: "100%",
borderColor: "black",
},
"& .MuiInputLabel-root": {
fontSize: 30,
top: "-5px",
color: "black",
},
"& .MuiFormHelperText-root": {
fontSize: "20px",
marginTop: "8px",
lineHeight: "1.2",
},
</Box>
<Paper sx={{ mt: 0.5, padding: { xs: 0.5, sm: 0.75, md: 1 }, width: "100%", backgroundColor: verified ? '#bceb19' : '#FCD34D' }}>
<Grid
container
spacing={{ xs: 0.5, sm: 0.75, md: 1 }}
direction="row"
justifyContent="space-between"
alignItems="stretch"
sx={{ width: '100%' }}
>
<Grid item xs={12} sm={5}>
<Box sx={{
mb: { xs: 0.25, md: 0.5 },
p: { xs: 0.5, sm: 0.75, md: 1 },
backgroundColor: verified ? '#bceb19' : '#FCD34D',
borderRadius: 0,
display: 'flex',
flexDirection: 'row',
gap: 0.25,
flexWrap: 'wrap'
}}
defaultValue={itemDetail?.demandQty!! - totalPutAwayQty}
// defaultValue={itemDetail.demandQty}
onChange={(e) => {
const value = e.target.value;
validateQty(Number(value));
setPutQty(Number(value));
}}
onKeyDown={(e) => {
// Prevent non-numeric characters
if (["e", "E", "+", "-", "."].includes(e.key)) {
e.preventDefault();
>
<Grid container>
{verified? (
<>
<CheckCircle sx={{
color:"green",
fontSize: { xs: "16px", sm: "20px", md: "24px" },
mr: 0.25
}}/>
<Typography
variant="h5"
component="h2"
sx={{
fontWeight: 'bold',
color: 'black',
fontSize: { xs: "0.75rem", sm: "0.9rem", md: "1rem" },
lineHeight: 1.2
}}
noWrap
>
掃瞄完成
</Typography>
</>
) : (
<>
<ErrorOutline sx={{
color:"red",
fontSize: { xs: "16px", sm: "20px", md: "24px" },
mr: 0.25
}}/>
<Typography
variant="h5"
component="h2"
sx={{
fontWeight: 'bold',
color: 'black',
fontSize: { xs: "0.75rem", sm: "0.9rem", md: "1rem" },
lineHeight: 1.2
}}
noWrap
>
請掃瞄倉庫二維碼
</Typography>
</>
)
}
}}
// onBlur={(e) => {
// const value = e.target.value;
// setPutQty(Number(value));
// validateQty(Number(value));
// }}
// disabled={true}
// {...register("acceptedQty", {
// required: "acceptedQty required!",
// })}
error={qtyError !== ""}
helperText={qtyError}
/>
</Box>
</Grid>
<Grid item xs={4}>
<Box
sx={{
p: 1,
textAlign: 'center',
height: '100%', // Ensure D stretches to full height
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
<QrCode sx={{ fontSize: { xs: "16px", sm: "20px", md: "24px" } }}/>
</Grid>
<Grid container>
<Typography
variant="h4"
sx={{
fontWeight: 'bold',
color: 'black',
fontSize: { xs: "0.85rem", sm: "1rem", md: "1.25rem" },
lineHeight: 1.2
}}
noWrap
>
{warehouseDisplay} <Box component="span" sx={{ fontSize: { xs: "0.95rem", sm: "1.2rem", md: "1.5rem" }, color: "black" }}>{verified ? "" : `(建議)`}</Box>
</Typography>
</Grid>

</Box>
</Grid>
<Grid item xs={12} sm={3}>
<Box sx={{
height: '100%',
p: { xs: 0.25, sm: 0.5, md: 0.75 },
textAlign: 'center',
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}>
<Button
id="putawaySubmit"
type="submit"
<TextField
type="number"
label={t("putQty")}
fullWidth
size="small"
sx={{
flex: 1,
"& .MuiInputBase-input": {
padding: { xs: "6px 6px 1px", sm: "8px 8px 2px", md: "10px 10px 3px" },
fontSize: { xs: "16px", sm: "22px", md: "32px" },
fontWeight: "bold",
height: { xs: "32px", sm: "40px", md: "48px" },
},
"& .MuiInputBase-root": {
height: "100%",
borderColor: "black",
},
"& .MuiInputLabel-root": {
fontSize: { xs: "10px", sm: "12px", md: "18px" },
top: "-2px",
color: "black",
},
"& .MuiFormHelperText-root": {
fontSize: { xs: "9px", sm: "10px", md: "14px" },
marginTop: "2px",
lineHeight: "1.1",
},
}}
defaultValue={itemDetail?.demandQty!! - totalPutAwayQty}
// defaultValue={itemDetail.demandQty}
onChange={(e) => {
const value = e.target.value;
validateQty(Number(value));
setPutQty(Number(value));
}}
onKeyDown={(e) => {
// Prevent non-numeric characters
if (["e", "E", "+", "-", "."].includes(e.key)) {
e.preventDefault();
}
}}
// onBlur={(e) => {
// const value = e.target.value;
// setPutQty(Number(value));
// validateQty(Number(value));
// }}
// disabled={true}
// {...register("acceptedQty", {
// required: "acceptedQty required!",
// })}
error={qtyError !== ""}
helperText={qtyError}
/>
</Box>
</Grid>
<Grid item xs={12} sm={4}>
<Box
sx={{
p: { xs: 0.25, sm: 0.5, md: 0.75 },
textAlign: 'center',
height: '100%', // Ensure D stretches to full height
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
<Button
id="putawaySubmit"
type="submit"
variant="contained"
startIcon={<Check sx={{ fontSize: { xs: "14px", sm: "16px", md: "20px" } }} />}
color="secondary"
size="small"
sx={{
height: "100%",
flex: "0 0 auto",
padding: { xs: "3px 6px", sm: "4px 8px", md: "6px 12px" },
fontSize: { xs: "9px", sm: "11px", md: "18px" },
whiteSpace: "nowrap",
textAlign: "center",
border: "1.5px solid", // Add outline
borderColor: "blue",
minHeight: { xs: "32px", sm: "36px", md: "40px" },
"&:hover": {
borderColor: "grey.200", // Slightly different color on hover
backgroundColor: "secondary.dark", // Darker background on hover
},
"&:disabled": {
borderColor: "grey.400", // Visible outline even when disabled
opacity: 0.7, // Slightly faded but still visible
},
}}
// onClick={formProps.handleSubmit()}
disabled={!verified || qtyError != ""}
>
{t("confirm putaway")}
</Button>
</Box>
{/* <Button
id="scanWarehouse"
variant="contained"
startIcon={<Check />}
color="secondary"
startIcon={<QrCode />}
color="primary"
// sx={{ mx: 3, minWidth : "120px", height: "80px",
// padding: "12px 12px", fontSize: "24px"}}
sx={{
height: "100%",
flex: "0 0 auto",
padding: "8px 16px",
fontSize: { xs: "20px", sm: "24px", md: "30px" },
fontSize: { xs: "16px", sm: "20px", md: "24px" },
whiteSpace: "nowrap",
textAlign: "center",
border: "3px solid", // Add outline
borderColor: "blue",
"&:hover": {
borderColor: "grey.200", // Slightly different color on hover
backgroundColor: "secondary.dark", // Darker background on hover
},
"&:disabled": {
borderColor: "grey.400", // Visible outline even when disabled
opacity: 0.7, // Slightly faded but still visible
},
}}
// onClick={formProps.handleSubmit()}
disabled={!verified || qtyError != ""}
>
{t("confirm putaway")}
</Button>
</Box>
{/* <Button
id="scanWarehouse"
variant="contained"
startIcon={<QrCode />}
color="primary"
// sx={{ mx: 3, minWidth : "120px", height: "80px",
// padding: "12px 12px", fontSize: "24px"}}
sx={{
flex: "0 0 auto",
padding: "8px 16px",
fontSize: { xs: "16px", sm: "20px", md: "24px" },
whiteSpace: "nowrap",
textAlign: "center",}}
onClick={openScanner}>
textAlign: "center",}}
onClick={openScanner}>

{t("scan warehouse")}
</Button> */}
{t("scan warehouse")}
</Button> */}
</Grid>
</Grid>
</Grid>
</Paper>
</Stack>
</>
) : (
// <ReactQrCodeScanner scannerConfig={scannerConfig} />
<>
<Typography variant="h4">
{t("scan loading")}
</Typography>
<LoadingComponent/>
</>
)}
</Paper>
</Stack>
</>
) : (
// <ReactQrCodeScanner scannerConfig={scannerConfig} />
<>
<Typography variant="h4" sx={{ fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" } }}>
{t("scan loading")}
</Typography>
<LoadingComponent/>
</>
)}
</Grid>
</Grid>
</Grid>
</Box>
<Modal open={isOpenScanner} onClose={scannerCloseHandler}>
<Box sx={scannerStyle}>
<Typography variant="h4" sx={{
@@ -527,7 +589,9 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
justifyContent: 'center',
margin: 0,
alignItems: 'center',
textAlign: 'center',}}
textAlign: 'center',
fontSize: { xs: "0.95rem", sm: "1.1rem", md: "1.3rem" }
}}
>
{t("Please scan warehouse qr code")}
</Typography>
@@ -541,4 +605,4 @@ const PutAwayModal: React.FC<Props> = ({ open, onClose, warehouse, stockInLineId
);
};

export default PutAwayModal;
export default PutAwayModal;

Write Preview
Loading…
Cancel
Save