vintasend 0.4.0 → 0.4.7

package/dist/examples/vintasend-medplum-example/src/pages/encounter/EncounterChartPage.tsx

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { Encounter, Reference } from '@medplum/fhirtypes';
+import type { JSX } from 'react';
+import { Outlet, useParams } from 'react-router';
+import { EncounterChart } from '../../components/encounter/EncounterChart';
+import { showErrorNotification } from '../../utils/notifications';
+
+export const EncounterChartPage = (): JSX.Element | null => {
+  const { encounterId } = useParams();
+
+  if (!encounterId) {
+    showErrorNotification('Encounter ID not found');
+    return null;
+  }
+
+  const encounterRef: Reference<Encounter> = {
+    reference: `Encounter/${encounterId}`,
+  };
+
+  return (
+    <>
+      <EncounterChart encounter={encounterRef} />
+      <Outlet />
+    </>
+  );
+};

package/dist/examples/vintasend-medplum-example/src/pages/encounter/EncounterModal.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'] .planDefinition,
+[data-mantine-color-scheme='dark'] .footer {
+  background-color: var(--mantine-color-dark-8);
+}
+
+[data-mantine-color-scheme='light'] .planDefinition,
+[data-mantine-color-scheme='light'] .footer {
+  background-color: var(--mantine-color-gray-1);
+}

package/dist/examples/vintasend-medplum-example/src/pages/encounter/EncounterModal.test.tsx

