Cu 86bzx34aj common settings add new fields

JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx

@@ -15,9 +15,11 @@ import { generateId } from 'utils/helpers'
 import Probabilistic from './probabilistic/Probabilistic'
 import { useConfig } from 'hooks/useConfig'
 import { useSnackbar } from 'notistack'
+import { useConfiguration } from 'hooks/useUIConfiguration'
 
 const Settings = () => {
   const [value, setValue] = useState(0)
+  const {configuration} = useConfiguration()
   const [configurationData, setConfigurationData] = useState(() => {
     const storedData = localStorage.getItem('configuration')
     return storedData

JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import Box from '@mui/material/Box'
+import { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
 import {
   DataGrid,
   GridColDef,
@@ -17,52 +17,57 @@ import CancelIcon from '@mui/icons-material/Close'
 import { EditToolbar } from 'components/shared/EditToolBar'
 import { processIndex, toSnakeCase, transformFieldName } from 'utils/helpers'
 import { useConfiguration } from 'hooks/useUIConfiguration'
-import { Configuration, LinkMetaData } from 'types/Configuration'
+import { Configuration, Field, LinkMetaData } from 'types/Configuration'
+import { IconButton, Tooltip, Switch } from '@mui/material'
 import { RowData } from '../deterministic/SourceView'
-import { Switch } from '@mui/material'
+import { useSnackbar } from 'notistack'
+import FieldDialog from './FieldDialog'
+import AddIcon from '@mui/icons-material/Add'
 
 const CommonSettings = () => {
-  const [rows, setRows] = useState<any>([])
-  const { configuration, setConfiguration } = useConfiguration()
-  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({})
+  const [rows, setRows] = useState<any>([]);
+  const { configuration, setConfiguration } = useConfiguration();
+  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
+  const [openFieldModal, setOpenFieldModal] = useState<boolean>(false);
+  const { enqueueSnackbar } = useSnackbar()
 
   useEffect(() => {
     if (configuration && configuration.demographicFields) {
-      const rowData = configuration?.demographicFields.map(
+      const rowData = configuration.demographicFields.map(
         (row: any, rowIndex: number) => ({
           id: rowIndex + 1,
           ...row,
           rowIndex,
           disable: row.isDisabled
         })
-      )
-      setRows(rowData)
+      );
+      setRows(rowData);
     }
-  }, [configuration])
+  }, [configuration]);
 
   const handleEditClick = (id: GridRowId) => () => {
-    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } })
-  }
+    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
+  };
 
   const handleSaveClick = (id: GridRowId) => () => {
-    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } })
-  }
+    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
+  };
 
   const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => {
-    if (!configuration) return
+    if (!configuration) return;
     const updatedConfiguration = getUpdatedConfiguration(
       updatedRow,
       rowIndex,
       configuration
-    )
-    localStorage.setItem('configuration', JSON.stringify(updatedConfiguration))
-    setConfiguration(updatedConfiguration)
+    );
+    localStorage.setItem('configuration', JSON.stringify(updatedConfiguration));
+    setConfiguration(updatedConfiguration);
     setRows((prevRows: any) =>
       prevRows.map((row: any) =>
         row.id === updatedRow.id ? { ...updatedRow } : row
       )
-    )
-  }
+    );
+  };
 
   const getUpdatedConfiguration = (
     updatedRow: any,
@@ -73,16 +78,16 @@ const CommonSettings = () => {
     const fieldName = toSnakeCase(updatedRow.fieldName)
 
     if (!newConfiguration.demographicFields) {
-      return currentConfiguration
+      return currentConfiguration;
     }
 
-    const fieldToUpdate = { ...newConfiguration.demographicFields[rowIndex] }
+    const fieldToUpdate = { ...newConfiguration.demographicFields[rowIndex] };
 
     if (!fieldToUpdate) {
-      return currentConfiguration
+      return currentConfiguration;
     }
 
-    fieldToUpdate.fieldName = fieldName
+    fieldToUpdate.fieldName = fieldName;
 
     if (updatedRow?.indexGoldenRecord) {
       if (!updatedRow.indexGoldenRecord.startsWith('@index(')) {
@@ -99,38 +104,44 @@ const CommonSettings = () => {
       fieldToUpdate.linkMetaData = {
         ...fieldToUpdate.linkMetaData,
         m: Number(updatedRow.m)
-      } as LinkMetaData
+      } as LinkMetaData;
     }
 
     if (updatedRow?.u) {
       fieldToUpdate.linkMetaData = {
         ...fieldToUpdate.linkMetaData,
         u: Number(updatedRow.u)
-      } as LinkMetaData
+      } as LinkMetaData;
     }
 
-    newConfiguration.demographicFields[rowIndex] = fieldToUpdate
+    newConfiguration.demographicFields[rowIndex] = fieldToUpdate;
 
-    return newConfiguration
-  }
+    return newConfiguration;
+  };
 
   const handleCancelClick = (id: GridRowId) => () => {
     setRowModesModel(prevRowModesModel => {
-      const newRowModesModel = { ...prevRowModesModel }
-      delete newRowModesModel[id]
-      return newRowModesModel
-    })
-  }
+      const newRowModesModel = { ...prevRowModesModel };
+      delete newRowModesModel[id];
+      return newRowModesModel;
+    });
+  };
 
   const handleRowEditStop: GridEventListener<'rowEditStop'> = ({ reason }) =>
