@openmrs/esm-task-list-app 1.0.0

package/src/workspace/task-details-view.component.tsx

@@ -0,0 +1,212 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import { Button, ButtonSet, Layer } from '@carbon/react';
+import { ArrowLeft, Edit } from '@carbon/react/icons';
+import { formatDate, getCoreTranslation, isOmrsDateToday, showModal, showSnackbar } from '@openmrs/esm-framework';
+import Loader from '../loader/loader.component';
+import {
+  useTask,
+  setTaskStatusCompleted,
+  taskListSWRKey,
+  getPriorityLabel,
+  type Task,
+  type DueDateType,
+} from './task-list.resource';
+import styles from './task-details-view.scss';
+
+export interface TaskDetailsViewProps {
+  patientUuid: string;
+  taskUuid: string;
+  onBack: () => void;
+  onEdit?: (task: Task) => void;
+}
+
+export interface DueDateDisplay {
+  type?: DueDateType;
+  dueDate?: string;
+  schedulingInfo?: string;
+}
+
+const TaskDetailsView: React.FC<TaskDetailsViewProps> = ({ patientUuid, taskUuid, onBack, onEdit }) => {
+  const { t } = useTranslation();
+  const { task, isLoading, error, mutate } = useTask(taskUuid);
+  const { mutate: mutateList } = useSWRConfig();
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const handleDelete = useCallback(() => {
+    if (!task) {
+      return;
+    }
+
+    const dispose = showModal('delete-task-confirmation-modal', {
+      closeModal: () => dispose(),
+      task,
+      patientUuid,
+      onDeleted: onBack,
+    });
+  }, [task, patientUuid, onBack]);
+
+  const handleToggleCompletion = useCallback(
+    async (completed: boolean) => {
+      if (!task) {
+        return;
+      }
+
+      setIsUpdating(true);
+      try {
+        await setTaskStatusCompleted(patientUuid, task, completed);
+        await mutate();
+        await mutateList(taskListSWRKey(patientUuid));
+        showSnackbar({
+          title: completed
+            ? t('taskCompleted', 'Task marked as complete')
+            : t('taskIncomplete', 'Task marked as incomplete'),
+          kind: 'success',
+        });
+      } catch (_error) {
+        showSnackbar({
+          title: t('taskUpdateFailed', 'Unable to update task'),
+          kind: 'error',
+        });
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [task, patientUuid, mutate, mutateList, t],
+  );
+
+  const dueDateDisplay: DueDateDisplay = useMemo(() => {
+    if (!task) {
+      return {};
+    }
+    const scheduledToday = isOmrsDateToday(task.createdDate);
+    if (task.dueDate?.type === 'DATE') {
+      return {
+        type: 'DATE',
+        dueDate: formatDate(task.dueDate.date, { mode: 'wide' }),
+      };
+    }
+    if (task.dueDate?.type === 'THIS_VISIT') {
+      return {
+        type: 'THIS_VISIT',
+        schedulingInfo: scheduledToday
+          ? t('scheduledTodayForThisVisit', 'Today for this visit')
+          : t('scheduledOnThisVisit', 'On {{date}} for the same visit', {
+              date: formatDate(task.createdDate),
+            }),
+        dueDate: task.dueDate.date ? formatDate(task.dueDate.date, { mode: 'wide' }) : undefined,
+      };
+    }
+    if (task.dueDate?.type === 'NEXT_VISIT') {
+      return {
+        type: 'NEXT_VISIT',
+        schedulingInfo: scheduledToday
+          ? t('scheduledTodayForNextVisit', 'Today for next visit')
+          : t('scheduledOnNextVisit', 'On {{date}} for the following visit', {
+              date: formatDate(task.createdDate),
+            }),
+        dueDate: task.dueDate.date ? formatDate(task.dueDate.date, { mode: 'wide' }) : undefined,
+      };
+    }
+    return {};
+  }, [task, t]);
+
+  const assigneeDisplay = task?.assignee
+    ? (task.assignee.display ?? task.assignee.uuid)
+    : t('noAssignment', 'No assignment');
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error || !task) {
+    return (
+      <>
+        <p className={styles.errorText}>{t('taskLoadError', 'There was a problem loading the task.')}</p>
+        <Button kind="ghost" renderIcon={(props) => <ArrowLeft size={16} {...props} />} onClick={onBack}>
+          {t('backToTaskList', 'Back to task list')}
+        </Button>
+      </>
+    );
+  }
+
+  return (
+    <div className={styles.taskDetailsContainer}>
+      <Layer className={styles.taskDetailsBox}>
+        <div className={styles.section}>
+          <div className={styles.sectionHeader}>
+            <h5 className={styles.sectionTitle}>{t('task', 'Task')}</h5>
+            {onEdit && (
+              <Button
+                kind="ghost"
+                size="sm"
+                renderIcon={(props) => <Edit size={16} {...props} />}
+                onClick={() => onEdit(task)}
+              >
+                {getCoreTranslation('edit')}
+              </Button>
+            )}
+          </div>
+          <div>
+            <div className={styles.detailRow}>
+              <div className={styles.detailLabel}>{t('name', 'Name')}</div>
+              <div>{task.name}</div>
+            </div>
+            <div className={styles.detailRow}>
+              <div className={styles.detailLabel}>{t('createdBy', 'Created by')}</div>
+              <div>{task.createdBy}</div>
+            </div>
+            <div className={styles.detailRow}>
+              <div className={styles.detailLabel}>{t('assignedTo', 'Assigned to')}</div>
+              <div>{assigneeDisplay}</div>
+            </div>
+            {dueDateDisplay.type !== 'DATE' && dueDateDisplay.schedulingInfo && (
+              <div className={styles.detailRow}>
+                <div className={styles.detailLabel}>{t('scheduledInfo', 'Scheduled')}</div>
+                <div>{dueDateDisplay.schedulingInfo}</div>
+              </div>
+            )}
+            {dueDateDisplay.dueDate && (
+              <div className={styles.detailRow}>
+                <div className={styles.detailLabel}>{t('dueDate', 'Due date')}</div>
+                <div>{dueDateDisplay.dueDate}</div>
+              </div>
+            )}
+            {task.priority && (
+              <div className={styles.detailRow}>
+                <div className={styles.detailLabel}>{t('priorityLabel', 'Priority')}</div>
+                <div>{getPriorityLabel(task.priority, t)}</div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {task.rationale && (
+          <div className={styles.section}>
+            <h5 className={styles.sectionTitle}>{t('rationale', 'Rationale')}</h5>
+            <div>
+              <p>{task.rationale}</p>
+            </div>
+          </div>
+        )}
+      </Layer>
+      <ButtonSet className={styles.actionButtons}>
+        <Button kind="danger--tertiary" onClick={handleDelete}>
+          {t('deleteTask', 'Delete task')}
+        </Button>
+        {!task.completed ? (
+          <Button kind="secondary" onClick={() => handleToggleCompletion(true)} disabled={isUpdating}>
+            {t('markComplete', 'Mark complete')}
+          </Button>
+        ) : (
+          <Button kind="tertiary" onClick={() => handleToggleCompletion(false)} disabled={isUpdating}>
+            {t('markIncomplete', 'Mark incomplete')}
+          </Button>
+        )}
+      </ButtonSet>
+    </div>
+  );
+};
+
+export default TaskDetailsView;

package/src/workspace/task-details-view.scss

@@ -0,0 +1,67 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.taskDetailsContainer {
+  padding: 0 layout.$spacing-05;
+}
+
+.taskDetailsBox {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-06;
+  flex: 1;
+  background-color: $ui-01;
+  padding: layout.$spacing-05;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sectionTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.detailRow {
+  padding-bottom: layout.$spacing-05;
+}
+
+.detailLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  padding-bottom: layout.$spacing-02;
+}
+
+
+.actionButtons {
+  display: flex;
+  gap: layout.$spacing-03;
+  padding-top: layout.$spacing-05;
+
+  :global(.cds--btn) {
+    width: auto;
+    flex-grow: 1;
+  }
+}
+
+.helperText {
+  margin: layout.$spacing-05 0;
+  color: $interactive-01;
+}
+
+.errorText {
+  margin: layout.$spacing-05 0;
+  color: $danger;
+}

package/src/workspace/task-details-view.test.tsx

@@ -0,0 +1,411 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useTask, type Task } from './task-list.resource';
+import TaskDetailsView from './task-details-view.component';
+
+jest.mock('./task-list.resource');
+
+const mockUseTask = jest.mocked(useTask);
+
+// Helper to check if a date-like value is displayed (contains digits and date separators)
+function expectDateToBeDisplayed() {
+  const dueDateLabel = screen.getByText(/due date/i);
+  const dueDateRow = dueDateLabel.closest('div')?.parentElement;
+  const dateValue = dueDateRow?.querySelector('div:last-child')?.textContent;
+  expect(dateValue).toMatch(/\d/); // Contains at least one digit
+}
+
+describe('TaskDetailsView', () => {
+  const mockOnBack = jest.fn();
+  const mockOnEdit = jest.fn();
+  const patientUuid = 'patient-uuid-123';
+  const taskUuid = 'task-uuid-456';
+
+  const baseTask: Task = {
+    uuid: taskUuid,
+    name: 'Test Task',
+    status: 'not-started',
+    createdDate: new Date('2024-01-15T10:00:00Z'),
+    completed: false,
+    createdBy: 'Test User',
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-01-15T10:00:00Z'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('Loading and error states', () => {
+    it('shows loading state and hides task content while fetching task', () => {
+      mockUseTask.mockReturnValue({
+        task: null,
+        isLoading: true,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.queryByText(/task/i)).not.toBeInTheDocument();
+    });
+
+    it('shows error message and back button when task fails to load', () => {
+      mockUseTask.mockReturnValue({
+        task: null,
+        isLoading: false,
+        error: new Error('Failed to load'),
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.getByText(/problem loading the task/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /back to task list/i })).toBeInTheDocument();
+    });
+
+    it('calls onBack callback when back button is clicked in error state', async () => {
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      mockUseTask.mockReturnValue({
+        task: null,
+        isLoading: false,
+        error: new Error('Failed to load'),
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      const backButton = screen.getByRole('button', { name: /back to task list/i });
+      await user.click(backButton);
+
+      expect(mockOnBack).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Due date display logic', () => {
+    describe('DATE type tasks', () => {
+      it('shows only due date (no scheduling info) for DATE type tasks', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-15T10:00:00Z'),
+          dueDate: {
+            type: 'DATE',
+            date: new Date('2024-01-20T10:00:00Z'),
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.queryByText(/scheduled/i)).not.toBeInTheDocument();
+        expect(screen.getByText(/due date/i)).toBeInTheDocument();
+        expectDateToBeDisplayed();
+      });
+    });
+
+    describe('THIS_VISIT type tasks', () => {
+      it('shows "today for this visit" when THIS_VISIT task was created today and visit is ongoing', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-15T10:00:00Z'),
+          dueDate: {
+            type: 'THIS_VISIT',
+            // No date means visit is ongoing
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/today for this visit/i)).toBeInTheDocument();
+        expect(screen.queryByText(/due date/i)).not.toBeInTheDocument();
+      });
+
+      it('shows creation date with "for the same visit" when THIS_VISIT task was created in the past and visit is ongoing', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-10T10:00:00Z'),
+          dueDate: {
+            type: 'THIS_VISIT',
+            // No date means visit is ongoing
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        jest.setSystemTime(new Date('2024-01-12T10:00:00Z'));
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/for the same visit/i)).toBeInTheDocument();
+        // Should contain a date-like value (digits)
+        const schedulingInfo = screen.getByText(/for the same visit/i);
+        expect(schedulingInfo.textContent).toMatch(/\d/);
+        expect(screen.queryByText(/due date/i)).not.toBeInTheDocument();
+      });
+
+      it('shows both scheduling info and due date when THIS_VISIT task has ended visit', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-10T10:00:00Z'),
+          dueDate: {
+            type: 'THIS_VISIT',
+            date: new Date('2024-01-12T15:00:00Z'), // Visit ended
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/for the same visit/i)).toBeInTheDocument();
+        expect(screen.getByText(/due date/i)).toBeInTheDocument();
+        expectDateToBeDisplayed();
+      });
+    });
+
+    describe('NEXT_VISIT type tasks', () => {
+      it('shows "today for next visit" when NEXT_VISIT task was created today', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-15T10:00:00Z'),
+          dueDate: {
+            type: 'NEXT_VISIT',
+            // No date means next visit hasn't ended yet
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/today for next visit/i)).toBeInTheDocument();
+        expect(screen.queryByText(/due date/i)).not.toBeInTheDocument();
+      });
+
+      it('shows creation date with "for the following visit" when NEXT_VISIT task was created in the past and visit is ongoing', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-10T10:00:00Z'),
+          dueDate: {
+            type: 'NEXT_VISIT',
+            // No date means next visit hasn't ended yet
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/for the following visit/i)).toBeInTheDocument();
+        // Should contain a date-like value (digits)
+        const schedulingInfo = screen.getByText(/for the following visit/i);
+        expect(schedulingInfo.textContent).toMatch(/\d/);
+        expect(screen.queryByText(/due date/i)).not.toBeInTheDocument();
+      });
+
+      it('shows both scheduling info and due date when NEXT_VISIT task has ended visit', () => {
+        const task: Task = {
+          ...baseTask,
+          createdDate: new Date('2024-01-10T10:00:00Z'),
+          dueDate: {
+            type: 'NEXT_VISIT',
+            date: new Date('2024-01-18T15:00:00Z'), // Next visit ended
+          },
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.getByText(/for the following visit/i)).toBeInTheDocument();
+        expect(screen.getByText(/due date/i)).toBeInTheDocument();
+        expectDateToBeDisplayed();
+      });
+    });
+
+    describe('Tasks with no due date', () => {
+      it('hides scheduling info and due date when task has no due date', () => {
+        const task: Task = {
+          ...baseTask,
+          // No dueDate property
+        };
+
+        mockUseTask.mockReturnValue({
+          task,
+          isLoading: false,
+          error: null,
+          mutate: jest.fn(),
+        });
+
+        render(
+          <TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />,
+        );
+
+        expect(screen.queryByText(/scheduled/i)).not.toBeInTheDocument();
+        expect(screen.queryByText(/due date/i)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('User interactions', () => {
+    it('calls onEdit callback with task when edit button is clicked', async () => {
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      const task: Task = {
+        ...baseTask,
+      };
+
+      mockUseTask.mockReturnValue({
+        task,
+        isLoading: false,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} onEdit={mockOnEdit} />);
+
+      const editButton = screen.getByRole('button', { name: /edit/i });
+      await user.click(editButton);
+
+      expect(mockOnEdit).toHaveBeenCalledTimes(1);
+      expect(mockOnEdit).toHaveBeenCalledWith(task);
+    });
+
+    it('hides edit button when onEdit prop is not provided', () => {
+      const task: Task = {
+        ...baseTask,
+      };
+
+      mockUseTask.mockReturnValue({
+        task,
+        isLoading: false,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.queryByRole('button', { name: /edit/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Task information display', () => {
+    it('shows task name, creator, and assignee information', () => {
+      const task: Task = {
+        ...baseTask,
+        name: 'Complete patient assessment',
+        createdBy: 'Dr. Smith',
+        assignee: {
+          uuid: 'provider-uuid',
+          display: 'Nurse Johnson',
+          type: 'person',
+        },
+      };
+
+      mockUseTask.mockReturnValue({
+        task,
+        isLoading: false,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.getByText('Complete patient assessment')).toBeInTheDocument();
+      expect(screen.getByText('Dr. Smith')).toBeInTheDocument();
+      expect(screen.getByText('Nurse Johnson')).toBeInTheDocument();
+    });
+
+    it('shows "No assignment" text when task has no assignee', () => {
+      const task: Task = {
+        ...baseTask,
+        assignee: undefined,
+      };
+
+      mockUseTask.mockReturnValue({
+        task,
+        isLoading: false,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.getByText(/no assignment/i)).toBeInTheDocument();
+    });
+
+    it('shows rationale section when task has rationale text', () => {
+      const task: Task = {
+        ...baseTask,
+        rationale: 'Patient requires follow-up care',
+      };
+
+      mockUseTask.mockReturnValue({
+        task,
+        isLoading: false,
+        error: null,
+        mutate: jest.fn(),
+      });
+
+      render(<TaskDetailsView patientUuid={patientUuid} taskUuid={taskUuid} onBack={mockOnBack} />);
+
+      expect(screen.getByText(/rationale/i)).toBeInTheDocument();
+      expect(screen.getByText('Patient requires follow-up care')).toBeInTheDocument();
+    });
+  });
+});