From ff13aea37f3a0b67031fa5e9d49b4850dd74f25d Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Mon, 28 Jul 2025 00:29:19 +0800 Subject: [PATCH] bug fix + ui --- src/app/utils/commonUtil.ts | 7 + .../InputDataGrid/InputDataGrid.tsx | 22 ++- .../ConsolidatedPickOrders.tsx | 3 +- src/components/PickOrderSearch/CreateForm.tsx | 75 ++++----- .../PickOrderSearch/CreatePickOrderModal.tsx | 4 +- src/components/PoDetail/PoDetail.tsx | 35 +--- src/components/PoDetail/PoInputGrid.tsx | 152 +++++++++--------- src/i18n/zh/purchaseOrder.json | 2 +- 8 files changed, 150 insertions(+), 150 deletions(-) diff --git a/src/app/utils/commonUtil.ts b/src/app/utils/commonUtil.ts index 925ba83..2050a3d 100644 --- a/src/app/utils/commonUtil.ts +++ b/src/app/utils/commonUtil.ts @@ -26,3 +26,10 @@ export const convertObjToURLSearchParams = ( return params.toString(); }; + +export const getCustomWidth = (): number => { + const LIMIT_WIDTH = 1000 + const CUSTOM_WIDTH = 1100 + if (window.innerWidth < LIMIT_WIDTH) return CUSTOM_WIDTH + return window.innerWidth +} \ No newline at end of file diff --git a/src/components/InputDataGrid/InputDataGrid.tsx b/src/components/InputDataGrid/InputDataGrid.tsx index c8a3c83..b961c62 100644 --- a/src/components/InputDataGrid/InputDataGrid.tsx +++ b/src/components/InputDataGrid/InputDataGrid.tsx @@ -37,7 +37,9 @@ import { GridApiCommunity, GridSlotsComponentsProps, } from "@mui/x-data-grid/internals"; - +// T == CreatexxxInputs map of the form's fields +// V == target field input inside CreatexxxInputs, e.g. qcChecks: ItemQc[], V = ItemQc +// E == error interface ResultWithId { id: string | number; } @@ -97,7 +99,7 @@ export class ProcessRowUpdateError extends Error { Object.setPrototypeOf(this, ProcessRowUpdateError.prototype); } } -// T == CreatexxxInputs +// T == CreatexxxInputs map of the form's fields // V == target field input inside CreatexxxInputs, e.g. qcChecks: ItemQc[], V = ItemQc // E == error function InputDataGrid({ @@ -126,7 +128,11 @@ function InputDataGrid({ const list: TableRow[] = getValues(formKey); return list && list.length > 0 ? list : []; }); - const originalRows = list && list.length > 0 ? list : []; + // const originalRows = list && list.length > 0 ? list : []; + const originalRows = useMemo(() => ( + list && list.length > 0 ? list : [] + ), [list]) + // const originalRowModel = originalRows.filter((li) => li.isActive).map(i => i.id) as GridRowSelectionModel const [rowSelectionModel, setRowSelectionModel] = useState(() => { @@ -154,7 +160,7 @@ function InputDataGrid({ console.log(errors); apiRef.current.updateRows([{ ...row, _error: errors }]); }, - [apiRef, rowModesModel], + [apiRef], ); const processRowUpdate = useCallback( @@ -202,7 +208,7 @@ function InputDataGrid({ const reset = useCallback(() => { setRowModesModel({}); setRows(originalRows); - }, []); + }, [originalRows]); const handleCancel = useCallback( (id: GridRowId) => () => { @@ -219,14 +225,14 @@ function InputDataGrid({ ); } }, - [setRowModesModel, rows], + [rows, getRowId], ); const handleDelete = useCallback( (id: GridRowId) => () => { setRows((prevRows) => prevRows.filter((row) => getRowId(row) !== id)); }, - [], + [getRowId], ); const _columns = useMemo( @@ -281,7 +287,7 @@ function InputDataGrid({ // console.log(formKey) // console.log(rows) setValue(formKey, rows); - }, [formKey, rows]); + }, [formKey, rows, setValue]); const footer = ( diff --git a/src/components/PickOrderSearch/ConsolidatedPickOrders.tsx b/src/components/PickOrderSearch/ConsolidatedPickOrders.tsx index b5efbd3..b2c2c29 100644 --- a/src/components/PickOrderSearch/ConsolidatedPickOrders.tsx +++ b/src/components/PickOrderSearch/ConsolidatedPickOrders.tsx @@ -64,7 +64,8 @@ const style = { pt: 5, px: 5, pb: 10, - width: 1500, + // width: 1500, + width: { xs: "100%", sm: "100%", md: "100%" }, }; interface DisableButton { releaseBtn: boolean; diff --git a/src/components/PickOrderSearch/CreateForm.tsx b/src/components/PickOrderSearch/CreateForm.tsx index da0de03..238086f 100644 --- a/src/components/PickOrderSearch/CreateForm.tsx +++ b/src/components/PickOrderSearch/CreateForm.tsx @@ -107,6 +107,7 @@ const CreateForm: React.FC = ({ items }) => { { field: "itemId", headerName: t("Item"), + // width: 100, flex: 1, editable: true, valueFormatter(params) { @@ -162,6 +163,7 @@ const CreateForm: React.FC = ({ items }) => { { field: "qty", headerName: t("qty"), + // width: 100, flex: 1, type: "number", editable: true, @@ -181,6 +183,7 @@ const CreateForm: React.FC = ({ items }) => { { field: "uom", headerName: t("uom"), + // width: 100, flex: 1, editable: true, // renderEditCell(params: GridRenderEditCellParams) { @@ -257,42 +260,42 @@ const CreateForm: React.FC = ({ items }) => { - { - return ( - - { - console.log(date); - if (!date) return; - console.log(date.format(INPUT_DATE_FORMAT)); - setValue("targetDate", date.format(INPUT_DATE_FORMAT)); - // field.onChange(date); - }} - inputRef={field.ref} - slotProps={{ - textField: { - // required: true, - error: Boolean(errors.targetDate?.message), - helperText: errors.targetDate?.message, - }, - }} - /> - - ); - }} - /> - + { + return ( + + { + console.log(date); + if (!date) return; + console.log(date.format(INPUT_DATE_FORMAT)); + setValue("targetDate", date.format(INPUT_DATE_FORMAT)); + // field.onChange(date); + }} + inputRef={field.ref} + slotProps={{ + textField: { + // required: true, + error: Boolean(errors.targetDate?.message), + helperText: errors.targetDate?.message, + }, + }} + /> + + ); + }} + /> + { @@ -62,7 +62,7 @@ const CreatePickOrderModal: React.FC = ({ return ( <> - + = ({ po, qc, warehouse }) => { }; // break; } - }, [purchaseOrder, handleStartPo, handleCompletePo]); + }, [purchaseOrder.status, t, handleStartPo, handleCompletePo]); + console.log(window.innerWidth) return ( <> = ({ po, qc, warehouse }) => { {buttonData.buttonText} - {/* {purchaseOrder.status.toLowerCase() === "pending" && ( - - - - )} - {purchaseOrder.status.toLowerCase() === "receiving" && ( - - - - )} */} - {/* - - */} = ({ po, qc, warehouse }) => { {/* tab 1 */} - + + {/* */} diff --git a/src/components/PoDetail/PoInputGrid.tsx b/src/components/PoDetail/PoInputGrid.tsx index 4c3c282..a290bb8 100644 --- a/src/components/PoDetail/PoInputGrid.tsx +++ b/src/components/PoDetail/PoInputGrid.tsx @@ -147,7 +147,7 @@ function PoInputGrid({ 0, ); setProcessedQty(processedQty); - }, [entries]); + }, [entries, setProcessedQty]); const handleDelete = useCallback( (id: GridRowId) => () => { @@ -155,6 +155,42 @@ function PoInputGrid({ }, [getRowId], ); + + const closeQcModal = useCallback(() => { + setQcOpen(false); + }, []); + const openQcModal = useCallback(() => { + setQcOpen(true); + }, []); + + const closeStockInModal = useCallback(() => { + setStockInOpen(false); + }, []); + const openStockInModal = useCallback(() => { + setStockInOpen(true); + }, []); + + const closePutAwayModal = useCallback(() => { + setPutAwayOpen(false); + }, []); + const openPutAwayModal = useCallback(() => { + setPutAwayOpen(true); + }, []); + + const closeEscalationModal = useCallback(() => { + setEscalOpen(false); + }, []); + const openEscalationModal = useCallback(() => { + setEscalOpen(true); + }, []); + + const closeRejectModal = useCallback(() => { + setRejectOpen(false); + }, []); + const openRejectModal = useCallback(() => { + setRejectOpen(true); + }, []); + const handleStart = useCallback( (id: GridRowId, params: any) => () => { setBtnIsLoading(true); @@ -189,7 +225,7 @@ function PoInputGrid({ // openStartModal(); }, 200); }, - [createStockInLine], + [setStockInLine], ); const fetchQcDefaultValue = useCallback(async (stockInLineId: GridRowId) => { return await fetchQcResult(stockInLineId as number); @@ -217,7 +253,7 @@ function PoInputGrid({ setBtnIsLoading(false); }, 200); }, - [fetchQcDefaultValue], + [fetchQcDefaultValue, openQcModal], ); const handleEscalation = useCallback( (id: GridRowId, params: any) => () => { @@ -234,7 +270,7 @@ function PoInputGrid({ // setBtnIsLoading(false); }, 200); }, - [], + [openEscalationModal], ); const handleReject = useCallback( @@ -254,7 +290,7 @@ function PoInputGrid({ // printQrcode(params.row); }, 200); }, - [], + [openRejectModal], ); const handleStockIn = useCallback( @@ -274,7 +310,7 @@ function PoInputGrid({ // setBtnIsLoading(false); }, 200); }, - [], + [openStockInModal], ); const handlePutAway = useCallback( @@ -294,7 +330,7 @@ function PoInputGrid({ // setBtnIsLoading(false); }, 200); }, - [], + [openPutAwayModal], ); const printQrcode = useCallback( @@ -310,79 +346,47 @@ function PoInputGrid({ } setBtnIsLoading(false); }, - [fetchPoQrcode, downloadFile], - ); - - const handleQrCode = useCallback( - (id: GridRowId, params: any) => () => { - setRowModesModel((prev) => ({ - ...prev, - [id]: { mode: GridRowModes.View }, - })); - setModalInfo(params.row); - setTimeout(() => { - // open stock in modal - // openPutAwayModal(); - // return the record with its status as pending - // update layout - console.log("delayed"); - printQrcode(params.row); - }, 200); - }, [], ); - const closeQcModal = useCallback(() => { - setQcOpen(false); - }, []); - const openQcModal = useCallback(() => { - setQcOpen(true); - }, []); - - const closeStockInModal = useCallback(() => { - setStockInOpen(false); - }, []); - const openStockInModal = useCallback(() => { - setStockInOpen(true); - }, []); - - const closePutAwayModal = useCallback(() => { - setPutAwayOpen(false); - }, []); - const openPutAwayModal = useCallback(() => { - setPutAwayOpen(true); - }, []); - - const closeEscalationModal = useCallback(() => { - setEscalOpen(false); - }, []); - const openEscalationModal = useCallback(() => { - setEscalOpen(true); - }, []); - - const closeRejectModal = useCallback(() => { - setRejectOpen(false); - }, []); - const openRejectModal = useCallback(() => { - setRejectOpen(true); - }, []); + // const handleQrCode = useCallback( + // (id: GridRowId, params: any) => () => { + // setRowModesModel((prev) => ({ + // ...prev, + // [id]: { mode: GridRowModes.View }, + // })); + // setModalInfo(params.row); + // setTimeout(() => { + // // open stock in modal + // // openPutAwayModal(); + // // return the record with its status as pending + // // update layout + // console.log("delayed"); + // printQrcode(params.row); + // }, 200); + // }, + // [printQrcode], + // ); const columns = useMemo( () => [ { field: "itemNo", headerName: t("itemNo"), - flex: 0.4, + width: 120, + // flex: 0.4, }, { field: "itemName", headerName: t("itemName"), - flex: 0.6, + width: 120, + // flex: 0.6, }, { field: "acceptedQty", headerName: t("acceptedQty"), - flex: 0.5, + // flex: 0.5, + width: 120, type: "number", // editable: true, // replace with tooltip + content @@ -390,7 +394,8 @@ function PoInputGrid({ { field: "uom", headerName: t("uom"), - flex: 0.5, + width: 120, + // flex: 0.5, renderCell: (params) => { return params.row.uom.code; }, @@ -398,7 +403,8 @@ function PoInputGrid({ { field: "weight", headerName: t("weight"), - flex: 0.5, + width: 120, + // flex: 0.5, renderCell: (params) => { const weight = calculateWeight( params.row.acceptedQty, @@ -411,7 +417,8 @@ function PoInputGrid({ { field: "status", headerName: t("status"), - flex: 0.5, + width: 120, + // flex: 0.5, renderCell: (params) => { return t(`${params.row.status}`); }, @@ -423,7 +430,8 @@ function PoInputGrid({ "stock in", )} | ${t("putaway")} | ${t("delete")}`, // headerName: "start | qc | escalation | stock in | putaway | delete", - flex: 1.5, + width: 300, + // flex: 1.5, cellClassName: "actions", getActions: (params) => { // console.log(params.row.status); @@ -494,7 +502,7 @@ function PoInputGrid({ (stockInLineStatusMap[status] >= 3 && stockInLineStatusMap[status] <= 5 && !session?.user?.abilities?.includes("APPROVAL")) - } + } // set _isNew to false after posting // or check status onClick={handleStockIn(params.row.id, params)} @@ -560,7 +568,7 @@ function PoInputGrid({ }, }, ], - [stockInLineStatusMap, btnIsLoading, handleQrCode, handleReject], + [t, handleStart, handleQC, handleEscalation, session?.user?.abilities, handleStockIn, handlePutAway, handleDelete, handleReject], ); const addRow = useCallback(() => { @@ -585,7 +593,7 @@ function PoInputGrid({ // fieldToFocus: "projectId", }, })); - }, [currQty, getRowId]); + }, [currQty, getRowId, itemDetail]); const validation = useCallback( ( newRow: GridRowModel, @@ -599,7 +607,7 @@ function PoInputGrid({ } return Object.keys(error).length > 0 ? error : undefined; }, - [currQty], + [currQty, itemDetail.qty, t], ); const processRowUpdate = useCallback( ( @@ -632,7 +640,7 @@ function PoInputGrid({ setCurrQty(total); return rowToSave; }, - [getRowId, entries], + [validation, entries, setStockInLine, getRowId], ); const onProcessRowUpdateError = useCallback( diff --git a/src/i18n/zh/purchaseOrder.json b/src/i18n/zh/purchaseOrder.json index 903132c..10ecb8e 100644 --- a/src/i18n/zh/purchaseOrder.json +++ b/src/i18n/zh/purchaseOrder.json @@ -27,7 +27,7 @@ "total weight": "總重量", "weight unit": "重量單位", "price": "價格", - "processed": "已入倉", + "processed": "已處理", "expiryDate": "到期日", "acceptedQty": "接受數量", "weight": "重量",