feat(datatrakWeb): RN-1339: View completed survey response from task

packages/datatrak-web-server/src/routes/TaskRoute.ts

@@ -28,6 +28,7 @@ const FIELDS = [
   'repeat_schedule',
   'survey_id',
   'entity_id',
+  'survey_response_id',
 ];
 
 export class TaskRoute extends Route<TaskRequest> {

packages/datatrak-web/src/views/Tasks/TaskDetailsPage.tsx

@@ -3,11 +3,12 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
 import styled from 'styled-components';
+import { Typography } from '@material-ui/core';
 import { TaskStatus } from '@tupaia/types';
-import { SpinningLoader } from '@tupaia/ui-components';
+import { Modal, ModalCenteredContent, SpinningLoader } from '@tupaia/ui-components';
 import { Button } from '../../components';
 import { TaskDetails, TaskPageHeader, TaskActionsMenu } from '../../features';
 import { useTask } from '../../api';
@@ -20,13 +21,35 @@ const ButtonWrapper = styled.div`
   flex: 1;
 `;
 
+const ErrorModal = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      title="Error loading survey response"
+      isOpen={isOpen}
+      onClose={onClose}
+      buttons={[
+        {
+          text: 'Close',
+          onClick: onClose,
+          id: 'close',
+        },
+      ]}
+    >
+      <ModalCenteredContent>
+        <Typography>
+          This response has since been deleted in the admin panel. Please contact your system
+          administrator for further questions.
+        </Typography>
+      </ModalCenteredContent>
+    </Modal>
+  );
+};
+
 export const TaskDetailsPage = () => {
+  const [errorModalOpen, setErrorModalOpen] = useState(false);
   const { taskId } = useParams();
   const { data: task, isLoading } = useTask(taskId);
 
-  const showCompleteButton =
-    task && task.taskStatus !== TaskStatus.completed && task.taskStatus !== TaskStatus.cancelled;
-
   const surveyUrl = task
     ? generatePath(ROUTES.SURVEY_SCREEN, {
         countryCode: task?.entity?.countryCode,
@@ -36,20 +59,41 @@ export const TaskDetailsPage = () => {
     : '';
 
   const from = useFromLocation();
+
+  const ButtonComponent = () => {
+    if (!task) return null;
+    if (task.taskStatus === TaskStatus.cancelled) return null;
+    if (task.taskStatus === TaskStatus.completed) {
+      if (!task.surveyResponseId)
+        return (
+          <Button onClick={() => setErrorModalOpen(true)} variant="outlined">
+            View completed survey
+          </Button>
+        );
+      return (
+        <Button to={`?responseId=${task.surveyResponseId}`} variant="outlined">
+          View completed survey
+        </Button>
+      );
+    }
+    return (
+      <Button to={surveyUrl} state={{ from }}>
+        Complete
+      </Button>
+    );
+  };
+
   return (
     <>
       <TaskPageHeader title="Task details">
-        {showCompleteButton && (
-          <ButtonWrapper>
-            <Button to={surveyUrl} state={{ from }}>
-              Complete
-            </Button>
-            <TaskActionsMenu {...task} />
-          </ButtonWrapper>
-        )}
+        <ButtonWrapper>
+          <ButtonComponent />
+          {task && <TaskActionsMenu {...task} />}
+        </ButtonWrapper>
       </TaskPageHeader>
       {isLoading && <SpinningLoader />}
       {task && <TaskDetails task={task} />}
+      <ErrorModal isOpen={errorModalOpen} onClose={() => setErrorModalOpen(false)} />
     </>
   );
 };