Skip to content

Commit

Permalink
Merge pull request #8 from openimis/feature/CM-447
Browse files Browse the repository at this point in the history 
CM-447: adjust frontend deduplication
  • Loading branch information
@dborowiecki
dborowiecki authored Apr 8, 2024
2 parents 4486c76 + 7f6a633 commit 6fb100b
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 12 deletions.
98 changes: 92 additions & 6 deletions src/components/BeneficiaryDuplicatesTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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 ?? '';

Check failure on line 56 in src/components/BeneficiaryDuplicatesTable.js

View workflow job for this annotation

GitHub Actions / lint 

Assignment to property of function parameter 'accumulation'

Check failure on line 56 in src/components/BeneficiaryDuplicatesTable.js

View workflow job for this annotation

GitHub Actions / lint 

Assignment to property of function parameter 'accumulation'
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,
);
Expand All @@ -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;
}

Expand Down Expand Up @@ -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 (
<div className={classes.tableContainer}>
<TableContainer className={classes.paper}>
<Table size="small" className={classes.table} aria-label="dynamic table">
<TableHead className={classes.header}>
<TableRow className={classes.header}>
<TableCell key="checkbox-header-merge" className={classes.checkboxCell}>
<FormattedMessage module="deduplication" id="BeneficiaryDuplicatesTable.merge.header" />
</TableCell>
<TableCell key="checkbox-header" className={classes.checkboxCell}>
<FormattedMessage module="deduplication" id="BeneficiaryDuplicatesTable.checkbox.header" />
</TableCell>
Expand All @@ -128,26 +181,59 @@ function BeneficiaryDuplicatesTable({
key={rowIndex}
className={classes.tableRow}
>
<TableCell key={`merge-cell-${rowIndex}`} className={classes.checkboxCell}>
{rowIndex
? (
<Checkbox
color="primary"
checked={isDontMereChecked(rowIndex)}
onChange={() => handleMergeCheckboxChange(rowIndex)}
disabled={completedData}
/>
)
: <FormattedMessage module="deduplication" id="BeneficiaryDuplicatesTable.oldest" />}
</TableCell>
<TableCell key={`checkbox-cell-${rowIndex}`} className={classes.checkboxCell}>
<Checkbox
color="primary"
checked={rowIndex === selectedRow}
onChange={() => handleCheckboxChange(rowIndex)}
disabled={shouldDisableCell(rowIndex)}
/>
</TableCell>
{headers.map((header, headerIndex) => (
<TableCell
key={headerIndex}
className={`${isCellSelected(rowIndex, header) ? classes.selectedCell : ''} ${
!isCellSelected(rowIndex, header) && header !== 'individual' ? classes.hoverableCell : ''
} ${header === 'individual' ? classes.tableDisabledCell : ''}`}
className={`
${isCellSelected(rowIndex, header) ? classes.selectedCell : ''}
${shouldHoverCell(rowIndex, header) ? classes.hoverableCell : ''}
${shouldDisableCell(rowIndex) ? classes.tableDisabledCell : ''}
${shouldCrossText(rowIndex) ? classes.strikethrough : ''}
`}
onClick={() => handleCellClick(rowIndex, header, row[header])}
>
{row[header]}
</TableCell>
))}
</TableRow>
))}
<TableRow
className={classes.tableRow}
>
<TableCell className={classes.checkboxCell} />
<TableCell className={classes.checkboxCell}>
<FormattedMessage module="deduplication" id="BeneficiaryDuplicatesTable.output" />
</TableCell>
{headers.map((header, headerIndex) => (
<TableCell
key={headerIndex}
className={`${classes.tableDisabledCell}
${completedData ? classes.selectedCell : ''}`}
>
{Object.prototype.hasOwnProperty.call(fieldValues, header) ? fieldValues[header] : rows[0][header]}
</TableCell>
))}
</TableRow>
</TableBody>
</Table>
</TableContainer>
Expand Down
20 changes: 15 additions & 5 deletions src/components/tasks/DeduplicationResolutionTask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,26 @@ const useStyles = makeStyles((theme) => ({
}));

function BeneficiaryDeduplicationTaskDisplay({
businessData, setAdditionalData,
businessData, setAdditionalData, jsonExt,
}) {
if (!businessData) return null;

const classes = useStyles();
const beneficiaryUuids = (businessData?.ids || []).map((id) => id.uuid);
const completedData = jsonExt?.additional_resolve_data
? Object.values(jsonExt.additional_resolve_data)[0].values
: null;
const beneficiaries = (businessData?.ids || []).map((id) => {
// eslint-disable-next-line camelcase
const { individual, json_ext, ...rest } = id;
const {
// eslint-disable-next-line camelcase
individual, json_ext, uuid, ...rest
} = id;
return {
...rest,
...individual,
// eslint-disable-next-line camelcase
...json_ext,
individual: individual.uuid,
beneficiaryId: uuid,
};
});

Expand All @@ -32,6 +39,8 @@ function BeneficiaryDeduplicationTaskDisplay({
headers.unshift('individual');
}

beneficiaries.sort((a, b) => new Date(a.date_created) - new Date(b.date_created));

return (
<div>
<Typography className={classes.title} style={{ textAlign: 'center' }}>
Expand All @@ -47,7 +56,7 @@ function BeneficiaryDeduplicationTaskDisplay({
headers={headers}
rows={beneficiaries}
setAdditionalData={setAdditionalData}
beneficiaryUuids={beneficiaryUuids}
completedData={completedData}
/>

</div>
Expand All @@ -62,6 +71,7 @@ const DeduplicationResolutionItemFormatters = () => [
<BeneficiaryDeduplicationTaskDisplay
businessData={businessData}
setAdditionalData={setAdditionalData}
jsonExt={jsonExt}
/>
),
];
Expand Down
5 changes: 4 additions & 1 deletion src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,8 @@
"deduplication.deduplicationSummaryTable.duplicates": "Duplicates",
"deduplication.tasks.deduplication.title": "Benefit Plan Deduplication Task",
"deduplication.deduplicate.mutation.createTasks": "Deduplication tasks have been created.",
"deduplication.BeneficiaryDuplicatesTable.checkbox.header": "Select all columns"
"deduplication.BeneficiaryDuplicatesTable.checkbox.header": "Select all columns",
"deduplication.BeneficiaryDuplicatesTable.merge.header": "Don't merge",
"deduplication.BeneficiaryDuplicatesTable.output": "OUTPUT:",
"deduplication.BeneficiaryDuplicatesTable.oldest": "Oldest"
}

0 comments on commit 6fb100b

Please sign in to comment.