vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskInputNote.tsx

@@ -0,0 +1,250 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Divider,
+  Flex,
+  Modal,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Textarea,
+} from '@mantine/core';
+import { createReference, formatDate, getDisplayString, getReferenceString } from '@medplum/core';
+import type { Annotation, QuestionnaireResponse, Task, Reference } from '@medplum/fhirtypes';
+import { Loading, useMedplum, useMedplumProfile, useResource } from '@medplum/react';
+import { IconCheck, IconTrash } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { showErrorNotification } from '../../utils/notifications';
+import { TaskQuestionnaireForm } from './encounter/TaskQuestionnaireForm';
+import { useDebouncedUpdateResource } from '../../hooks/useDebouncedUpdateResource';
+import { TaskNoteItem } from './TaskNoteItem';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { SAVE_TIMEOUT_MS } from '../../config/constants';
+
+interface TaskInputNoteProps {
+  task: Task | Reference<Task>;
+  allowEdit?: boolean;
+  onTaskChange?: (task: Task) => void;
+  onDeleteTask?: (task: Task) => void;
+}
+
+export function TaskInputNote(props: TaskInputNoteProps): React.JSX.Element {
+  const { task: initialTask, allowEdit = true, onTaskChange, onDeleteTask } = props;
+  const medplum = useMedplum();
+  const debouncedUpdateResource = useDebouncedUpdateResource(medplum);
+  const author = useMedplumProfile();
+  const task = useResource(initialTask);
+  const [note, setNote] = useState<string>('');
+  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
+
+  const handleAddComment = async (): Promise<void> => {
+    if (!task) {
+      return;
+    }
+
+    const comment: Annotation = {
+      text: note,
+      authorReference: author && createReference(author),
+      time: new Date().toISOString(),
+    };
+
+    const taskNotes = [...(task.note || []), comment];
+
+    try {
+      const updatedTask = {
+        ...task,
+        note: taskNotes,
+      } as Task;
+      onTaskChange?.(updatedTask);
+      setNote('');
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  };
+
+  const handleDeleteTask = (): void => {
+    setShowDeleteModal(true);
+  };
+
+  const confirmDeleteTask = async (): Promise<void> => {
+    if (!task) {
+      return;
+    }
+    onDeleteTask?.(task);
+    setShowDeleteModal(false);
+  };
+
+  const handleMarkAsCompleted = async (): Promise<void> => {
+    if (!task) {
+      return;
+    }
+
+    try {
+      const result: Task = {
+        ...task,
+        status: 'completed',
+      };
+      onTaskChange?.(result);
+      await debouncedUpdateResource(result);
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  };
+
+  const saveQuestionnaireResponse = useDebouncedCallback(
+    async (task: Task, response: QuestionnaireResponse): Promise<void> => {
+      try {
+        if (response.id) {
+          await medplum.updateResource<QuestionnaireResponse>(response);
+        } else {
+          const updatedResponse = await medplum.createResource<QuestionnaireResponse>(response);
+          const updatedTask = await medplum.updateResource<Task>({
+            ...task,
+            output: [
+              {
+                type: { text: 'QuestionnaireResponse' },
+                valueReference: { reference: getReferenceString(updatedResponse) },
+              },
+            ],
+          });
+          onTaskChange?.(updatedTask);
+        }
+      } catch (err) {
+        showErrorNotification(err);
+      }
+    },
+    SAVE_TIMEOUT_MS
+  );
+
+  if (!task) {
+    return <Loading />;
+  }
+
+  return (
+    <Flex direction="column" h="100%">
+      <Paper h="100%">
+        <Flex justify="space-between" p="lg" h={72}>
+          <Flex justify="left" align="center" direction="row" pr="md">
+            <Text size="xl" fw={600} lh={1.2}>
+              {task.code?.text ?? `Task`}
+              {task?.authoredOn && ` from ${formatDate(task?.authoredOn)}`}
+            </Text>
+          </Flex>
+
+          {allowEdit && (
+            <Flex align="center" gap="md">
+              {onDeleteTask && (
+                <ActionIcon
+                  variant="outline"
+                  c="dimmed"
+                  color="gray"
+                  aria-label="Delete Task"
+                  radius="xl"
+                  w={36}
+                  h={36}
+                  onClick={() => handleDeleteTask()}
+                >
+                  <IconTrash size={24} />
+                </ActionIcon>
+              )}
+
+              <ActionIcon
+                variant={task.status === 'completed' ? 'filled' : 'outline'}
+                color={task.status === 'completed' ? 'blue' : 'gray'}
+                aria-label="Mark as Completed"
+                radius="xl"
+                w={36}
+                h={36}
+                onClick={() => handleMarkAsCompleted()}
+              >
+                <IconCheck size={24} />
+              </ActionIcon>
+            </Flex>
+          )}
+        </Flex>
+
+        <ScrollArea w="100%" h="calc(100% - 70px)" p="lg">
+          {task.description && (
+            <Stack mb="lg">
+              <Text size="lg">{task.description}</Text>
+              <Divider />
+            </Stack>
+          )}
+          <Stack>
+            {task?.focus?.reference?.startsWith('Questionnaire/') && (
+              <>
+                <Stack gap={0}>
+                  <Text size="lg" fw={600} mb="lg">
+                    Related Questionnaire
+                  </Text>
+                  <Card withBorder shadow="sm" p="md">
+                    <TaskQuestionnaireForm
+                      key={task.focus.reference}
+                      task={task}
+                      onChangeResponse={(response) => saveQuestionnaireResponse(task, response)}
+                    />
+                  </Card>
+                </Stack>
+                <Divider />
+              </>
+            )}
+
+            <Stack gap={0}>
+              <Text size="lg" fw={600} mb="md">
+                Notes
+              </Text>
+
+              {task.note?.map((note, index) => (
+                <TaskNoteItem key={note.id || index} note={note} index={index} />
+              ))}
+
+              {allowEdit && (
+                <Stack gap="xs">
+                  <Textarea
+                    placeholder="Add a note..."
+                    minRows={4}
+                    value={note ?? ''}
+                    onChange={(e) => setNote(e.currentTarget.value)}
+                    autosize
+                  />
+                  <Flex justify="flex-end">
+                    <Button type="submit" disabled={!note || note.trim() === ''} onClick={handleAddComment}>
+                      Submit
+                    </Button>
+                  </Flex>
+                </Stack>
+              )}
+            </Stack>
+          </Stack>
+        </ScrollArea>
+
+        <Modal
+          opened={showDeleteModal}
+          onClose={() => setShowDeleteModal(false)}
+          title="Delete Task"
+          size="md"
+          centered
+        >
+          <Stack gap="md">
+            <Text>Are you sure you want to delete this task? This action cannot be undone.</Text>
+            <Text fw={500} c="dimmed">
+              Task: {getDisplayString(task)}
+            </Text>
+            <Flex justify="flex-end" gap="sm">
+              <Button variant="outline" onClick={() => setShowDeleteModal(false)}>
+                Cancel
+              </Button>
+              <Button color="red" onClick={confirmDeleteTask}>
+                Delete
+              </Button>
+            </Flex>
+          </Stack>
+        </Modal>
+      </Paper>
+    </Flex>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskListItem.module.css

@@ -0,0 +1,23 @@
+.contentContainer {
+  transition: background 0.2s;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-gray-0));
+}
+
+.content {
+  flex: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: ellipsis;
+  white-space: nowrap;
+}
+.contentContainer:hover {
+  background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-9));
+}
+
+.contentContainer.selected {
+  background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-9));
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskListItem.test.tsx

