Cu 86bz9pz5f save common fields to local storage

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

@@ -37,14 +37,14 @@ const Settings = () => {
     return () => {
       window.removeEventListener('storage', handleStorageChange);
     };
-  }, [configurationData]);
+  }, []);
 
   useEffect(() => {
     const storedData = localStorage.getItem('configuration');
     if (storedData) {
       setConfigurationData(generateId(JSON.parse(storedData)));
     }
-  }, [configurationData]);
+  }, []);
 
   return (
     <Grid container spacing={4}>
@@ -88,7 +88,7 @@ const Settings = () => {
             <Typography variant="h5" sx={{ py: 3 }}>
               Setup common properties
             </Typography>
-            <CommonSettings demographicData={configurationData.demographicFields} />
+            <CommonSettings />
           </CustomTabPanel>
           <CustomTabPanel value={value} index={1}>
             <Typography variant="h5" sx={{ py: 3 }}>
@@ -111,7 +111,6 @@ const Settings = () => {
               Setup properties for Golden record lists
             </Typography>
             <GoldenRecordLists
-              goldenRecordList={configurationData?.additionalNodes || []}
             />
           </CustomTabPanel>
           <CustomTabPanel value={value} index={4}>

JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx

@@ -104,32 +104,30 @@ const BlockingContent = ({
         transformRulesToRowData({ probabilistic: initialRules })
       )
     }
-  }, [configuration, linkingRules])
+  }, [configuration])
 
-  const handleUpdateConfiguration = useCallback(
-    (newRules: Rule[], ruleType: 'matchNotification' | 'link') => {
-      setConfiguration(prevConfig => {
-        if (!prevConfig) return prevConfig
-
-        const updatedConfig: Configuration = {
-          ...prevConfig,
-          rules: {
-            ...prevConfig.rules,
-            [ruleType]: {
-              ...prevConfig.rules[ruleType],
-              probabilistic: newRules
-            }
+  const handleUpdateConfiguration = (newRules: Rule[], ruleType: 'matchNotification' | 'link') => {
+    setConfiguration(prevConfig => {
+      if (!prevConfig) return prevConfig;
+
+      const updatedConfig: Configuration = {
+        ...prevConfig,
+        rules: {
+          ...prevConfig.rules,
+          [ruleType]: {
+            ...prevConfig.rules[ruleType],
+            probabilistic: newRules
           }
         }
-
-        localStorage.setItem('configuration', JSON.stringify(updatedConfig))
-        return updatedConfig
-      })
-
-      setProbabilisticRows(transformRulesToRowData({ probabilistic: newRules }))
-    },
-    [setConfiguration]
-  )
+      };
+
+      localStorage.setItem('configuration', JSON.stringify(updatedConfig));
+      return updatedConfig;
+    });
+
+    setProbabilisticRows(transformRulesToRowData({ probabilistic: newRules }));
+  };
+
 
   const handleAddRule = useCallback(
     (ruleType: 'matchNotification' | 'link') => {

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

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react'
 import Box from '@mui/material/Box'
 import {
   DataGrid,
@@ -13,66 +14,130 @@ import {
 import EditIcon from '@mui/icons-material/Edit'
 import SaveIcon from '@mui/icons-material/Save'
 import CancelIcon from '@mui/icons-material/Close'
-import { useEffect, useState } from 'react'
 import { EditToolbar } from 'components/shared/EditToolBar'
 import { processIndex, transformFieldName } from 'utils/helpers'
+import { useConfiguration } from 'hooks/useUIConfiguration'
+import { Configuration, LinkMetaData } from 'types/Configuration'
+import { RowData } from '../deterministic/SourceView'
 
-const CommonSettings = ({ demographicData }: { demographicData: any }) => {
-  const [rows, setRows] = useState(demographicData)
+const toSnakeCase = (str: string) => {
+  return str
+    .trim()
+    .replace(/\s+/g, '_')
+    .replace(/([a-z])([A-Z])/g, '$1_$2')
+    .toLowerCase()
+}
+
+const CommonSettings = () => {
+  const [rows, setRows] = useState<any>([])
+  const { configuration, setConfiguration } = useConfiguration()
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({})
 
   useEffect(() => {
-    const rowsWithIds = demographicData.map((row: any, index: number) => ({
-      ...row,
-      id: index.toString()
-    }))
-    setRows(rowsWithIds)
-  }, [demographicData])
+    if(configuration && configuration.demographicFields){
+      const rowData = configuration?.demographicFields.map((row: any, rowIndex: number) => ({
+        id: rowIndex + 1,
+        ...row,
+        rowIndex
+      }))
+      setRows(rowData)
+    }
+
+  }, [configuration])
 
   const handleEditClick = (id: GridRowId) => () => {
     setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } })
   }
 
   const handleSaveClick = (id: GridRowId) => () => {
-    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } })
+    const updatedRow = rows.find((row: { id: GridRowId }) => row.id === id)
+    if (updatedRow) {
+      setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } })    }
   }
 
