CM-447: adjust frontend deduplication

openimis · Apr 3, 2024 · 53433c2 · 53433c2
1 parent 4486c76
commit 53433c2
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 11 deletions.
diff --git 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',
   },
@@ -35,20 +37,30 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 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((acc, cell) => {
+      acc[cell.header] = cell.value ?? '';
+      return acc;
+    }, {});
+    setFieldValues(parsedFieldValues);
     const additionalData = (
-      { values: selectedCells.map((cell) => ({ [cell.header]: cell.value })), beneficiaryIds: beneficiaryUuids }
+      { values: fieldValues, beneficiaryIds: filteredIds }
     );
     // 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,6 +86,10 @@ function BeneficiaryDuplicatesTable({
       return;
     }
 
+    if (dontMergeRows.includes(rowIndex)) {
+      return;
+    }
+
     const isCellSelectedInColumn = selectedCells.some((cell) => cell.header === header);
     const isCellClicked = isCellSelected(rowIndex, header);
 
@@ -108,12 +124,41 @@ 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);
+
+  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>
@@ -128,26 +173,52 @@ function BeneficiaryDuplicatesTable({
                 key={rowIndex}
                 className={classes.tableRow}
               >
+                <TableCell key={`merge-cell-${rowIndex}`} className={classes.checkboxCell}>
+                  <Checkbox
+                    color="primary"
+                    checked={dontMergeRows.includes(rowIndex) && !completedData}
+                    onChange={() => handleMergeCheckboxChange(rowIndex)}
+                    disabled={completedData}
+                  />
+                </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 : ''}`}
+                      shouldHoverCell(rowIndex, header) ? classes.hoverableCell : ''
+                    } ${shouldDisableCell(rowIndex) ? classes.tableDisabledCell : ''}`}
                     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>

diff --git a/src/components/tasks/DeduplicationResolutionTask.js b/src/components/tasks/DeduplicationResolutionTask.js
@@ -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,
     };
   });
 
@@ -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' }}>
@@ -47,7 +56,7 @@ function BeneficiaryDeduplicationTaskDisplay({
           headers={headers}
           rows={beneficiaries}
           setAdditionalData={setAdditionalData}
-          beneficiaryUuids={beneficiaryUuids}
+          completedData={completedData}
         />
 
       </div>
@@ -62,6 +71,7 @@ const DeduplicationResolutionItemFormatters = () => [
     <BeneficiaryDeduplicationTaskDisplay
       businessData={businessData}
       setAdditionalData={setAdditionalData}
+      jsonExt={jsonExt}
     />
   ),
 ];

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -11,5 +11,7 @@
     "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:"
 }