@@ -0,0 +1,149 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { render, screen } from '@testing-library/react';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient } from '@medplum/mock';
+import { MemoryRouter } from 'react-router';
+import { describe, expect, test, beforeEach, vi } from 'vitest';
+import { TaskListItem } from './TaskListItem';
+import type { Task, Patient, Practitioner } from '@medplum/fhirtypes';
+
+describe('TaskListItem', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+  });
+
+  const setup = (task: Task, selectedTask?: Task, getTaskUri?: (task: Task) => string): ReturnType<typeof render> => {
+    const defaultGetTaskUri = (t: Task): string => `/Task/${t.id}`;
+    return render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <TaskListItem task={task} selectedTask={selectedTask} getTaskUri={getTaskUri ?? defaultGetTaskUri} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  const mockTask: Task = {
+    resourceType: 'Task',
+    id: 'task-123',
+    status: 'in-progress',
+    intent: 'order',
+    code: { text: 'Test Task' },
+    authoredOn: '2023-01-01T12:00:00Z',
+  };
+
+  test('renders task details correctly', () => {
+    setup(mockTask);
+    expect(screen.getByText('Test Task')).toBeInTheDocument();
+  });
+
+  test('renders status badge with correct status', () => {
+    setup(mockTask);
+    expect(screen.getByText('in progress')).toBeInTheDocument();
+  });
+
+  test('renders different status values correctly', () => {
+    const completedTask: Task = {
+      ...mockTask,
+      status: 'completed',
+    };
+    setup(completedTask);
+    expect(screen.getByText('completed')).toBeInTheDocument();
+  });
+
+  test('renders due date if present', () => {
+    const taskWithDueDate: Task = {
+      ...mockTask,
+      restriction: { period: { end: '2023-02-01' } },
+    };
+    setup(taskWithDueDate);
+    expect(screen.getByText(/Due/)).toBeInTheDocument();
+  });
+
+  test('renders patient name if present', async () => {
+    const patient: Patient = {
+      resourceType: 'Patient',
+      id: 'patient-123',
+      name: [{ given: ['John'], family: 'Doe' }],
+    };
+    await medplum.createResource(patient);
+
+    const taskWithPatient: Task = {
+      ...mockTask,
+      for: { reference: 'Patient/patient-123' },
+    };
+
+    setup(taskWithPatient);
+
+    expect(await screen.findByText('For: John Doe')).toBeInTheDocument();
+  });
+
+  test('renders assignee name if present', async () => {
+    const practitioner: Practitioner = {
+      resourceType: 'Practitioner',
+      id: 'practitioner-123',
+      name: [{ given: ['Jane'], family: 'Smith' }],
+    };
+    await medplum.createResource(practitioner);
+
+    const taskWithOwner: Task = {
+      ...mockTask,
+      owner: { reference: 'Practitioner/practitioner-123' },
+    };
+
+    setup(taskWithOwner);
+
+    expect(await screen.findByText('Assigned to Jane Smith')).toBeInTheDocument();
+  });
+
+  test('highlights selected task', () => {
+    setup(mockTask, mockTask);
+    expect(screen.getByText('Test Task')).toBeInTheDocument();
+  });
+
+  test('uses getTaskUri URL', () => {
+    setup(mockTask);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/Task/task-123');
+  });
+
+  test('uses custom URL from getTaskUri when provided', () => {
+    const getTaskUri = (task: Task): string => {
+      return `/Patient/patient-123/Task/${task.id}`;
+    };
+    render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <TaskListItem task={mockTask} selectedTask={undefined} getTaskUri={getTaskUri} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/Patient/patient-123/Task/task-123');
+  });
+
+  test('calls getTaskUri with correct task', () => {
+    const getTaskUri = vi.fn((task: Task) => `/Custom/${task.id}`);
+    render(
+      <MemoryRouter>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <TaskListItem task={mockTask} selectedTask={undefined} getTaskUri={getTaskUri} />
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+    expect(getTaskUri).toHaveBeenCalledWith(mockTask);
+    expect(getTaskUri).toHaveBeenCalledTimes(1);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/Custom/task-123');
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskListItem.tsx

@@ -0,0 +1,53 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Group, Stack, Text } from '@mantine/core';
+import { formatDate, formatHumanName } from '@medplum/core';
+import { MedplumLink, StatusBadge, useResource } from '@medplum/react';
+import type { HumanName, Task } from '@medplum/fhirtypes';
+import type { JSX } from 'react';
+import classes from './TaskListItem.module.css';
+import cx from 'clsx';
+
+interface TaskListItemProps {
+  task: Task;
+  selectedTask: Task | undefined;
+  getTaskUri: (task: Task) => string;
+}
+
+export function TaskListItem(props: TaskListItemProps): JSX.Element {
+  const { task, selectedTask, getTaskUri } = props;
+  const isSelected = selectedTask?.id === task.id;
+  const patient = useResource(task.for);
+  const owner = useResource(task.owner);
+  const taskFrom = task?.authoredOn ? `from ${formatDate(task?.authoredOn)}` : '';
+  const taskUrl = getTaskUri(task);
+
+  return (
+    <MedplumLink to={taskUrl}>
+      <Group
+        p="xs"
+        align="center"
+        wrap="nowrap"
+        className={cx(classes.contentContainer, {
+          [classes.selected]: isSelected,
+        })}
+      >
+        <Stack gap={0} flex={1}>
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <Text fw={700} className={classes.content}>
+              {task.code?.text ?? `Task ${taskFrom}`}
+            </Text>
+            <StatusBadge status={task.status} variant="light" />
+          </Group>
+          <Stack gap={0} c="dimmed">
+            {task.restriction?.period && <Text fw={500}>Due {formatDate(task.restriction?.period?.end)}</Text>}
+            {patient?.resourceType === 'Patient' && <Text>For: {formatHumanName(patient.name?.[0] as HumanName)}</Text>}
+            {owner?.resourceType === 'Practitioner' && (
+              <Text size="sm">Assigned to {formatHumanName(owner.name?.[0] as HumanName)}</Text>
+            )}
+          </Stack>
+        </Stack>
+      </Group>
+    </MedplumLink>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskNoteItem.test.tsx

@@ -0,0 +1,68 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { render, screen } from '@testing-library/react';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient } from '@medplum/mock';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { TaskNoteItem } from './TaskNoteItem';
+import type { Annotation, Practitioner } from '@medplum/fhirtypes';
+
+describe('TaskNoteItem', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+  });
+
+  const setup = (note: Annotation): ReturnType<typeof render> => {
+    return render(
+      <MedplumProvider medplum={medplum}>
+        <MantineProvider>
+          <TaskNoteItem note={note} index={0} />
+        </MantineProvider>
+      </MedplumProvider>
+    );
+  };
+
+  test('renders note text', () => {
+    const note: Annotation = {
+      text: 'Test note content',
+      time: '2023-01-01T12:00:00Z',
+    };
+    setup(note);
+    expect(screen.getByText('Test note content')).toBeInTheDocument();
+  });
+
+  test('renders author name', async () => {
+    const practitioner: Practitioner = {
+      resourceType: 'Practitioner',
+      id: 'practitioner-123',
+      name: [{ given: ['Alice'], family: 'Wonderland' }],
+    };
+    await medplum.createResource(practitioner);
+
+    const note: Annotation = {
+      text: 'Note with author',
+      authorReference: { reference: 'Practitioner/practitioner-123' },
+      time: '2023-01-01T12:00:00Z',
+    };
+
+    setup(note);
+
+    expect(await screen.findByText('Alice Wonderland')).toBeInTheDocument();
+  });
+
+  test('renders links in text', () => {
+    const note: Annotation = {
+      text: 'Check this link: https://example.com',
+      time: '2023-01-01T12:00:00Z',
+    };
+    setup(note);
+
+    const link = screen.getByText('https://example.com');
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+});

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskNoteItem.tsx

@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { Anchor, Divider, Group, Stack, Text } from '@mantine/core';
+import { formatDateTime, getDisplayString } from '@medplum/core';
+import type { Annotation } from '@medplum/fhirtypes';
+import { ResourceAvatar, useResource } from '@medplum/react';
+import React from 'react';
+
+interface TaskNoteItemProps {
+  note: Annotation;
+  index: number;
+}
+
+function renderTextWithLinks(text: string): React.ReactNode {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  const parts = text.split(urlRegex);
+
+  return parts.map((part, index) => {
+    if (urlRegex.test(part)) {
+      return (
+        <Anchor key={index} href={part} target="_blank" rel="noopener noreferrer">
+          {part}
+        </Anchor>
+      );
+    }
+    return part;
+  });
+}
+
+export function TaskNoteItem(props: TaskNoteItemProps): React.JSX.Element {
+  const { note } = props;
+  const author = useResource(note.authorReference);
+
+  return (
+    <Stack gap="md" pt="sm" pb="sm">
+      <Group align="center" gap="xs">
+        <ResourceAvatar value={note.authorReference} radius="xl" size={36} />
+        <Text fw={500}>{author && getDisplayString(author)}</Text>
+        <Text>{formatDateTime(note.time ?? '')}</Text>
+      </Group>
+      <Text>{note.text ? renderTextWithLinks(note.text) : ''}</Text>
+      <Divider />
+    </Stack>
+  );
+}