CM-453: added skeleton for deduplication init

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,
@@ -65,7 +66,14 @@ function DeduplicationFieldSelectionDialog({
         >
           {formatMessageWithValues(intl, 'deduplication', 'deduplicate.title', { benefitPlanName: benefitPlan.name })}
         </DialogTitle>
-        <DialogContent />
+        <DialogContent>
+          <DeduplicationFieldPicker
+            required
+            value={[]}
+            module="deduplication"
+            onChange={() => []}
+          />
+        </DialogContent>
         <DialogActions
           style={{
             display: 'inline',
@@ -75,7 +83,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,51 @@
+import React, { useState } from 'react';
+import { useGraphqlQuery, useTranslations, Autocomplete } from '@openimis/fe-core';
+
+function DeduplicationFieldPicker({
+  readOnly,
+  value,
+  onChange,
+  required,
+  multiple = true,
+  placeholder,
+  withLabel,
+  withPlaceholder,
+  label,
+  filterOptions,
+  filterSelectedOptions,
+}) {
+  const [searchString, setSearchString] = useState();
+  const { formatMessage } = useTranslations('deduplication');
+
+  const { isLoading, data, error } = useGraphqlQuery(
+    `
+  `,
+    { str: searchString },
+  );
+
+  const roles = data?.role?.edges.map((edge) => edge.node) ?? [];
+  const uniqueValues = [...new Map(value?.map((role) => [role.id, role])).values()];
+
+  return (
+    <Autocomplete
+      multiple={multiple}
+      required={required}
+      placeholder={placeholder ?? formatMessage('deduplication.deduplicate.fields.placeholder')}
+      label={label ?? formatMessage('deduplication.deduplicate.fields')}
+      error={error}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      readOnly={readOnly}
+      options={roles}
+      isLoading={isLoading}
+      value={uniqueValues}
+      getOptionLabel={(o) => o?.name}
+      onChange={(option) => onChange(option, option?.name)}
+      filterOptions={filterOptions}
+      filterSelectedOptions={filterSelectedOptions}
+      onInputChange={() => setSearchString(searchString)}
+    />
+  );
+}
+
+export default DeduplicationFieldPicker;

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"
 }