OM-345: extend import options by adding group picker

src/components/WorkerImportDialog.js

@@ -14,7 +14,8 @@ import {
 import { makeStyles } from '@material-ui/styles';
 
 import { useModulesManager, useTranslations, InfoButton } from '@openimis/fe-core';
-import { MODULE_NAME, WORKER_IMPORT_PLANS } from '../constants';
+import { MODULE_NAME, WORKER_IMPORT_GROUP_OF_WORKERS, WORKER_IMPORT_PLANS } from '../constants';
+import GroupPicker from '../pickers/GroupPicker';
 
 export const useStyles = makeStyles((theme) => ({
   primaryButton: theme.dialog.primaryButton,
@@ -29,13 +30,15 @@ export const useStyles = makeStyles((theme) => ({
 }));
 
 function WorkerImportDialog({
-  open, onClose, importPlan, setImportPlan, onConfirm,
+  open, onClose, importPlan, setImportPlan, onConfirm, handleGroupChange, currentGroup,
 }) {
   const modulesManager = useModulesManager();
   const classes = useStyles();
   const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
   const radioGroupRef = React.useRef(null);
 
+  const importDisabled = !importPlan || (importPlan === WORKER_IMPORT_GROUP_OF_WORKERS && !currentGroup);
+
   return (
     <Dialog open={open} onClose={onClose} maxWidth="lg">
       <DialogTitle>
@@ -54,12 +57,15 @@ function WorkerImportDialog({
           onChange={(event) => setImportPlan(event.target.value)}
         >
           {WORKER_IMPORT_PLANS.map(({ value, labelKey }) => (
-            <FormControlLabel
-              key={value}
-              value={value}
-              control={<Radio color="primary" />}
-              label={formatMessage(labelKey)}
-            />
+            <>
+              <FormControlLabel
+                key={value}
+                value={value}
+                control={<Radio color="primary" />}
+                label={formatMessage(labelKey)}
+              />
+              {importPlan === WORKER_IMPORT_GROUP_OF_WORKERS && <GroupPicker onChange={handleGroupChange} />}
+            </>
           ))}
         </RadioGroup>
       </DialogContent>
@@ -68,7 +74,7 @@ function WorkerImportDialog({
         <Button onClick={onClose} className={classes.secondaryButton}>
           {formatMessage('workerVoucher.workerImport.cancel')}
         </Button>
-        <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={!importPlan}>
+        <Button onClick={onConfirm} autoFocus className={classes.primaryButton} disabled={importDisabled}>
           {formatMessage('workerVoucher.workerImport.confirm')}
         </Button>
       </DialogActions>

src/constants.js

@@ -84,6 +84,7 @@ export const DEFAULT = {
 export const WORKER_IMPORT_ALL_WORKERS = 'allWorkers';
 export const WORKER_IMPORT_PREVIOUS_WORKERS = 'previousWorkers';
 export const WORKER_IMPORT_PREVIOUS_DAY = 'previousDay';
+export const WORKER_IMPORT_GROUP_OF_WORKERS = 'groupOfWorkers';
 
 export const WORKER_IMPORT_PLANS = [
   {
@@ -98,6 +99,10 @@ export const WORKER_IMPORT_PLANS = [
     value: WORKER_IMPORT_PREVIOUS_DAY,
     labelKey: 'workerVoucher.workerImport.previousDay',
   },
+  {
+    value: WORKER_IMPORT_GROUP_OF_WORKERS,
+    labelKey: 'workerVoucher.workerImport.groupOfWorkers',
+  },
 ];
 
 // There are 2 worker upload stages. Depending on the stage, the UI will show different fields/buttons.

src/pickers/GroupPicker.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { useModulesManager, useTranslations, Autocomplete } from '@openimis/fe-core';
+import { fetchGroupsAction } from '../actions';
+import { ADMIN_RIGHT, MODULE_NAME } from '../constants';
+
+function GroupPicker({
+  withLabel = true, withPlaceholder = true, label, onChange,
+}) {
+  const modulesManager = useModulesManager();
+  const dispatch = useDispatch();
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+
+  const {
+    groups, fetchingGroups, fetchedGroups, errorGroups,
+  } = useSelector((state) => state.workerVoucher);
+  const { economicUnit } = useSelector((state) => state.policyHolder);
+  const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
+
+  const [group, setGroup] = useState(null);
+
+  const isAdmin = useMemo(() => rights.includes(ADMIN_RIGHT), [rights]);
+
+  useEffect(() => {
+    const actionParams = ['isDeleted: false'];
+
+    if (!isAdmin && economicUnit?.code) {
+      actionParams.push(`economicUnitCode:"${economicUnit.code}"`);
+    }
+
+    dispatch(fetchGroupsAction(modulesManager, actionParams));
+  }, [isAdmin, economicUnit, modulesManager, dispatch]);
+
+  const groupLabel = (option) => option.name;
+
+  const handleChange = (selectedGroup) => {
+    onChange(selectedGroup);
+    setGroup(selectedGroup);
+  };
+
+  return (
+    <Autocomplete
+      label={label ?? formatMessage('GroupPicker.label')}
+      error={errorGroups}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      options={groups}
+      isLoading={fetchingGroups}
+      isFetched={fetchedGroups}
+      value={group}
+      getOptionLabel={groupLabel}
+      onChange={handleChange}
+      onInputChange={() => {}}
+    />
+  );
+}
+
+export default GroupPicker;

src/pickers/WorkerMultiplePicker.js

@@ -12,13 +12,14 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Popper from '@material-ui/core/Popper';
 
-import { useModulesManager, useTranslations } from '@openimis/fe-core';
+import { useModulesManager, useTranslations, parseData } from '@openimis/fe-core';
 import WorkerImportDialog from '../components/WorkerImportDialog';
 import {
   MAX_CELLS,
   MODULE_NAME,
   USER_ECONOMIC_UNIT_STORAGE_KEY,
   WORKER_IMPORT_ALL_WORKERS,
+  WORKER_IMPORT_GROUP_OF_WORKERS,
   WORKER_IMPORT_PREVIOUS_DAY,
   WORKER_IMPORT_PREVIOUS_WORKERS,
   WORKER_THRESHOLD,
@@ -41,6 +42,7 @@ function WorkerMultiplePicker({
   const isDisabled = readOnly || isLoading;
   const [configurationDialogOpen, setConfigurationDialogOpen] = useState(false);
   const [importPlan, setImportPlan] = useState(undefined);
+  const [group, setGroup] = useState(null);
   const yesterday = getYesterdaysDate();
 
   const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
@@ -104,6 +106,8 @@ function WorkerMultiplePicker({
         return previousWorkers;
       case WORKER_IMPORT_PREVIOUS_DAY:
         return previousDayWorkers;
+      case WORKER_IMPORT_GROUP_OF_WORKERS:
+        return parseData(group.groupWorkers)?.map((groupWorker) => groupWorker.insuree);
       default:
         return [];
     }
@@ -120,6 +124,10 @@ function WorkerMultiplePicker({
     onChange(null, updatedWorkers);
   };
 
+  const handleGroupChange = (group) => {
+    setGroup(group);
+  };
+
   return (
     <div
       style={{
@@ -215,6 +223,8 @@ function WorkerMultiplePicker({
         importPlan={importPlan}
         setImportPlan={setImportPlan}
         onConfirm={handleImport}
+        handleGroupChange={handleGroupChange}
+        currentGroup={group}
       />
     </div>
   );

src/translations/en.json

@@ -126,6 +126,7 @@
   "workerVoucher.workerImport.allWorkers": "Add all workers",
   "workerVoucher.workerImport.previousWorkers": "Add workers I've worked with",
   "workerVoucher.workerImport.previousDay": "Add workers from the previous day only",
+  "workerVoucher.workerImport.groupOfWorkers": "Add workers from the particular group",
   "workerVoucher.workerImport.cancel": "Cancel",
   "workerVoucher.workerImport.confirm": "Import",
   "workerVoucher.printVoucher": "Print",
@@ -193,5 +194,6 @@
   "workerVoucher.GroupDetailsPage.delete.error": "Something went wrong while deleting the group. {detail}",
   "workerVoucher.WorkerDateRangePicker.selectDate.moreInfo": "Define the validity period for the selected workers' vouchers. You can add multiple validity periods, but they must not overlap. First, set the period, and then confirm it using the button below.",
   "workerVoucher.VoucherAssignmentForm.form.moreInfo": "Define the workers to whom you want to assign the non-personal vouchers. You can assign vouchers to multiple workers at once. First, select the workers, and then define periods in which the vouchers will be valid. Confirm the assignment using the top right corner button.",
-  "workerVoucher.WorkerImportDialog.moreInfo": "By using this feature, you can import your workers immediately. You can choose to import all workers, workers you've worked with, workers from the previous day only or workers from the particular group. Once you've selected the option, click the Import button to proceed."
+  "workerVoucher.WorkerImportDialog.moreInfo": "By using this feature, you can import your workers immediately. You can choose to import all workers, workers you've worked with, workers from the previous day only or workers from the particular group. Once you've selected the option, click the Import button to proceed.",
+  "workerVoucher.GroupPicker.label": "Group"
 }