CM-453: Create the UI component for field selection for deduplication.

src/components/dialogs/DeduplicationFieldSelectionDialog.js

@@ -12,6 +12,7 @@ import {
 import { withTheme, withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import DeduplicationFieldPicker from '../pickers/DeduplicationFieldPicker';
 
 const styles = (theme) => ({
   item: theme.paper.item,
@@ -24,6 +25,7 @@ function DeduplicationFieldSelectionDialog({
 }) {
   if (!benefitPlan) return null;
 
+  const [selectedValues, setSelectedValues] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
 
   const handleOpen = () => {
@@ -34,6 +36,10 @@ function DeduplicationFieldSelectionDialog({
     setIsOpen(false);
   };
 
+  const handlePickerChange = (selectedOptions) => {
+    setSelectedValues(selectedOptions);
+  };
+
   return (
     <>
       <Button
@@ -65,7 +71,15 @@ function DeduplicationFieldSelectionDialog({
         >
           {formatMessageWithValues(intl, 'deduplication', 'deduplicate.title', { benefitPlanName: benefitPlan.name })}
         </DialogTitle>
-        <DialogContent />
+        <DialogContent>
+          <DeduplicationFieldPicker
+            required
+            value={selectedValues}
+            module="deduplication"
+            benefitPlan={benefitPlan}
+            onChange={handlePickerChange}
+          />
+        </DialogContent>
         <DialogActions
           style={{
             display: 'inline',
@@ -75,7 +89,16 @@ function DeduplicationFieldSelectionDialog({
           }}
         >
           <div>
-            <div style={{ float: 'left' }} />
+            <div style={{ float: 'left' }}>
+              <Button
+                onClick={() => []}
+                variant="outlined"
+                autoFocus
+                style={{ margin: '0 16px' }}
+              >
+                {formatMessage(intl, 'deduplication', 'deduplicate.button.showDuplicateSummary')}
+              </Button>
+            </div>
             <div style={{
               float: 'right',
               paddingRight: '16px',

src/components/pickers/DeduplicationFieldPicker.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { useTranslations, Autocomplete } from '@openimis/fe-core';
+import { BASIC_FIELDS } from '../../constants';
+
+function DeduplicationFieldPicker({
+  readOnly,
+  benefitPlan,
+  value,
+  onChange,
+  required,
+  multiple = true,
+  placeholder,
+  withLabel,
+  withPlaceholder,
+  label,
+  filterOptions,
+  filterSelectedOptions,
+}) {
+  const [searchString, setSearchString] = useState();
+  const { formatMessage } = useTranslations('deduplication');
+
+  const beneficiaryDataSchema = JSON.parse(benefitPlan?.beneficiaryDataSchema);
+  const schemaFields = Object.keys(beneficiaryDataSchema?.properties ?? {});
+  const schemaFieldsList = schemaFields.map((key) => ({ id: key, name: key }));
+  const possibleFields = [...schemaFieldsList, ...BASIC_FIELDS];
+
+  return (
+    <Autocomplete
+      multiple={multiple}
+      required={required}
+      placeholder={placeholder ?? formatMessage('deduplication.deduplicate.fields.placeholder')}
+      label={label ?? formatMessage('deduplication.deduplicate.fields')}
+      error={[]}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      readOnly={readOnly}
+      options={possibleFields}
+      isLoading={false}
+      value={value}
+      getOptionLabel={(o) => o?.name}
+      onChange={(option) => onChange(option, option?.name)}
+      filterOptions={filterOptions}
+      filterSelectedOptions={filterSelectedOptions}
+      onInputChange={() => setSearchString(searchString)}
+    />
+  );
+}
+
+export default DeduplicationFieldPicker;

src/constants.js

@@ -0,0 +1,6 @@
+export const BASIC_FIELDS = [
+  { id: 'first_name', name: 'first_name' },
+  { id: 'last_name', name: 'last_name' },
+  { id: 'dob', name: 'dob' },
+];
+export const MODULE_NAME = 'Deduplication';

src/translations/en.json

@@ -1,5 +1,8 @@
 {
     "deduplication.deduplicate": "Deduplicate",
     "deduplication.deduplicate.title": "Deduplication - {benefitPlanName}",
-    "deduplication.deduplicate.button.cancel": "Cancel"
+    "deduplication.deduplicate.button.cancel": "Cancel",
+    "deduplication.deduplicate.fields": "Duplicate Detection Field Selection",
+    "deduplication.deduplicate.fields.placeholder": "Duplicate Detection Field Selection",
+    "deduplicate.button.showDuplicateSummary": "Show Duplicate Summary"
 }