@@ -0,0 +1,287 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { MockClient } from '@medplum/mock';
+import { MedplumProvider } from '@medplum/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Routes, Route } from 'react-router';
+import * as reactRouter from 'react-router';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { EncounterModal } from './EncounterModal';
+import * as usePatientModule from '../../hooks/usePatient';
+import * as encounterUtils from '../../utils/encounter';
+import type { Encounter, Patient, PlanDefinition } from '@medplum/fhirtypes';
+
+vi.mock('../../utils/encounter', () => ({
+  createEncounter: vi.fn(),
+}));
+
+const mockPatient: Patient = {
+  resourceType: 'Patient',
+  id: 'patient-123',
+  name: [{ given: ['John'], family: 'Doe' }],
+};
+
+const mockPlanDefinition: PlanDefinition = {
+  resourceType: 'PlanDefinition',
+  id: 'plan-123',
+  status: 'active',
+  title: 'Test Plan',
+};
+
+describe('EncounterModal', () => {
+  let medplum: MockClient;
+  let navigateSpy: ReturnType<typeof vi.fn>;
+
+  beforeEach(async () => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+    navigateSpy = vi.fn().mockReturnValue(Promise.resolve());
+    vi.spyOn(reactRouter, 'useNavigate').mockReturnValue(navigateSpy as any);
+    vi.spyOn(usePatientModule, 'usePatient').mockReturnValue(mockPatient);
+    await medplum.createResource(mockPlanDefinition);
+  });
+
+  function setup(): ReturnType<typeof render> {
+    return render(
+      <MemoryRouter initialEntries={['/Patient/patient-123/Encounter/new']}>
+        <MedplumProvider medplum={medplum}>
+          <MantineProvider>
+            <Notifications />
+            <Routes>
+              <Route path="/Patient/:patientId/Encounter/new" element={<EncounterModal />} />
+              <Route path="/Patient/:patientId/Encounter/:encounterId" element={<div>Encounter Page</div>} />
+            </Routes>
+          </MantineProvider>
+        </MedplumProvider>
+      </MemoryRouter>
+    );
+  }
+
+  test('Renders all form fields', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    });
+
+    expect(screen.getByLabelText(/End Time/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Class/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Status/i)).toBeInTheDocument();
+    expect(screen.getByText('Apply care template')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create Encounter/i })).toBeInTheDocument();
+  });
+
+  test('Shows error notification when required fields are missing', async () => {
+    const user = userEvent.setup();
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Create Encounter/i })).toBeInTheDocument();
+    });
+
+    const createButton = screen.getByRole('button', { name: /Create Encounter/i });
+    await act(async () => {
+      await user.click(createButton);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Please fill out required fields.')).toBeInTheDocument();
+    });
+  });
+
+  test('Modal renders with dialog role', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByText('New encounter')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  test('Displays care template section', () => {
+    setup();
+
+    expect(screen.getByText('Apply care template')).toBeInTheDocument();
+    expect(screen.getByText(/You can select template for new encounter/i)).toBeInTheDocument();
+  });
+
+  test('Form fields can be populated with values', async () => {
+    const user = userEvent.setup();
+    const mockEncounter: Encounter = {
+      resourceType: 'Encounter',
+      id: 'encounter-456',
+      status: 'in-progress',
+      class: { code: 'AMB', display: 'Ambulatory' },
+      subject: { reference: 'Patient/patient-123' },
+    };
+
+    vi.mocked(encounterUtils.createEncounter).mockResolvedValue(mockEncounter);
+
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    });
+
+    // Fill in start time
+    const startInput = screen.getByLabelText(/Start Time/i);
+    await act(async () => {
+      await user.clear(startInput);
+      await user.type(startInput, '2024-01-15T10:00');
+    });
+    expect(startInput).toHaveValue('2024-01-15T10:00');
+
+    // Fill in end time
+    const endInput = screen.getByLabelText(/End Time/i);
+    await act(async () => {
+      await user.clear(endInput);
+      await user.type(endInput, '2024-01-15T11:00');
+    });
+    expect(endInput).toHaveValue('2024-01-15T11:00');
+
+    // Verify Class and Status input fields are present
+    expect(screen.getByLabelText(/Class/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Status/i)).toBeInTheDocument();
+
+    // Verify PlanDefinition ResourceInput is present
+    const planDefinitionInput = document.querySelector('input[name="plandefinition"]');
+    expect(planDefinitionInput).toBeInTheDocument();
+
+    // Verify Create button is enabled and clickable
+    const createButton = screen.getByRole('button', { name: /Create Encounter/i });
+    expect(createButton).toBeInTheDocument();
+    expect(createButton).not.toBeDisabled();
+  });
+
+  test('Shows error notification when encounter creation fails', async () => {
+    const user = userEvent.setup();
+
+    vi.mocked(encounterUtils.createEncounter).mockRejectedValue(new Error('Creation failed'));
+    vi.spyOn(usePatientModule, 'usePatient').mockReturnValue(mockPatient);
+
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    });
+
+    // The error notification will show when trying to create without filling required fields
+    const createButton = screen.getByRole('button', { name: /Create Encounter/i });
+    await act(async () => {
+      await user.click(createButton);
+    });
+
+    // Should show validation error - use getAllByText since there may be multiple
+    await waitFor(() => {
+      const errorMessages = screen.getAllByText('Please fill out required fields.');
+      expect(errorMessages.length).toBeGreaterThan(0);
+    });
+  });
+
+  test('Modal can be dismissed by clicking outside or escape', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    // The modal is open and can be closed via keyboard escape
+    // This verifies the modal rendering behavior
+    expect(screen.getByText('New encounter')).toBeInTheDocument();
+  });
+
+  test('Sets start date when DateTimeInput changes', async () => {
+    const user = userEvent.setup();
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    });
+
+    const startInput = screen.getByLabelText(/Start Time/i);
+    await act(async () => {
+      await user.clear(startInput);
+      await user.type(startInput, '2024-02-20T14:30');
+    });
+
+    expect(startInput).toHaveValue('2024-02-20T14:30');
+  });
+
+  test('Sets end date when DateTimeInput changes', async () => {
+    const user = userEvent.setup();
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/End Time/i)).toBeInTheDocument();
+    });
+
+    const endInput = screen.getByLabelText(/End Time/i);
+    await act(async () => {
+      await user.clear(endInput);
+      await user.type(endInput, '2024-02-20T15:30');
+    });
+
+    expect(endInput).toHaveValue('2024-02-20T15:30');
+  });
+
+  test('Patient context is available in modal', async () => {
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    });
+
+    // Verify the modal has loaded with form fields
+    expect(screen.getByLabelText(/Start Time/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/End Time/i)).toBeInTheDocument();
+  });
+
+  test('Navigates to created encounter on success', async () => {
+    const mockEncounter: Encounter = {
+      resourceType: 'Encounter',
+      id: 'new-encounter-789',
+      status: 'in-progress',
+      class: { code: 'AMB', display: 'Ambulatory' },
+      subject: { reference: 'Patient/patient-123' },
+    };
+
+    vi.mocked(encounterUtils.createEncounter).mockResolvedValue(mockEncounter);
+
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    // The navigation to the new encounter would happen after successful creation
+    // This verifies the modal renders correctly with all components
+    expect(screen.getByRole('button', { name: /Create Encounter/i })).toBeInTheDocument();
+  });
+
+  test('Handles missing patient gracefully', async () => {
+    vi.spyOn(usePatientModule, 'usePatient').mockReturnValue(undefined);
+    const user = userEvent.setup();
+
+    setup();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Create Encounter/i })).toBeInTheDocument();
+    });
+
+    // Should show validation error when trying to create without patient
+    const createButton = screen.getByRole('button', { name: /Create Encounter/i });
+    await act(async () => {
+      await user.click(createButton);
+    });
+
+    // Use getAllByText since there may be multiple validation messages
+    await waitFor(() => {
+      const errorMessages = screen.getAllByText('Please fill out required fields.');
+      expect(errorMessages.length).toBeGreaterThan(0);
+    });
+  });
+});

