vintasend 0.4.0 → 0.4.7

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

@@ -0,0 +1,129 @@
+import { useState, useCallback, useRef } from 'react';
+import { useMedplum } from '@medplum/react';
+import { Button, Group, Text, Alert, Progress } from '@mantine/core';
+import { IconUpload, IconAlertCircle } from '@tabler/icons-react';
+import type { JSX } from 'react';
+import { uploadFileToMedplum } from '../../../lib/file-upload';
+import { MAX_ATTACHMENT_SIZE, ALLOWED_FILE_TYPES } from '../../../lib/constants';
+import type { Media } from '@medplum/fhirtypes';
+
+export interface TaskFileUploadProps {
+  onFileUploaded: (media: Media) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Component for uploading files to attach to tasks.
+ * Validates file type and size before uploading to Medplum.
+ */
+export function TaskFileUpload({ onFileUploaded, disabled = false }: TaskFileUploadProps): JSX.Element {
+  const medplum = useMedplum();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const validateFile = (file: File): string | null => {
+    // Check file size
+    if (file.size > MAX_ATTACHMENT_SIZE) {
+      const maxSizeMB = MAX_ATTACHMENT_SIZE / (1024 * 1024);
+      return `File size exceeds maximum allowed size of ${maxSizeMB}MB`;
+    }
+
+    // Check file type
+    if (!ALLOWED_FILE_TYPES.includes(file.type)) {
+      return `File type "${file.type}" is not allowed. Allowed types: PDF, images, Word documents, Excel spreadsheets, text files.`;
+    }
+
+    return null;
+  };
+
+  const handleFileChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) {
+        return;
+      }
+
+      // Validate file
+      const validationError = validateFile(file);
+      if (validationError) {
+        setError(validationError);
+        return;
+      }
+
+      setError(null);
+      setUploading(true);
+      setUploadProgress(0);
+
+      try {
+        // Simulate progress (in a real implementation, you might use XMLHttpRequest for actual progress)
+        const progressInterval = setInterval(() => {
+          setUploadProgress((prev) => Math.min(prev + 10, 90));
+        }, 100);
+
+        const { media } = await uploadFileToMedplum(medplum, file, file.name, file.type);
+
+        clearInterval(progressInterval);
+        setUploadProgress(100);
+
+        // Call the callback with the uploaded media
+        onFileUploaded(media);
+
+        // Reset state after a short delay
+        setTimeout(() => {
+          setUploadProgress(0);
+          setUploading(false);
+        }, 500);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to upload file');
+        setUploading(false);
+        setUploadProgress(0);
+      }
+    },
+    [medplum, onFileUploaded]
+  );
+
+  return (
+    <div>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ALLOWED_FILE_TYPES.join(',')}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+      
+      <Button
+        leftSection={<IconUpload size={16} />}
+        variant="light"
+        onClick={() => fileInputRef.current?.click()}
+        disabled={disabled || uploading}
+        loading={uploading}
+        fullWidth
+      >
+        {uploading ? 'Uploading...' : 'Choose File to Attach'}
+      </Button>
+
+      {uploading && (
+        <Group mt="xs">
+          <Progress value={uploadProgress} style={{ flex: 1 }} />
+          <Text size="xs" c="dimmed">
+            {uploadProgress}%
+          </Text>
+        </Group>
+      )}
+
+      {error && (
+        <Alert icon={<IconAlertCircle size={16} />} title="Upload Error" color="red" mt="xs">
+          {error}
+        </Alert>
+      )}
+
+      <Text size="xs" c="dimmed" mt="xs">
+        Maximum file size: {MAX_ATTACHMENT_SIZE / (1024 * 1024)}MB. Allowed types: PDF, images, Word, Excel, text
+        files.
+      </Text>
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { TaskFilterMenu } from './TaskFilterMenu';
+import { TaskFilterType } from './TaskFilterMenu.utils';
+
+describe('TaskFilterMenu', () => {
+  const setup = async (props: Partial<React.ComponentProps<typeof TaskFilterMenu>> = {}): Promise<void> => {
+    await act(async () => {
+      render(
+        <MantineProvider>
+          <TaskFilterMenu onFilterChange={vi.fn()} performerTypes={[]} {...props} />
+        </MantineProvider>
+      );
+    });
+  };
+
+  test('renders filter button', async () => {
+    await setup();
+    expect(screen.getByLabelText('Filter tasks')).toBeInTheDocument();
+  });
+
+  test('calls onFilterChange when status is selected', async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    await setup({ onFilterChange });
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Status')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Status'));
+
+    await waitFor(() => {
+      expect(screen.getByText('in-progress')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('in-progress'));
+
+    expect(onFilterChange).toHaveBeenCalledWith(TaskFilterType.STATUS, 'in-progress');
+  });
+
+  test('shows performer types when available', async () => {
+    const user = userEvent.setup();
+    const performerTypes = [{ coding: [{ code: 'doctor', display: 'Doctor' }] }];
+    await setup({ performerTypes });
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Performer Type')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Performer Type'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Doctor')).toBeInTheDocument();
+    });
+  });
+
+  test('calls onFilterChange when performer type is selected', async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    const performerTypes = [{ coding: [{ code: 'doctor', display: 'Doctor' }] }];
+    await setup({ onFilterChange, performerTypes });
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Performer Type')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Performer Type'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Doctor')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('Doctor'));
+
+    expect(onFilterChange).toHaveBeenCalledWith(TaskFilterType.PERFORMER_TYPE, performerTypes[0]);
+  });
+
+  test('shows priority submenu', async () => {
+    const user = userEvent.setup();
+    await setup();
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Priority')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Priority'));
+
+    await waitFor(() => {
+      expect(screen.getByText('routine')).toBeInTheDocument();
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+      expect(screen.getByText('asap')).toBeInTheDocument();
+      expect(screen.getByText('stat')).toBeInTheDocument();
+    });
+  });
+
+  test('calls onFilterChange when priority is selected', async () => {
+    const user = userEvent.setup();
+    const onFilterChange = vi.fn();
+    await setup({ onFilterChange });
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Priority')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Priority'));
+
+    await waitFor(() => {
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('urgent'));
+
+    expect(onFilterChange).toHaveBeenCalledWith(TaskFilterType.PRIORITY, 'urgent');
+  });
+
+  test('shows checkmark next to selected priorities', async () => {
+    const user = userEvent.setup();
+    await setup({ priorities: ['urgent', 'stat'] });
+
+    await user.click(screen.getByLabelText('Filter tasks'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Priority')).toBeInTheDocument();
+    });
+
+    await user.hover(screen.getByText('Priority'));
+
+    await waitFor(() => {
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+      expect(screen.getByText('stat')).toBeInTheDocument();
+      expect(screen.getByText('routine')).toBeInTheDocument();
+      expect(screen.getByText('asap')).toBeInTheDocument();
+    });
+
+    // Verify that the menu is rendering correctly with priorities
+    const urgentText = screen.getByText('urgent');
+    const statText = screen.getByText('stat');
+    expect(urgentText).toBeInTheDocument();
+    expect(statText).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,142 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { Menu, ActionIcon, Text, Flex } from '@mantine/core';
+import {
+  IconFilter,
+  IconChevronRight,
+  IconUserCheck,
+  IconStethoscope,
+  IconCheck,
+  IconExclamationCircle,
+} from '@tabler/icons-react';
+import type { JSX } from 'react';
+import type { Patient, Task, CodeableConcept } from '@medplum/fhirtypes';
+import { TaskFilterType, TASK_STATUSES, TASK_PRIORITIES } from './TaskFilterMenu.utils';
+import type { TaskFilterValue } from './TaskFilterMenu.utils';
+
+interface TaskFilterMenuProps {
+  statuses?: Task['status'][];
+  owner?: Task['owner'];
+  performerType?: CodeableConcept;
+  priorities?: Task['priority'][];
+  patient?: Patient;
+  performerTypes?: CodeableConcept[];
+  onFilterChange?: (filterType: TaskFilterType, value: TaskFilterValue) => void;
+}
+
+export function TaskFilterMenu(props: TaskFilterMenuProps): JSX.Element {
+  const { statuses = [], priorities = [], performerType, performerTypes, onFilterChange } = props;
+
+  const uniquePerformerTypes =
+    performerTypes?.filter((performerType, index, self) => {
+      const identifier = performerType.coding?.[0]?.code || performerType.text;
+      return identifier && self.findIndex((pt) => (pt.coding?.[0]?.code || pt.text) === identifier) === index;
+    }) || [];
+
+  return (
+    <Menu shadow="md" width={200} position="bottom-start">
+      <Menu.Target>
+        <ActionIcon variant="light" color="gray" size={32} radius="xl" aria-label="Filter tasks">
+          <IconFilter size={16} />
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Label>Filters</Menu.Label>
+
+        {/* Status Submenu */}
+        <Menu.Item>
+          <Menu trigger="hover" openDelay={100} closeDelay={400} position="right-start" offset={5}>
+            <Menu.Target>
+              <Flex align="center" justify="space-between" w="100%">
+                <Flex align="center" gap="xs">
+                  <IconStethoscope size={16} />
+                  <Text size="sm">Status</Text>
+                </Flex>
+                <IconChevronRight size={16} />
+              </Flex>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Label>Task Status</Menu.Label>
+              {TASK_STATUSES.map((taskStatus) => (
+                <Menu.Item
+                  key={taskStatus}
+                  onClick={() => onFilterChange?.(TaskFilterType.STATUS, taskStatus)}
+                  rightSection={statuses.includes(taskStatus) ? <IconCheck size={16} /> : null}
+                >
+                  <Text size="sm">{taskStatus}</Text>
+                </Menu.Item>
+              ))}
+            </Menu.Dropdown>
+          </Menu>
+        </Menu.Item>
+
+        {/* Priority Submenu */}
+        <Menu.Item>
+          <Menu trigger="hover" openDelay={100} closeDelay={400} position="right-start" offset={5}>
+            <Menu.Target>
+              <Flex align="center" justify="space-between" w="100%">
+                <Flex align="center" gap="xs">
+                  <IconExclamationCircle size={16} />
+                  <Text size="sm">Priority</Text>
+                </Flex>
+                <IconChevronRight size={16} />
+              </Flex>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Label>Task Priority</Menu.Label>
+              {TASK_PRIORITIES.map((taskPriority) => (
+                <Menu.Item
+                  key={taskPriority}
+                  onClick={() => onFilterChange?.(TaskFilterType.PRIORITY, taskPriority ?? '')}
+                  rightSection={priorities.includes(taskPriority) ? <IconCheck size={16} /> : null}
+                >
+                  <Text size="sm">{taskPriority}</Text>
+                </Menu.Item>
+              ))}
+            </Menu.Dropdown>
+          </Menu>
+        </Menu.Item>
+
+        <Menu.Item>
+          <Menu trigger="hover" openDelay={100} closeDelay={400} position="right-start" offset={5}>
+            <Menu.Target>
+              <Flex align="center" justify="space-between" w="100%">
+                <Flex align="center" gap="xs">
+                  <IconUserCheck size={16} />
+                  <Text size="sm">Performer Type</Text>
+                </Flex>
+                <IconChevronRight size={16} />
+              </Flex>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Label>Performer Types</Menu.Label>
+              {uniquePerformerTypes.length > 0 ? (
+                uniquePerformerTypes.map((type, index) => (
+                  <Menu.Item
+                    key={`${type.coding?.[0]?.code ?? index}`}
+                    onClick={() => onFilterChange?.(TaskFilterType.PERFORMER_TYPE, type)}
+                    rightSection={
+                      performerType?.coding?.[0]?.code === type.coding?.[0]?.code ? <IconCheck size={16} /> : null
+                    }
+                  >
+                    <Text size="sm">{type.coding?.[0]?.display ?? type.coding?.[0]?.code ?? 'Unknown'}</Text>
+                  </Menu.Item>
+                ))
+              ) : (
+                <Menu.Item disabled>
+                  <Text size="sm" c="dimmed">
+                    No performer types available
+                  </Text>
+                </Menu.Item>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/dist/examples/vintasend-medplum-example/src/components/tasks/TaskFilterMenu.utils.ts

@@ -0,0 +1,28 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import type { CodeableConcept, Patient, Reference, Task } from '@medplum/fhirtypes';
+
+export type TaskFilterValue = Reference<Patient> | Reference | CodeableConcept | string;
+
+export enum TaskFilterType {
+  STATUS = 'status',
+  OWNER = 'owner',
+  PERFORMER_TYPE = 'performerType',
+  PRIORITY = 'priority',
+  PATIENT = 'patient',
+}
+
+export const TASK_STATUSES: Task['status'][] = [
+  'draft',
+  'requested',
+  'received',
+  'accepted',
+  'rejected',
+  'ready',
+  'in-progress',
+  'on-hold',
+  'failed',
+  'completed',
+];
+
+export const TASK_PRIORITIES: Task['priority'][] = ['routine', 'urgent', 'asap', 'stat'];

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

@@ -0,0 +1,134 @@
+// SPDX-FileCopyrightText: Copyright Orangebot, Inc. and Medplum contributors
+// SPDX-License-Identifier: Apache-2.0
+import { MantineProvider } from '@mantine/core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MedplumProvider } from '@medplum/react';
+import { MockClient } from '@medplum/mock';
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { TaskInputNote } from './TaskInputNote';
+import type { Task } from '@medplum/fhirtypes';
+
+describe('TaskInputNote', () => {
+  let medplum: MockClient;
+
+  beforeEach(() => {
+    medplum = new MockClient();
+    vi.clearAllMocks();
+  });
+
+  const setup = (
+    task: Task,
+    props: Partial<React.ComponentProps<typeof TaskInputNote>> = {}
+  ): ReturnType<typeof render> => {
+    return render(
+      <MedplumProvider medplum={medplum}>
+        <MantineProvider>
+          <TaskInputNote task={task} {...props} />
+        </MantineProvider>
+      </MedplumProvider>
+    );
+  };
+
+  const mockTask: Task = {
+    resourceType: 'Task',
+    id: 'task-123',
+    status: 'in-progress',
+    intent: 'order',
+    code: { text: 'Test Task' },
+    note: [{ text: 'Existing note', time: '2023-01-01T12:00:00Z' }],
+  };
+
+  test('renders existing notes', async () => {
+    await medplum.createResource(mockTask);
+    setup(mockTask);
+
+    // Wait for useResource to resolve
+    await waitFor(() => {
+      expect(screen.getByText('Existing note')).toBeInTheDocument();
+    });
+  });
+
+  test('allows adding a new note', async () => {
+    await medplum.createResource(mockTask);
+    const onTaskChange = vi.fn();
+    setup(mockTask, { onTaskChange });
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Add a note...')).toBeInTheDocument();
+    });
+
+    const input = screen.getByPlaceholderText('Add a note...');
+    fireEvent.change(input, { target: { value: 'New note content' } });
+
+    const submitButton = screen.getByText('Submit');
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    expect(onTaskChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        note: expect.arrayContaining([expect.objectContaining({ text: 'New note content' })]),
+      })
+    );
+  });
+
+  test('shows delete confirmation modal', async () => {
+    await medplum.createResource(mockTask);
+    const onDeleteTask = vi.fn();
+    setup(mockTask, { onDeleteTask });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Delete Task')).toBeInTheDocument();
+    });
+
+    const deleteButton = screen.getByLabelText('Delete Task');
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('Delete Task', { selector: '.mantine-Modal-title' })).toBeInTheDocument();
+      expect(screen.getByText(/Are you sure you want to delete this task/)).toBeInTheDocument();
+    });
+  });
+
+  test('calls onDeleteTask when confirmed', async () => {
+    await medplum.createResource(mockTask);
+    const onDeleteTask = vi.fn();
+    setup(mockTask, { onDeleteTask });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Delete Task')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByLabelText('Delete Task'));
+
+    // Wait for modal to appear
+    await waitFor(() => {
+      expect(screen.getByText(/Are you sure you want to delete this task/)).toBeInTheDocument();
+    });
+
+    const confirmButton = screen.getByRole('button', { name: 'Delete' });
+
+    await act(async () => {
+      fireEvent.click(confirmButton);
+    });
+
+    expect(onDeleteTask).toHaveBeenCalledWith(expect.objectContaining({ id: 'task-123' }));
+  });
+
+  test('marks task as completed', async () => {
+    await medplum.createResource(mockTask);
+    const onTaskChange = vi.fn();
+    setup(mockTask, { onTaskChange });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Mark as Completed')).toBeInTheDocument();
+    });
+
+    const completeButton = screen.getByLabelText('Mark as Completed');
+    await act(async () => {
+      fireEvent.click(completeButton);
+    });
+
+    expect(onTaskChange).toHaveBeenCalledWith(expect.objectContaining({ status: 'completed' }));
+  });
+});