@openmrs/esm-patient-task-list-app 12.1.1-pre.10907

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

@@ -0,0 +1,408 @@
+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() {
+  expect(screen.getAllByText(/2024/).length).toBeGreaterThan(0);
+}
+
+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).toHaveTextContent(/\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).toHaveTextContent(/\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();
+    });
+  });
+});

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

@@ -0,0 +1,154 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { Checkbox, Tile, Tag, Layer } from '@carbon/react';
+import { showSnackbar, useLayoutType, EmptyCardIllustration } from '@openmrs/esm-framework';
+import { type Task, useTaskList, setTaskStatusCompleted, getPriorityLabel } from './task-list.resource';
+import Loader from '../loader/loader.component';
+import styles from './task-list-view.scss';
+
+export interface TaskListViewProps {
+  patientUuid: string;
+  onTaskClick?: (task: Task) => void;
+}
+
+const TaskListView: React.FC<TaskListViewProps> = ({ patientUuid, onTaskClick }) => {
+  const { t } = useTranslation();
+  const { tasks, isLoading, error, mutate } = useTaskList(patientUuid);
+  const isTablet = useLayoutType() === 'tablet';
+  const [pendingUpdates, setPendingUpdates] = useState<Set<string>>(new Set());
+
+  const addPendingUpdate = useCallback((uuid: string) => {
+    setPendingUpdates((current) => {
+      const next = new Set(current);
+      next.add(uuid);
+      return next;
+    });
+  }, []);
+
+  const removePendingUpdate = useCallback((uuid: string) => {
+    setPendingUpdates((current) => {
+      const next = new Set(current);
+      next.delete(uuid);
+      return next;
+    });
+  }, []);
+
+  const handleToggle = useCallback(
+    async (task: Task, checked: boolean) => {
+      addPendingUpdate(task.uuid);
+      try {
+        await setTaskStatusCompleted(patientUuid, task, checked);
+        await mutate();
+      } catch (_error) {
+        showSnackbar({
+          title: t('taskUpdateFailed', 'Unable to update task'),
+          kind: 'error',
+        });
+      } finally {
+        removePendingUpdate(task.uuid);
+      }
+    },
+    [addPendingUpdate, mutate, patientUuid, removePendingUpdate, t],
+  );
+
+  const isOverdue = useCallback((task: Task) => {
+    if (task.completed || !task.dueDate) {
+      return false;
+    }
+    const dueDate = task.dueDate.date;
+    if (!dueDate) {
+      return false;
+    }
+    const now = new Date();
+    // Create new Date objects for comparison without mutating originals
+    const nowDateOnly = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const dueDateOnly = new Date(dueDate.getFullYear(), dueDate.getMonth(), dueDate.getDate());
+    return dueDateOnly < nowDateOnly;
+  }, []);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <p className={styles.errorText}>{t('taskListLoadError', 'There was a problem loading the task list.')}</p>;
+  }
+
+  if (!tasks || tasks.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.emptyStateTile}>
+          <div className={styles.emptyStateTileContent}>
+            <EmptyCardIllustration />
+            <p className={styles.emptyStateContent}>{t('noTasksMessage', 'No tasks yet')}</p>
+          </div>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <ul className={styles.taskList}>
+      {tasks.map((task) => {
+        const isUpdating = pendingUpdates.has(task.uuid);
+        const overdue = isOverdue(task);
+        const assigneeDisplay = task.assignee
+          ? task.assignee.display ?? task.assignee.uuid
+          : t('noAssignment', 'No assignment');
+
+        return (
+          <li key={task.uuid}>
+            <Tile
+              role="listitem"
+              className={classNames(styles.taskTile, {
+                [styles.tabletTaskTile]: isTablet,
+                [styles.completedTile]: task.completed,
+              })}
+            >
+              <div className={styles.taskTileCheckbox}>
+                <div
+                  className={classNames(styles.checkboxWrapper, {
+                    [styles.completedCheckbox]: task.completed,
+                  })}
+                >
+                  <Checkbox
+                    id={`task-${task.uuid}`}
+                    labelText=""
+                    checked={task.completed}
+                    disabled={isUpdating}
+                    onChange={(_, { checked }) => handleToggle(task, checked)}
+                  />
+                </div>
+              </div>
+              <button onClick={() => onTaskClick?.(task)} className={styles.taskTileContentButton}>
+                <div className={styles.taskNameWrapper}>
+                  <span>{task.name}</span>
+                  {task.rationale && <div className={styles.taskRationalePreview}>{task.rationale}</div>}
+                  <div className={styles.taskAssignee}>{assigneeDisplay}</div>
+                </div>
+                <div className={styles.taskTags}>
+                  {task.priority && (
+                    <Tag
+                      type={task.priority === 'high' ? 'red' : task.priority === 'medium' ? 'gray' : 'green'}
+                      size="sm"
+                    >
+                      {getPriorityLabel(task.priority, t)}
+                    </Tag>
+                  )}
+                  {overdue && (
+                    <Tag type="red" size="sm">
+                      {t('overdue', 'Overdue')}
+                    </Tag>
+                  )}
+                </div>
+              </button>
+            </Tile>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default TaskListView;

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

@@ -0,0 +1,111 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.taskList {
+  padding: layout.$spacing-03;
+  display: grid;
+  gap: layout.$spacing-02;
+}
+
+.errorText {
+  margin: layout.$spacing-05 0;
+}
+
+.taskTile {
+  padding: 0;
+  border: 1px solid $grey-2;
+  display: flex;
+  flex-direction: row;
+}
+
+.tabletTaskTile {
+  &:not(:last-of-type) {
+    margin-bottom: layout.$spacing-04;
+  }
+}
+
+.taskTileCheckbox {
+  padding: layout.$spacing-03 0 layout.$spacing-03 layout.$spacing-05;
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  min-width: 0;
+}
+
+.taskTileContentButton {
+  padding: layout.$spacing-03 layout.$spacing-05;
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-03;
+  min-width: 0;
+  border: none;
+  background-color: transparent;
+  text-align: left;
+  flex: 1;
+  transition: background-color 1s ease-in-out;
+}
+
+.taskTileContentButton:hover {
+  background-color: rgba(colors.$gray-100, 0.03);
+}
+
+.completedTile {
+  opacity: 0.65;
+}
+
+.taskNameWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  flex: 1;
+  min-width: 0;
+}
+
+.taskRationalePreview {
+  font-size: 0.875rem;
+  color: $text-02;
+  line-height: 1.4;
+}
+
+.taskAssignee {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.taskTags {
+  display: flex;
+  gap: layout.$spacing-02;
+  flex-shrink: 0;
+}
+
+.checkboxWrapper {
+  :global(.cds--checkbox-label) {
+    font-weight: 600;
+  }
+}
+
+.completedCheckbox {
+  :global(.cds--checkbox-label) {
+    text-decoration: line-through;
+    color: $text-02;
+  }
+}
+
+.emptyStateTile {
+  padding: layout.$spacing-06 0;
+}
+
+.emptyStateTileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.emptyStateContent {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}