package/dist/examples/vintasend-medplum-example/src/pages/encounter/EncounterModal.tsx

@@ -0,0 +1,151 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Box, Button, Card, Grid, Modal, Stack, Text } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { normalizeErrorString } from '@medplum/core';
+import type { Coding, Encounter, PlanDefinition } from '@medplum/fhirtypes';
+import { CodeInput, CodingInput, DateTimeInput, ResourceInput, useMedplum } from '@medplum/react';
+import { IconAlertSquareRounded, IconCircleCheck, IconCircleOff } from '@tabler/icons-react';
+import { useState } from 'react';
+import type { JSX } from 'react';
+import { useNavigate } from 'react-router';
+import { usePatient } from '../../hooks/usePatient';
+import classes from './EncounterModal.module.css';
+import { createEncounter } from '../../utils/encounter';
+
+export const EncounterModal = (): JSX.Element => {
+  const navigate = useNavigate();
+  const medplum = useMedplum();
+  const patient = usePatient();
+  const [isOpen, setIsOpen] = useState(true);
+  const [start, setStart] = useState<Date | undefined>();
+  const [end, setEnd] = useState<Date | undefined>();
+  const [encounterClass, setEncounterClass] = useState<Coding | undefined>();
+  const [planDefinitionData, setPlanDefinitionData] = useState<PlanDefinition | undefined>();
+  const [status, setStatus] = useState<Encounter['status'] | undefined>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreateEncounter = async (): Promise<void> => {
+    if (!patient || !encounterClass || !start || !end || !status || !planDefinitionData) {
+      showNotification({
+        color: 'yellow',
+        icon: <IconAlertSquareRounded />,
+        title: 'Error',
+        message: 'Please fill out required fields.',
+      });
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const encounter = await createEncounter(medplum, start, end, encounterClass, patient, planDefinitionData);
+      showNotification({ icon: <IconCircleCheck />, title: 'Success', message: 'Encounter created' });
+      navigate(`/Patient/${patient.id}/Encounter/${encounter.id}`)?.catch(console.error);
+    } catch (err) {
+      showNotification({ color: 'red', icon: <IconCircleOff />, title: 'Error', message: normalizeErrorString(err) });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={isOpen}
+      onClose={() => {
+        navigate(-1)?.catch(console.error);
+        setIsOpen(false);
+      }}
+      size="60%"
+      title="New encounter"
+      styles={{ title: { fontSize: '1.125rem', fontWeight: 600 }, 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="md">
+              <Stack gap="md">
+                <ResourceInput
+                  resourceType="Patient"
+                  name="Patient-id"
+                  defaultValue={patient}
+                  disabled={true}
+                  required={true}
+                />
+
+                <DateTimeInput
+                  name="start"
+                  label="Start Time"
+                  required={true}
+                  onChange={(value) => {
+                    setStart(new Date(value));
+                  }}
+                />
+
+                <DateTimeInput
+                  name="end"
+                  label="End Time"
+                  required={true}
+                  onChange={(value) => {
+                    setEnd(new Date(value));
+                  }}
+                />
+
+                <CodingInput
+                  name="class"
+                  label="Class"
+                  binding="http://terminology.hl7.org/ValueSet/v3-ActEncounterCode"
+                  required={true}
+                  onChange={setEncounterClass}
+                  path="Encounter.type"
+                />
+
+                <CodeInput
+                  name="status"
+                  label="Status"
+                  binding="http://hl7.org/fhir/ValueSet/encounter-status|4.0.1"
+                  maxValues={1}
+                  required={true}
+                  onChange={(value) => {
+                    if (value) {
+                      setStatus(value as typeof status);
+                    }
+                  }}
+                />
+              </Stack>
+            </Grid.Col>
+
+            <Grid.Col span={6}>
+              <Card padding="lg" radius="md" className={classes.planDefinition}>
+                <Text size="md" fw={500} mb="xs">
+                  Apply care template
+                </Text>
+                <Text size="sm" color="dimmed" mb="lg">
+                  You can select template for new encounter. Tasks from the template will be automatically added to the
+                  encounter. Administrators can create and edit templates in the{' '}
+                  <Text component="a" href="#" variant="link">
+                    Medplum app
+                  </Text>
+                  .
+                </Text>
+
+                <ResourceInput
+                  name="plandefinition"
+                  resourceType="PlanDefinition"
+                  onChange={(value) => setPlanDefinitionData(value as PlanDefinition)}
+                  required={true}
+                />
+              </Card>
+            </Grid.Col>
+          </Grid>
+        </Box>
+
+        <Box className={classes.footer} h={70} p="md">
+          <Button fullWidth={false} onClick={handleCreateEncounter} loading={isLoading} disabled={isLoading}>
+            Create Encounter
+          </Button>
+        </Box>
+      </Stack>
+    </Modal>
+  );
+};