openimis · sniedzielski · Aug 14, 2023 · Aug 8, 2023 · Aug 11, 2023 · Aug 11, 2023
diff --git a/src/actions.js b/src/actions.js
@@ -22,6 +22,7 @@ const TASK_GROUP_PROJECTION = () => [
 const TASK_FULL_PROJECTION = () => [
   'id',
   'entityId',
+  'entityString',
   'source',
   'status',
   'executorActionEvent',
@@ -32,6 +33,22 @@ const TASK_FULL_PROJECTION = () => [
   'taskGroup{id, code, completionPolicy, taskexecutorSet {edges{node{id, user{id}}}}}',
   'data',
   'currentEntityData',
+  'jsonExt',
+];
+
+const TASKS_FULL_PROJECTION = () => [
+  'id',
+  'entityId',
+  'entityString',
+  'source',
+  'status',
+  'executorActionEvent',
+  'businessEvent',
+  'dateCreated',
+  'isDeleted',
+  'taskGroup{id, code, completionPolicy}',
+  'data',
+  'jsonExt',
 ];
 
 export const formatTaskGroupGQL = (taskGroup) => {
@@ -76,6 +93,11 @@ export function fetchTaskGroups(modulesManager, params) {
   return graphql(payload, ACTION_TYPE.SEARCH_TASK_GROUPS);
 }
 
+export function fetchTasks(modulesManager, params) {
+  const payload = formatPageQueryWithCount('task', params, TASKS_FULL_PROJECTION());
+  return graphql(payload, ACTION_TYPE.SEARCH_TASKS);
+}
+
 export function fetchTask(modulesManager, params) {
   const payload = formatPageQueryWithCount('task', params, TASK_FULL_PROJECTION());
   return graphql(payload, ACTION_TYPE.GET_TASK);

diff --git a/src/components/TaskApprovementPanel.js b/src/components/TaskApprovementPanel.js
@@ -39,6 +39,7 @@ function TaskApprovementPanel({
   mutation,
   journalize,
   confirmed,
+  setIsSaved,
 }) {
   const modulesManager = useModulesManager();
   const classes = useStyles();
@@ -79,6 +80,7 @@ function TaskApprovementPanel({
           user,
           approveOrFail,
         );
+        setIsSaved(true);
       }
     }
     return () => confirmed && clearConfirm(false);

diff --git a/src/components/TaskFilter.js b/src/components/TaskFilter.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 '../utils/styles';
+import {
+  CONTAINS_LOOKUP, DEFAULT_DEBOUNCE_TIME, EMPTY_STRING,
+} from '../constants';
+
+function TaskFilter({
+  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="task.source"
+          value={filterTextFieldValue('source')}
+          onChange={onChangeStringFilter('source', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="task.type"
+          value={filterTextFieldValue('type')}
+          onChange={onChangeStringFilter('businessEvent', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <TextInput
+          module="tasksManagement"
+          label="task.entity"
+          value={filterTextFieldValue('entity')}
+          onChange={onChangeStringFilter('entity', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <PublishedComponent
+          pubRef="tasksManagement.taskGroupPicker"
+          module="tasksManagement"
+          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="task.businessStatus"
+          value={filterTextFieldValue('businessStatus')}
+          onChange={onChangeStringFilter('businessStatus', CONTAINS_LOOKUP)}
+        />
+      </Grid>
+      <Grid item xs={3} className={classes.item}>
+        <PublishedComponent
+          pubRef="tasksManagement.taskStatusPicker"
+          module="tasksManagement"
+          withLabel
+          nullLabel={formatMessage(intl, 'tasksManagement', 'any')}
+          withNull
+          value={filterValue('status')}
+          onChange={(value) => onChangeFilters([
+            {
+              id: 'status',
+              value,
+              filter: `status: ${value}`,
+            },
+          ])}
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default injectIntl(withTheme(withStyles(defaultFilterStyles)(TaskFilter)));
diff --git a/src/components/TaskHeadPanel.js b/src/components/TaskHeadPanel.js
@@ -13,6 +13,7 @@ import { withTheme, withStyles } from '@material-ui/core/styles';
 import TaskStatusPicker from '../pickers/TaskStatusPicker';
 import TaskGroupPicker from '../pickers/TaskGroupPicker';
 import { TASK_STATUS, TASK_UPDATE } from '../constants';
+import trimBusinessEvent from '../utils/trimBusinessEvent';
 
 const styles = (theme) => ({
   tableTitle: theme.table.title,
@@ -34,7 +35,7 @@ const renderHeadPanelTitle = (classes) => (
       >
         <Grid item>
           <Typography>
-            <FormattedMessage module="tasksManagement" id="benefitPlanTask.detailsPage.triage.headPanelTitle" />
+            <FormattedMessage module="tasksManagement" id="task.detailsPage.triage.headPanelTitle" />
           </Typography>
         </Grid>
       </Grid>
@@ -56,7 +57,7 @@ class TaskHeadPanel extends FormPanel {
           <Grid item xs={3} className={classes.item}>
             <TextInput
               module="tasksManagement"
-              label="benefitPlanTask.source"
+              label="task.source"
               readOnly={readOnly}
               value={task?.source}
               onChange={(source) => this.updateAttribute('source', source)}
@@ -65,18 +66,18 @@ class TaskHeadPanel extends FormPanel {
           <Grid item xs={3} className={classes.item}>
             <TextInput
               module="tasksManagement"
-              label="benefitPlanTask.type"
+              label="task.type"
               readOnly={readOnly}
-              value={task?.type}
+              value={trimBusinessEvent(task?.businessEvent)}
               onChange={(type) => this.updateAttribute('type', type)}
             />
           </Grid>
           <Grid item xs={3} className={classes.item}>
             <TextInput
               module="tasksManagement"
-              label="benefitPlanTask.entity"
+              label="task.entity"
               readOnly={readOnly}
-              value={task?.entity}
+              value={task?.entityString}
               onChange={(entity) => this.updateAttribute('entity', entity)}
             />
           </Grid>
@@ -95,15 +96,15 @@ class TaskHeadPanel extends FormPanel {
           <Grid item xs={3} className={classes.item}>
             <TextAreaInput
               module="tasksManagement"
-              label="benefitPlanTask.businessStatus"
+              label="task.businessStatus"
               readOnly={readOnly}
               value={task?.businessStatus}
               onChange={(businessStatus) => this.updateAttribute('businessStatus', businessStatus)}
             />
           </Grid>
           <Grid item xs={3} className={classes.item}>
             <TaskStatusPicker
-              label="benefitPlanTask.status"
+              label="task.status"
               withLabel
               nullLabel={formatMessage(intl, 'tasksManagement', 'defaultValue.any')}
               readOnly={readOnly}

diff --git a/src/components/TaskPreviewCell.js b/src/components/TaskPreviewCell.js
@@ -2,20 +2,20 @@ import React from 'react';
 import { HYPHEN } from '../constants';
 
 function TaskPreviewCell({
-  formatterIndex, itemData, incomingData, formatter,
+  formatterIndex, itemData, incomingData, formatter, jsonExt,
 }) {
   const showHistorical = (itemIncomingData) => {
-    if (formatter(itemData, formatterIndex) === formatter(itemIncomingData, formatterIndex)
-        || !formatter(itemIncomingData, formatterIndex)) {
+    if (formatter(itemData, jsonExt, formatterIndex) === formatter(itemIncomingData, jsonExt, formatterIndex)
+        || !formatter(itemIncomingData, jsonExt, formatterIndex)) {
       return HYPHEN;
     }
-    return formatter(itemIncomingData, formatterIndex);
+    return formatter(itemIncomingData, jsonExt, formatterIndex);
   };
 
   return (
     <>
       <p>
-        {formatter(itemData, formatterIndex)}
+        {formatter(itemData, jsonExt, formatterIndex) ?? HYPHEN}
       </p>
       <p style={{ fontWeight: 'bold' }}>
         {showHistorical(incomingData)}

diff --git a/src/components/TaskPreviewPanel.js b/src/components/TaskPreviewPanel.js
@@ -1,51 +1,46 @@
 import React, { useState, useEffect } from 'react';
 import { makeStyles, Paper, Typography } from '@material-ui/core';
-import {
-  Contributions, useTranslations,
-  useModulesManager,
-} from '@openimis/fe-core';
-import {
-  BENEFIT_PLAN_TASK_PREVIEW_TABLE_VALUE,
-  BENEFIT_PLAN_UPDATE_STRING, EMPTY_STRING,
-  TASKS_PREVIEW_CONTRIBUTION_KEY,
-} from '../constants';
+import { useModulesManager } from '@openimis/fe-core';
+import { EMPTY_STRING, TASK_CONTRIBUTION_KEY } from '../constants';
+import TaskPreviewTable from './TaskPreviewTable';
 
 const useStyles = makeStyles((theme) => ({
   paper: theme.paper.paper,
   title: theme.paper.title,
 }));
 
-function TaskPreviewPanel({
-  rights,
-  edited,
-}) {
+function TaskPreviewPanel({ rights, edited }) {
   const modulesManager = useModulesManager();
   const classes = useStyles();
-  const { formatMessage } = useTranslations('tasksManagement', modulesManager);
-  const [taskTable, setTaskTable] = useState(EMPTY_STRING);
+  const [header, setHeader] = useState(EMPTY_STRING);
+  const [tableTaskHeaders, setTableTaskHeaders] = useState([]);
+  const [taskItemFormatters, setTaskItemFormatters] = useState([]);
   const task = { ...edited };
 
   useEffect(() => {
-    switch (task?.source) {
-      case BENEFIT_PLAN_UPDATE_STRING:
-        setTaskTable(BENEFIT_PLAN_TASK_PREVIEW_TABLE_VALUE);
-        break;
-      default:
-        setTaskTable(EMPTY_STRING);
+    if (task.source) {
+      const contrib = modulesManager.getContribs(TASK_CONTRIBUTION_KEY)
+        .find((c) => c.taskSource.includes(task.source));
+
+      if (contrib) {
+        const { tableHeaders, itemFormatters, text } = contrib;
+        setHeader(text);
+        setTableTaskHeaders(tableHeaders);
+        setTaskItemFormatters(itemFormatters);
+      }
     }
-  }, [task]);
+  }, [task.source]);
 
-  return taskTable && (
+  return (
     <Paper className={classes.paper}>
       <Typography className={classes.title}>
-        {formatMessage('benefitPlanTask.detailsPage.triage.preview')}
+        {header}
       </Typography>
-      <Contributions
-        contributionKey={TASKS_PREVIEW_CONTRIBUTION_KEY}
+      <TaskPreviewTable
         rights={rights}
-        value={taskTable}
-        formatMessage={formatMessage}
         previewItem={task}
+        tableHeaders={tableTaskHeaders}
+        itemFormatters={taskItemFormatters}
       />
     </Paper>
   );