From 5ea41296f3ba997d6747ae545331b623b04a00b9 Mon Sep 17 00:00:00 2001
From: "MSI\\2Fi" <jason.tom@2fi-solutions.com.hk>
Date: Thu, 5 Sep 2024 10:57:13 +0800
Subject: [PATCH] Add Invoice table

---
 .../InvoiceSearch/InvoiceSearch.tsx           |  4 +-
 src/components/InvoiceSearch/InvoiceTable.tsx | 86 +++++++++++++------
 2 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/components/InvoiceSearch/InvoiceSearch.tsx b/src/components/InvoiceSearch/InvoiceSearch.tsx
index b0c1b16..3d729fb 100644
--- a/src/components/InvoiceSearch/InvoiceSearch.tsx
+++ b/src/components/InvoiceSearch/InvoiceSearch.tsx
@@ -471,14 +471,14 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
       spacing={2}
     >
       <ButtonGroup variant="contained">
-        {/* <Button 
+        <Button 
           startIcon={<AddIcon />} 
           variant="outlined" 
           component="label"
           onClick={handleAddInvoiceClick}
           >
           {t("Create Invoice")}
-        </Button> */}
+        </Button>
         <Button startIcon={<FileUploadIcon />} variant="contained" component="label">
           <input
             id='importExcel'
diff --git a/src/components/InvoiceSearch/InvoiceTable.tsx b/src/components/InvoiceSearch/InvoiceTable.tsx
index 2fe3122..469f3cc 100644
--- a/src/components/InvoiceSearch/InvoiceTable.tsx
+++ b/src/components/InvoiceSearch/InvoiceTable.tsx
@@ -4,14 +4,23 @@ import { useTranslation } from "react-i18next";
 import SearchResults, { Column } from "../SearchResults";
 import EditNote from "@mui/icons-material/EditNote";
 import { moneyFormatter } from "@/app/utils/formatUtil"
-import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, CardContent, Typography, Divider, Card, Box } from "@mui/material";
+import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, CardContent, Typography, Divider, Card, Box, Autocomplete, MenuItem } from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { Add, Check, Close, Delete } from "@mui/icons-material";
 import { deleteInvoice, importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
 import { deleteDialog, errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
 import { invoiceList, issuedInvoiceList, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import { GridCellParams, GridColDef, GridEventListener, GridRowId, GridRowModel, GridRowModes, GridRowModesModel } from "@mui/x-data-grid";
+import { 
+  GridCellParams, 
+  GridColDef, 
+  GridEventListener, 
+  GridRowId, 
+  GridRowModel, 
+  GridRowModes, 
+  GridRowModesModel,
+  GridRenderEditCellParams, 
+} from "@mui/x-data-grid";
 import { useGridApiRef } from "@mui/x-data-grid";
 import StyledDataGrid from "../StyledDataGrid";
 
@@ -91,29 +100,37 @@ const InvoiceTable: React.FC = () => {
           // console.log(error)
           // Test for warnings
     
-          apiRef.current.updateRows([{ id, _error: error }]);
+          // apiRef.current.updateRows([{ id, _error: error }]);
           return error;
         },
-        [apiRef],
+        [],
       );
 
     const handleEditStop = useCallback<GridEventListener<"rowEditStop">>(
         (params, event) => {
-            // console.log(params.id)
-            if (validateRow(params.id) !== undefined || !validateRow(params.id)) {
+            const row = apiRef.current.getRowWithUpdatedValues(
+              params.id,
+              "",
+            )
+            console.log(validateRow(params.id) !== undefined)
+            console.log(!validateRow(params.id))
+            if (validateRow(params.id) !== undefined && !validateRow(params.id)) {
             
             setRowModesModel((model) => ({
                 ...model,
                 [params.id]: { mode: GridRowModes.View},
             }));
             
-            const row = apiRef.current.getRowWithUpdatedValues(
-                params.id,
-                "",
-            )
             console.log(row)
             setSelectedRow((row) => [...row] as any[])
             event.defaultMuiPrevented = true;
+            }else{
+              console.log(row)
+              const error = validateRow(params.id)
+              setSelectedRow((row) => {
+                const updatedRow = row.map(r => r.id === params.id ? { ...r, _error: error } : r);
+                return updatedRow;
+              })
             }
             // console.log(row)
         },
@@ -157,8 +174,9 @@ const InvoiceTable: React.FC = () => {
           console.log(newRow)
 
           setSelectedRow((es) =>
-            es.map((e) => (e.id === rowToSave.id ? rowToSave : e))
+            es.map((e) => (e.id === originalRow.id ? rowToSave : e))
           );
+          console.log(rowToSave)
           return rowToSave;
         },
         [validateRow],
@@ -171,7 +189,7 @@ const InvoiceTable: React.FC = () => {
       (updateError: ProcessRowUpdateError) => {
         const errors = updateError.errors;
         const oldRow = updateError.row;
-
+        // console.log(errors)
         apiRef.current.updateRows([{ ...oldRow, _error: errors }]);
       },
       [apiRef]
@@ -186,9 +204,23 @@ const InvoiceTable: React.FC = () => {
 const editCombinedColumns = useMemo<GridColDef[]>(
     () => [
         { field: "invoiceNo", headerName: t("Invoice No"), editable: true, flex: 0.5 },
-        { field: "projectCode", headerName: t("Project Code"), editable: false, flex: 0.3 },
-        // { field: "projectName", headerName: t("Project Name"), flex: 1 },
-        // { field: "team", headerName: t("Team"), flex: 0.2 },
+        { field: "projectCode", 
+          headerName: t("Project Code"), 
+          editable: true, 
+          flex: 0.3,
+          renderEditCell(params: GridRenderEditCellParams<invoiceListRow, number>){
+            return(
+              <Autocomplete
+                disablePortal
+                options={[]}
+                sx={{width: '100%'}}
+                renderInput={(params) => <TextField {...params} />}
+              />
+
+            )
+              
+          }
+        },
         { field: "issuedDate", 
         headerName: t("Issue Date"), 
         editable: true, 
@@ -222,18 +254,18 @@ const editCombinedColumns = useMemo<GridColDef[]>(
     )
 
 const footer = (
-        <Box display="flex" gap={2} alignItems="center">
-          <Button
-            disableRipple
-            variant="outlined"
-            startIcon={<Add />}
-            onClick={addRow}
-            size="small"
-          >
-            {t("Create Invoice")}
-          </Button>
-        </Box>
-      );
+  <Box display="flex" gap={2} alignItems="center">
+    <Button
+      disableRipple
+      variant="outlined"
+      startIcon={<Add />}
+      onClick={addRow}
+      size="small"
+    >
+      {t("Create Invoice")}
+    </Button>
+  </Box>
+);
 
     return (
       <>