CM-812: Added enrollment page for group

src/actions.js

@@ -25,6 +25,15 @@ const ENROLLMENT_SUMMARY_FULL_PROJECTION = () => [
   'numberOfIndividualsToUpload',
 ];
 
+const ENROLLMENT_GROUP_SUMMARY_FULL_PROJECTION = () => [
+  'totalNumberOfGroups',
+  'numberOfSelectedGroups',
+  'numberOfGroupsAssignedToProgramme',
+  'numberOfGroupsNotAssignedToProgramme',
+  'numberOfGroupsAssignedToSelectedProgramme',
+  'numberOfGroupsToUpload',
+];
+
 export function fetchWorkflows() {
   const payload = formatQuery(
     'workflow',
@@ -102,6 +111,15 @@ export function fetchIndividualEnrollmentSummary(params) {
   return graphql(payload, ACTION_TYPE.ENROLLMENT_SUMMARY);
 }
 
+export function fetchGroupEnrollmentSummary(params) {
+  const payload = formatQuery(
+    'groupEnrollmentSummary',
+    params,
+    ENROLLMENT_GROUP_SUMMARY_FULL_PROJECTION(),
+  );
+  return graphql(payload, ACTION_TYPE.ENROLLMENT_GROUP_SUMMARY);
+}
+
 export function fetchIndividuals(params) {
   const payload = formatPageQueryWithCount('individual', params, INDIVIDUAL_FULL_PROJECTION);
   return graphql(payload, ACTION_TYPE.SEARCH_INDIVIDUALS);
@@ -276,6 +294,22 @@ export function confirmEnrollment(params, clientMutationLabel) {
   );
 }
 
+export function confirmGroupEnrollment(params, clientMutationLabel) {
+  // eslint-disable-next-line max-len
+  const mutation = formatMutation('confirmGroupEnrollment', formatConfirmEnrollmentGQL(params), clientMutationLabel);
+  const requestedDateTime = new Date();
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.CONFIRM_GROUP_ENROLLMENT), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.UPDATE_GROUP,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
 export function updateGroupIndividual(groupIndividual, clientMutationLabel) {
   const mutation = formatMutation(
     'editIndividualInGroup',

src/components/EnrollmentGroupHeadPanel.js

@@ -0,0 +1,131 @@
+/* eslint-disable max-len */
+/* eslint-disable camelcase */
+import React from 'react';
+import { injectIntl } from 'react-intl';
+
+import { Grid, Divider } from '@material-ui/core';
+import { withStyles, withTheme } from '@material-ui/core/styles';
+
+import {
+  decodeId,
+  FormPanel,
+  PublishedComponent,
+  formatMessage,
+  withModulesManager,
+} from '@openimis/fe-core';
+import AdvancedCriteriaGroupForm from './dialogs/AdvancedCriteriaGroupForm';
+import { CLEARED_STATE_FILTER } from '../constants';
+
+const styles = (theme) => ({
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+  fullHeight: {
+    height: '100%',
+  },
+});
+
+class EnrollmentGroupHeadPanel extends FormPanel {
+  constructor(props) {
+    super(props);
+    this.state = {
+      appliedCustomFilters: [CLEARED_STATE_FILTER],
+      appliedFiltersRowStructure: [CLEARED_STATE_FILTER],
+    };
+  }
+
+  updateJsonExt = (value) => {
+    this.updateAttributes({
+      jsonExt: value,
+    });
+  };
+
+  getDefaultAppliedCustomFilters = () => {
+    const { jsonExt } = this.props?.edited ?? {};
+    try {
+      const jsonData = JSON.parse(jsonExt);
+      const advancedCriteria = jsonData.advanced_criteria || [];
+      return advancedCriteria.map(({ custom_filter_condition }) => {
+        const [field, filter, typeValue] = custom_filter_condition.split('__');
+        const [type, value] = typeValue.split('=');
+        return {
+          custom_filter_condition,
+          field,
+          filter,
+          type,
+          value,
+        };
+      });
+    } catch (error) {
+      return [];
+    }
+  };
+
+  setAppliedCustomFilters = (appliedCustomFilters) => {
+    this.setState({ appliedCustomFilters });
+  };
+
+  setAppliedFiltersRowStructure = (appliedFiltersRowStructure) => {
+    this.setState({ appliedFiltersRowStructure });
+  };
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const { edited, classes, intl } = this.props;
+    const enrollment = { ...edited };
+    const { appliedCustomFilters, appliedFiltersRowStructure } = this.state;
+    return (
+      <>
+        <Grid container className={classes.item}>
+          <Grid item xs={3} className={classes.item}>
+            <PublishedComponent
+              pubRef="socialProtection.BenefitPlanPicker"
+              withNull
+              required
+              filterLabels={false}
+              onChange={(benefitPlan) => this.updateAttribute('benefitPlan', benefitPlan)}
+              value={enrollment?.benefitPlan}
+              type="GROUP"
+            />
+          </Grid>
+          <Grid item xs={3} className={classes.item}>
+            <PublishedComponent
+              pubRef="socialProtection.BeneficiaryStatusPicker"
+              required
+              withNull={false}
+              filterLabels={false}
+              onChange={(status) => this.updateAttribute('status', status)}
+              value={enrollment?.status}
+            />
+          </Grid>
+        </Grid>
+        <Divider />
+        <Grid>
+          <>
+            <div className={classes.item}>
+              {formatMessage(intl, 'individual', 'individual.enrollment.criteria')}
+            </div>
+            <Divider />
+            <Grid container className={classes.item}>
+              <AdvancedCriteriaGroupForm
+                object={enrollment.benefitPlan}
+                objectToSave={enrollment}
+                moduleName="individual"
+                objectType="Individual"
+                setAppliedCustomFilters={this.setAppliedCustomFilters}
+                appliedCustomFilters={appliedCustomFilters}
+                appliedFiltersRowStructure={appliedFiltersRowStructure}
+                setAppliedFiltersRowStructure={this.setAppliedFiltersRowStructure}
+                updateAttributes={this.updateJsonExt}
+                getDefaultAppliedCustomFilters={this.getDefaultAppliedCustomFilters}
+                additionalParams={enrollment?.benefitPlan ? { benefitPlan: `${decodeId(enrollment.benefitPlan.id)}` } : null}
+                edited={this.props.edited}
+              />
+            </Grid>
+          </>
+        </Grid>
+      </>
+    );
+  }
+}
+
+export default withModulesManager(injectIntl(withTheme(withStyles(styles)(EnrollmentGroupHeadPanel))));

src/components/GroupSearcher.js

@@ -11,6 +11,7 @@ import {
   coreConfirm,
   clearConfirm,
   journalize,
+  decodeId,
 } from '@openimis/fe-core';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -30,6 +31,7 @@ import {
   DEFAULT_PAGE_SIZE,
   ROWS_PER_PAGE_OPTIONS,
   RIGHT_GROUP_UPDATE, RIGHT_GROUP_DELETE, INDIVIDUAL_MODULE_NAME, INDIVIDUAL_LABEL,
+  INDIVIDUAL_GROUP_MENU_CONTRIBUTION_KEY,
 } from '../constants';
 import GroupFilter from './GroupFilter';
 import { applyNumberCircle } from '../util/searcher-utils';
@@ -53,11 +55,14 @@ function GroupSearcher({
   confirmed,
   submittingMutation,
   clearGroupExport,
+  isModalEnrollment,
   mutation,
   coreConfirm,
   clearConfirm,
   journalize,
   CLEARED_STATE_FILTER,
+  benefitPlanToEnroll,
+  advancedCriteria,
 }) {
   const [groupToDelete, setGroupToDelete] = useState(null);
   const [deletedGroupUuids, setDeletedGroupUuids] = useState([]);
@@ -165,12 +170,25 @@ function GroupSearcher({
 
   const isRowDisabled = (_, group) => deletedGroupUuids.includes(group.id);
 
-  const defaultFilters = () => ({
-    isDeleted: {
-      value: false,
-      filter: 'isDeleted: false',
-    },
-  });
+  const defaultFilters = () => {
+    const filters = {
+      isDeleted: {
+        value: false,
+        filter: 'isDeleted: false',
+      },
+    };
+    if (isModalEnrollment && advancedCriteria !== null && advancedCriteria !== undefined) {
+      filters.customFilters = {
+        value: advancedCriteria,
+        filter: `customFilters: [${advancedCriteria}]`,
+      };
+      filters.benefitPlanToEnroll = {
+        value: benefitPlanToEnroll,
+        filter: `benefitPlanToEnroll: "${decodeId(benefitPlanToEnroll)}"`,
+      };
+    }
+    return filters;
+  };
 
   const [failedExport, setFailedExport] = useState(false);
 
@@ -244,6 +262,10 @@ function GroupSearcher({
         applyNumberCircle={applyNumberCircle}
         rowDisabled={isRowDisabled}
         rowLocked={isRowDisabled}
+        // eslint-disable-next-line react/jsx-props-no-spreading, max-len
+        {...(isModalEnrollment === false ? {
+          actionsContributionKey: INDIVIDUAL_GROUP_MENU_CONTRIBUTION_KEY, isCustomFiltering: true,
+        } : { isCustomFiltering: false })}
       />
       {failedExport && (
         <Dialog open={failedExport} fullWidth maxWidth="sm">