vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,133 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Paper, ScrollArea, SegmentedControl, Text } from '@mantine/core';
+import type { MedplumClient } from '@medplum/core';
+import type { Patient, Reference, ResourceType, Task } from '@medplum/fhirtypes';
+import { PatientSummary, ResourceTimeline, useMedplum, useResource } from '@medplum/react';
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { TaskInputNote } from './TaskInputNote';
+import { TaskProperties } from './TaskProperties';
+import classes from './TaskBoard.module.css';
+import { showErrorNotification } from '../../utils/notifications';
+
+interface TaskDetailPanelProps {
+  task: Task | Reference<Task>;
+  onTaskChange?: (task: Task) => void;
+  onDeleteTask?: (task: Task) => void;
+}
+
+export function TaskDetailPanel(props: TaskDetailPanelProps): JSX.Element | null {
+  const { task: taskProp, onTaskChange, onDeleteTask } = props;
+  const medplum = useMedplum();
+  const resolvedTask = useResource(taskProp);
+  const [task, setTask] = useState<Task | undefined>(resolvedTask);
+  const [activeTab, setActiveTab] = useState<string>('properties');
+
+  useEffect(() => {
+    if (resolvedTask) {
+      setTask(resolvedTask);
+    }
+  }, [resolvedTask]);
+
+  const patientRef = task?.for as Reference<Patient>;
+  const selectedPatient = useResource<Patient>(patientRef);
+
+  if (!task) {
+    return (
+      <Box h="100%" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Text c="dimmed">No task selected</Text>
+      </Box>
+    );
+  }
+
+  const handleTaskChange = async (updatedTask: Task): Promise<void> => {
+    await medplum.updateResource(updatedTask);
+    setTask(updatedTask);
+    onTaskChange?.(updatedTask);
+  };
+
+  const handleDeleteTask = async (deletedTask: Task): Promise<void> => {
+    try {
+      await medplum.deleteResource('Task', deletedTask.id as string);
+      onDeleteTask?.(deletedTask);
+    } catch (error) {
+      showErrorNotification(error);
+    }
+  };
+
+  const handleTabChange = (value: string): void => {
+    setActiveTab(value);
+  };
+
+  const getTabData = (): { label: string; value: string }[] => {
+    const tabs = [
+      { label: 'Properties', value: 'properties' },
+      { label: 'Activity Log', value: 'activity-log' },
+    ];
+
+    if (selectedPatient) {
+      tabs.push({ label: 'Patient Summary', value: 'patient-summary' });
+    }
+
+    return tabs;
+  };
+
+  return (
+    <>
+      <Box
+        h="100%"
+        style={{
+          flex: 1,
+        }}
+        className={classes.borderRight}
+      >
+        <TaskInputNote
+          task={task}
+          onTaskChange={handleTaskChange}
+          onDeleteTask={onDeleteTask ? handleDeleteTask : undefined}
+        />
+      </Box>
+
+      <Box h="100%" w="400px">
+        <Paper h="100%" style={{ overflow: 'hidden' }}>
+          <Box px="md" pb="md" pt="md">
+            <SegmentedControl
+              value={activeTab}
+              onChange={handleTabChange}
+              data={getTabData()}
+              fullWidth
+              radius="md"
+              color="gray"
+              size="sm"
+              className={classes.segmentedControl}
+            />
+          </Box>
+
+          <Box>
+            {activeTab === 'properties' && (
+              <ScrollArea h="calc(100vh - 120px)">
+                <TaskProperties key={task.id} p="md" task={task} onTaskChange={handleTaskChange} />
+              </ScrollArea>
+            )}
+            {activeTab === 'activity-log' && (
+              <ScrollArea h="calc(100vh - 120px)">
+                <ResourceTimeline
+                  value={task}
+                  loadTimelineResources={async (medplum: MedplumClient, _resourceType: ResourceType, id: string) => {
+                    return Promise.allSettled([medplum.readHistory('Task', id)]);
+                  }}
+                />
+              </ScrollArea>
+            )}
+            {activeTab === 'patient-summary' && selectedPatient?.resourceType === 'Patient' && (
+              <ScrollArea h="calc(100vh - 120px)">
+                <PatientSummary patient={selectedPatient} />
+              </ScrollArea>
+            )}
+          </Box>
+        </Paper>
+      </Box>
+    </>
+  );
+}

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

