diff --git a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx index f05e44dcc..acf396f39 100644 --- a/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/pages/settings/Settings.tsx @@ -111,7 +111,6 @@ const Settings = () => { Setup properties for Golden record lists 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 82001fec3..66e25cecf 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 React, { useEffect, useState, FC } from 'react'; +import { useEffect, useState} from 'react'; import Box from '@mui/material/Box'; import { DataGrid, @@ -16,7 +16,8 @@ import SaveIcon from '@mui/icons-material/Save'; import CancelIcon from '@mui/icons-material/Close'; import { EditToolbar } from 'components/shared/EditToolBar'; import { formatNodeName, toSnakeCase, toUpperCase } from 'utils/helpers'; -import { Configuration } from 'types/Configuration'; +import { Configuration, CustomNode } from 'types/Configuration'; +import { useConfiguration } from 'hooks/useUIConfiguration'; interface RowData { id: string; @@ -28,33 +29,28 @@ interface RowData { fieldIndex: number; } -interface GoldenRecordListsProps { - goldenRecordList: any; -} -const GoldenRecordLists: FC = ({ goldenRecordList }) => { +const GoldenRecordLists = () => { const [rows, setRows] = useState([]); const [rowModesModel, setRowModesModel] = useState({}); - const [, setConfiguration] = useState(); + const { configuration, setConfiguration } = useConfiguration(); useEffect(() => { - if (goldenRecordList) { - const rowsWithIds = goldenRecordList.flatMap((node: { fields: any[]; nodeName: string }, nodeIndex: number) => { - return node.fields - ? node.fields.map((field, fieldIndex) => ({ - id: `${node.nodeName}_${nodeIndex}_${fieldIndex}`, - nodeName: node.nodeName, - fieldName: field.fieldName, - fieldType: field.fieldType, - csvCol: field.csvCol, - nodeIndex, - fieldIndex, - })) - : []; + if (configuration && configuration.additionalNodes) { + const rowsWithIds = configuration.additionalNodes.flatMap((node: CustomNode, nodeIndex: number) => { + return node.fields.map((field, fieldIndex) => ({ + id: `${node.name}_${nodeIndex}_${fieldIndex}`, + nodeName: node.name, + fieldName: field.fieldName, + fieldType: field.fieldType, + csvCol: field.source?.csvCol ?? 0, + nodeIndex, + fieldIndex, + })); }); setRows(rowsWithIds); } - }, [goldenRecordList]); + }, [configuration]); const handleEditClick = (id: GridRowId) => () => { setRowModesModel((prevModel) => ({ ...prevModel, [id]: { mode: GridRowModes.Edit } })); @@ -67,16 +63,16 @@ const GoldenRecordLists: FC = ({ goldenRecordList }) => } }; + + const handleUpdateConfiguration = (updatedRow: RowData, rowIndex: number) => { const storedConfiguration = localStorage.getItem('configuration'); const currentConfiguration = storedConfiguration ? JSON.parse(storedConfiguration) : {}; const updatedConfiguration = getUpdatedConfiguration(updatedRow, rowIndex, currentConfiguration); - localStorage.setItem( - 'configuration', - JSON.stringify(updatedConfiguration) - ) + localStorage.setItem('configuration', JSON.stringify(updatedConfiguration)); setConfiguration(updatedConfiguration); - } + }; + const getUpdatedConfiguration = (updatedRow: RowData, fieldIndex: number, currentConfig: Configuration): Configuration => { const nodeIndex = updatedRow.nodeIndex; const fieldName = toSnakeCase(updatedRow.fieldName); @@ -125,6 +121,7 @@ const GoldenRecordLists: FC = ({ goldenRecordList }) => return { ...updatedRow, id } as RowData; }; + const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { setRowModesModel(newRowModesModel); }; @@ -135,6 +132,10 @@ const GoldenRecordLists: FC = ({ goldenRecordList }) => } }; + const handleProcessRowUpdateError = (error: any) => { + console.error('Error during row update:', error); + }; + const columns: GridColDef[] = [ { field: 'Name', @@ -235,7 +236,7 @@ const GoldenRecordLists: FC = ({ goldenRecordList }) => }, }} > - {goldenRecordList && ( + {configuration && ( = ({ goldenRecordList }) => onRowModesModelChange={handleRowModesModelChange} onRowEditStop={handleRowEditStop} processRowUpdate={processRowUpdate} + onProcessRowUpdateError={handleProcessRowUpdateError} getRowId={(row) => row.id} slots={{ toolbar: EditToolbar, diff --git a/JeMPI_Apps/JeMPI_UI/src/test/settings/GoldenRecordLists.test.tsx b/JeMPI_Apps/JeMPI_UI/src/test/settings/GoldenRecordLists.test.tsx index eb6b4e998..52acedaca 100644 --- a/JeMPI_Apps/JeMPI_UI/src/test/settings/GoldenRecordLists.test.tsx +++ b/JeMPI_Apps/JeMPI_UI/src/test/settings/GoldenRecordLists.test.tsx @@ -4,19 +4,27 @@ import userEvent from '@testing-library/user-event'; import mockData from 'services/mockData'; import '@testing-library/jest-dom'; import GoldenRecordLists from 'pages/settings/goldenRecordLists/GoldenRecordLists'; +import { useConfiguration } from 'hooks/useUIConfiguration'; +jest.mock('hooks/useUIConfiguration', () => ({ + useConfiguration: jest.fn(), +})); describe('GoldenRecordLists', () => { - const goldenRecordListsWithIds = mockData.configuration.auxGoldenRecordFields.map((row, index) => ({ - ...row, - id: `row_${index}`, - })); + const mockConfiguration = mockData.configuration.additionalNodes; + + beforeEach(() => { + (useConfiguration as jest.Mock).mockReturnValue({ + configuration: mockConfiguration, + setConfiguration: jest.fn(), + }); + }); it('renders without crashing', () => { - render(); + render(); }); it('handles edit mode', async () => { - render(); + render(); const editIcon = await waitFor(() => document.getElementById('edit-button')); const saveButton = await waitFor(() => document.getElementById('save-button')); diff --git a/JeMPI_Apps/JeMPI_UI/src/types/Configuration.ts b/JeMPI_Apps/JeMPI_UI/src/types/Configuration.ts index 960447983..3704b6a72 100644 --- a/JeMPI_Apps/JeMPI_UI/src/types/Configuration.ts +++ b/JeMPI_Apps/JeMPI_UI/src/types/Configuration.ts @@ -9,8 +9,8 @@ export interface LinkMetaData { m: number; u: number; } -export type FieldType = 'String' | 'DateTime' | 'Bool' | 'Number'; +export type FieldType = 'String' | 'DateTime' | 'Bool' | 'Number'; export interface Field { id?: string;