Update invoice Table

src/components/InvoiceSearch/InvoiceTable.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState, useEffect, SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, TextField, CardContent, Typography, Divider, Card, Box, Autocomplete, MenuItem, AutocompleteChangeReason, AutocompleteChangeDetails } from "@mui/material";
-import { Add, Check, Close, Delete} from "@mui/icons-material";
+import { Add, Check, Close, ControlPointSharp, Delete} from "@mui/icons-material";
 import { invoiceList } from "@/app/api/invoices";
 import { 
   GridCellParams, 
@@ -23,7 +23,6 @@ import { GridToolbarContainer } from "@mui/x-data-grid";
 import { FooterPropsOverrides } from "@mui/x-data-grid";
 import { useFormContext } from "react-hook-form";
 import { ProjectResult } from "@/app/api/projects";
-import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
 
 type InvoiceListError = {
     [field in keyof invoiceList]?: string;
@@ -81,8 +80,7 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
     ): InvoiceListError | undefined => {
         // Test for errors
         const error: any = {};
-    
-        console.log(entry)
+
         if (!entry.issuedAmount) {
             error.issuedAmount = true
             error.message = t("Please input issued amount ")
@@ -98,7 +96,7 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
         } else if(!entry.invoiceNo){
           error.invoiceNo = true
           error.message = t("Please input invoice No")
-        }else if(isInvoiceNoExists(entry.invoiceNo)){
+        }else if(isInvoiceExists(entry.invoiceNo)){
           error.invoiceNo = true
           error.message = t("Duplicate Invoice No")
         }
@@ -106,12 +104,12 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
         return Object.keys(error).length > 0 ? error : undefined;
   }
 
-  const isInvoiceNoExists = (invoiceNo: string): boolean => {
-    // console.log(invoices.some(i => i.invoiceNo === invoiceNo))
+  const isInvoiceExists = (invoiceNo: string): boolean => {
     const result = invoices.some(i => i.invoiceNo === invoiceNo)
     return result
   }
 
+
     const validateRow = useCallback(
         (id: GridRowId) => {
           const row = apiRef.current.getRowWithUpdatedValues(
@@ -127,7 +125,7 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
           return error;
         },
         [],
-      );
+    );
 
     const handleEditStop = useCallback<GridEventListener<"rowEditStop">>(
         (params, event) => {
@@ -162,8 +160,6 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
         [validateRow],
     );
 
-
-
     const addRow = useCallback(() => {
         const newEntry = { id: Date.now(), _isNew: true };
         setSelectedRow((e) => [...e, newEntry]);
@@ -189,8 +185,20 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
           ...model,
           [id]: { mode: GridRowModes.View, ignoreModifications: true },
         }));
+        const editRow = selectedRow.find(row => getRowId(row) === id)
+        if (editRow?._isNew) {
+          setSelectedRow((row => row.filter(r => getRowId(r) !== id)))
+        }else{
+          setSelectedRow((row) => 
+            row.map((r) => 
+              getRowId(r) === id
+              ? { ...r, _error: undefined}
+              : r
+            )
+          )
+        }
       },
-      [],
+      [selectedRow, getRowId],
     );
 
     const handleDelete = useCallback(
@@ -256,12 +264,13 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
     }, [selectedRow, setValue]);
 
   function renderAutocomplete(params: GridRenderCellParams<any, number>) {
+    console.log(params)
     return(
       <Box sx={{ display: 'flex', alignItems: 'center', pr: 2, }}>
         <Autocomplete
          readOnly 
          sx={{ width: 300 }}
-         value={params.row.projectCode} 
+         value={params.row.projectCode}
          options={projectCombos}
          renderInput={(params) => <TextField {...params} />}
          />
@@ -273,15 +282,20 @@ const InvoiceTable: React.FC<Props> = ({ projects, invoices }) => {
     const { id, value, field, hasFocus } = props;
     const apiRef = useGridApiContext();
     
-    const handleValueChange = useCallback((newValue: any) => {
-      console.log(newValue)
+    console.log(value)
+
+    const handleValueChange =  useCallback((newValue: any) => {
+      // console.log(id, field, newValue)
       apiRef.current.setEditCellValue({ id, field, value: newValue })
     }, []);
 
+    // console.log(projectCombos.find(o => o?.toString() === value?.toString()))
+
     return (
       <Box sx={{ display: 'flex', alignItems: 'center', pr: 2 }}>
         <Autocomplete
           disablePortal
+          value={props.row.projectCode}
           options={projectCombos}
           sx={{ width: 300 }}
           onChange={(event: React.SyntheticEvent<Element, Event>, value: string | null, ) => handleValueChange(value)}
@@ -340,7 +354,7 @@ const editCombinedColumns = useMemo<GridColDef[]>(
           field: "actions",
           headerName: t("Actions"),
           getActions: ({ id }) => {
-            console.log(rowModesModel[id]?.mode === GridRowModes.Edit)
+            console.log(rowModesModel[id]?.mode)
             if (rowModesModel[id]?.mode === GridRowModes.Edit) {
               return [
                 <GridActionsCellItem
@@ -369,7 +383,7 @@ const editCombinedColumns = useMemo<GridColDef[]>(
           },
         },
     ],
-    [t]
+    [t, rowModesModel, handleSave, handleCancel, handleDelete]
     )
 
 const footer = (