From fb3a2b6622e5a89059db20bbcd530d5d9d8bf9d8 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Wed, 26 Jun 2024 08:42:59 +0200 Subject: [PATCH 1/9] added handle update config --- .../settings/blocking/BlockingContent.tsx | 2 +- .../src/pages/settings/common/Common.tsx | 122 +++++++++++++----- 2 files changed, 89 insertions(+), 35 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx index 52deeef19..a41faff27 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx @@ -128,7 +128,7 @@ const BlockingContent = ({ setProbabilisticRows(transformRulesToRowData({ probabilistic: newRules })) }, - [setConfiguration] + [configuration] ) const handleAddRule = useCallback( diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index a5f5b7442..8e3837ce8 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -1,3 +1,4 @@ +import { useCallback, useState } from 'react' import Box from '@mui/material/Box' import { DataGrid, @@ -13,21 +14,26 @@ 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' + +const toSnakeCase = (str: string) => { + return str + .replace(/\s+/g, '_') + .replace(/([a-z])([A-Z])/g, '$1_$2') + .toLowerCase() +} const CommonSettings = ({ demographicData }: { demographicData: any }) => { - const [rows, setRows] = useState(demographicData) + const { configuration, setConfiguration } = useConfiguration() const [rowModesModel, setRowModesModel] = useState({}) - - useEffect(() => { - const rowsWithIds = demographicData.map((row: any, index: number) => ({ - ...row, - id: index.toString() - })) - setRows(rowsWithIds) - }, [demographicData]) + const [rows, setRows] = useState(() => + demographicData.map((row: any, rowIndex: number) => { + return { id: rowIndex + 1, ...row, rowIndex } + }) + ) const handleEditClick = (id: GridRowId) => () => { setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) @@ -35,34 +41,67 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { const handleSaveClick = (id: GridRowId) => () => { setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + const updatedRow = rows.find(row => row.id === id) + console.log('inside handle save click', updatedRow) + handleUpdateConfiguration(updatedRow, updatedRow.rowIndex) } - const handleDeleteClick = (id: any) => () => { - setRows(rows?.filter((row: { id: any }) => row.id !== id)) + const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => { + setConfiguration(previousConfiguration => { + if (!previousConfiguration) return previousConfiguration + const updatedConfiguration = getUpdatedConfiguration( + updatedRow, + rowIndex, + previousConfiguration + ) + localStorage.setItem( + 'configuration', + JSON.stringify(updatedConfiguration) + ) + return updatedConfiguration + }) } - const handleCancelClick = (id: GridRowId) => () => { - setRowModesModel({ - ...rowModesModel, - [id]: { mode: GridRowModes.View, ignoreModifications: true } - }) + const getUpdatedConfiguration = ( + updatedRow: any, + rowIndex: number, + currentConfiguration: Configuration + ): Configuration => { + const fieldName = toSnakeCase(updatedRow.fieldName) - const editedRow = rows.find((row: { id: GridRowId }) => row.id === id) - if (editedRow!.isNew) { - setRows(rows.filter((row: { id: GridRowId }) => row.id !== id)) + const fieldToUpdate = currentConfiguration.demographicFields[rowIndex] + + fieldToUpdate.fieldName = fieldName + + if (updatedRow?.indexGoldenRecord) { + fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})` } - } - const processRowUpdate = (newRow: GridRowModel) => { - const { isNew, ...updatedRow } = newRow - setRows( - rows.map((row: { id: any }) => (row.id === newRow.id ? updatedRow : row)) - ) - return updatedRow + if (updatedRow?.m) { + fieldToUpdate.linkMetaData = { + ...fieldToUpdate.linkMetaData, + m: updatedRow.m as number + } as LinkMetaData + } + + if (updatedRow?.u) { + fieldToUpdate.linkMetaData = { + ...fieldToUpdate.linkMetaData, + u: updatedRow.u as number + } as LinkMetaData + } + console.log('field to update', fieldToUpdate) + currentConfiguration.demographicFields[rowIndex] = fieldToUpdate + + return currentConfiguration } - const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { - setRowModesModel(newRowModesModel) + const handleCancelClick = (id: GridRowId) => () => { + setRowModesModel(prevRowModesModel => { + const newRowModesModel = { ...prevRowModesModel } + delete newRowModesModel[id] + return newRowModesModel + }) } const handleRowEditStop: GridEventListener<'rowEditStop'> = ( @@ -74,6 +113,22 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { } } + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { + setRowModesModel(newRowModesModel) + } + + const handleProcessRowUpdate = ( + newRow: GridRowModel, + oldRow: GridRowModel + ) => { + setRows( + rows.map(row => + row.id === oldRow.id ? { ...newRow, rowIndex: oldRow.rowIndex } : row + ) + ) // Preserve rowIndex + return newRow + } + const columns: GridColDef[] = [ { field: 'fieldName', @@ -93,7 +148,6 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { headerAlign: 'center', editable: false }, - { field: 'indexGoldenRecord', headerName: 'Index', @@ -199,12 +253,12 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { editMode="row" rowModesModel={rowModesModel} onRowModesModelChange={handleRowModesModelChange} + processRowUpdate={handleProcessRowUpdate} onRowEditStop={handleRowEditStop} - processRowUpdate={processRowUpdate} - slots={{ - toolbar: EditToolbar + components={{ + Toolbar: EditToolbar }} - slotProps={{ + componentsProps={{ toolbar: { setRows, setRowModesModel } }} /> From d2638846b58425d5b9e70f661f328821bd1691f1 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Wed, 26 Jun 2024 10:19:08 +0200 Subject: [PATCH 2/9] removed dependecies --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 4 +- .../settings/blocking/BlockingContent.tsx | 44 +++++++++---------- 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index e6fd833d7..f05e44dcc 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/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 ( diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx index a41faff27..dc7429fe1 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/blocking/BlockingContent.tsx +++ b/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 })) - }, - [configuration] - ) + }; + + localStorage.setItem('configuration', JSON.stringify(updatedConfig)); + return updatedConfig; + }); + + setProbabilisticRows(transformRulesToRowData({ probabilistic: newRules })); + }; + const handleAddRule = useCallback( (ruleType: 'matchNotification' | 'link') => { From f83850b257acf8911e8f117d33df59300aab6f40 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Wed, 26 Jun 2024 13:31:12 +0200 Subject: [PATCH 3/9] updated handle save --- .../src/pages/settings/common/Common.tsx | 59 ++++++++++--------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index 8e3837ce8..0074fc914 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import Box from '@mui/material/Box' import { DataGrid, @@ -21,6 +21,7 @@ import { Configuration, LinkMetaData } from 'types/Configuration' const toSnakeCase = (str: string) => { return str + .trim() .replace(/\s+/g, '_') .replace(/([a-z])([A-Z])/g, '$1_$2') .toLowerCase() @@ -35,15 +36,23 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { }) ) - const handleEditClick = (id: GridRowId) => () => { - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) - } + const handleEditClick = useCallback((id: GridRowId) => { + setRowModesModel(prevRowModesModel => ({ + ...prevRowModesModel, + [id]: { mode: GridRowModes.Edit } + })) + }, []) - const handleSaveClick = (id: GridRowId) => () => { - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) + const handleSaveClick = (id: GridRowId) => { const updatedRow = rows.find(row => row.id === id) - console.log('inside handle save click', updatedRow) - handleUpdateConfiguration(updatedRow, updatedRow.rowIndex) + if (updatedRow) { + const newRowModesModel = { + ...rowModesModel, + [id]: { mode: GridRowModes.View } + } + setRowModesModel(newRowModesModel) + handleUpdateConfiguration(updatedRow, updatedRow.rowIndex) + } } const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => { @@ -80,17 +89,16 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { if (updatedRow?.m) { fieldToUpdate.linkMetaData = { ...fieldToUpdate.linkMetaData, - m: updatedRow.m as number + m: Number(updatedRow.m) } as LinkMetaData } if (updatedRow?.u) { fieldToUpdate.linkMetaData = { ...fieldToUpdate.linkMetaData, - u: updatedRow.u as number + u: Number(updatedRow.u) } as LinkMetaData } - console.log('field to update', fieldToUpdate) currentConfiguration.demographicFields[rowIndex] = fieldToUpdate return currentConfiguration @@ -104,14 +112,8 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { }) } - const handleRowEditStop: GridEventListener<'rowEditStop'> = ( - params, - event - ) => { - if (params.reason === GridRowEditStopReasons.rowFocusOut) { - event.defaultMuiPrevented = true - } - } + const handleRowEditStop: GridEventListener<'rowEditStop'> = ({ reason }) => + reason === GridRowEditStopReasons.rowFocusOut const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { setRowModesModel(newRowModesModel) @@ -125,7 +127,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { rows.map(row => row.id === oldRow.id ? { ...newRow, rowIndex: oldRow.rowIndex } : row ) - ) // Preserve rowIndex + ) return newRow } @@ -171,10 +173,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 } }, { @@ -187,10 +189,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 '' } }, { @@ -202,8 +203,8 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { width: 300, cellClassName: 'actions', getActions: ({ id }) => { - const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit - if (isInEditMode) { + const rowMode = rowModesModel[id] + if (rowMode && rowMode.mode === GridRowModes.Edit) { return [ } @@ -212,14 +213,14 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { sx={{ color: 'white' }} - onClick={handleSaveClick(id)} + onClick={() => handleSaveClick(id)} />, } id="cancel-button" label="Cancel" className="textPrimary" - onClick={handleCancelClick(id)} + onClick={() => handleCancelClick(id)} color="inherit" /> ] @@ -231,7 +232,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { id="edit-button" label="Edit" className="textPrimary" - onClick={handleEditClick(id)} + onClick={() => handleEditClick(id)} color="inherit" /> ] From fb12606eb2a868a7d056fd544b94d4264e4322e5 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Wed, 26 Jun 2024 22:40:02 +0200 Subject: [PATCH 4/9] refactored processRowUpdate --- .../src/pages/settings/common/Common.tsx | 67 +++++++++---------- 1 file changed, 32 insertions(+), 35 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index 0074fc914..5aa4d10bd 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -18,6 +18,7 @@ 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 toSnakeCase = (str: string) => { return str @@ -28,29 +29,27 @@ const toSnakeCase = (str: string) => { } const CommonSettings = ({ demographicData }: { demographicData: any }) => { + const [rows, setRows] = useState([]) const { configuration, setConfiguration } = useConfiguration() const [rowModesModel, setRowModesModel] = useState({}) - const [rows, setRows] = useState(() => - demographicData.map((row: any, rowIndex: number) => { - return { id: rowIndex + 1, ...row, rowIndex } - }) - ) - const handleEditClick = useCallback((id: GridRowId) => { - setRowModesModel(prevRowModesModel => ({ - ...prevRowModesModel, - [id]: { mode: GridRowModes.Edit } + useEffect(() => { + const rowData = demographicData.map((row: any, rowIndex: number) => ({ + id: rowIndex + 1, + ...row, + rowIndex })) - }, []) + setRows(rowData) + }, [demographicData]) + + const handleEditClick = (id: GridRowId) => () => { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } }) + } - const handleSaveClick = (id: GridRowId) => { - const updatedRow = rows.find(row => row.id === id) + const handleSaveClick = (id: GridRowId) => () => { + const updatedRow = rows.find((row: { id: GridRowId }) => row.id === id) if (updatedRow) { - const newRowModesModel = { - ...rowModesModel, - [id]: { mode: GridRowModes.View } - } - setRowModesModel(newRowModesModel) + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) handleUpdateConfiguration(updatedRow, updatedRow.rowIndex) } } @@ -119,16 +118,13 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { setRowModesModel(newRowModesModel) } - const handleProcessRowUpdate = ( - newRow: GridRowModel, - oldRow: GridRowModel - ) => { - setRows( - rows.map(row => - row.id === oldRow.id ? { ...newRow, rowIndex: oldRow.rowIndex } : row - ) + const processRowUpdate = (newRow: GridRowModel) => { + const { id, ...updatedRow } = newRow + const updatedRows = rows.map((row: { id: any }) => + row.id === id ? ({ ...updatedRow, id } as RowData) : row ) - return newRow + setRows(updatedRows) + return { ...updatedRow, id } as RowData } const columns: GridColDef[] = [ @@ -203,8 +199,8 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { width: 300, cellClassName: 'actions', getActions: ({ id }) => { - const rowMode = rowModesModel[id] - if (rowMode && rowMode.mode === GridRowModes.Edit) { + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + if (isInEditMode) { return [ } @@ -213,14 +209,14 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { sx={{ color: 'white' }} - onClick={() => handleSaveClick(id)} + onClick={handleSaveClick(id)} />, } id="cancel-button" label="Cancel" className="textPrimary" - onClick={() => handleCancelClick(id)} + onClick={handleCancelClick(id)} color="inherit" /> ] @@ -232,7 +228,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { id="edit-button" label="Edit" className="textPrimary" - onClick={() => handleEditClick(id)} + onClick={handleEditClick(id)} color="inherit" /> ] @@ -254,12 +250,13 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { editMode="row" rowModesModel={rowModesModel} onRowModesModelChange={handleRowModesModelChange} - processRowUpdate={handleProcessRowUpdate} + processRowUpdate={processRowUpdate} onRowEditStop={handleRowEditStop} - components={{ - Toolbar: EditToolbar + getRowId={row => row.id} + slots={{ + toolbar: EditToolbar }} - componentsProps={{ + slotProps={{ toolbar: { setRows, setRowModesModel } }} /> From adc391688a406b67452231d04d7b5f9c57dd34f1 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Mon, 1 Jul 2024 08:43:19 +0200 Subject: [PATCH 5/9] refactored golden record lists --- .../goldenRecordLists/GoldenRecordLists.tsx | 148 +++++++++++------- 1 file changed, 92 insertions(+), 56 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx index 51905c8ad..b6cd08bb6 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/goldenRecordLists/GoldenRecordLists.tsx @@ -1,4 +1,4 @@ -import Box from '@mui/material/Box' +import Box from '@mui/material/Box'; import { DataGrid, GridColDef, @@ -9,78 +9,114 @@ import { GridRowModes, GridRowModesModel, GridActionsCellItem -} from '@mui/x-data-grid' -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 { formatNodeName, toUpperCase } from 'utils/helpers' +} from '@mui/x-data-grid'; +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 { formatNodeName, toSnakeCase, toUpperCase } from 'utils/helpers'; +import { Configuration } from 'types/Configuration'; interface RowData { - id: string - nodeName: string - fieldName: string - fieldType: string - csvCol: number + id: string; + nodeName: string; + fieldName: string; + fieldType: string; + csvCol: number; } const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { - const [rows, setRows] = useState([]) - const [rowModesModel, setRowModesModel] = useState({}) + const [rows, setRows] = useState([]); + const [rowModesModel, setRowModesModel] = useState({}); + const [configuration, setConfiguration] = useState(); useEffect(() => { if (goldenRecordList) { const rowsWithIds = goldenRecordList.flatMap( - (node: { fields: any[]; nodeName: string }, index: number) => { + (node: { fields: any[]; nodeName: string }, nodeIndex: number) => { return node.fields ? node.fields.map((field, fieldIndex) => ({ - id: `${node.nodeName}_${index}_${fieldIndex}`, + id: `${node.nodeName}_${nodeIndex}_${fieldIndex}`, nodeName: node.nodeName, fieldName: field.fieldName, fieldType: field.fieldType, - csvCol: field.csvCol + csvCol: field.csvCol, + nodeIndex, + fieldIndex })) - : [] + : []; } - ) - setRows(rowsWithIds) + ); + + setRows(rowsWithIds); } - }, [goldenRecordList]) + }, [goldenRecordList]); 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 } }) - } + const updatedRow = rows.find((row: { id: GridRowId; }) => row.id === id); + + if (updatedRow) { + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }); + handleUpdateConfiguration(updatedRow, updatedRow.fieldIndex); + } + }; + + const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => { + + setConfiguration(previousConfiguration => { + if (!previousConfiguration) return previousConfiguration; + const updatedConfiguration = getUpdatedConfiguration(updatedRow, rowIndex, previousConfiguration); + localStorage.setItem('configuration', JSON.stringify(updatedConfiguration)); + return updatedConfiguration; + }); + }; + + const getUpdatedConfiguration = ( + updatedRow: any, + rowIndex: number, + currentConfiguration: Configuration + ): Configuration => { + + const fieldName = toSnakeCase(updatedRow.fieldName); + const fieldToUpdate = { ...currentConfiguration.additionalNodes[rowIndex], fieldName }; + const updatedAdditionalNodes = [...currentConfiguration.additionalNodes]; + updatedAdditionalNodes[rowIndex] = fieldToUpdate; + + return { + ...currentConfiguration, + additionalNodes: updatedAdditionalNodes + }; + }; const handleCancelClick = (id: GridRowId) => () => { setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View, ignoreModifications: true } - }) - } + }); + }; const processRowUpdate = (newRow: GridRowModel) => { - const { id, ...updatedRow } = newRow - setRows(rows.map(row => (row.id === id ? updatedRow as RowData : row))) - return updatedRow as RowData - } + const { id, ...updatedRow } = newRow; + const updatedRows = rows.map((row: { id: any; }) => (row.id === id ? { ...updatedRow, id } as RowData : row)); + setRows(updatedRows); + console.log('Row updated:', updatedRow); + return { ...updatedRow, id } as RowData; + }; const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { - setRowModesModel(newRowModesModel) - } + setRowModesModel(newRowModesModel); + }; - const handleRowEditStop: GridEventListener<'rowEditStop'> = ( - params, - event - ) => { + const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => { if (params.reason === GridRowEditStopReasons.rowFocusOut) { - event.defaultMuiPrevented = true + event.defaultMuiPrevented = true; } - } + }; const columns: GridColDef[] = [ { @@ -90,9 +126,9 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { editable: true, align: 'left', headerAlign: 'left', - valueGetter: params => { - if (params.row.fieldName === 'patient') return '' - else return formatNodeName(params.row.nodeName) + valueGetter: (params) => { + if (params.row.fieldName === 'patient') return ''; + else return formatNodeName(params.row.nodeName); } }, { @@ -103,7 +139,7 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { align: 'center', headerAlign: 'center', editable: true, - valueGetter: params => toUpperCase(params.row.fieldName) + valueGetter: (params) => toUpperCase(params.row.fieldName) }, { field: 'fieldType', @@ -113,7 +149,7 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { align: 'center', headerAlign: 'center', editable: false, - valueGetter: params => params.row.fieldType + valueGetter: (params) => params.row.fieldType }, { field: 'csvCol', @@ -123,7 +159,7 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { align: 'center', headerAlign: 'center', editable: true, - valueGetter: params => params.row.csvCol + valueGetter: (params) => params.row.csvCol }, { field: 'actions', @@ -134,16 +170,14 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { width: 300, cellClassName: 'actions', getActions: ({ id }) => { - const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit + const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit; if (isInEditMode) { return [ } id="save-button" label="Save" - sx={{ - color: 'white' - }} + sx={{ color: 'white' }} onClick={handleSaveClick(id)} />, { onClick={handleCancelClick(id)} color="inherit" /> - ] + ]; } return [ @@ -166,10 +200,10 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { onClick={handleEditClick(id)} color="inherit" /> - ] + ]; } } - ] + ]; return ( { rowModesModel={rowModesModel} onRowModesModelChange={handleRowModesModelChange} onRowEditStop={handleRowEditStop} + processRowUpdate={processRowUpdate} + getRowId={(row) => row.id} slots={{ toolbar: EditToolbar }} @@ -201,7 +237,7 @@ const GoldenRecordLists = ({ goldenRecordList }: { goldenRecordList: any }) => { /> )} - ) -} + ); +}; -export default GoldenRecordLists \ No newline at end of file +export default GoldenRecordLists; From 2e8815f00b466a409642b418162dbf1594f5dc2d Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Tue, 2 Jul 2024 19:32:11 +0200 Subject: [PATCH 6/9] updated get configuration --- .../src/pages/settings/common/Common.tsx | 53 +++++++++++-------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index 5aa4d10bd..081db1b7a 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -62,6 +62,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { rowIndex, previousConfiguration ) + console.log('updating config', updatedRow) localStorage.setItem( 'configuration', JSON.stringify(updatedConfiguration) @@ -75,33 +76,44 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { rowIndex: number, currentConfiguration: Configuration ): Configuration => { - const fieldName = toSnakeCase(updatedRow.fieldName) - - const fieldToUpdate = currentConfiguration.demographicFields[rowIndex] - - fieldToUpdate.fieldName = fieldName - + 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})` + fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})`; } - + if (updatedRow?.m) { 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; } - currentConfiguration.demographicFields[rowIndex] = fieldToUpdate - - return currentConfiguration + + currentConfiguration.demographicFields[rowIndex] = fieldToUpdate; + + return currentConfiguration; } + const handleCancelClick = (id: GridRowId) => () => { setRowModesModel(prevRowModesModel => { @@ -119,13 +131,12 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { } 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) - return { ...updatedRow, id } as RowData - } + const { id, ...updatedRow } = newRow; + const updatedRows = rows.map((row: { id: any }) => (row.id === id ? ({ ...updatedRow, id } as RowData) : row)); + setRows(updatedRows); + + return { ...updatedRow, id } as RowData; + }; const columns: GridColDef[] = [ { From ca18740c23d1acf85bea641b4d4b7d6ac72df3a4 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Tue, 2 Jul 2024 21:49:31 +0200 Subject: [PATCH 7/9] updated unit test, removed props from common settings --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 3 +- .../src/pages/settings/common/Common.tsx | 29 ++++++++++--------- .../src/test/settings/CommonSettings.test.tsx | 17 +++++++++-- 3 files changed, 30 insertions(+), 19 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index f05e44dcc..14869cf7d 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -88,7 +88,7 @@ const Settings = () => { Setup common properties - + @@ -111,7 +111,6 @@ const Settings = () => { Setup properties for Golden record lists diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index 081db1b7a..f9b41ada6 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -28,19 +28,22 @@ const toSnakeCase = (str: string) => { .toLowerCase() } -const CommonSettings = ({ demographicData }: { demographicData: any }) => { +const CommonSettings = () => { const [rows, setRows] = useState([]) const { configuration, setConfiguration } = useConfiguration() const [rowModesModel, setRowModesModel] = useState({}) useEffect(() => { - const rowData = demographicData.map((row: any, rowIndex: number) => ({ - id: rowIndex + 1, - ...row, - rowIndex - })) - setRows(rowData) - }, [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 } }) @@ -49,9 +52,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { const handleSaveClick = (id: GridRowId) => () => { const updatedRow = rows.find((row: { id: GridRowId }) => row.id === id) if (updatedRow) { - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) - handleUpdateConfiguration(updatedRow, updatedRow.rowIndex) - } + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) } } const handleUpdateConfiguration = (updatedRow: any, rowIndex: number) => { @@ -62,11 +63,11 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { rowIndex, previousConfiguration ) - console.log('updating config', updatedRow) localStorage.setItem( 'configuration', JSON.stringify(updatedConfiguration) ) + setConfiguration(updatedConfiguration) return updatedConfiguration }) } @@ -134,7 +135,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { 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; }; @@ -254,7 +255,7 @@ const CommonSettings = ({ demographicData }: { demographicData: any }) => { width: '100%' }} > - {demographicData && ( + {configuration && ( ({ + useConfiguration: jest.fn(), +})); describe('CommonSettings Component', () => { - const demographicWithIds = mockData.configuration.demographicFields.map((row, index) => ({ + const configData = mockData.configuration.demographicFields.map((row, index) => ({ ...row, id: `row_${index}`, })); + beforeEach(() => { + (useConfiguration as jest.Mock).mockReturnValue({ + configuration: configData, + setConfiguration: jest.fn(), + }); + }); it('renders without crashing', () => { - render(); + render(); }); it('handles edit mode', async () => { - render(); + render(); const editIcon = document.getElementById('edit-button'); const saveButton = document.getElementById('save-button'); const cancelButton = document.getElementById('cancel-button'); From 41d0eff45f61dcd4a782f065b28a91b7e5529ee3 Mon Sep 17 00:00:00 2001 From: NyashaMuusha Date: Thu, 4 Jul 2024 11:05:59 +0200 Subject: [PATCH 8/9] refactored handle update configuration --- .../JeMPI_UI/src/pages/settings/Settings.tsx | 3 +- .../src/pages/settings/common/Common.tsx | 104 ++++++++---------- 2 files changed, 45 insertions(+), 62 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index 14869cf7d..46a3fdd88 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -110,8 +110,7 @@ const Settings = () => { Setup properties for Golden record lists - + { - return str - .trim() - .replace(/\s+/g, '_') - .replace(/([a-z])([A-Z])/g, '$1_$2') - .toLowerCase() -} - const CommonSettings = () => { const [rows, setRows] = useState([]) const { configuration, setConfiguration } = useConfiguration() const [rowModesModel, setRowModesModel] = useState({}) useEffect(() => { - if(configuration && configuration.demographicFields){ - const rowData = configuration?.demographicFields.map((row: any, rowIndex: number) => ({ - id: rowIndex + 1, - ...row, - rowIndex - })) + 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) => () => { @@ -50,26 +43,18 @@ const CommonSettings = () => { } const handleSaveClick = (id: GridRowId) => () => { - const updatedRow = rows.find((row: { id: GridRowId }) => row.id === id) - if (updatedRow) { - setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) } + setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }) } 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 - }) + if (!configuration) return + const updatedConfiguration = getUpdatedConfiguration( + updatedRow, + rowIndex, + configuration + ) + localStorage.setItem('configuration', JSON.stringify(updatedConfiguration)) + setConfiguration(updatedConfiguration) } const getUpdatedConfiguration = ( @@ -77,44 +62,41 @@ const CommonSettings = () => { rowIndex: number, currentConfiguration: Configuration ): Configuration => { - const fieldName = toSnakeCase(updatedRow.fieldName); + const fieldName = toSnakeCase(updatedRow.fieldName) if (!currentConfiguration.demographicFields) { - console.error('demographicFields is undefined'); - return currentConfiguration; + return currentConfiguration } - - const fieldToUpdate = currentConfiguration.demographicFields[rowIndex]; - + + const fieldToUpdate = currentConfiguration.demographicFields[rowIndex] + if (!fieldToUpdate) { - console.error(`No field found at row index ${rowIndex}`); - return currentConfiguration; + return currentConfiguration } - - fieldToUpdate.fieldName = fieldName; - + + fieldToUpdate.fieldName = fieldName + if (updatedRow?.indexGoldenRecord) { - fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})`; + fieldToUpdate.indexGoldenRecord = `@index(${updatedRow.indexGoldenRecord})` } - + if (updatedRow?.m) { 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 } - - currentConfiguration.demographicFields[rowIndex] = fieldToUpdate; - - return currentConfiguration; + + currentConfiguration.demographicFields[rowIndex] = fieldToUpdate + + return currentConfiguration } - const handleCancelClick = (id: GridRowId) => () => { setRowModesModel(prevRowModesModel => { @@ -132,12 +114,14 @@ const CommonSettings = () => { } 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); + 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; - }; + return { ...updatedRow, id } as RowData + } const columns: GridColDef[] = [ { From 3387e1898c12ae1eecf7a7c030d6c5f5638cc3de Mon Sep 17 00:00:00 2001 From: Matthew Erispe Date: Wed, 10 Jul 2024 12:30:06 +0200 Subject: [PATCH 9/9] update m and u decimal places to 7 --- JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx index 8614bc5ad..5adbce1a8 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/common/Common.tsx @@ -166,7 +166,7 @@ const CommonSettings = () => { valueGetter: params => { const linkMetaData = params.row.linkMetaData if (linkMetaData && typeof linkMetaData.m === 'number') { - return linkMetaData.m.toFixed(1) + return linkMetaData.m.toFixed(7) } return } @@ -182,7 +182,7 @@ const CommonSettings = () => { valueGetter: params => { const linkMetaData = params.row.linkMetaData if (linkMetaData && typeof linkMetaData.u === 'number') { - return linkMetaData.u.toFixed(2) + return linkMetaData.u.toFixed(7) } } },