@@ -0,0 +1,16 @@
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--mantine-spacing-md);
+  height: 70px;
+}
+
+[data-mantine-color-scheme='dark'] .taskDetails,
+[data-mantine-color-scheme='dark'] .footer {
+  background-color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='light'] .taskDetails,
+[data-mantine-color-scheme='light'] .footer {
+  background-color: var(--mantine-color-gray-1);
+}

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

@@ -0,0 +1,255 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MedplumProvider } from '@medplum/react';
+import type { Task, Patient } from '@medplum/fhirtypes';
+import { MockClient } from '@medplum/mock';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { TaskDetailsModal } from './TaskDetailsModal';
+import * as usePatientModule from '../../hooks/usePatient';
+
+describe('TaskDetailsModal', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+    vi.spyOn(medplum, 'updateResource').mockResolvedValue({ id: 'task-123', resourceType: 'Task' } as Task & {
+      id: string;
+    });
+  });
+
+  const mockPatient: Patient = {
+    resourceType: 'Patient',
+    id: 'patient-123',
+    name: [{ given: ['John'], family: 'Doe' }],
+  };
+
+  const mockTask: Task = {
+    resourceType: 'Task',
+    id: 'task-123',
+    status: 'in-progress',
+    intent: 'order',
+    code: { text: 'Test Task' },
+    description: 'Test task description',
+    for: { reference: 'Patient/patient-123' },
+    authoredOn: '2023-01-01T12:00:00Z',
+  };
+
+  const setup = (): ReturnType<typeof render> => {
+    vi.spyOn(usePatientModule, 'usePatient').mockReturnValue(mockPatient);
+
+    return render(
+      <MemoryRouter initialEntries={['/Patient/patient-123/Encounter/encounter-123/Task/task-123']}>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Routes>
+              <Route path="/Patient/:patientId/Encounter/:encounterId/Task/:taskId" element={<TaskDetailsModal />} />
+            </Routes>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  };
+
+  test('renders task details modal', async () => {
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Task')).toBeInTheDocument();
+      expect(screen.getByText('Test task description')).toBeInTheDocument();
+    });
+  });
+
+  test('displays patient information', async () => {
+    await medplum.createResource(mockTask);
+    await medplum.createResource(mockPatient);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('View Patient')).toBeInTheDocument();
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+  });
+
+  test('allows changing due date', async () => {
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Due Date')).toBeInTheDocument();
+    });
+  });
+
+  test('allows changing task status', async () => {
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Status')).toBeInTheDocument();
+    });
+  });
+
+  test('allows adding a note', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add note to this task')).toBeInTheDocument();
+    });
+
+    const noteInput = screen.getByPlaceholderText('Add note to this task');
+    await user.type(noteInput, 'This is a test note');
+
+    expect(noteInput).toHaveValue('This is a test note');
+  });
+
+  test('saves changes when Save Changes button is clicked', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    });
+
+    const noteInput = screen.getByPlaceholderText('Add note to this task');
+    await user.type(noteInput, 'Updated note');
+
+    const saveButton = screen.getByText('Save Changes');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(medplum.updateResource).toHaveBeenCalled();
+    });
+  });
+
+  test('shows success notification after saving', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    });
+
+    const saveButton = screen.getByText('Save Changes');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(medplum.updateResource).toHaveBeenCalled();
+    });
+  });
+
+  test('handles save error gracefully', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+
+    vi.spyOn(medplum, 'updateResource').mockRejectedValueOnce(new Error('Update failed'));
+
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    });
+
+    const saveButton = screen.getByText('Save Changes');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(medplum.updateResource).toHaveBeenCalled();
+    });
+  });
+
+  test('closes modal when close button is clicked', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Task')).toBeInTheDocument();
+    });
+
+    const closeButton = document.querySelector('.mantine-Modal-close');
+    expect(closeButton).toBeInTheDocument();
+    if (closeButton) {
+      await user.click(closeButton);
+    }
+
+    await waitFor(() => {
+      expect(screen.queryByText('Test Task')).not.toBeInTheDocument();
+    });
+  });
+
+  test('handles task fetch error', async () => {
+    vi.spyOn(medplum, 'readResource').mockRejectedValueOnce(new Error('Task not found'));
+
+    setup();
+
+    await waitFor(() => {
+      expect(medplum.readResource).toHaveBeenCalled();
+    });
+  });
+
+  test('updates task with all fields', async () => {
+    const user = userEvent.setup();
+    const taskWithAllFields: Task = {
+      ...mockTask,
+      owner: { reference: 'Practitioner/prac-123' },
+      restriction: { period: { end: '2023-12-31' } },
+    };
+
+    await medplum.createResource(taskWithAllFields);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    });
+
+    const noteInput = screen.getByPlaceholderText('Add note to this task');
+    await user.type(noteInput, 'Comprehensive update');
+
+    const saveButton = screen.getByText('Save Changes');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(medplum.updateResource).toHaveBeenCalled();
+      const calls = (medplum.updateResource as any).mock.calls;
+      expect(calls.length).toBeGreaterThan(0);
+      const updatedTask = calls[calls.length - 1][0] as Task;
+      expect(updatedTask.note).toBeDefined();
+      expect(updatedTask.note?.[0].text).toBe('Comprehensive update');
+    });
+  });
+
+  test('does not add empty notes', async () => {
+    const user = userEvent.setup();
+    await medplum.createResource(mockTask);
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('Save Changes')).toBeInTheDocument();
+    });
+
+    const noteInput = screen.getByPlaceholderText('Add note to this task');
+    await user.type(noteInput, 'Test');
+    await user.clear(noteInput);
+
+    const saveButton = screen.getByText('Save Changes');
+    await user.click(saveButton);
+
+    await waitFor(() => {
+      expect(medplum.updateResource).toHaveBeenCalled();
+      const calls = (medplum.updateResource as any).mock.calls;
+      if (calls.length > 0) {
+        const updatedTask = calls[calls.length - 1][0] as Task;
+        expect(updatedTask.note).toBeUndefined();
+      }
+    });
+  });
+});

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

