update qc modal in po inputgrid:

now trigger with urlParams

src/components/PoDetail/PoDetail.tsx

@@ -53,7 +53,7 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import PoInputGrid from "./PoInputGrid";
 import { QcItemWithChecks } from "@/app/api/qc";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { WarehouseResult } from "@/app/api/warehouse";
 import { calculateWeight, returnWeightUnit } from "@/app/utils/formatUtil";
 import { CameraContext } from "../Cameras/CameraProvider";
@@ -86,11 +86,14 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   const [rows, setRows] = useState<PurchaseOrderLine[]>(
     purchaseOrder.pol || [],
   );
+  const pathname = usePathname()
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  
   const [row, setRow] = useState(rows[0]);
   const [stockInLine, setStockInLine] = useState(rows[0].stockInLine);
   const [processedQty, setProcessedQty] = useState(rows[0].processed);
 
-  const searchParams = useSearchParams();
   // const [currPoStatus, setCurrPoStatus] = useState(purchaseOrder.status);
 
   const removeParam = (paramToRemove: string) => {
@@ -232,6 +235,12 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
   );
 
   const [isOpenScanner, setOpenScanner] = useState(false);
+  // const testing = useCallback(() => {
+  //   // setOpenScanner(true);
+  //   const newParams = new URLSearchParams(searchParams.toString());
+  //   console.log(pathname)
+  // }, [pathname, router, searchParams]);
+
   const onOpenScanner = useCallback(() => {
     setOpenScanner(true);
   }, []);
@@ -377,6 +386,7 @@ const PoDetail: React.FC<Props> = ({ po, qc, warehouse }) => {
             alignItems="center"
           >
             <Button variant={"contained"} onClick={onOpenScanner}>提交</Button>
+            {/* <Button variant={"contained"} onClick={testing}>提交</Button> */}
           </Grid>
         </Grid>) : undefined}
         <Grid container xs={12} justifyContent="space-between">

src/components/PoDetail/PoInputGrid.tsx

@@ -34,7 +34,7 @@ import { QcItemWithChecks } from "src/app/api/qc";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import { PurchaseOrderLine, StockInLine } from "@/app/api/po";
 import { createStockInLine, PurchaseQcResult } from "@/app/api/po/actions";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   returnWeightUnit,
   calculateWeight,
@@ -124,6 +124,10 @@ function PoInputGrid({
   const [modalInfo, setModalInfo] = useState<
     StockInLine & { qcResult?: PurchaseQcResult[] }
   >();
+  const pathname = usePathname()
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
   const [qcOpen, setQcOpen] = useState(false);
   const [escalOpen, setEscalOpen] = useState(false);
   const [stockInOpen, setStockInOpen] = useState(false);
@@ -259,13 +263,29 @@ function PoInputGrid({
   );
 
   const [newOpen, setNewOpen] = useState(false);
-  const closeNewModal = useCallback(() => {
-    setNewOpen(false);
-  }, []);
+  const stockInLineId = searchParams.get("stockInLineId");
+const closeNewModal = useCallback(() => {
+  const newParams = new URLSearchParams(searchParams.toString());
+  newParams.delete("stockInLineId"); // Remove the parameter
+  router.replace(`${pathname}?${newParams.toString()}`);
+  setTimeout(() => {
+      setNewOpen(false); // Close the modal first
+    }, 300); // Add a delay to avoid immediate re-trigger of useEffect
+  }, [searchParams, pathname, router]);
+
+  // Open modal
   const openNewModal = useCallback(() => {
     setNewOpen(true);
   }, []);
 
+  // Open modal if `stockInLineId` exists in the URL
+  useEffect(() => {
+    if (stockInLineId && !newOpen) {
+      openNewModal();
+    }
+  }, [stockInLineId, newOpen, openNewModal]);
+
+  // Button handler to update the URL and open the modal
   const handleNewQC = useCallback(
     (id: GridRowId, params: any) => async () => {
       setBtnIsLoading(true);
@@ -273,22 +293,21 @@ function PoInputGrid({
         ...prev,
         [id]: { mode: GridRowModes.View },
       }));
+
       const qcResult = await fetchQcDefaultValue(id);
-      console.log(params.row);
-      console.log(qcResult);
       setModalInfo({
         ...params.row,
         qcResult: qcResult,
       });
-      // set default values
+
       setTimeout(() => {
-        // open qc modal
-        console.log("delayed");
-        openNewModal();
+        const newParams = new URLSearchParams(searchParams.toString());
+        newParams.set("stockInLineId", id.toString()); // Ensure `set` to avoid duplicates
+        router.replace(`${pathname}?${newParams.toString()}`);
         setBtnIsLoading(false);
       }, 200);
     },
-    [fetchQcDefaultValue, openNewModal],
+    [fetchQcDefaultValue, searchParams, router, pathname]
   );
 
   const handleEscalation = useCallback(