@@ -75,6 +75,7 @@ export interface InputDataGridProps<T, V, E> { | |||||
needAdd?: boolean; | needAdd?: boolean; | ||||
showRemoveBtn?: boolean; | showRemoveBtn?: boolean; | ||||
addRowDefaultValue?: Partial<V>; | addRowDefaultValue?: Partial<V>; | ||||
_setRowModesModel?: Dispatch<SetStateAction<GridRowModesModel>>; | |||||
} | } | ||||
export interface SelectionInputDataGridProps<T, V, E> { | export interface SelectionInputDataGridProps<T, V, E> { | ||||
@@ -87,6 +88,7 @@ export interface SelectionInputDataGridProps<T, V, E> { | |||||
needAdd?: boolean; | needAdd?: boolean; | ||||
showRemoveBtn?: boolean; | showRemoveBtn?: boolean; | ||||
addRowDefaultValue?: Partial<V>; | addRowDefaultValue?: Partial<V>; | ||||
_setRowModesModel?: Dispatch<SetStateAction<GridRowModesModel>>; | |||||
} | } | ||||
export type Props<T, V, E> = | export type Props<T, V, E> = | ||||
@@ -115,6 +117,7 @@ function InputDataGrid<T, V, E>({ | |||||
needAdd, | needAdd, | ||||
showRemoveBtn = true, | showRemoveBtn = true, | ||||
addRowDefaultValue = {}, | addRowDefaultValue = {}, | ||||
_setRowModesModel = undefined, | |||||
}: Props<T, V, E>) { | }: Props<T, V, E>) { | ||||
const { | const { | ||||
t, | t, | ||||
@@ -123,6 +126,11 @@ function InputDataGrid<T, V, E>({ | |||||
const formKey = _formKey.toString(); | const formKey = _formKey.toString(); | ||||
const { setValue, getValues } = useFormContext(); | const { setValue, getValues } = useFormContext(); | ||||
const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({}); | const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({}); | ||||
useEffect(() => { | |||||
if (_setRowModesModel) { | |||||
_setRowModesModel(rowModesModel) | |||||
} | |||||
}, [rowModesModel]) | |||||
// const apiRef = useGridApiRef(); | // const apiRef = useGridApiRef(); | ||||
const getRowId = useCallback<GridRowIdGetter<TableRow<V, E>>>( | const getRowId = useCallback<GridRowIdGetter<TableRow<V, E>>>( | ||||
(row) => row.id! as number, | (row) => row.id! as number, | ||||
@@ -19,7 +19,7 @@ import { | |||||
import { Controller, useFormContext } from "react-hook-form"; | import { Controller, useFormContext } from "react-hook-form"; | ||||
import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
import StyledDataGrid from "../StyledDataGrid"; | import StyledDataGrid from "../StyledDataGrid"; | ||||
import { useCallback, useEffect, useMemo, useState } from "react"; | |||||
import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from "react"; | |||||
import { | import { | ||||
GridColDef, | GridColDef, | ||||
GridRowIdGetter, | GridRowIdGetter, | ||||
@@ -52,6 +52,7 @@ import dayjs from "dayjs"; | |||||
import arraySupport from "dayjs/plugin/arraySupport"; | import arraySupport from "dayjs/plugin/arraySupport"; | ||||
import { dummyPutAwayLine } from "./dummyQcTemplate"; | import { dummyPutAwayLine } from "./dummyQcTemplate"; | ||||
import { PrinterCombo } from "@/app/api/settings/printer"; | import { PrinterCombo } from "@/app/api/settings/printer"; | ||||
import { GridRowModesModel } from "@mui/x-data-grid"; | |||||
dayjs.extend(arraySupport); | dayjs.extend(arraySupport); | ||||
interface Props { | interface Props { | ||||
@@ -60,6 +61,7 @@ interface Props { | |||||
disabled: boolean; | disabled: boolean; | ||||
// qc: QcItemWithChecks[]; | // qc: QcItemWithChecks[]; | ||||
printerCombo: PrinterCombo[]; | printerCombo: PrinterCombo[]; | ||||
setRowModesModel: Dispatch<SetStateAction<GridRowModesModel>>; | |||||
} | } | ||||
type EntryError = | type EntryError = | ||||
| { | | { | ||||
@@ -81,7 +83,7 @@ const style = { | |||||
width: "auto", | width: "auto", | ||||
}; | }; | ||||
const PutAwayForm: React.FC<Props> = ({ itemDetail, warehouse, disabled, printerCombo }) => { | |||||
const PutAwayForm: React.FC<Props> = ({ itemDetail, warehouse, disabled, printerCombo, setRowModesModel }) => { | |||||
const { t } = useTranslation("purchaseOrder"); | const { t } = useTranslation("purchaseOrder"); | ||||
const apiRef = useGridApiRef(); | const apiRef = useGridApiRef(); | ||||
const { | const { | ||||
@@ -541,6 +543,7 @@ const PutAwayForm: React.FC<Props> = ({ itemDetail, warehouse, disabled, printer | |||||
needAdd={true} | needAdd={true} | ||||
showRemoveBtn={false} | showRemoveBtn={false} | ||||
addRowDefaultValue={addRowDefaultValue} | addRowDefaultValue={addRowDefaultValue} | ||||
_setRowModesModel={setRowModesModel} | |||||
/> | /> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -23,7 +23,7 @@ import QcComponent from "./QcComponent"; | |||||
import { dummyPutAwayLine, dummyQCData } from "./dummyQcTemplate"; | import { dummyPutAwayLine, dummyQCData } from "./dummyQcTemplate"; | ||||
// import QcFormVer2 from "./QcFormVer2"; | // import QcFormVer2 from "./QcFormVer2"; | ||||
import PutAwayForm from "./PutAwayForm"; | import PutAwayForm from "./PutAwayForm"; | ||||
import { useGridApiRef } from "@mui/x-data-grid"; | |||||
import { GridRowModes, useGridApiRef } from "@mui/x-data-grid"; | |||||
import {submitDialogWithWarning} from "../Swal/CustomAlerts"; | import {submitDialogWithWarning} from "../Swal/CustomAlerts"; | ||||
import { INPUT_DATE_FORMAT, arrayToDateString, arrayToInputDateString, dayjsToInputDateString } from "@/app/utils/formatUtil"; | import { INPUT_DATE_FORMAT, arrayToDateString, arrayToInputDateString, dayjsToInputDateString } from "@/app/utils/formatUtil"; | ||||
import dayjs from "dayjs"; | import dayjs from "dayjs"; | ||||
@@ -32,6 +32,8 @@ import { downloadFile } from "@/app/utils/commonUtil"; | |||||
import { PrinterCombo } from "@/app/api/settings/printer"; | import { PrinterCombo } from "@/app/api/settings/printer"; | ||||
import { EscalationResult } from "@/app/api/escalation"; | import { EscalationResult } from "@/app/api/escalation"; | ||||
import { SessionWithTokens } from "@/config/authConfig"; | import { SessionWithTokens } from "@/config/authConfig"; | ||||
import { GridRowModesModel } from "@mui/x-data-grid"; | |||||
import { isEmpty } from "lodash"; | |||||
const style = { | const style = { | ||||
@@ -355,6 +357,14 @@ const [qcItems, setQcItems] = useState(dummyQCData) | |||||
}, | }, | ||||
[], | [], | ||||
); | ); | ||||
// Put away model | |||||
const [pafRowModesModel, setPafRowModesModel] = useState<GridRowModesModel>({}) | |||||
const pafSubmitDisable = useMemo(() => { | |||||
// console.log("%c mode: ", "background:#90EE90; color:red", Object.entries(pafRowModesModel)) | |||||
// console.log("%c mode: ", "background:pink; color:#87CEEB", Object.entries(pafRowModesModel)) | |||||
return Object.entries(pafRowModesModel).length > 0 || Object.entries(pafRowModesModel).some(([key, value], index) => value.mode === GridRowModes.Edit) | |||||
}, [pafRowModesModel]) | |||||
// Putaway submission handler | // Putaway submission handler | ||||
const onSubmitPutaway = useCallback<SubmitHandler<ModalFormInput>>( | const onSubmitPutaway = useCallback<SubmitHandler<ModalFormInput>>( | ||||
async (data, event) => { | async (data, event) => { | ||||
@@ -480,6 +490,7 @@ const [qcItems, setQcItems] = useState(dummyQCData) | |||||
itemDetail={itemDetail} | itemDetail={itemDetail} | ||||
warehouse={warehouse!} | warehouse={warehouse!} | ||||
disabled={viewOnly} | disabled={viewOnly} | ||||
setRowModesModel={setPafRowModesModel} | |||||
/> | /> | ||||
<Stack direction="row" justifyContent="flex-end" gap={1}> | <Stack direction="row" justifyContent="flex-end" gap={1}> | ||||
<Autocomplete | <Autocomplete | ||||
@@ -516,6 +527,7 @@ const [qcItems, setQcItems] = useState(dummyQCData) | |||||
color="primary" | color="primary" | ||||
sx={{ mt: 1 }} | sx={{ mt: 1 }} | ||||
onClick={formProps.handleSubmit(onSubmitPutaway)} | onClick={formProps.handleSubmit(onSubmitPutaway)} | ||||
disabled={pafSubmitDisable} | |||||
> | > | ||||
{t("confirm putaway")} | {t("confirm putaway")} | ||||
</Button> | </Button> | ||||