From b05ffa7b08f0c51cfeee7cf755d1e0e429d7b2c8 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Mon, 11 Aug 2025 18:45:19 +0800 Subject: [PATCH] update with qc form v2 --- src/app/api/po/actions.ts | 1 + .../PoDetail/EscalationComponent.tsx | 10 ++-- src/components/PoDetail/QcFormVer2.tsx | 56 +++++++++++++++---- .../PoDetail/QcStockInModalVer2.tsx | 23 +++++++- 4 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/app/api/po/actions.ts b/src/app/api/po/actions.ts index f53672c..8a243e7 100644 --- a/src/app/api/po/actions.ts +++ b/src/app/api/po/actions.ts @@ -52,6 +52,7 @@ export interface StockInInput { export interface PurchaseQCInput { status: string; acceptedQty: number; + passingQty: number; sampleRate: number; sampleWeight: number; totalWeight: number; diff --git a/src/components/PoDetail/EscalationComponent.tsx b/src/components/PoDetail/EscalationComponent.tsx index c86f166..53761a8 100644 --- a/src/components/PoDetail/EscalationComponent.tsx +++ b/src/components/PoDetail/EscalationComponent.tsx @@ -1,4 +1,4 @@ -import React, { useState, ChangeEvent, FormEvent } from 'react'; +import React, { useState, ChangeEvent, FormEvent, Dispatch } from 'react'; import { Box, Button, @@ -35,14 +35,16 @@ interface FormData { interface Props { forSupervisor: boolean + isCollapsed: boolean + setIsCollapsed: Dispatch> } - const EscalationComponent: React.FC = ({ - forSupervisor + forSupervisor, + isCollapsed, + setIsCollapsed }) => { const { t } = useTranslation("purchaseOrder"); - const [isCollapsed, setIsCollapsed] = useState(false); const [formData, setFormData] = useState({ name: '', quantity: '', diff --git a/src/components/PoDetail/QcFormVer2.tsx b/src/components/PoDetail/QcFormVer2.tsx index 1d85df7..63a2012 100644 --- a/src/components/PoDetail/QcFormVer2.tsx +++ b/src/components/PoDetail/QcFormVer2.tsx @@ -249,7 +249,7 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI headerName: t("qcItem"), flex: 1, }, -{ + { field: 'isPassed', headerName: t("passed"), flex: 1, @@ -261,7 +261,11 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI onChange={(e) => { const checked = e.target.checked; setQcItems((prev) => - prev.map((r) => (r.id === params.id ? { ...r, isPassed: checked } : r)) + prev.map((r) => + r.id === params.id + ? { ...r, isPassed: checked, isFailed: !checked ? r.isFailed : false } + : r + ) ); }} size="small" @@ -282,7 +286,11 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI onChange={(e) => { const checked = e.target.checked; setQcItems((prev) => - prev.map((r) => (r.id === params.id ? { ...r, isFailed: checked } : r)) + prev.map((r) => + r.id === params.id + ? { ...r, isFailed: checked, isPassed: !checked ? r.isPassed : false } + : r + ) ); }} size="small" @@ -343,15 +351,31 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI useEffect(() => { console.log(itemDetail); - const status = "receiving"; - // switch (itemDetail.status) { - // case 'pending': - // status = "receiving" - // break; - // } - setValue("status", status); + + }, [itemDetail]); + + // const [openCollapse, setOpenCollapse] = useState(false) + const [isCollapsed, setIsCollapsed] = useState(false); + + const onFailedOpenCollapse = useCallback((qcItems: QcData[]) => { + const isFailed = qcItems.some((qc) => qc.isFailed) + console.log(isFailed) + if (isFailed) { + setIsCollapsed(true) + } else { + setIsCollapsed(false) + } + }, []) + + useEffect(() => { + console.log(itemDetail); + }, [itemDetail]); + useEffect(() => { + onFailedOpenCollapse(qcItems) + }, [qcItems, onFailedOpenCollapse]); + return ( <> @@ -392,10 +416,18 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI type="number" label={t("acceptedQty")} fullWidth + defaultValue={watch("passingQty")} + {...register("passingQty", { + required: "passingQty required!", + })} /> - + )} @@ -429,6 +461,8 @@ const QcFormVer2: React.FC = ({ qc, itemDetail, disabled, qcItems, setQcI diff --git a/src/components/PoDetail/QcStockInModalVer2.tsx b/src/components/PoDetail/QcStockInModalVer2.tsx index da6a9bc..1e88c25 100644 --- a/src/components/PoDetail/QcStockInModalVer2.tsx +++ b/src/components/PoDetail/QcStockInModalVer2.tsx @@ -11,7 +11,7 @@ import { Stack, Typography, } from "@mui/material"; -import { Dispatch, SetStateAction, useCallback, useState } from "react"; +import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react"; import { FormProvider, SubmitHandler, useForm } from "react-hook-form"; import { StockInLineRow } from "./PoInputGrid"; import { useTranslation } from "react-i18next"; @@ -19,7 +19,7 @@ import StockInForm from "./StockInForm"; import StockInFormVer2 from "./StockInFormVer2"; import QcFormVer2 from "./QcFormVer2"; import PutawayForm from "./PutawayForm"; -import { dummyPutawayLine, dummyQCData } from "./dummyQcTemplate"; +import { dummyPutawayLine, dummyQCData, QcData } from "./dummyQcTemplate"; import { useGridApiRef } from "@mui/x-data-grid"; const style = { position: "absolute", @@ -189,6 +189,25 @@ const [qcItems, setQcItems] = useState(dummyQCData) // Handle print logic here window.print(); }, []); + const acceptQty = formProps.watch("acceptedQty") + + const checkQcIsPassed = useCallback((qcItems: QcData[]) => { + const isPassed = qcItems.every((qc) => qc.isPassed); + console.log(isPassed) + if (isPassed) { + formProps.setValue("passingQty", acceptQty) + } else { + formProps.setValue("passingQty", 0) + } + return isPassed + }, [acceptQty, formProps]) + + useEffect(() => { + // maybe check if submitted before + console.log(qcItems) + checkQcIsPassed(qcItems) + }, [qcItems, checkQcIsPassed]) + return ( <>