| @@ -32,9 +32,17 @@ export default function ConsultantTable({recordList, applySearch}) { | |||||
| }); | }); | ||||
| useEffect(() => { | useEffect(() => { | ||||
| setPaginationModel({page: 0, pageSize: 10}); | |||||
| // Ensure each row has a unique 'id' field (required by DataGrid) | |||||
| setRows(recordList.map(row => ({ ...row, id: row.id || row.someUniqueKey }))); | |||||
| setPaginationModel({ page: 0, pageSize: 10 }); | |||||
| // Map rows and ensure unique 'id' | |||||
| const mappedRows = recordList.map(row => ({ | |||||
| ...row, | |||||
| id: row.id // assuming backend returns 'id' field | |||||
| })); | |||||
| setRows(mappedRows); | |||||
| // Important: Reset all edit modes when new data comes in | |||||
| setRowModesModel({}); | |||||
| }, [recordList]); | }, [recordList]); | ||||
| const handleRowEditStop = (params, event) => { | const handleRowEditStop = (params, event) => { | ||||
| @@ -74,22 +82,36 @@ export default function ConsultantTable({recordList, applySearch}) { | |||||
| }; | }; | ||||
| const processRowUpdate = async (newRow) => { | const processRowUpdate = async (newRow) => { | ||||
| // Optimistically update UI | |||||
| const updatedRow = { ...newRow }; | |||||
| try { | try { | ||||
| const response = await axios.post(`${apiPath}/consultant/save`, newRow); | const response = await axios.post(`${apiPath}/consultant/save`, newRow); | ||||
| if (response.status === 200) { | if (response.status === 200) { | ||||
| // If backend returns updated data, use it | |||||
| return response.data || updatedRow; | |||||
| const savedRow = response.data || newRow; | |||||
| // Exit edit mode | |||||
| setRowModesModel((old) => ({ | |||||
| ...old, | |||||
| [newRow.id]: { mode: GridRowModes.View }, | |||||
| })); | |||||
| // Optional: full refresh for consistency | |||||
| applySearch(); | |||||
| return savedRow; | |||||
| } | } | ||||
| } catch (err) { | } catch (err) { | ||||
| console.error("Save error:", err); | console.error("Save error:", err); | ||||
| alert("Failed to save changes. Please try again."); | |||||
| // On failure, you could revert, but here we keep the edited value | |||||
| alert("Failed to save consultant."); | |||||
| // Revert UI on error | |||||
| setRowModesModel((old) => ({ | |||||
| ...old, | |||||
| [newRow.id]: { mode: GridRowModes.View, ignoreModifications: true }, | |||||
| })); | |||||
| } | } | ||||
| return updatedRow; | |||||
| // Fallback (should not reach here) | |||||
| return newRow; | |||||
| }; | }; | ||||
| const columns = [ | const columns = [ | ||||