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

bigger button

stockTakeUpdate
CANCERYS\kw093 1 month ago
parent
e40405f419
commit
ee7802ddd5
2 changed files with 109 additions and 52 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +13
    -17
      src/components/StockTakeManagement/PickerCardList.tsx
  2. +96
    -35
      src/components/StockTakeManagement/PickerStockTake.tsx

+ 13
- 17
src/components/StockTakeManagement/PickerCardList.tsx View File

@@ -1072,17 +1072,17 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
<Tabs
value={searchKind}
onChange={(_, value: PickerSearchKind) => applyFilters({ ...searchFilters, searchKind: value })}
sx={{ minHeight: 36 }}
sx={{ minHeight: 48 }}
>
<Tab
value="location"
label={t("Search by location")}
sx={{ minHeight: 36, py: 0.5, textTransform: "none" }}
sx={{ minHeight: 48, py: 1, textTransform: "none" }}
/>
<Tab
value="section"
label={t("Search by stock take section")}
sx={{ minHeight: 36, py: 0.5, textTransform: "none" }}
sx={{ minHeight: 48, py: 1, textTransform: "none" }}
/>
</Tabs>
</Grid>
@@ -1204,7 +1204,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
</Typography>
<ToggleButtonGroup
exclusive
size="small"
value={locationPick.storeId || null}
onChange={(_, next: string | null) => {
const pick = { storeId: next ?? "", warehouse: "", area: "", slot: "" };
@@ -1213,7 +1212,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
}}
>
{locationFloorOptions.map((floor) => (
<ToggleButton key={floor} value={floor} sx={{ px: 1.5, textTransform: "none" }}>
<ToggleButton key={floor} value={floor} sx={{ minHeight: 48, px: 2, textTransform: "none" }}>
{floor === LOCATION_ALL ? t("All") : floor}
</ToggleButton>
))}
@@ -1228,7 +1227,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
<ToggleButtonGroup
key={row.join("-") || rowIndex}
exclusive
size="small"
disabled={!locationPick.storeId}
value={locationPick.storeId ? locationPick.warehouse || null : null}
onChange={(_, next: string | null) => {
@@ -1247,7 +1245,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
}}
>
{row.map((zone) => (
<ToggleButton key={zone} value={zone} sx={{ textTransform: "none" }}>
<ToggleButton key={zone} value={zone} sx={{ minHeight: 48, textTransform: "none" }}>
{zone === LOCATION_ALL ? t("All") : zone}
</ToggleButton>
))}
@@ -1276,7 +1274,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
<ToggleButtonGroup
key={row.join("-") || rowIndex}
exclusive
size="small"
disabled={!locationPick.storeId || !locationPick.warehouse}
value={locationPick.warehouse ? locationPick.area || null : null}
onChange={(_, next: string | null) => {
@@ -1295,7 +1292,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
}}
>
{row.map((area) => (
<ToggleButton key={area} value={area} sx={{ textTransform: "none" }}>
<ToggleButton key={area} value={area} sx={{ minHeight: 48, textTransform: "none" }}>
{area === LOCATION_ALL ? t("All") : area}
</ToggleButton>
))}
@@ -1324,7 +1321,6 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
<ToggleButtonGroup
key={row.join("-") || rowIndex}
exclusive
size="small"
disabled={!locationPick.storeId || !locationPick.warehouse || !locationPick.area}
value={locationPick.area ? locationPick.slot || null : null}
onChange={(_, next: string | null) => {
@@ -1343,7 +1339,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
}}
>
{row.map((slot) => (
<ToggleButton key={slot} value={slot} sx={{ textTransform: "none" }}>
<ToggleButton key={slot} value={slot} sx={{ minHeight: 48, textTransform: "none" }}>
{slot === LOCATION_ALL ? t("All") : slot}
</ToggleButton>
))}
@@ -1361,7 +1357,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
)}
</Grid>
<CardActions sx={{ px: 0, pt: 2, gap: 1 }}>
<Button variant="outlined" onClick={handleResetSearch}>
<Button variant="outlined" onClick={handleResetSearch} sx={{ minHeight: 48, px: 2 }}>
{t("Reset")}
</Button>
</CardActions>
@@ -1406,7 +1402,7 @@ const PickerCardList: React.FC<PickerCardListProps> = ({
].filter((v): v is string => Boolean(v && v.trim())).join(" / ");

return (
<Grid key={session.id} item xs={12} sm={6} md={4}>
<Grid key={session.id} item xs={12} md={6}>
<Card
sx={{
minHeight: 200,
@@ -1443,16 +1439,16 @@ const PickerCardList: React.FC<PickerCardListProps> = ({

<CardActions sx={{ pt: 0.5 ,justifyContent: "space-between"}}>
<Stack direction="row" spacing={1}>
<Button
variant="contained"
size="small"
<Button
variant="contained"
sx={{ minHeight: 48, px: 2 }}
onClick={() => onCardClick(session)}
>
{t("View Details")}
</Button>
<Button
variant="contained"
size="small"
sx={{ minHeight: 48, px: 2 }}
onClick={() => onReStockTakeClick(session)}
disabled={!session.reStockTakeTrueFalse}
>


+ 96
- 35
src/components/StockTakeManagement/PickerStockTake.tsx View File

@@ -49,6 +49,19 @@ import {
validateStockTakeQtyString,
} from "@/app/utils/formatUtil";

const pickerQtyFieldSx = {
width: 168,
minWidth: 168,
"& .MuiInputBase-root": { minHeight: 48 },
"& .MuiInputBase-input": {
fontSize: "1.125rem",
height: "1.5em",
padding: "12px 10px",
},
} as const;

const pickerTouchButtonSx = { minHeight: 48, minWidth: 96, px: 2, fontSize: "1rem" };

interface PickerStockTakeProps {
selectedSession: AllPickedStockTakeListReponse;
onBack: () => void;
@@ -262,6 +275,8 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
);
//await loadDetails(page, pageSize, { silent: true });
const nextQtyId = editableQtyIdsRef.current[editableQtyIdsRef.current.indexOf(detail.id) + 1];
if (nextQtyId != null) focusQtyInput(nextQtyId);
setInventoryLotDetails((prev) =>
prev.map((d) =>
d.id === detail.id
@@ -413,6 +428,35 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
e.preventDefault();
}
};
const qtyInputRefs = useRef(new Map<number, HTMLInputElement>());
const editableQtyIdsRef = useRef<number[]>([]);

const focusQtyInput = (id: number) => {
const el = qtyInputRefs.current.get(id);
if (!el) return;
el.focus();
el.scrollIntoView({ block: "center", inline: "nearest" });
};

const onQtyRowClick = (detailId: number) => (e: React.MouseEvent) => {
const target = e.target as HTMLElement;
if (target.closest("button, input, textarea, a, .MuiInputBase-root")) return;
focusQtyInput(detailId);
};

const focusNextQtyInput = (currentId: number) => {
const ids = editableQtyIdsRef.current;
const nextId = ids[ids.indexOf(currentId) + 1];
if (nextId == null) return;
focusQtyInput(nextId);
};

const onQtyKeyDown = (detailId: number) => (e: React.KeyboardEvent<HTMLInputElement>) => {
blockNonIntegerKeys(e);
if (e.key !== "Enter") return;
e.preventDefault();
focusNextQtyInput(detailId);
};
const isSubmitDisabled = useCallback((detail: InventoryLotDetailResponse): boolean => {
if (selectedSession?.status?.toLowerCase() === "completed") {
@@ -424,6 +468,9 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
}
return false;
}, [selectedSession?.status]);
editableQtyIdsRef.current = inventoryLotDetails
.filter((detail) => !isSubmitDisabled(detail) && (detail.firstStockTakeQty == null || detail.secondStockTakeQty == null))
.map((detail) => detail.id);
const handleBatchSaveInputted = useCallback(async () => {
if (!selectedSession || !currentUserId || batchInFlightRef.current) return;

@@ -495,7 +542,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
<Box sx={{ pb: 10 }}>
<Button
onClick={onBack}
sx={{ mb: 2, border: "1px solid", borderColor: "primary.main" }}
sx={{ mb: 2, minHeight: 48, px: 2, border: "1px solid", borderColor: "primary.main" }}
>
{t("Back to List")}
</Button>
@@ -584,8 +631,18 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
detail.firstStockTakeQty != null &&
detail.secondStockTakeQty == null;

const canEditQty = !submitDisabled && (isFirstSubmit || isSecondSubmit);

return (
<TableRow key={detail.id}>
<TableRow
key={detail.id}
hover={canEditQty}
onClick={canEditQty ? onQtyRowClick(detail.id) : undefined}
sx={{
"& .MuiTableCell-root": { py: 1.5 },
...(canEditQty ? { cursor: "pointer" } : {}),
}}
>
<TableCell>
{detail.warehouseArea || "-"}
{detail.warehouseSlot || "-"}
@@ -624,16 +681,27 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
<Typography variant="body2">{t("First")}:</Typography>
<TextField
size="small"
type="number"
type="text"
value={recordInputs[detail.id]?.firstQty || ""}
onFocus={() =>
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: false }))
}
onBlur={() =>
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: true }))
}
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
onKeyDown={blockNonIntegerKeys}
onBlur={(e) => {
const next = e.relatedTarget as HTMLElement | null;
if (next?.dataset.stockTakeQty === "1") return;
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:first`]: true }));
}}
inputRef={(el) => {
if (el) qtyInputRefs.current.set(detail.id, el);
else qtyInputRefs.current.delete(detail.id);
}}
inputProps={{
inputMode: "numeric",
enterKeyHint: "next",
pattern: "[0-9]*",
"data-stock-take-qty": "1",
}}
onKeyDown={onQtyKeyDown(detail.id)}
onChange={(e) => {
const clean = sanitizeStockTakeQtyInput(e.target.value);
const val = clean;
@@ -643,18 +711,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
InputProps={{
endAdornment: stockTakeQtyEndAdornment(detail.uomShortDesc),
}}
sx={{
width: 148,
minWidth: 148,
"& .MuiInputBase-input": {
height: "1.4375em",
padding: "4px 8px",
},
"& .MuiInputBase-input::placeholder": {
color: "grey.400", // MUI light grey
opacity: 1,
},
}}
sx={pickerQtyFieldSx}
placeholder={t("Stock Take Qty")}
/>
{/*
@@ -710,16 +767,27 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
<Typography variant="body2">{t("Second")}:</Typography>
<TextField
size="small"
type="number"
type="text"
value={recordInputs[detail.id]?.secondQty || ""}
onFocus={() =>
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: false }))
}
onBlur={() =>
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: true }))
}
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
onKeyDown={blockNonIntegerKeys}
onBlur={(e) => {
const next = e.relatedTarget as HTMLElement | null;
if (next?.dataset.stockTakeQty === "1") return;
setGapCheckOpen((prev) => ({ ...prev, [`${detail.id}:second`]: true }));
}}
inputRef={(el) => {
if (el) qtyInputRefs.current.set(detail.id, el);
else qtyInputRefs.current.delete(detail.id);
}}
inputProps={{
inputMode: "numeric",
enterKeyHint: "next",
pattern: "[0-9]*",
"data-stock-take-qty": "1",
}}
onKeyDown={onQtyKeyDown(detail.id)}
onChange={(e) => {
const clean = sanitizeStockTakeQtyInput(e.target.value);
const val = clean;
@@ -729,14 +797,7 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
InputProps={{
endAdornment: stockTakeQtyEndAdornment(detail.uomShortDesc),
}}
sx={{
width: 148,
minWidth: 148,
"& .MuiInputBase-input": {
height: "1.4375em",
padding: "4px 8px",
},
}}
sx={pickerQtyFieldSx}
placeholder={t("Stock Take Qty")}
/>
{/*
@@ -797,8 +858,8 @@ const PickerStockTake: React.FC<PickerStockTakeProps> = ({
<Stack direction="row" spacing={1}>
<Button
size="small"
variant="contained"
sx={pickerTouchButtonSx}
onClick={() => handleSaveStockTake(detail)}
disabled={saving || submitDisabled}
>


Write Preview
Loading…
Cancel
Save