| @@ -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> | ||||