-  const handleDeleteClick = (id: any) => () => {
-    setRows(rows?.filter((row: { id: any }) => row.id !== id))
-  }
-
-  const handleCancelClick = (id: GridRowId) => () => {
-    setRowModesModel({
-      ...rowModesModel,
-      [id]: { mode: GridRowModes.View, ignoreModifications: true }
+  const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => {
+    setConfiguration(previousConfiguration => {
+      if (!previousConfiguration) return previousConfiguration
+      const updatedConfiguration = getUpdatedConfiguration(
+        updatedRow,
+        rowIndex,
+        previousConfiguration
+      )
+      localStorage.setItem(
+        'configuration',
+        JSON.stringify(updatedConfiguration)
+      )
+      setConfiguration(updatedConfiguration)
+      return updatedConfiguration
     })
+  }
 
-    const editedRow = rows.find((row: { id: GridRowId }) => row.id === id)
-    if (editedRow!.isNew) {
-      setRows(rows.filter((row: { id: GridRowId }) => row.id !== id))
+  const getUpdatedConfiguration = (
+    updatedRow: any,
+    rowIndex: number,
+    currentConfiguration: Configuration
+  ): Configuration => {
+    const fieldName = toSnakeCase(updatedRow.fieldName);
+    if (!currentConfiguration.demographicFields) {
+      console.error('demographicFields is undefined');
+      return currentConfiguration;
+    }
+
+    const fieldToUpdate = currentConfiguration.demographicFields[rowIndex];
+
+    if (!fieldToUpdate) {
+      console.error(`No field found at row index ${rowIndex}`);
+      return currentConfiguration;
+    }
+
+    fieldToUpdate.fieldName = fieldName;
+
+    if (updatedRow?.indexGoldenRecord) {
+      fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})`;
+    }
+
+    if (updatedRow?.m) {
+      fieldToUpdate.linkMetaData = {
+        ...fieldToUpdate.linkMetaData,
+        m: Number(updatedRow.m)
+      } as LinkMetaData;
+    }
+
+    if (updatedRow?.u) {
+      fieldToUpdate.linkMetaData = {
+        ...fieldToUpdate.linkMetaData,
+        u: Number(updatedRow.u)
+      } as LinkMetaData;
     }
+
+    currentConfiguration.demographicFields[rowIndex] = fieldToUpdate;
+
+    return currentConfiguration;
   }
+
 
-  const processRowUpdate = (newRow: GridRowModel) => {
-    const { isNew, ...updatedRow } = newRow
-    setRows(
-      rows.map((row: { id: any }) => (row.id === newRow.id ? updatedRow : row))
-    )
-    return updatedRow
+  const handleCancelClick = (id: GridRowId) => () => {
+    setRowModesModel(prevRowModesModel => {
+      const newRowModesModel = { ...prevRowModesModel }
+      delete newRowModesModel[id]
+      return newRowModesModel
+    })
   }
 
+  const handleRowEditStop: GridEventListener<'rowEditStop'> = ({ reason }) =>
+    reason === GridRowEditStopReasons.rowFocusOut
+
   const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
     setRowModesModel(newRowModesModel)
   }
 
-  const handleRowEditStop: GridEventListener<'rowEditStop'> = (
-    params,
-    event
-  ) => {
-    if (params.reason === GridRowEditStopReasons.rowFocusOut) {
-      event.defaultMuiPrevented = true
-    }
-  }
+  const processRowUpdate = (newRow: GridRowModel) => {
+    const { id, ...updatedRow } = newRow;
+    const updatedRows = rows.map((row: { id: any }) => (row.id === id ? ({ ...updatedRow, id } as RowData) : row));
+    setRows(updatedRows);
+    handleUpdateConfiguration(updatedRow, updatedRow.rowIndex)
+    return { ...updatedRow, id } as RowData;
+  };
 
   const columns: GridColDef[] = [
     {
@@ -93,7 +158,6 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
       headerAlign: 'center',
       editable: false
     },
-
     {
       field: 'indexGoldenRecord',
       headerName: 'Index',
@@ -117,10 +181,10 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
       headerAlign: 'center',
       valueGetter: params => {
         const linkMetaData = params.row.linkMetaData
-        if (linkMetaData) {
+        if (linkMetaData && typeof linkMetaData.m === 'number') {
           return linkMetaData.m.toFixed(1)
         }
-        return ''
+        return
       }
     },
     {
@@ -133,10 +197,9 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
       headerAlign: 'center',
       valueGetter: params => {
         const linkMetaData = params.row.linkMetaData
-        if (linkMetaData) {
+        if (linkMetaData && typeof linkMetaData.u === 'number') {
           return linkMetaData.u.toFixed(2)
         }
-        return ''
       }
     },
     {
@@ -192,15 +255,16 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => {
         width: '100%'
       }}
     >
-      {demographicData && (
+      {configuration && (
         <DataGrid
           rows={rows}
           columns={columns}
           editMode="row"
           rowModesModel={rowModesModel}
           onRowModesModelChange={handleRowModesModelChange}
-          onRowEditStop={handleRowEditStop}
           processRowUpdate={processRowUpdate}
+          onRowEditStop={handleRowEditStop}
+          getRowId={row => row.id}
           slots={{
             toolbar: EditToolbar
           }}