tweak(datatrakWeb): RN-1358: Assign task modal changes

packages/datatrak-web/src/features/Tasks/CreateTaskModal/RepeatScheduleInput.tsx

@@ -8,7 +8,7 @@ import { format, lastDayOfMonth } from 'date-fns';
 import { useWatch } from 'react-hook-form';
 import { Autocomplete } from '../../../components';
 
-const useRepeatScheduleOptions = dueDate => {
+export const getRepeatScheduleOptions = dueDate => {
   const noRepeat = {
     label: "Doesn't repeat",
     value: '',
@@ -69,7 +69,7 @@ interface RepeatScheduleInputProps {
 
 export const RepeatScheduleInput = ({ value = '', onChange }: RepeatScheduleInputProps) => {
   const { dueDate } = useWatch('dueDate');
-  const repeatScheduleOptions = useRepeatScheduleOptions(dueDate);
+  const repeatScheduleOptions = getRepeatScheduleOptions(dueDate);
 
   useEffect(() => {
     if (!dueDate) {

packages/datatrak-web/src/features/Tasks/StatusPill.tsx

@@ -47,6 +47,9 @@ export const STATUS_VALUES = {
 };
 
 export const StatusPill = ({ status }: { status: TaskStatusType }) => {
+  if (!status) {
+    return null;
+  }
   const statusInfo = STATUS_VALUES[status];
   // If the status is not found, return null. This should not happen in practice, but it's a good idea to handle it.
   if (!statusInfo) {

packages/datatrak-web/src/features/Tasks/TasksTable/AssignTaskModal.tsx

@@ -5,22 +5,92 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useForm, Controller } from 'react-hook-form';
+import { Typography } from '@material-ui/core';
 import { Modal, ModalCenteredContent } from '@tupaia/ui-components';
 import { AssigneeInput } from '../AssigneeInput';
 import { useEditTask } from '../../../api';
 import { Task } from '../../../types';
+import { getRepeatScheduleOptions } from '../CreateTaskModal/RepeatScheduleInput';
+import { StatusPill } from '../StatusPill';
+import { displayDate } from '../../../utils';
 
 const Container = styled(ModalCenteredContent)`
-  width: 20rem;
+  width: 26rem;
   max-width: 100%;
   margin: 0 auto;
+  padding-block: 2.5rem;
+`;
+
+const MetaDataContainer = styled.div`
+  padding-inline: 1rem;
+  padding-block-start: 1.1rem;
+  padding-block-end: 1.5rem;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 4px;
+  margin-block-end: 1.2rem;
+`;
+
+const Title = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  font-size: 0.875rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-weight: normal;
+  margin-block-end: 0.2rem;
+`;
+
+const Value = styled(Typography)`
+  font-size: 0.875rem;
+  font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+`;
+
+const ItemWrapper = styled.div`
+  &:not(:last-child) {
+    margin-block-end: 1.2rem;
+  }
+`;
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &:first-child {
+    width: 58%;
+    padding-inline-end: 1rem;
+  }
+  &:last-child {
+    width: 42%;
+    border-left: 1px solid ${({ theme }) => theme.palette.divider};
+    padding-inline-start: 1rem;
+  }
+  ${ItemWrapper} {
+    height: 2.5rem;
+  }
+`;
+
+const Row = styled.div`
+  display: flex;
+  margin-block-end: 1.2rem;
 `;
 
 interface AssignTaskModalProps {
   task: Task;
   Button: React.ComponentType<{ onClick: () => void }>;
 }
 
+const useDisplayRepeatSchedule = (task: Task) => {
+  // TODO: When repeating tasks are implemented, make sure the repeat schedule is displayed correctly once a due date is returned with the task
+  const repeatScheduleOptions = getRepeatScheduleOptions(task.dueDate);
+  const { label } = repeatScheduleOptions[0];
+  if (!task.repeatSchedule?.frequency) {
+    return label;
+  }
+  const { frequency } = task.repeatSchedule;
+  const selectedOption = repeatScheduleOptions.find(option => option.value === frequency);
+  if (selectedOption) return selectedOption.label;
+  return label;
+};
+
 export const AssignTaskModal = ({ task, Button }: AssignTaskModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const {
@@ -31,7 +101,7 @@ export const AssignTaskModal = ({ task, Button }: AssignTaskModalProps) => {
     mode: 'onChange',
   });
   const onClose = () => setIsOpen(false);
-  const { mutate: editTask, isLoading } = useEditTask(task?.id, onClose);
+  const { mutate: editTask, isLoading } = useEditTask(task.id, onClose);
 
   const modalButtons = [
     {
@@ -50,6 +120,8 @@ export const AssignTaskModal = ({ task, Button }: AssignTaskModalProps) => {
     },
   ];
 
+  const displayRepeatSchedule = useDisplayRepeatSchedule(task);
+
   return (
     <>
       <Button onClick={() => setIsOpen(true)} />
@@ -61,6 +133,34 @@ export const AssignTaskModal = ({ task, Button }: AssignTaskModalProps) => {
         isLoading={isLoading}
       >
         <Container>
+          <MetaDataContainer>
+            <Row>
+              <Column>
+                <ItemWrapper>
+                  <Title>Survey</Title>
+                  <Value>{task.survey.name}</Value>
+                </ItemWrapper>
+                <ItemWrapper>
+                  <Title>Repeating task</Title>
+                  <Value>{displayRepeatSchedule}</Value>
+                </ItemWrapper>
+              </Column>
+              <Column>
+                <ItemWrapper>
+                  <Title>Entity</Title>
+                  <Value>{task.entity.name}</Value>
+                </ItemWrapper>
+                <ItemWrapper>
+                  <Title>Due date</Title>
+                  <Value>{displayDate(task.dueDate)}</Value>
+                </ItemWrapper>
+              </Column>
+            </Row>
+            <ItemWrapper>
+              <Title>Status</Title>
+              <StatusPill status={task.taskStatus} />
+            </ItemWrapper>
+          </MetaDataContainer>
           <form onSubmit={handleSubmit(editTask)}>
             <Controller
               name="assignee_id"
@@ -69,11 +169,10 @@ export const AssignTaskModal = ({ task, Button }: AssignTaskModalProps) => {
               render={({ value, onChange, ref }, { invalid }) => (
                 <AssigneeInput
                   value={value}
-                  required
                   onChange={onChange}
                   inputRef={ref}
-                  countryCode={task?.entity?.countryCode}
-                  surveyCode={task?.survey?.code}
+                  countryCode={task.entity.countryCode}
+                  surveyCode={task.survey.code}
                   error={invalid}
                 />
               )}

packages/datatrak-web/src/types/task.ts

@@ -5,12 +5,7 @@
 
 import { DatatrakWebTasksRequest, TaskStatus } from '@tupaia/types';
 
-enum OtherTaskStatus {
-  overdue = 'overdue',
-  repeating = 'repeating',
-}
-
-export type TaskStatusType = TaskStatus | OtherTaskStatus;
+export type TaskStatusType = TaskStatus | 'overdue' | 'repeating';
 
 export type Task = DatatrakWebTasksRequest.ResBody['tasks'][0];
 

packages/datatrak-web/src/utils/date.ts

@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-export const displayDate = (date?: Date) => {
+export const displayDate = (date?: Date | null) => {
   if (!date) {
     return '';
   }