@@ -0,0 +1,203 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Button, Card, Grid, Modal, Stack, Text, Textarea } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { createReference, formatHumanName, getReferenceString, normalizeErrorString } from '@medplum/core';
+import type { Practitioner, Reference, Task } from '@medplum/fhirtypes';
+import { CodeInput, DateTimeInput, Loading, ResourceInput, useMedplum, useMedplumProfile } from '@medplum/react';
+import { IconCircleCheck, IconCircleOff } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import type { JSX } from 'react';
+import { Link, useNavigate, useParams } from 'react-router';
+import { usePatient } from '../../hooks/usePatient';
+import classes from './TaskDetailsModal.module.css';
+
+export const TaskDetailsModal = (): JSX.Element => {
+  const { patientId, encounterId, taskId } = useParams();
+  const patient = usePatient();
+  const medplum = useMedplum();
+  const navigate = useNavigate();
+  const author = useMedplumProfile();
+  const [task, setTask] = useState<Task | undefined>(undefined);
+  const [isOpened, setIsOpened] = useState(true);
+  const [practitioner, setPractitioner] = useState<Practitioner | undefined>();
+  const [dueDate, setDueDate] = useState<string | undefined>();
+  const [status, setStatus] = useState<Task['status'] | undefined>();
+  const [note, setNote] = useState<string>('');
+
+  useEffect(() => {
+    const fetchTask = async (): Promise<void> => {
+      const task = await medplum.readResource('Task', taskId as string);
+      setStatus(task.status as typeof status);
+      setTask(task);
+      setDueDate(task.restriction?.period?.end);
+    };
+
+    fetchTask().catch((err) => {
+      notifications.show({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Error',
+        message: normalizeErrorString(err),
+      });
+    });
+  }, [medplum, taskId]);
+
+  const handleOnSubmit = async (): Promise<void> => {
+    if (!task) {
+      return;
+    }
+
+    const updatedTask: Task = {
+      ...task,
+    };
+
+    const trimmedNote = note.trim();
+    if (trimmedNote !== '') {
+      updatedTask.note = [
+        ...(task.note || []),
+        {
+          text: trimmedNote,
+          authorReference: author && createReference(author),
+          time: new Date().toISOString(),
+        },
+      ];
+    }
+
+    if (status) {
+      updatedTask.status = status;
+    }
+
+    if (dueDate) {
+      updatedTask.restriction = {
+        ...updatedTask.restriction,
+        period: {
+          ...updatedTask.restriction?.period,
+          end: dueDate,
+        },
+      };
+    }
+
+    if (practitioner) {
+      updatedTask.owner = { reference: getReferenceString(practitioner) } as Reference<Practitioner>;
+    }
+
+    try {
+      await medplum.updateResource(updatedTask);
+      notifications.show({
+        icon: <IconCircleCheck />,
+        title: 'Success',
+        message: 'Task updated',
+      });
+      setTask(updatedTask);
+      navigate(`/Patient/${patientId}/Encounter/${encounterId}`)?.catch(console.error);
+    } catch {
+      notifications.show({
+        color: 'red',
+        icon: <IconCircleOff />,
+        title: 'Error',
+        message: 'Failed to update the task.',
+      });
+    }
+  };
+
+  if (!task) {
+    return <Loading />;
+  }
+
+  return (
+    <Modal
+      opened={isOpened}
+      onClose={() => {
+        navigate(-1)?.catch(console.error);
+        setIsOpened(false);
+      }}
+      size="xl"
+      styles={{
+        body: {
+          padding: 0,
+          height: '60vh',
+        },
+      }}
+    >
+      <Stack h="100%" justify="space-between" gap={0}>
+        <Box flex={1} miw={0}>
+          <Grid p="md" h="100%">
+            <Grid.Col span={6} pr="lg">
+              <Stack gap="sm">
+                <Card p="md" radius="md" className={classes.taskDetails}>
+                  <Stack gap="sm">
+                    <Text fz="lg" fw={700}>
+                      {task?.code?.text}
+                    </Text>
+                    {task?.description && <Text>{task.description}</Text>}
+                    {patient?.name && (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                        <Text>View Patient</Text>
+                        <Button variant="subtle" component={Link} to={`/Patient/${patient.id}`}>
+                          {formatHumanName(patient.name?.[0])}
+                        </Button>
+                      </div>
+                    )}
+                  </Stack>
+                </Card>
+
+                <ResourceInput<Practitioner>
+                  name="practitioner"
+                  resourceType="Practitioner"
+                  label="Assigned to"
+                  defaultValue={task?.owner ? { reference: task.owner.reference } : undefined}
+                  onChange={(value) => {
+                    setPractitioner(value as Practitioner);
+                  }}
+                />
+
+                <DateTimeInput
+                  name="Due Date"
+                  placeholder="End"
+                  label="Due Date"
+                  defaultValue={dueDate}
+                  onChange={setDueDate}
+                />
+
+                {task?.status && (
+                  <CodeInput
+                    name="status"
+                    label="Status"
+                    binding="http://hl7.org/fhir/ValueSet/task-status|4.0.1"
+                    maxValues={1}
+                    defaultValue={status}
+                    onChange={(value) => {
+                      if (value) {
+                        setStatus(value as typeof status);
+                      }
+                    }}
+                  />
+                )}
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={6} pr="md">
+              <Stack gap="sm">
+                <Text>Note</Text>
+                <Text c="dimmed">Optional free form details about this task</Text>
+                <Textarea
+                  placeholder="Add note to this task"
+                  minRows={3}
+                  value={note}
+                  onChange={(event) => setNote(event.currentTarget.value)}
+                />
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Box>
+
+        <Box className={classes.footer} h={70} p="md">
+          <Button variant="filled" onClick={handleOnSubmit}>
+            Save Changes
+          </Button>
+        </Box>
+      </Stack>
+    </Modal>
+  );
+};