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 ( +
+ + + + + + + + {headers.map((header, index) => ( + {header} + ))} + + + + {rows.map((row, rowIndex) => ( + + + handleCheckboxChange(rowIndex)} + /> + + {headers.map((header, headerIndex) => ( + handleCellClick(rowIndex, header, row[header])} + > + {row[header]} + + ))} + + ))} + +
+
+
+ ); +} + +export default BeneficiaryDuplicatesTable; diff --git a/src/components/tasks/DeduplicationResolutionTask.js b/src/components/tasks/DeduplicationResolutionTask.js index cf791c5..5c51bf6 100644 --- a/src/components/tasks/DeduplicationResolutionTask.js +++ b/src/components/tasks/DeduplicationResolutionTask.js @@ -1,23 +1,55 @@ import React from 'react'; +import { Typography, makeStyles } from '@material-ui/core'; +import BeneficiaryDuplicatesTable from '../BeneficiaryDuplicatesTable'; + +const useStyles = makeStyles((theme) => ({ + paper: theme.paper.paper, + title: theme.paper.title, +})); function BeneficiaryDeduplicationTaskDisplay({ - businessData, + businessData, setAdditionalData, }) { + const classes = useStyles(); + const beneficiaryUuids = (businessData?.ids || []).map((id) => id.uuid); + const beneficiaries = (businessData?.ids || []).map((id) => { + // eslint-disable-next-line camelcase + const { individual, json_ext, ...rest } = id; + return { + ...rest, + ...individual, + // eslint-disable-next-line camelcase + ...json_ext, + individual: individual.uuid, + }; + }); + + const headers = businessData?.headers || []; + const individualIndex = headers.indexOf('individual'); + + if (individualIndex !== -1) { + headers.splice(individualIndex, 1); + headers.unshift('individual'); + } + return (
-
- {JSON.stringify(businessData.column_values)} + + {JSON.stringify(businessData?.column_values)} {' '} , count: {' '} - {businessData.count} -
-
- headers -
+ {businessData?.count} +
- {businessData.ids.map((id) =>
{id}
)} + +
); @@ -26,7 +58,12 @@ function BeneficiaryDeduplicationTaskDisplay({ const DeduplicationResolutionTaskTableHeaders = () => []; const DeduplicationResolutionItemFormatters = () => [ - (businessData) => , + (businessData, jsonExt, formatterIndex, setAdditionalData) => ( + + ), ]; export { DeduplicationResolutionTaskTableHeaders, DeduplicationResolutionItemFormatters }; diff --git a/src/translations/en.json b/src/translations/en.json index 56c84be..a72010c 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -10,5 +10,6 @@ "deduplication.deduplicationSummaryTable.group": "Group", "deduplication.deduplicationSummaryTable.duplicates": "Duplicates", "deduplication.tasks.deduplication.title": "Benefit Plan Deduplication Task", - "deduplication.deduplicate.mutation.createTasks": "Deduplication tasks have been created." + "deduplication.deduplicate.mutation.createTasks": "Deduplication tasks have been created.", + "deduplication.BeneficiaryDuplicatesTable.checkbox.header": "Select all columns" } \ No newline at end of file