diff --git a/src/components/BeneficiaryDuplicatesTable.js b/src/components/BeneficiaryDuplicatesTable.js index 789f9d4..2809fa4 100644 --- a/src/components/BeneficiaryDuplicatesTable.js +++ b/src/components/BeneficiaryDuplicatesTable.js @@ -14,6 +14,8 @@ const useStyles = makeStyles((theme) => ({ tableHeader: theme.table.header, tableRow: theme.table.row, title: theme.paper.title, + tableDisabledRow: theme.table.disabledRow, + tableDisabledCell: theme.table.disabledCell, tableContainer: { overflow: 'auto', }, @@ -32,23 +34,36 @@ const useStyles = makeStyles((theme) => ({ deactivatedRow: { opacity: 0.5, }, + strikethrough: { + textDecoration: 'line-through', + }, })); function BeneficiaryDuplicatesTable({ - headers, rows, setAdditionalData, beneficiaryUuids, + headers, rows, setAdditionalData, completedData, }) { const classes = useStyles(); const [selectedCells, setSelectedCells] = useState([]); const [selectedRow, setSelectedRow] = useState(null); + const [dontMergeRows, setDontMergeRows] = useState([]); + const [fieldValues, setFieldValues] = useState({}); useEffect(() => { + const filteredIds = rows + .filter((row, index) => !dontMergeRows.includes(index)) + .map((row) => row.beneficiaryId); + const parsedFieldValues = selectedCells.reduce((accumulation, cell) => { + accumulation[cell.header] = cell.value ?? ''; + return accumulation; + }, {}); const additionalData = ( - { values: selectedCells.map((cell) => ({ [cell.header]: cell.value })), beneficiaryIds: beneficiaryUuids } + { values: parsedFieldValues, beneficiaryIds: filteredIds } ); + setFieldValues(parsedFieldValues); // eslint-disable-next-line max-len const additionalDataString = `{\\"values\\": ${JSON.stringify(additionalData.values).replace(/"/g, '\\"')},\\"beneficiaryIds\\": ${JSON.stringify(additionalData.beneficiaryIds).replace(/"/g, '\\"')}}`; setAdditionalData(additionalDataString); - }, [selectedCells]); + }, [selectedCells, dontMergeRows]); const isCellSelected = (rowIndex, header) => selectedCells.some( (cell) => cell.rowIndex === rowIndex && cell.header === header, ); @@ -74,11 +89,16 @@ function BeneficiaryDuplicatesTable({ return; } + if (dontMergeRows.includes(rowIndex)) { + return; + } + const isCellSelectedInColumn = selectedCells.some((cell) => cell.header === header); const isCellClicked = isCellSelected(rowIndex, header); if (isCellClicked) { clearCellSelection(rowIndex, header); + setSelectedRow(null); return; } @@ -108,12 +128,45 @@ function BeneficiaryDuplicatesTable({ } }; + const handleMergeCheckboxChange = (rowIndex) => { + if (!dontMergeRows.includes(rowIndex)) { + clearRowSelection(rowIndex); + setDontMergeRows([...dontMergeRows, rowIndex]); + } else { + const index = dontMergeRows.indexOf(rowIndex); + if (index !== -1) { + const newDontMergeRows = [...dontMergeRows]; + newDontMergeRows.splice(index, 1); + setDontMergeRows(newDontMergeRows); + } + } + }; + + // eslint-disable-next-line max-len + const shouldHoverCell = (rowIndex, header) => !isCellSelected(rowIndex, header) && header !== 'individual' && !dontMergeRows.includes(rowIndex); + const shouldDisableCell = (rowIndex) => dontMergeRows.includes(rowIndex); + const shouldCrossText = (rowIndex) => rows[rowIndex]?.is_deleted; + const isDontMereChecked = (rowIndex) => ( + (dontMergeRows.includes(rowIndex) && !completedData) || (completedData && !rows[rowIndex]?.is_deleted) + ); + + useEffect(() => { + if (completedData) { + const numberOfRows = Array.from(Array(rows.length).keys()); + clearAllCellSelection(); + setDontMergeRows(numberOfRows); + } + }, [completedData]); + return (