CM-139: add core tasks fe

src/actions.js

@@ -52,6 +52,19 @@ const GROUP_BENEFICIARY_FULL_PROJECTION = () => [
   'status',
 ];
 
+const TASK_FULL_PROJECTION = () => [
+  'id',
+  'entityId',
+  'source',
+  'status',
+  'executorActionEvent',
+  'businessEvent',
+  'dateCreated',
+  'isDeleted',
+  'taskGroup{id, code, completionPolicy}',
+  'data',
+];
+
 const WORKFLOWS_FULL_PROJECTION = () => [
   'name',
   'group',
@@ -72,6 +85,11 @@ export function fetchGroupBeneficiaries(params) {
   return graphql(payload, ACTION_TYPE.SEARCH_GROUP_BENEFICIARIES);
 }
 
+export function fetchBenefitPlanTasks(params) {
+  const payload = formatPageQueryWithCount('task', params, TASK_FULL_PROJECTION());
+  return graphql(payload, ACTION_TYPE.SEARCH_BENEFIT_PLAN_TASKS);
+}
+
 export function fetchBeneficiariesGroup(modulesManager, variables) {
   return graphqlWithVariables(
     `

src/components/BenefitPlanTaskPreviewTable.js

@@ -0,0 +1,106 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+
+import { injectIntl } from 'react-intl';
+import { withTheme, withStyles } from '@material-ui/core/styles';
+import {
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+} from '@material-ui/core';
+import {
+  formatMessage, PublishedComponent,
+} from '@openimis/fe-core';
+
+const styles = (theme) => ({
+  table: theme.table,
+  tableTitle: theme.table.title,
+  tableHeader: theme.table.header,
+  tableRow: theme.table.row,
+  tableLockedRow: theme.table.lockedRow,
+  tableLockedCell: theme.table.lockedCell,
+  tableHighlightedRow: theme.table.highlightedRow,
+  tableHighlightedCell: theme.table.highlightedCell,
+  tableHighlightedAltRow: theme.table.highlightedAltRow,
+  tableHighlightedAltCell: theme.table.highlightedAltCell,
+  tableDisabledRow: theme.table.disabledRow,
+  tableDisabledCell: theme.table.disabledCell,
+  tableFooter: theme.table.footer,
+  pager: theme.table.pager,
+  left: {
+    textAlign: 'left',
+  },
+  right: {
+    textAlign: 'right',
+  },
+  center: {
+    textAlign: 'center',
+  },
+  clickable: {
+    cursor: 'pointer',
+  },
+  loader: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: 'rgba(0, 0, 0, 0.12)',
+  },
+});
+
+function BenefitPlanTaskPreviewTable({ intl, classes, previewItem }) {
+  const headers = () => [
+    'benefitPlan.code',
+    'benefitPlan.name',
+    'benefitPlan.type',
+    'benefitPlan.dateValidFrom',
+    'benefitPlan.dateValidTo',
+    'benefitPlan.maxBeneficiaries',
+  ];
+
+  const itemFormatters = () => [
+    (benefitPlan) => benefitPlan?.code,
+    (benefitPlan) => benefitPlan?.name,
+    (benefitPlan) => benefitPlan?.type,
+    (benefitPlan) => benefitPlan?.date_valid_from,
+    (benefitPlan) => benefitPlan?.date_valid_to,
+    (benefitPlan) => benefitPlan?.max_beneficiaries,
+  ];
+
+  const TASK_PREVIEW_FORMATTERS = itemFormatters();
+
+  return (
+    <TableContainer>
+      <Table size="small" className={classes.table}>
+        <TableHead>
+          <TableRow>
+            {headers().map((column) => (
+              <TableCell>{formatMessage(intl, 'socialProtection', column)}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {/* <ProgressOrError progress={fetchingTasks} error={errorTasks} /> */}
+          <TableRow
+            className={classes.tableRow}
+          >
+            {TASK_PREVIEW_FORMATTERS.map((formatter, formatterIndex) => (
+              <TableCell
+                key={formatterIndex}
+              >
+                <PublishedComponent
+                  pubRef="tasksManagement.taskPreviewCell"
+                  formatter={formatter}
+                  formatterIndex={formatterIndex}
+                  itemData={previewItem.currentEntityData}
+                  incomingData={previewItem.data}
+                />
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default injectIntl(withTheme(withStyles(styles)(BenefitPlanTaskPreviewTable)));

src/components/BenefitPlanTasksFilter.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { Grid } from '@material-ui/core';
+import { withTheme, withStyles } from '@material-ui/core/styles';
+import _debounce from 'lodash/debounce';
+import {
+  TextInput, PublishedComponent, formatMessage, decodeId,
+} from '@openimis/fe-core';
+import { defaultFilterStyles } from '../util/styles';
+import {
+  CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING,
+} from '../constants';
+
+function BenefitPlanTasksFilter({
+  intl, classes, filters, onChangeFilters,
+}) {
+  const debouncedOnChangeFilters = _debounce(onChangeFilters, DEFAULT_DEBOUNCE_TIME);
+
+  const filterValue = (filterName) => filters?.[filterName]?.value;
+
+  const filterTextFieldValue = (filterName) => filters?.[filterName]?.value ?? EMPTY_STRING;
+
+  const onChangeStringFilter = (filterName, lookup = null) => (value) => {
+    if (lookup) {
+      debouncedOnChangeFilters([
+        {
+          id: filterName,
+          value,
+          filter: `${filterName}_${lookup}: "${value}"`,
+        },
+      ]);
+    } else {
+      onChangeFilters([
+        {
+          id: filterName,
+          value,
+          filter: `${filterName}: "${value}"`,
+        },
+      ]);
+    }
+  };
+
+  return (
+    <Grid container className={classes.form}>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="benefitPlanTask.source"
+          value={filterTextFieldValue('source')}
+          onChange={onChangeStringFilter('source', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="benefitPlanTask.type"
+          value={filterTextFieldValue('type')}
+          onChange={onChangeStringFilter('type', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="benefitPlanTask.entity"
+          value={filterTextFieldValue('entity')}
+          onChange={onChangeStringFilter('entity', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <PublishedComponent
+          pubRef="tasksManagement.taskGroupPicker"
+          module="socialProtection"
+          value={filterValue('taskGroupId')}
+          onChange={(value) => onChangeFilters([
+            {
+              id: 'taskGroupId',
+              value,
+              filter: value?.id ? `taskGroupId: "${decodeId(value.id)}"` : '',
+            },
+          ])}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="benefitPlanTask.businessStatus"
+          value={filterTextFieldValue('businessStatus')}
+          onChange={onChangeStringFilter('businessStatus', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <PublishedComponent
+          pubRef="tasksManagement.taskStatusPicker"
+          module="socialProtection"
+          withLabel
+          nullLabel={formatMessage(intl, 'socialProtection', 'any')}
+          withNull
+          value={filterValue('status')}
+          onChange={(value) => onChangeFilters([
+            {
+              id: 'status',
+              value,
+              filter: `status: "${value}"`,
+            },
+          ])}
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default injectIntl(withTheme(withStyles(defaultFilterStyles)(BenefitPlanTasksFilter)));