Merge pull request #46 from openimis/feature/CM-711

CM-711: Frontend development for Program Selection and Filter Application

src/actions.js

@@ -1,6 +1,7 @@
 import {
   graphql,
   formatPageQuery,
+  formatQuery,
   formatPageQueryWithCount,
   formatMutation,
   formatGQLString,
@@ -10,6 +11,28 @@ import {
   CLEAR, ERROR, REQUEST, SET, SUCCESS,
 } from './util/action-type';
 
+const WORKFLOWS_FULL_PROJECTION = () => [
+  'name',
+  'group',
+];
+
+const ENROLLMENT_SUMMARY_FULL_PROJECTION = () => [
+  'totalNumberOfIndividuals',
+  'numberOfSelectedIndividuals',
+  'numberOfIndividualsAssignedToProgramme',
+  'numberOfIndividualsNotAssignedToProgramme',
+  'numberOfIndividualsAssignedToSelectedProgramme',
+];
+
+export function fetchWorkflows() {
+  const payload = formatQuery(
+    'workflow',
+    [],
+    WORKFLOWS_FULL_PROJECTION(),
+  );
+  return graphql(payload, ACTION_TYPE.GET_WORKFLOWS);
+}
+
 const INDIVIDUAL_FULL_PROJECTION = [
   'id',
   'isDeleted',
@@ -49,6 +72,15 @@ const GROUP_HISTORY_FULL_PROJECTION = GROUP_FULL_PROJECTION.filter(
   (item) => item !== 'head {firstName, lastName}',
 );
 
+export function fetchIndividualEnrollmentSummary(params) {
+  const payload = formatQuery(
+    'individualEnrollmentSummary',
+    params,
+    ENROLLMENT_SUMMARY_FULL_PROJECTION(),
+  );
+  return graphql(payload, ACTION_TYPE.ENROLLMENT_SUMMARY);
+}
+
 export function fetchIndividuals(params) {
   const payload = formatPageQueryWithCount('individual', params, INDIVIDUAL_FULL_PROJECTION);
   return graphql(payload, ACTION_TYPE.SEARCH_INDIVIDUALS);
@@ -159,6 +191,13 @@ function formatGroupIndividualGQL(groupIndividual) {
     ${groupIndividual?.group.id ? `groupId: "${groupIndividual.group.id}"` : ''}`;
 }
 
+function formatConfirmEnrollmentGQL(params) {
+  return `
+    ${params?.customFilters ? `customFilters: ${params.customFilters}` : ''}
+    ${params?.benefitPlanId ? `benefitPlanId: ${params.benefitPlanId}` : ''}
+    ${params?.status ? `status: ${params.status}` : ''}`;
+}
+
 export function updateIndividual(individual, clientMutationLabel) {
   const mutation = formatMutation('updateIndividual', formatIndividualGQL(individual), clientMutationLabel);
   const requestedDateTime = new Date();
@@ -174,6 +213,22 @@ export function updateIndividual(individual, clientMutationLabel) {
   );
 }
 
+export function confirmEnrollment(params, clientMutationLabel) {
+  // eslint-disable-next-line max-len
+  const mutation = formatMutation('confirmIndividualEnrollment', formatConfirmEnrollmentGQL(params), clientMutationLabel);
+  const requestedDateTime = new Date();
+  return graphql(
+    mutation.payload,
+    [REQUEST(ACTION_TYPE.MUTATION), SUCCESS(ACTION_TYPE.CONFIRM_ENROLLMENT), ERROR(ACTION_TYPE.MUTATION)],
+    {
+      actionType: ACTION_TYPE.UPDATE_INDIVIDUAL,
+      clientMutationId: mutation.clientMutationId,
+      clientMutationLabel,
+      requestedDateTime,
+    },
+  );
+}
+
 export function updateGroupIndividual(groupIndividual, clientMutationLabel) {
   const mutation = formatMutation(
     'editIndividualInGroup',

src/components/EnrollmentHeadPanel.js

@@ -0,0 +1,129 @@
+/* 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 AdvancedCriteriaForm from './dialogs/AdvancedCriteriaForm';
+import { CLEARED_STATE_FILTER } from '../constants';
+
+const styles = (theme) => ({
+  tableTitle: theme.table.title,
+  item: theme.paper.item,
+  fullHeight: {
+    height: '100%',
+  },
+});
+
+class EnrollmentHeadPanel 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}
+            />
+          </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}>
+              <AdvancedCriteriaForm
+                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}
+              />
+            </Grid>
+          </>
+        </Grid>
+      </>
+    );
+  }
+}
+
+export default withModulesManager(injectIntl(withTheme(withStyles(styles)(EnrollmentHeadPanel))));

src/components/IndividualSearcher.js

@@ -37,6 +37,7 @@ import {
   FETCH_BENEFIT_PLAN_SCHEMA_FIELDS_REF,
   INDIVIDUAL_MODULE_NAME,
   INDIVIDUAL_LABEL,
+  INDIVIDUALS_UPLOAD_FORM_CONTRIBUTION_KEY,
 } from '../constants';
 import { applyNumberCircle } from '../util/searcher-utils';
 import IndividualFilter from './IndividualFilter';
@@ -284,6 +285,7 @@ function IndividualSearcher({
         chooseExportableColumns
         cacheFiltersKey="individualsFilterCache"
         resetFiltersOnUnmount
+        actionsContributionKey={INDIVIDUALS_UPLOAD_FORM_CONTRIBUTION_KEY}
       />
       {failedExport && (
         <Dialog fullWidth maxWidth="sm">