CM-405: add tasks on frontend

src/components/GroupChangeDialog.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl';
+
+import { withTheme, withStyles } from '@material-ui/core/styles';
+import {
+  Button, Dialog, DialogActions, DialogContent, DialogTitle,
+} from '@material-ui/core';
+import { useTranslations, useModulesManager } from '@openimis/fe-core';
+import GroupPicker from '../pickers/GroupPicker';
+
+const styles = (theme) => ({
+  primaryButton: theme.dialog.primaryButton,
+  secondaryButton: theme.dialog.secondaryButton,
+});
+
+function GroupChangeDialog({
+  classes,
+  confirmState,
+  onClose,
+  onConfirm,
+  groupIndividual,
+}) {
+  const modulesManager = useModulesManager();
+  const { formatMessage, formatMessageWithValues } = useTranslations('individual', modulesManager);
+  const [groupToBeChanged, setGroupToBeChanged] = useState(null);
+
+  const handleConfirm = (groupToBeChanged) => {
+    onConfirm(groupToBeChanged);
+    onClose();
+  };
+
+  return (
+    <Dialog open={confirmState} onClose={onClose}>
+      <DialogTitle>
+        {formatMessageWithValues('groupChangeDialog.confirmTitle', {
+          firstName: groupIndividual?.individual?.firstName, lastName: groupIndividual?.individual?.lastName,
+        })}
+      </DialogTitle>
+      <DialogContent>
+        <GroupPicker
+          groupIndividual={groupIndividual}
+          onChange={setGroupToBeChanged}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => handleConfirm(groupToBeChanged)}
+          autoFocus
+          className={classes.primaryButton}
+          disabled={!groupToBeChanged}
+        >
+          {formatMessage('confirm')}
+        </Button>
+        <Button onClick={onClose} className={classes.secondaryButton}>
+          {formatMessage('cancel')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default injectIntl(withTheme(withStyles(styles)(GroupChangeDialog)));

src/components/GroupIndividualSearcher.js

@@ -19,6 +19,7 @@ import {
   Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip,
 } from '@material-ui/core';
 import EditIcon from '@material-ui/icons/Edit';
+import GroupIcon from '@material-ui/icons/Group';
 import DeleteIcon from '@material-ui/icons/Delete';
 import {
   clearGroupIndividualExport,
@@ -29,13 +30,14 @@ import {
 } from '../actions';
 import {
   DEFAULT_PAGE_SIZE,
-  EMPTY_STRING,
+  EMPTY_STRING, GROUP_INDIVIDUAL_ROLES,
   RIGHT_GROUP_INDIVIDUAL_DELETE,
   RIGHT_GROUP_INDIVIDUAL_UPDATE,
   ROWS_PER_PAGE_OPTIONS,
 } from '../constants';
 import GroupIndividualFilter from './GroupIndividualFilter';
 import GroupIndividualRolePicker from '../pickers/GroupIndividualRolePicker';
+import GroupChangeDialog from './GroupChangeDialog';
 
 function GroupIndividualSearcher({
   intl,
@@ -68,6 +70,8 @@ function GroupIndividualSearcher({
   const prevSubmittingMutationRef = useRef();
   const [updatedGroupIndividuals, setUpdatedGroupIndividuals] = useState([]);
   const [refetch, setRefetch] = useState(null);
+  const [isChangeGroupModalOpen, setIsChangeGroupModalOpen] = useState(false);
+  const [groupIndividualToGroupChange, setGroupIndividualToGroupChange] = useState(null);
 
   function groupIndividualUpdatePageUrl(groupIndividual) {
     return `${modulesManager.getRef('individual.route.individual')}/${groupIndividual.individual?.id}`;
@@ -124,6 +128,7 @@ function GroupIndividualSearcher({
       'individual.lastName',
       'individual.dob',
       'groupIndividual.individual.role',
+      'emptyLabel',
     ];
     if (rights.includes(RIGHT_GROUP_INDIVIDUAL_UPDATE)) {
       headers.push('emptyLabel');
@@ -161,13 +166,34 @@ function GroupIndividualSearcher({
     }
   };
 
+  const handleGroupChange = (groupIndividual) => {
+    setIsChangeGroupModalOpen(true);
+    setGroupIndividualToGroupChange(groupIndividual);
+  };
+
   const isRowUpdated = (groupIndividual) => (
     updatedGroupIndividuals.some((item) => item.id === groupIndividual.id));
 
   const isRowDeleted = (groupIndividual) => deletedGroupIndividualUuids.includes(groupIndividual.id);
 
   const isRowDisabled = (_, groupIndividual) => isRowDeleted(groupIndividual) || isRowUpdated(groupIndividual);
 
+  const onChangeGroupConfirm = (groupToBeChanged) => {
+    const updateIndividual = {
+      ...groupIndividualToGroupChange,
+      group: groupToBeChanged,
+      role: GROUP_INDIVIDUAL_ROLES.RECIPIENT,
+    };
+    updateGroupIndividual(
+      updateIndividual,
+      formatMessageWithValues(intl, 'individual', 'individual.groupChange.confirm.message', {
+        individualId: updateIndividual?.individual?.id,
+        groupId: groupToBeChanged?.id,
+      }),
+    );
+    setRefetch(groupToBeChanged?.id);
+  };
+
   const itemFormatters = () => {
     const formatters = [
       (groupIndividual) => groupIndividual.individual.firstName,
@@ -185,6 +211,18 @@ function GroupIndividualSearcher({
           onChange={(role) => handleRoleOnChange(groupIndividual, role)}
         />
       ) : groupIndividual.role),
+      (groupIndividual) => (rights.includes(RIGHT_GROUP_INDIVIDUAL_UPDATE) ? (
+        (
+          <Tooltip title={formatMessage(intl, 'individual', 'changeGroupButtonTooltip')}>
+            <IconButton
+              onClick={() => handleGroupChange(groupIndividual)}
+              disabled={isRowDeleted(groupIndividual)}
+            >
+              <GroupIcon />
+            </IconButton>
+          </Tooltip>
+        )
+      ) : null),
     ];
     if (rights.includes(RIGHT_GROUP_INDIVIDUAL_UPDATE)) {
       formatters.push((groupIndividual) => (
@@ -266,6 +304,12 @@ function GroupIndividualSearcher({
 
   return (
     <div>
+      <GroupChangeDialog
+        confirmState={isChangeGroupModalOpen}
+        onClose={() => setIsChangeGroupModalOpen(false)}
+        onConfirm={onChangeGroupConfirm}
+        groupIndividual={groupIndividualToGroupChange}
+      />
       <Searcher
         key={refetch}
         module="individual"

src/components/tasks/GroupIndividualUpdateTasks.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FormattedMessage } from '@openimis/fe-core';
+
+const GroupIndividualUpdateTaskTableHeaders = () => [
+  <FormattedMessage module="individual" id="groupIndividual.individual.groupId" />,
+  <FormattedMessage module="individual" id="groupIndividual.individual.individualId" />,
+  <FormattedMessage module="individual" id="groupIndividual.individual.role" />,
+];
+
+const GroupIndividualUpdateTaskItemFormatters = () => [
+  (groupIndividual) => groupIndividual?.group ?? groupIndividual?.group_id,
+  (groupIndividual, jsonExt) => jsonExt?.individual_identity ?? groupIndividual?.individual,
+  (groupIndividual) => groupIndividual?.role,
+];
+
+export { GroupIndividualUpdateTaskTableHeaders, GroupIndividualUpdateTaskItemFormatters };

src/index.js

@@ -26,6 +26,10 @@ import {
 } from './components/tasks/IndividualUpdateTasks';
 import GroupHistorySearcher from './components/GroupHistorySearcher';
 import { GroupChangelogTabLabel, GroupChangelogTabPanel } from './components/GroupChangelogTab';
+import {
+  GroupIndividualUpdateTaskItemFormatters,
+  GroupIndividualUpdateTaskTableHeaders,
+} from './components/tasks/GroupIndividualUpdateTasks';
 
 const ROUTE_INDIVIDUALS = 'individuals';
 const ROUTE_INDIVIDUAL = 'individuals/individual';
@@ -77,7 +81,14 @@ const DEFAULT_CONFIG = {
     tableHeaders: IndividualUpdateTaskTableHeaders,
     itemFormatters: IndividualUpdateTaskItemFormatters,
     taskSource: ['IndividualService'],
-  }],
+  },
+  {
+    text: <FormattedMessage module="individual" id="groupIndividual.tasks.update.title" />,
+    tableHeaders: GroupIndividualUpdateTaskTableHeaders,
+    itemFormatters: GroupIndividualUpdateTaskItemFormatters,
+    taskSource: ['GroupIndividualService'],
+  },
+  ],
 };
 
 export const IndividualModule = (cfg) => ({ ...DEFAULT_CONFIG, ...cfg });

src/pickers/GroupPicker.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  useModulesManager, useTranslations, Autocomplete,
+} from '@openimis/fe-core';
+import { fetchGroups } from '../actions';
+
+function GroupPicker(props) {
+  const {
+    withLabel = true,
+    withPlaceholder,
+    label,
+    groupIndividual,
+    onChange,
+  } = props;
+
+  const modulesManager = useModulesManager();
+  const dispatch = useDispatch();
+  const { formatMessage } = useTranslations('individual', modulesManager);
+  const fetchingGroups = useSelector((state) => state.individual.fetchingGroups);
+  const fetchedGroups = useSelector((state) => state.individual.fetchedGroups);
+  const errorGroups = useSelector((state) => state.individual.errorGroups);
+  const groups = useSelector((state) => state.individual.groups);
+  const [group, setGroup] = useState(null);
+
+  useEffect(() => {
+    if (!fetchingGroups && !fetchedGroups) {
+      dispatch(fetchGroups({}));
+    }
+  }, []);
+
+  const groupLabel = (option) => option.id;
+
+  const getGroupsWithoutCurrentGroup = (options) => options.filter(
+    (option) => option?.id !== groupIndividual?.group?.id,
+  );
+
+  const handleChange = (group) => {
+    onChange(group);
+    setGroup(group);
+  };
+
+  return (
+    <Autocomplete
+      label={label ?? formatMessage('groupPicker.label')}
+      error={errorGroups}
+      withLabel={withLabel}
+      withPlaceholder={withPlaceholder}
+      options={getGroupsWithoutCurrentGroup(groups)}
+      isLoading={fetchingGroups}
+      isFetched={fetchedGroups}
+      value={group}
+      getOptionLabel={groupLabel}
+      onChange={handleChange}
+      onInputChange={() => null}
+    />
+  );
+}
+
+export default GroupPicker;

src/translations/en.json

@@ -43,7 +43,12 @@
     },
     "any": "ANY",
     "ok": "ok",
-    "individualChangelog.label": "Change Log"
+    "individualChangelog.label": "Change Log",
+    "groupChange": {
+      "confirm": {
+        "message": "Individual {individualId} moved to Group {groupId}"
+      }
+    }
   },
   "individualHistory": {
     "pageTitle": "Individual {firstName} {lastName}",
@@ -120,15 +125,31 @@
   },
   "groupIndividual": {
     "individual": {
-      "role": "Role"
+      "role": "Role",
+      "groupId": "Group ID",
+      "individualId": "Individual ID"
     },
     "update": {
       "label": "Update Individual",
       "mutationLabel":"Update Individual {id}"
     },
+    "tasks": {
+      "update": {
+        "title": "Group Update Tasks"
+      }
+    },
     "groupIndividualRolePicker.HEAD":  "HEAD",
     "groupIndividualRolePicker.RECIPIENT": "RECIPIENT",
     "groupIndividualRolePicker": "Role"
   },
-  "groupChangelog.label": "Change Log"
+  "groupChangelog.label": "Change Log",
+  "groupPicker": {
+    "label": "Select a group."
+  },
+  "groupChangeDialog": {
+    "confirmTitle": "Move {firstName} {lastName} to a different group."
+  },
+  "confirm": "Confirm",
+  "cancel": "Cancel",
+  "changeGroupButtonTooltip": "Move to another group."
 }