-    reason === GridRowEditStopReasons.rowFocusOut
+    reason === GridRowEditStopReasons.rowFocusOut;
 
   const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
-    setRowModesModel(newRowModesModel)
-  }
+    setRowModesModel(newRowModesModel);
+  };
 
   const processRowUpdate = (newRow: GridRowModel) => {
-    const { id, ...updatedRow } = newRow
+    const isFieldNameValid = newRow?.fieldName && newRow.fieldName.toLowerCase() !== 'unknown_field';
+
+    if (!isFieldNameValid) {
+      enqueueSnackbar('Field name cannot be empty or unknown', { variant: 'error' });
+    }
+
+    const { id, ...updatedRow } = newRow;
     const updatedRows = rows.map((row: { id: any }) =>
       row.id === id ? ({ ...updatedRow, id } as RowData) : row
     )
@@ -188,6 +199,37 @@ const CommonSettings = () => {
     processRowUpdate(updatedRow)
   }
 
+  const handleAddNewRow = (fieldName: string) => {
+    const newRow: Field = {
+      id: (rows.length + 1).toString(),
+      fieldName,
+      fieldType: 'String',
+      linkMetaData: {
+        comparison: '',
+        comparisonLevels: [],
+        m: 0,
+        u: 0
+      },
+    };
+
+    if (configuration) {
+      const newConfiguration = {
+        ...configuration,
+        demographicFields: [...configuration.demographicFields, newRow]
+      }
+
+      localStorage.setItem('configuration', JSON.stringify(newConfiguration))
+      setConfiguration(newConfiguration)
+      setRows((prevRows: any) => [...prevRows, newRow])
+      setRowModesModel(prevRowModesModel => ({
+        ...prevRowModesModel,
+        [(newRow.id) as string]: { mode: GridRowModes.Edit, fieldToFocus: 'fieldName' }
+      }))
+    } else {
+      console.error("Configuration is null. Cannot add new row.")
+    }
+  }
+
   const columns: GridColDef[] = [
     {
       field: 'fieldName',
@@ -205,7 +247,7 @@ const CommonSettings = () => {
       width: 180,
       align: 'center',
       headerAlign: 'center',
-      editable: false
+      editable: true,
     },
     {
       field: 'indexGoldenRecord',
@@ -216,8 +258,8 @@ const CommonSettings = () => {
       headerAlign: 'center',
       editable: true,
       valueGetter: params => {
-        const indexGoldenRecord = params.row.indexGoldenRecord
-        return processIndex(indexGoldenRecord)
+        const indexGoldenRecord = params.row.indexGoldenRecord;
+        return processIndex(indexGoldenRecord);
       }
     },
     {
@@ -229,11 +271,11 @@ const CommonSettings = () => {
       align: 'center',
       headerAlign: 'center',
       valueGetter: params => {
-        const linkMetaData = params.row.linkMetaData
+        const linkMetaData = params.row.linkMetaData;
         if (linkMetaData && typeof linkMetaData.m === 'number') {
-          return linkMetaData.m.toFixed(7)
+          return linkMetaData.m.toFixed(7);
         }
-        return
+        return;
       }
     },
     {
@@ -245,9 +287,9 @@ const CommonSettings = () => {
       align: 'center',
       headerAlign: 'center',
       valueGetter: params => {
-        const linkMetaData = params.row.linkMetaData
+        const linkMetaData = params.row.linkMetaData;
         if (linkMetaData && typeof linkMetaData.u === 'number') {
-          return linkMetaData.u.toFixed(7)
+          return linkMetaData.u.toFixed(7);
         }
       }
     },
@@ -261,17 +303,19 @@ const CommonSettings = () => {
       width: 300,
       cellClassName: 'actions',
       getActions: ({ id }) => {
-        const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit
+        const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
+        const row = rows.find((row: any) => row.id === id);
+        const isFieldNameValid = row?.fieldName && row.fieldName.toLowerCase() !== 'unknown_field';
+
         if (isInEditMode) {
           return [
             <GridActionsCellItem
               icon={<SaveIcon />}
               id="save-button"
               label="Save"
-              sx={{
-                color: 'white'
-              }}
+              sx={{ color: 'white' }}
               onClick={handleSaveClick(id)}
+              disabled={!isFieldNameValid}
             />,
             <GridActionsCellItem
               icon={<CancelIcon />}
@@ -280,10 +324,11 @@ const CommonSettings = () => {
               className="textPrimary"
               onClick={handleCancelClick(id)}
               color="inherit"
+              disabled={!isFieldNameValid}
             />
-          ]
+          ];
         }
-
+      
         return [
           <GridActionsCellItem
             icon={<EditIcon />}
@@ -293,7 +338,7 @@ const CommonSettings = () => {
             onClick={handleEditClick(id)}
             color="inherit"
           />
-        ]
+        ];
       }
     },
     {
@@ -311,7 +356,7 @@ const CommonSettings = () => {
         )
       }
     }
-  ]
+  ];
 
   return (
     <Box
@@ -320,6 +365,18 @@ const CommonSettings = () => {
         width: '100%'
       }}
     >
+      <Box sx={{display:'flex', justifyContent:'flex-end', marginBottom:'20px', marginX:'135px'}}>
+      <Tooltip title="Add a new field" arrow>
+      <IconButton key="add-new-field" size='small' onClick={() => setOpenFieldModal(true)}>
+            <AddIcon />
+       </IconButton>
+       </Tooltip>
+      </Box>
+      <FieldDialog 
+        openFieldModal={openFieldModal} 
+        setOpenFieldModal={setOpenFieldModal} 
+        onSave={handleAddNewRow}
+      />
       {configuration && (
         <DataGrid
           rows={rows}
@@ -329,7 +386,10 @@ const CommonSettings = () => {
           onRowModesModelChange={handleRowModesModelChange}
           processRowUpdate={processRowUpdate}
           onRowEditStop={handleRowEditStop}
-          getRowId={row => row.id}
+          onProcessRowUpdateError={(error) => {
+            console.error(error);
+          }}
+          getRowId={(row) => row.id}
           slots={{
             toolbar: EditToolbar
           }}
@@ -339,7 +399,7 @@ const CommonSettings = () => {
         />
       )}
     </Box>
-  )
-}
+  );
+};
 
-export default CommonSettings
+export default CommonSettings;