diff --git a/src/components/BeneficiaryDuplicatesTable.js b/src/components/BeneficiaryDuplicatesTable.js new file mode 100644 index 0000000..789f9d4 --- /dev/null +++ b/src/components/BeneficiaryDuplicatesTable.js @@ -0,0 +1,158 @@ +/* eslint-disable react/no-array-index-key */ +import React, { useState, useEffect } from 'react'; +import { + makeStyles, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Checkbox, +} from '@material-ui/core'; +import { + FormattedMessage, +} from '@openimis/fe-core'; + +const useStyles = makeStyles((theme) => ({ + paper: theme.paper.paper, + table: theme.table, + tableTitle: theme.table.title, + tableHeader: theme.table.header, + tableRow: theme.table.row, + title: theme.paper.title, + tableContainer: { + overflow: 'auto', + }, + hoverableCell: { + '&:hover': { + backgroundColor: '#f0f0f0', + }, + cursor: 'pointer', + }, + selectedCell: { + backgroundColor: '#a1caf1', + }, + checkboxCell: { + textAlign: 'center', + }, + deactivatedRow: { + opacity: 0.5, + }, +})); + +function BeneficiaryDuplicatesTable({ + headers, rows, setAdditionalData, beneficiaryUuids, +}) { + const classes = useStyles(); + const [selectedCells, setSelectedCells] = useState([]); + const [selectedRow, setSelectedRow] = useState(null); + + useEffect(() => { + const additionalData = ( + { values: selectedCells.map((cell) => ({ [cell.header]: cell.value })), beneficiaryIds: beneficiaryUuids } + ); + // 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]); + const isCellSelected = (rowIndex, header) => selectedCells.some( + (cell) => cell.rowIndex === rowIndex && cell.header === header, + ); + + const clearCellSelection = (rowIndex, header) => { + const restCells = selectedCells.filter((cell) => !(cell.rowIndex === rowIndex && cell.header === header)); + setSelectedCells(restCells); + }; + + const clearRowSelection = (rowIndex) => { + const restCells = selectedCells.filter((cell) => !(cell.rowIndex === rowIndex)); + setSelectedCells(restCells); + }; + + const clearAllCellSelection = () => { + setSelectedCells([]); + }; + + const checkIfEveryCellInOneRow = (rowIndex) => selectedCells.every((cell) => cell.rowIndex === rowIndex); + + const handleCellClick = (rowIndex, header, value) => { + if (header === 'individual') { + return; + } + + const isCellSelectedInColumn = selectedCells.some((cell) => cell.header === header); + const isCellClicked = isCellSelected(rowIndex, header); + + if (isCellClicked) { + clearCellSelection(rowIndex, header); + return; + } + + if (isCellSelectedInColumn) { + const updatedSelectedCells = selectedCells.filter((cell) => cell.header !== header); + setSelectedCells(updatedSelectedCells); + } + + setSelectedCells((prevSelectedCells) => [...prevSelectedCells, { rowIndex, header, value }]); + + if (!checkIfEveryCellInOneRow(rowIndex)) { + setSelectedRow(null); + } + }; + + const handleCheckboxChange = (rowIndex) => { + if (selectedRow === rowIndex) { + clearRowSelection(rowIndex); + setSelectedRow(null); + } else { + clearAllCellSelection(); + const selectedCells = headers + .filter((header) => header !== 'individual') + .map((header) => ({ rowIndex, header, value: rows[rowIndex][header] })); + setSelectedCells(selectedCells); + setSelectedRow(rowIndex); + } + }; + + return ( +