update last item

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<Props> = ({ isEditMode }) => {
   const {
@@ -43,35 +45,51 @@ const MaterialDetails: React.FC<Props> = ({ isEditMode }) => {
     setError,
     clearErrors,
   } = useFormContext<CreateMaterialInputs>();
-  const columns = useMemo<GridColDef[]>(() => [], []);
-  const validationTest = (): EntryError => {
+  const typeColumns = useMemo<GridColDef[]>(() => [
+    {
+      field: "type",
+      headerName: 'type',
+      flex: 1,
+      editable: true,
+    }
+  ], []);
+  const uomColumns = useMemo<GridColDef[]>(() => [
+    {
+      field: "uom",
+      headerName: 'uom',
+      flex: 1,
+      editable: true,
+    }
+  ], []);
+  const validationTest = useCallback((newRow: GridRowModel<TableRow<Partial<CreateMaterialInputs>, EntryError>>): EntryError => {
     const error: EntryError = {};
-    return error;
-  };
-  const MaterialTypeInputGridProps: InputDataGridProps<
-    Partial<CreateMaterialInputs>,
-    EntryError
-  > = {
-    _formKey: "type",
-    columns,
-    validation: validationTest,
-  };
-  const MaterialUomInputGridProps: InputDataGridProps<
-    Partial<CreateMaterialInputs>,
-    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<CreateMaterialInputs>,
+  //   EntryError
+  // > = {
+  //   _formKey: "type",
+  //   columns: typeColumns,
+  //   validateRow: validationTest,
+  // };
+  // const MaterialUomInputGridProps: InputDataGridProps<
+  //   Partial<CreateMaterialInputs>,
+  //   EntryError
+  // > = {
+  //   _formKey: "uom",
+  //   columns: uomColumns,
+  //   validateRow: validationTest,
+  // };
+  // const MaterialTypeInputGrid = useInputDataGrid(
+  //   MaterialTypeInputGridProps
+  // );
+  // const MaterialUomInputGrid = useInputDataGrid(
+  //   MaterialUomInputGridProps
+  // );
 
-  const test: InputGridProps = {}
 
   return (
     <Card sx={{ display: "block" }}>
@@ -213,12 +231,18 @@ const MaterialDetails: React.FC<Props> = ({ isEditMode }) => {
               />
             </Grid>
             <Grid item xs={6}>
-              <MaterialTypeInputGrid 
-                  // {...test}
+              <InputDataGrid<CreateMaterialInputs, EntryError>
+                _formKey={"type"}
+                columns={typeColumns}
+                validateRow={validationTest}
               />
             </Grid>
             <Grid item xs={6}>
-              <MaterialUomInputGrid />
+              <InputDataGrid<CreateMaterialInputs, EntryError>
+                _formKey={"uom"}
+                columns={uomColumns}
+                validateRow={validationTest}
+              />
             </Grid>
           </Grid>
         </Box>

src/components/useInputDataGrid/useInputDataGrid.tsx → 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<T, E> = Partial<
+// export type InputGridProps = {
+//   [key: string]: any
+// }
+export type TableRow<T, E> = Partial<
   T & {
     _isNew: boolean;
     _error: E;
@@ -45,7 +48,7 @@ type TableRow<T, E> = Partial<
 export type InputDataGridProps<T, E> = {
   _formKey: keyof T;
   columns: GridColDef[];
-  validation: () => E;
+  validateRow: (newRow: GridRowModel<TableRow<T, E>>) => E;
 };
 
 export class ProcessRowUpdateError<T, E> extends Error {
@@ -60,15 +63,11 @@ export class ProcessRowUpdateError<T, E> extends Error {
   }
 }
 
-function useInputDataGrid<T, E>({
+function InputDataGrid<T, E>({
   _formKey,
   columns,
-  validation,
-}: InputDataGridProps<T, E>): {
-  DataGrid: React.FC;
-  rowModesModel: GridRowModesModel;
-  setRowModesModel: Dispatch<SetStateAction<GridRowModesModel>>;
-} {
+  validateRow,
+}: InputDataGridProps<T, E>) {
   const {
     t,
     // i18n: { language },
@@ -96,7 +95,7 @@ function useInputDataGrid<T, E>({
         [id]: { mode: GridRowModes.View },
       }));
     },
-    [setRowModesModel]
+    []
   );
   const onProcessRowUpdateError = useCallback(
     (updateError: ProcessRowUpdateError<T, E>) => {
@@ -108,14 +107,18 @@ function useInputDataGrid<T, E>({
     [apiRef, rowModesModel]
   );
 
+  console.log("asdasdasd")
   const processRowUpdate = useCallback(
     (
-      newRow: GridRowModel<TableRow<T, E>>,
-      originalRow: GridRowModel<TableRow<T, E>>
+      newRow: GridValidRowModel,
+      originalRow: GridValidRowModel,
+      // GridRowModel<TableRow<T, E>>,
+      // originalRow: GridRowModel<TableRow<T, E>>
     ) => {
       /////////////////
       // 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<T, E>({
       const rowToSave = {
         ...updatedRow,
       } as TableRow<T, E>; /// 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<T, E>;
     setRows((prev) => [...prev, newEntry]);
-    // console.log(newEntry)
     setRowModesModel((model) => ({
       ...model,
       [getRowId(newEntry)]: {
@@ -173,18 +175,14 @@ function useInputDataGrid<T, E>({
     },
     [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<GridColDef[]>(
     () => [
       ...columns,
@@ -230,20 +228,29 @@ function useInputDataGrid<T, E>({
         },
       },
     ],
-    [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 = (
     <Box display="flex" gap={2} alignItems="center">
       <Button
         disableRipple
         variant="outlined"
-        startIcon={<Add />}
+        startIcon={<Add />} 
         onClick={addRow}
         size="small"
       >
@@ -260,10 +267,16 @@ function useInputDataGrid<T, E>({
       </Button>
     </Box>
   );
-  const DataGrid: React.FC<InputGridProps> = (props) => (
+//   const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
+//     if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+//       event.defaultMuiPrevented = true;
+//     }
+//   };
+
+  return (
     <StyledDataGrid
-      {...props}
-      getRowId={getRowId as GridRowIdGetter<GridValidRowModel>}
+      // {...props}
+      // getRowId={getRowId as GridRowIdGetter<GridValidRowModel>}
       apiRef={apiRef}
       rows={rows}
       columns={_columns}
@@ -281,9 +294,10 @@ function useInputDataGrid<T, E>({
         },
       }}
       disableColumnMenu
+      processRowUpdate={processRowUpdate}
+    //   onRowEditStop={handleRowEditStop}
       rowModesModel={rowModesModel}
       onRowModesModelChange={setRowModesModel}
-      processRowUpdate={processRowUpdate as any}
       onProcessRowUpdateError={onProcessRowUpdateError}
       getCellClassName={(params: GridCellParams<TableRow<T, E>>) => {
         let classname = "";
@@ -300,12 +314,7 @@ function useInputDataGrid<T, E>({
         footer: { child: footer },
       }}
     />
-  );
-  return {
-    DataGrid,
-    rowModesModel,
-    setRowModesModel,
-  };
+  )
 }
 const FooterToolbar: React.FC<FooterPropsOverrides> = ({ child }) => {
   return <GridToolbarContainer sx={{ p: 2 }}>{child}</GridToolbarContainer>;
@@ -323,4 +332,4 @@ const NoRowsOverlay: React.FC = () => {
     </Box>
   );
 };
-export default useInputDataGrid;
+export default InputDataGrid;

src/components/InputDataGrid/index.ts

@@ -0,0 +1 @@
+export { default } from "./InputDataGrid";

src/components/useInputDataGrid/index.ts

@@ -1 +0,0 @@
-export { default } from "./useInputDataGrid";