From c55ec75a24a158b5b7c2b4d7a643ce3b4ddcd343 Mon Sep 17 00:00:00 2001 From: "MSI\\derek" Date: Thu, 6 Mar 2025 12:37:42 +0800 Subject: [PATCH] update last item --- .../CreateMaterial/MaterialDetails.tsx | 100 +++++++++++------- .../InputDataGrid.tsx} | 91 +++++++++------- .../backup | 0 src/components/InputDataGrid/index.ts | 1 + src/components/useInputDataGrid/index.ts | 1 - 5 files changed, 113 insertions(+), 80 deletions(-) rename src/components/{useInputDataGrid/useInputDataGrid.tsx => InputDataGrid/InputDataGrid.tsx} (82%) rename src/components/{useInputDataGrid => InputDataGrid}/backup (100%) create mode 100644 src/components/InputDataGrid/index.ts delete mode 100644 src/components/useInputDataGrid/index.ts diff --git a/src/components/CreateMaterial/MaterialDetails.tsx b/src/components/CreateMaterial/MaterialDetails.tsx index ec31eeb..db029c3 100644 --- a/src/components/CreateMaterial/MaterialDetails.tsx +++ b/src/components/CreateMaterial/MaterialDetails.tsx @@ -11,19 +11,21 @@ import { } from "@mui/material"; import { useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; -import useInputDataGrid from "../useInputDataGrid"; -import { useMemo, useState } from "react"; -import { GridColDef } from "@mui/x-data-grid"; +import InputDataGrid from "../InputDataGrid"; +import { useCallback, useMemo, useState } from "react"; +import { GridColDef, GridRowModel } from "@mui/x-data-grid"; import { - InputGridProps, InputDataGridProps, -} from "../useInputDataGrid/useInputDataGrid"; + TableRow, +} from "../InputDataGrid/InputDataGrid"; type Props = { isEditMode: boolean; }; -export type EntryError = { - [field in keyof CreateMaterialInputs]?: string; -}; +export type EntryError = + | { + [field in keyof CreateMaterialInputs]?: string; + } + | undefined; const MaterialDetails: React.FC = ({ isEditMode }) => { const { @@ -43,35 +45,51 @@ const MaterialDetails: React.FC = ({ isEditMode }) => { setError, clearErrors, } = useFormContext(); - const columns = useMemo(() => [], []); - const validationTest = (): EntryError => { + const typeColumns = useMemo(() => [ + { + field: "type", + headerName: 'type', + flex: 1, + editable: true, + } + ], []); + const uomColumns = useMemo(() => [ + { + field: "uom", + headerName: 'uom', + flex: 1, + editable: true, + } + ], []); + const validationTest = useCallback((newRow: GridRowModel, EntryError>>): EntryError => { const error: EntryError = {}; - return error; - }; - const MaterialTypeInputGridProps: InputDataGridProps< - Partial, - EntryError - > = { - _formKey: "type", - columns, - validation: validationTest, - }; - const MaterialUomInputGridProps: InputDataGridProps< - Partial, - EntryError - > = { - _formKey: "uom", - columns, - validation: validationTest, - }; - const { DataGrid: MaterialTypeInputGrid } = useInputDataGrid( - MaterialTypeInputGridProps - ); - const { DataGrid: MaterialUomInputGrid } = useInputDataGrid( - MaterialUomInputGridProps - ); + console.log(newRow) + return Object.keys(error).length > 0 ? error : undefined; + // return undefined + }, []); + // const MaterialTypeInputGridProps: InputDataGridProps< + // Partial, + // EntryError + // > = { + // _formKey: "type", + // columns: typeColumns, + // validateRow: validationTest, + // }; + // const MaterialUomInputGridProps: InputDataGridProps< + // Partial, + // EntryError + // > = { + // _formKey: "uom", + // columns: uomColumns, + // validateRow: validationTest, + // }; + // const MaterialTypeInputGrid = useInputDataGrid( + // MaterialTypeInputGridProps + // ); + // const MaterialUomInputGrid = useInputDataGrid( + // MaterialUomInputGridProps + // ); - const test: InputGridProps = {} return ( @@ -213,12 +231,18 @@ const MaterialDetails: React.FC = ({ isEditMode }) => { /> - + _formKey={"type"} + columns={typeColumns} + validateRow={validationTest} /> - + + _formKey={"uom"} + columns={uomColumns} + validateRow={validationTest} + /> diff --git a/src/components/useInputDataGrid/useInputDataGrid.tsx b/src/components/InputDataGrid/InputDataGrid.tsx similarity index 82% rename from src/components/useInputDataGrid/useInputDataGrid.tsx rename to src/components/InputDataGrid/InputDataGrid.tsx index 299d83e..3c8e1bd 100644 --- a/src/components/useInputDataGrid/useInputDataGrid.tsx +++ b/src/components/InputDataGrid/InputDataGrid.tsx @@ -1,3 +1,4 @@ +"use client" import { Dispatch, SetStateAction, @@ -12,6 +13,8 @@ import { GridActionsCellItem, GridCellParams, GridColDef, + GridEventListener, + GridRowEditStopReasons, GridRowId, GridRowIdGetter, GridRowModel, @@ -32,10 +35,10 @@ import { useTranslation } from "react-i18next"; interface ResultWithId { id: string | number; } -export type InputGridProps = { - [key: string]: any -} -type TableRow = Partial< +// export type InputGridProps = { +// [key: string]: any +// } +export type TableRow = Partial< T & { _isNew: boolean; _error: E; @@ -45,7 +48,7 @@ type TableRow = Partial< export type InputDataGridProps = { _formKey: keyof T; columns: GridColDef[]; - validation: () => E; + validateRow: (newRow: GridRowModel>) => E; }; export class ProcessRowUpdateError extends Error { @@ -60,15 +63,11 @@ export class ProcessRowUpdateError extends Error { } } -function useInputDataGrid({ +function InputDataGrid({ _formKey, columns, - validation, -}: InputDataGridProps): { - DataGrid: React.FC; - rowModesModel: GridRowModesModel; - setRowModesModel: Dispatch>; -} { + validateRow, +}: InputDataGridProps) { const { t, // i18n: { language }, @@ -96,7 +95,7 @@ function useInputDataGrid({ [id]: { mode: GridRowModes.View }, })); }, - [setRowModesModel] + [] ); const onProcessRowUpdateError = useCallback( (updateError: ProcessRowUpdateError) => { @@ -108,14 +107,18 @@ function useInputDataGrid({ [apiRef, rowModesModel] ); + console.log("asdasdasd") const processRowUpdate = useCallback( ( - newRow: GridRowModel>, - originalRow: GridRowModel> + newRow: GridValidRowModel, + originalRow: GridValidRowModel, + // GridRowModel>, + // originalRow: GridRowModel> ) => { ///////////////// // validation here - // const errors = validation(); //repace true with validation method + // const errors = validateRow(newRow); + console.log(newRow) // if (errors) { // throw new ProcessRowUpdateError( // originalRow, @@ -128,19 +131,18 @@ function useInputDataGrid({ const rowToSave = { ...updatedRow, } as TableRow; /// test - setRows((rw) => - rw.map((r) => (getRowId(r) === getRowId(originalRow) ? rowToSave : r)) - ); - + console.log(rowToSave) + // setRows((rw) => + // rw.map((r) => (getRowId(r) === getRowId(originalRow) ? rowToSave : r)) + // ); return rowToSave; }, - [rows] + [validateRow, getRowId] ); const addRow = useCallback(() => { const newEntry = { id: Date.now(), _isNew: true } as TableRow; setRows((prev) => [...prev, newEntry]); - // console.log(newEntry) setRowModesModel((model) => ({ ...model, [getRowId(newEntry)]: { @@ -173,18 +175,14 @@ function useInputDataGrid({ }, [setRowModesModel, rows] ); - useEffect(() => { - console.log(rows) - }, [rows]) + const handleDelete = useCallback( (id: GridRowId) => () => { setRows((prevRows) => prevRows.filter((row) => getRowId(row) !== id)); }, [] ); - if (columns) { - } const _columns = useMemo( () => [ ...columns, @@ -230,20 +228,29 @@ function useInputDataGrid({ }, }, ], - [rowModesModel, handleSave, handleCancel, handleDelete] + [columns,rowModesModel, handleSave, handleCancel, handleDelete] ); + // const processRowUpdate = (newRow: GridRowModel) => { + // const updatedRow = { ...newRow, isNew: false }; + // console.log("asdasdasdsda") + // // setRows(rows.map((row) => (row.id === newRow.id ? updatedRow : row))); + // return updatedRow; + // }; + // sync useForm useEffect(() => { + console.log(formKey) + console.log(rows) setValue(formKey, rows); - }, [rows]); + }, [formKey, rows]); const footer = ( ); - const DataGrid: React.FC = (props) => ( +// const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => { +// if (params.reason === GridRowEditStopReasons.rowFocusOut) { +// event.defaultMuiPrevented = true; +// } +// }; + + return ( } + // {...props} + // getRowId={getRowId as GridRowIdGetter} apiRef={apiRef} rows={rows} columns={_columns} @@ -281,9 +294,10 @@ function useInputDataGrid({ }, }} disableColumnMenu + processRowUpdate={processRowUpdate} + // onRowEditStop={handleRowEditStop} rowModesModel={rowModesModel} onRowModesModelChange={setRowModesModel} - processRowUpdate={processRowUpdate as any} onProcessRowUpdateError={onProcessRowUpdateError} getCellClassName={(params: GridCellParams>) => { let classname = ""; @@ -300,12 +314,7 @@ function useInputDataGrid({ footer: { child: footer }, }} /> - ); - return { - DataGrid, - rowModesModel, - setRowModesModel, - }; + ) } const FooterToolbar: React.FC = ({ child }) => { return {child}; @@ -323,4 +332,4 @@ const NoRowsOverlay: React.FC = () => { ); }; -export default useInputDataGrid; +export default InputDataGrid; diff --git a/src/components/useInputDataGrid/backup b/src/components/InputDataGrid/backup similarity index 100% rename from src/components/useInputDataGrid/backup rename to src/components/InputDataGrid/backup diff --git a/src/components/InputDataGrid/index.ts b/src/components/InputDataGrid/index.ts new file mode 100644 index 0000000..9fa7f18 --- /dev/null +++ b/src/components/InputDataGrid/index.ts @@ -0,0 +1 @@ +export { default } from "./InputDataGrid"; diff --git a/src/components/useInputDataGrid/index.ts b/src/components/useInputDataGrid/index.ts deleted file mode 100644 index 165f6e6..0000000 --- a/src/components/useInputDataGrid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./useInputDataGrid";