= {}): PrintQueueItem => ({
+ id: 1,
+ printer_id: 1,
+ archive_id: 1,
+ position: 1,
+ scheduled_time: null,
+ require_previous_success: false,
+ auto_off_after: false,
+ manual_start: false,
+ ams_mapping: null,
+ plate_id: null,
+ bed_levelling: true,
+ flow_cali: false,
+ vibration_cali: true,
+ layer_inspect: false,
+ timelapse: false,
+ use_ams: true,
+ status: 'pending',
+ started_at: null,
+ completed_at: null,
+ error_message: null,
+ created_at: '2024-01-01T00:00:00Z',
+ archive_name: 'Test Print',
+ archive_thumbnail: null,
+ printer_name: 'Test Printer',
+ print_time_seconds: 3600,
+ ...overrides,
+});
+
+describe('PrintModal', () => {
+ const mockOnClose = vi.fn();
+ const mockOnSuccess = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ server.use(
+ http.get('/api/v1/printers/', () => {
+ return HttpResponse.json(mockPrinters);
+ }),
+ http.get('/api/v1/archives/:id/plates', () => {
+ return HttpResponse.json({ is_multi_plate: false, plates: [] });
+ }),
+ http.get('/api/v1/archives/:id/filament-requirements', () => {
+ return HttpResponse.json({ filaments: [] });
+ }),
+ http.get('/api/v1/printers/:id/status', () => {
+ return HttpResponse.json({ connected: true, state: 'IDLE', ams: [], vt_tray: null });
+ }),
+ http.post('/api/v1/archives/:id/reprint', () => {
+ return HttpResponse.json({ success: true });
+ }),
+ http.post('/api/v1/queue/', () => {
+ return HttpResponse.json({ id: 1, status: 'pending' });
+ }),
+ http.patch('/api/v1/queue/:id', () => {
+ return HttpResponse.json({ id: 1, status: 'pending' });
+ })
+ );
+ });
+
+ describe('reprint mode', () => {
+ it('renders the modal title', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Re-print')).toBeInTheDocument();
+ });
+
+ it('shows archive name', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Benchy')).toBeInTheDocument();
+ });
+
+ it('shows printer selection with checkboxes for multi-select', async () => {
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
+ expect(screen.getByText('P1S')).toBeInTheDocument();
+ });
+ });
+
+ it('has print button', () => {
+ render(
+
+ );
+
+ // Get the submit button specifically (not printer selection buttons)
+ const submitButton = screen.getByRole('button', { name: /^print$/i });
+ expect(submitButton).toBeInTheDocument();
+ });
+
+ it('has cancel button', () => {
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+ });
+
+ it('calls onClose when cancel is clicked', async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+
+ await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+ expect(mockOnClose).toHaveBeenCalled();
+ });
+
+ it('print button is disabled until printer is selected', () => {
+ render(
+
+ );
+
+ // Get the submit button specifically (not printer selection buttons)
+ const printButton = screen.getByRole('button', { name: /^print$/i });
+ expect(printButton).toBeDisabled();
+ });
+
+ it('shows no printers message when none active', async () => {
+ server.use(
+ http.get('/api/v1/printers/', () => {
+ return HttpResponse.json([]);
+ })
+ );
+
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('No active printers available')).toBeInTheDocument();
+ });
+ });
+
+ it('shows print options toggle', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Print Options')).toBeInTheDocument();
+ });
+ });
+
+ describe('add-to-queue mode', () => {
+ it('renders the modal title', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Schedule Print')).toBeInTheDocument();
+ });
+
+ it('shows archive name', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Test Print')).toBeInTheDocument();
+ });
+
+ it('shows add button', () => {
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: /add to queue/i })).toBeInTheDocument();
+ });
+
+ it('shows cancel button', () => {
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+ });
+
+ it('shows Queue Only option', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('Queue Only')).toBeInTheDocument();
+ });
+
+ it('shows power off option', () => {
+ render(
+
+ );
+
+ expect(screen.getByText(/power off/i)).toBeInTheDocument();
+ });
+
+ it('shows schedule options', () => {
+ render(
+
+ );
+
+ expect(screen.getByText('ASAP')).toBeInTheDocument();
+ expect(screen.getByText('Scheduled')).toBeInTheDocument();
+ });
+
+ it('calls onClose when cancel is clicked', async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+
+ await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+ expect(mockOnClose).toHaveBeenCalled();
+ });
+ });
+
+ describe('edit-queue-item mode', () => {
+ it('renders the modal title', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByText('Edit Queue Item')).toBeInTheDocument();
+ });
+
+ it('shows save button', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+ });
+
+ it('shows cancel button', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+ });
+
+ it('shows print options toggle', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByText('Print Options')).toBeInTheDocument();
+ });
+
+ it('shows Queue Only option', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByText('Queue Only')).toBeInTheDocument();
+ });
+
+ it('shows power off option', () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ expect(screen.getByText(/power off/i)).toBeInTheDocument();
+ });
+
+ it('calls onClose when cancel button is clicked', async () => {
+ const user = userEvent.setup();
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ const cancelButton = screen.getByRole('button', { name: /cancel/i });
+ await user.click(cancelButton);
+
+ expect(mockOnClose).toHaveBeenCalled();
+ });
+
+ it('shows printer dropdown for single selection', async () => {
+ const item = createMockQueueItem();
+
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('Printer')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('multi-printer selection', () => {
+ it('shows select all button when multiple printers available', async () => {
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('Select all')).toBeInTheDocument();
+ });
+ });
+
+ it('shows info message when multiple printers selected', async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('Select all')).toBeInTheDocument();
+ });
+
+ await user.click(screen.getByText('Select all'));
+
+ await waitFor(() => {
+ expect(screen.getByText(/Slot mapping below applies to all/)).toBeInTheDocument();
+ });
+ });
+
+ it('updates button text when multiple printers selected', async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+
+ await waitFor(() => {
+ expect(screen.getByText('Select all')).toBeInTheDocument();
+ });
+
+ await user.click(screen.getByText('Select all'));
+
+ await waitFor(() => {
+ expect(screen.getByRole('button', { name: /print to 2 printers/i })).toBeInTheDocument();
+ });
+ });
+ });
+});
diff --git a/frontend/src/__tests__/components/ReprintModal.test.tsx b/frontend/src/__tests__/components/ReprintModal.test.tsx
deleted file mode 100644
index 2fff6ad86..000000000
--- a/frontend/src/__tests__/components/ReprintModal.test.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-/**
- * Tests for the ReprintModal component.
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { render } from '../utils';
-import { ReprintModal } from '../../components/ReprintModal';
-import { http, HttpResponse } from 'msw';
-import { server } from '../mocks/server';
-
-const mockPrinters = [
- { id: 1, name: 'X1 Carbon', model: 'X1C', ip_address: '192.168.1.100', enabled: true, is_active: true },
- { id: 2, name: 'P1S', model: 'P1S', ip_address: '192.168.1.101', enabled: true, is_active: true },
-];
-
-describe('ReprintModal', () => {
- const mockOnClose = vi.fn();
- const mockOnSuccess = vi.fn();
-
- beforeEach(() => {
- vi.clearAllMocks();
- server.use(
- http.get('/api/v1/printers/', () => {
- return HttpResponse.json(mockPrinters);
- }),
- http.get('/api/v1/archives/:id/plates', () => {
- return HttpResponse.json({ is_multi_plate: false, plates: [] });
- }),
- http.get('/api/v1/archives/:id/filament-requirements', () => {
- return HttpResponse.json({ filaments: [] });
- }),
- http.get('/api/v1/printers/:id/status', () => {
- return HttpResponse.json({ connected: true, state: 'IDLE', ams: [], vt_tray: null });
- }),
- http.post('/api/v1/archives/:id/reprint', () => {
- return HttpResponse.json({ success: true });
- })
- );
- });
-
- describe('rendering', () => {
- it('renders the modal title', () => {
- render(
-
- );
-
- expect(screen.getByText('Re-print')).toBeInTheDocument();
- });
-
- it('shows archive name', () => {
- render(
-
- );
-
- expect(screen.getByText('Benchy')).toBeInTheDocument();
- });
-
- it('shows printer selection buttons', async () => {
- render(
-
- );
-
- await waitFor(() => {
- expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
- expect(screen.getByText('P1S')).toBeInTheDocument();
- });
- });
- });
-
- describe('printer selection', () => {
- it('shows active printers as buttons', async () => {
- render(
-
- );
-
- await waitFor(() => {
- // Printer buttons should be present
- expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
- });
- });
-
- it('shows no printers message when none active', async () => {
- server.use(
- http.get('/api/v1/printers/', () => {
- return HttpResponse.json([]);
- })
- );
-
- render(
-
- );
-
- await waitFor(() => {
- expect(screen.getByText('No active printers available')).toBeInTheDocument();
- });
- });
- });
-
- describe('actions', () => {
- it('has print button', () => {
- render(
-
- );
-
- expect(screen.getByRole('button', { name: /print/i })).toBeInTheDocument();
- });
-
- it('has cancel button', () => {
- render(
-
- );
-
- expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
- });
-
- it('calls onClose when cancel is clicked', async () => {
- const user = userEvent.setup();
- render(
-
- );
-
- await user.click(screen.getByRole('button', { name: /cancel/i }));
-
- expect(mockOnClose).toHaveBeenCalled();
- });
-
- it('print button is disabled until printer is selected', async () => {
- render(
-
- );
-
- // Print button should be disabled initially (no printer selected)
- const printButton = screen.getByRole('button', { name: /print/i });
- expect(printButton).toBeDisabled();
- });
- });
-});
diff --git a/frontend/src/components/PrintModal/PrinterSelector.tsx b/frontend/src/components/PrintModal/PrinterSelector.tsx
index bad101262..4d91ccde8 100644
--- a/frontend/src/components/PrintModal/PrinterSelector.tsx
+++ b/frontend/src/components/PrintModal/PrinterSelector.tsx
@@ -1,17 +1,20 @@
-import { Printer as PrinterIcon, Loader2, AlertCircle } from 'lucide-react';
+import { Printer as PrinterIcon, Loader2, AlertCircle, Check } from 'lucide-react';
import type { PrinterSelectorProps } from './types';
/**
- * Printer selection component with two modes:
- * - Grid mode (default): Shows printers as selectable cards
+ * Printer selection component with multiple modes:
+ * - Grid mode (default): Shows printers as selectable cards (single or multi-select)
* - Dropdown mode: Shows printers in a select dropdown (used when allowUnassigned is true)
*/
export function PrinterSelector({
printers,
selectedPrinterId,
+ selectedPrinterIds = [],
onSelect,
+ onMultiSelect,
isLoading = false,
allowUnassigned = false,
+ allowMultiple = false,
}: PrinterSelectorProps) {
const activePrinters = printers.filter((p) => p.is_active);
@@ -68,36 +71,114 @@ export function PrinterSelector({
);
}
+ const handlePrinterClick = (printerId: number) => {
+ if (allowMultiple && onMultiSelect) {
+ // Multi-select mode: toggle printer in selection
+ if (selectedPrinterIds.includes(printerId)) {
+ onMultiSelect(selectedPrinterIds.filter((id) => id !== printerId));
+ } else {
+ onMultiSelect([...selectedPrinterIds, printerId]);
+ }
+ } else {
+ // Single-select mode
+ onSelect(printerId);
+ }
+ };
+
+ const handleSelectAll = () => {
+ if (onMultiSelect) {
+ onMultiSelect(activePrinters.map((p) => p.id));
+ }
+ };
+
+ const handleDeselectAll = () => {
+ if (onMultiSelect) {
+ onMultiSelect([]);
+ }
+ };
+
+ const isSelected = (printerId: number) => {
+ if (allowMultiple) {
+ return selectedPrinterIds.includes(printerId);
+ }
+ return selectedPrinterId === printerId;
+ };
+
+ const selectedCount = allowMultiple ? selectedPrinterIds.length : (selectedPrinterId ? 1 : 0);
+
return (
+ {/* Multi-select header */}
+ {allowMultiple && activePrinters.length > 1 && (
+
+
+ {selectedCount === 0
+ ? 'Select printers'
+ : `${selectedCount} printer${selectedCount !== 1 ? 's' : ''} selected`}
+
+
+ {selectedCount < activePrinters.length && (
+
+ )}
+ {selectedCount > 0 && (
+
+ )}
+
+
+ )}
+
{activePrinters.map((printer) => (
{mode === 'reprint' ? (
<>
- Send {archiveName} to a printer
+ Send {archiveName} to{' '}
+ {isMultiPrinterMode ? 'printer(s)' : 'a printer'}
) : (
<>
@@ -363,11 +416,24 @@ export function PrintModal({
+ {/* Multi-printer filament mapping note */}
+ {isMultiPrinterMode && selectedPrinters.length > 1 && (
+
+
+
+ Slot mapping below applies to all {selectedPrinters.length} printers. Ensure they have matching filament configurations.
+
+
- {((reprintMutation.error || addToQueueMutation.error || updateQueueMutation.error) as Error)?.message ||
- 'Failed to complete operation'}
+ {(updateQueueMutation.error as Error)?.message || 'Failed to complete operation'}
)}
{/* Actions */}
-