Merge pull request #112 from toddaheath/feature/toolbar-export-buttons

Add PDF and STL export buttons to toolbar

Author: toddaheath

src/shed-builder-ui/src/components/App.tsx

@@ -26,6 +26,8 @@ import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import LogoutIcon from '@mui/icons-material/Logout';
 import LockIcon from '@mui/icons-material/Lock';
+import DownloadIcon from '@mui/icons-material/Download';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import CircularProgress from '@mui/material/CircularProgress';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -472,6 +474,25 @@ function AuthenticatedApp({ mode, toggleDarkMode, onSignOut }: AuthenticatedAppP
                   </IconButton>
                 </span>
               </Tooltip>
+              <Box sx={{ mx: 0.5, height: 24, borderLeft: '1px solid', borderColor: 'rgba(255,255,255,0.3)' }} />
+              <Tooltip title="Download PDF report">
+                <IconButton
+                  color="inherit"
+                  aria-label="Download PDF"
+                  onClick={() => api.downloadPdf(activeDesign.id, activeDesign.name)}
+                >
+                  <PictureAsPdfIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Download STL model">
+                <IconButton
+                  color="inherit"
+                  aria-label="Download STL"
+                  onClick={() => api.downloadStl(activeDesign.id, activeDesign.name)}
+                >
+                  <DownloadIcon />
+                </IconButton>
+              </Tooltip>
             </>
           )}
           <Tooltip title={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>

src/shed-builder-ui/src/components/__tests__/App.test.tsx

@@ -371,6 +371,65 @@ describe('App', () => {
     unmount();
   });
 
+  it('shows export buttons when a design is active', async () => {
+    const { getStoredToken, api: mockApi } = await getApi();
+    vi.mocked(getStoredToken).mockReturnValue('valid-token');
+
+    const newDesign = {
+      id: 'new-id',
+      name: 'Export Test',
+      widthFeet: 10,
+      widthInches: 0,
+      depthFeet: 12,
+      depthInches: 0,
+      heightFeet: 8,
+      heightInches: 0,
+      roofPitch: 4,
+      roofType: 'Gable' as const,
+      openings: [],
+      createdAt: '2024-01-01T00:00:00Z',
+      updatedAt: '2024-01-01T00:00:00Z',
+    };
+    vi.mocked(mockApi.createDesign).mockResolvedValue(newDesign);
+    vi.mocked(mockApi.listDesigns)
+      .mockResolvedValueOnce({ items: [], totalCount: 0 })
+      .mockResolvedValue({ items: [newDesign], totalCount: 1 });
+
+    const { unmount } = render(<App />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Select or create a design to begin')).toBeInTheDocument();
+    });
+
+    // Create a design to make export buttons appear
+    await userEvent.click(screen.getByLabelText('Create new design'));
+    await userEvent.type(screen.getByLabelText('Design Name'), 'Export Test');
+    await userEvent.click(screen.getByRole('button', { name: 'Create' }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Download PDF')).toBeInTheDocument();
+    });
+    expect(screen.getByLabelText('Download STL')).toBeInTheDocument();
+
+    unmount();
+  });
+
+  it('does not show export buttons when no design is selected', async () => {
+    const { getStoredToken } = await getApi();
+    vi.mocked(getStoredToken).mockReturnValue('valid-token');
+
+    const { unmount } = render(<App />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Select or create a design to begin')).toBeInTheDocument();
+    });
+
+    expect(screen.queryByLabelText('Download PDF')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Download STL')).not.toBeInTheDocument();
+
+    unmount();
+  });
+
   it('shows tabs when a design is selected', async () => {
     const { getStoredToken, api: mockApi } = await getApi();
     vi.mocked(getStoredToken).mockReturnValue('valid-token');