CM-144: add my tasks fe (#3)

* CM-144: add my tasks fe

* CM-144: remove unused variables

src/actions.js

@@ -26,6 +26,7 @@ const TASK_FULL_PROJECTION = () => [
   'status',
   'executorActionEvent',
   'businessEvent',
+  'businessStatus',
   'dateCreated',
   'isDeleted',
   'taskGroup{id, code, completionPolicy}',
@@ -50,6 +51,11 @@ export const formatTaskGQL = (task) => `
   ${task?.taskGroup?.id ? `taskGroupId: "${decodeId(task.taskGroup.id)}"` : ''}
   `;
 
+export const formatTaskResolveGQL = (task, user, approveOrFail) => `
+  ${task?.id ? `id: "${task.id}"` : ''}
+  ${user && approveOrFail ? `businessStatus: "{\\"${user.id}\\": \\"${approveOrFail}\\"}"` : ''}
+  `;
+
 const PERFORM_MUTATION = (mutationType, mutationInput, ACTION, clientMutationLabel) => {
   const mutation = formatMutation(mutationType, mutationInput, ACTION);
   const requestedDateTime = new Date();
@@ -139,3 +145,12 @@ export function updateTask(task, clientMutationLabel) {
     clientMutationLabel,
   );
 }
+
+export function resolveTask(task, clientMutationLabel, user, approveOrFail) {
+  return PERFORM_MUTATION(
+    MUTATION_SERVICE.TASK.RESOLVE,
+    formatTaskResolveGQL(task, user, approveOrFail),
+    ACTION_TYPE.RESOLVE_TASK,
+    clientMutationLabel,
+  );
+}

src/components/TaskApprovementPanel.js

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import {
+  makeStyles, Paper, Fab,
+} from '@material-ui/core';
+import {
+  useTranslations,
+  useModulesManager, coreConfirm, clearConfirm, journalize,
+} from '@openimis/fe-core';
+import ClearIcon from '@material-ui/icons/Clear';
+import CheckIcon from '@material-ui/icons/Check';
+import {
+  APPROVED, EMPTY_STRING,
+  FAILED, TASK_STATUS,
+} from '../constants';
+import { resolveTask } from '../actions';
+
+const useStyles = makeStyles((theme) => ({
+  paper: theme.paper.paper,
+  title: theme.paper.title,
+  button: theme.paper.button,
+  fabContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  fab: {
+    margin: theme.spacing(1),
+  },
+}));
+
+function TaskApprovementPanel({
+  edited,
+  user,
+  resolveTask,
+  submittingMutation,
+  coreConfirm,
+  clearConfirm,
+  mutation,
+  confirmed,
+}) {
+  const modulesManager = useModulesManager();
+  const classes = useStyles();
+  const { formatMessage } = useTranslations('tasksManagement', modulesManager);
+  const prevSubmittingMutationRef = useRef();
+  const [approveOrFail, setApproveOrFail] = useState(EMPTY_STRING);
+  const [disable, setDisable] = useState(false);
+  const task = { ...edited };
+
+  useEffect(() => {
+    if (task?.businessStatus && user) {
+      const businesStatus = JSON.parse(task.businessStatus);
+      if (Object.keys(businesStatus).includes(user?.id)) {
+        setDisable(true);
+      } else {
+        setDisable(false);
+      }
+    }
+  }, [task.businessStatus, user]);
+
+  useEffect(() => {
+    if (prevSubmittingMutationRef.current && !submittingMutation) {
+      journalize(mutation);
+    }
+  }, [submittingMutation]);
+
+  useEffect(() => {
+    prevSubmittingMutationRef.current = submittingMutation;
+  });
+
+  useEffect(() => {
+    if (task?.id && user?.id) {
+      if (confirmed) {
+        setDisable(true);
+        resolveTask(
+          task,
+          formatMessage('task.resolve.mutationLabel'),
+          user,
+          approveOrFail,
+        );
+      }
+    }
+    return () => confirmed && clearConfirm(false);
+  }, [confirmed]);
+
+  const openResolveTaskConfirmDialog = () => coreConfirm(
+    formatMessage('task.resolve.confirm.title'),
+    approveOrFail === APPROVED ? formatMessage('task.resolve.confirm.fail.message')
+      : formatMessage('task.resolve.confirm.approve.message'),
+  );
+
+  const handleButtonClick = (choiceString) => {
+    if (task?.id && user?.id) {
+      openResolveTaskConfirmDialog(approveOrFail);
+      setApproveOrFail(choiceString);
+    }
+  };
+
+  return (
+    <Paper className={classes.paper}>
+      <div className={classes.fabContainer}>
+        <div className={classes.fab}>
+          <Fab
+            color="primary"
+            disabled={task.status === TASK_STATUS.RECEIVED || disable}
+            onClick={() => handleButtonClick(APPROVED)}
+          >
+            <CheckIcon />
+          </Fab>
+        </div>
+        <div className={classes.fab}>
+          <Fab
+            color="primary"
+            disabled={task.status === TASK_STATUS.RECEIVED || disable}
+            onClick={() => handleButtonClick(FAILED)}
+          >
+            <ClearIcon />
+          </Fab>
+        </div>
+      </div>
+    </Paper>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+  user: !!state.core && !!state.core.user ? state.core.user : null,
+  confirmed: state.core.confirmed,
+  submittingMutation: state.socialProtection.submittingMutation,
+  mutation: state.socialProtection.mutation,
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  resolveTask,
+  coreConfirm,
+  clearConfirm,
+  journalize,
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(TaskApprovementPanel);

src/components/TaskHeadPanel.js

@@ -4,6 +4,7 @@ import {
   withModulesManager,
   FormPanel,
   TextInput,
+  TextAreaInput,
   FormattedMessage,
   formatMessage,
 } from '@openimis/fe-core';
@@ -90,7 +91,7 @@ class TaskHeadPanel extends FormPanel {
             />
           </Grid>
           <Grid item xs={3} className={classes.item}>
-            <TextInput
+            <TextAreaInput
               module="tasksManagement"
               label="benefitPlanTask.businessStatus"
               readOnly={readOnly}

src/constants.js

@@ -58,3 +58,6 @@ export const TASKS_PREVIEW_CONTRIBUTION_KEY = 'tasksManagement.taskPreview';
 export const BENEFIT_PLAN_TASK_PREVIEW_TABLE_VALUE = 'BenefitPlanTaskPreviewTable';
 
 export const BENEFIT_PLAN_UPDATE_STRING = 'Benefit Plan Update';
+
+export const APPROVED = 'APPROVED';
+export const FAILED = 'FAILED';

src/pages/TaskDetailsPage.js

@@ -11,6 +11,7 @@ import {
 import _ from 'lodash';
 import TaskHeadPanel from '../components/TaskHeadPanel';
 import TaskPreviewPanel from '../components/TaskPreviewPanel';
+import TaskApprovementPanel from '../components/TaskApprovementPanel';
 import { fetchTask, updateTask } from '../actions';
 
 const useStyles = makeStyles((theme) => ({
@@ -77,10 +78,10 @@ function TaskDetailsPage({
         readOnly
         HeadPanel={TaskHeadPanel}
         formatMessage={formatMessage}
-        Panels={[TaskPreviewPanel]}
+        Panels={[TaskPreviewPanel, TaskApprovementPanel]}
         rights={rights}
         saveTooltip={formatMessage(
-          `benefitPlan.saveButton.tooltip.${canSave() ? 'enabled' : 'disabled'}`,
+          `tasksManagement.saveButton.tooltip.${canSave() ? 'enabled' : 'disabled'}`,
         )}
       />
     </div>

src/reducer.js

@@ -23,6 +23,7 @@ export const ACTION_TYPE = {
   DELETE_TASK_GROUP: 'TASK_MANAGEMENT_DELETE_TASK_GROUP',
   GET_TASK: 'TASK_MANAGEMENT_TASK',
   UPDATE_TASK: 'TASK_MANAGEMENT_UPDATE_TASK',
+  RESOLVE_TASK: 'TASK_MANAGEMENT_RESOLVE_TASK',
 };
 
 export const MUTATION_SERVICE = {
@@ -33,6 +34,7 @@ export const MUTATION_SERVICE = {
   },
   TASK: {
     UPDATE: 'updateTask',
+    RESOLVE: 'resolveTask',
   },
 };
 
@@ -144,6 +146,8 @@ function reducer(
       return dispatchMutationResp(state, MUTATION_SERVICE.TASK_GROUP.UPDATE, action);
     case SUCCESS(ACTION_TYPE.UPDATE_TASK):
       return dispatchMutationResp(state, MUTATION_SERVICE.TASK.UPDATE, action);
+    case SUCCESS(ACTION_TYPE.RESOLVE_TASK):
+      return dispatchMutationResp(state, MUTATION_SERVICE.TASK.RESOLVE, action);
     case SUCCESS(ACTION_TYPE.DELETE_TASK_GROUP):
       return dispatchMutationResp(state, MUTATION_SERVICE.TASK_GROUP.DELETE, action);
     default:

src/translations/en.json

@@ -22,6 +22,8 @@
   "tasksManagement.createButton.tooltip": "Create",
   "tasksManagement.deleteButton.tooltip": "Delete",
   "tasksManagement.saveButton.tooltip": "Save changes",
+  "tasksManagement.saveButton.tooltip.enabled": "Save changes",
+  "tasksManagement.saveButton.tooltip.disabled": "Disabled",
   "tasksManagement.viewDetailsButton.tooltip": "View details",
   "tasksManagement.groupsManagement.groupHelmet": "Task Group",
   "tasksManagement.taskGroup.detailsPage.title": "Task Group {code}",
@@ -41,5 +43,9 @@
   "tasksManagement.taskGroup.create.mutationLabel": "Create task group {code}",
   "tasksManagement.TaskExecutorsPicker.label": "Task Executors",
   "tasksManagement.TaskExecutorsPicker.placeholder": "Search for Task Executor...",
-  "tasksManagement.taskGroup.placeholder": "Not assigned"
+  "tasksManagement.taskGroup.placeholder": "Not assigned",
+  "tasksManagement.task.resolve.mutationLabel": "Resolving task",
+  "tasksManagement.task.resolve.confirm.title": "Resolve task",
+  "tasksManagement.task.resolve.confirm.approve.message": "Are you sure you want to approve this task?",
+  "tasksManagement.task.resolve.confirm.fail.message": "Are you sure you want to fail this task?"
 }