Merge pull request #105 from toddaheath/feature/design-duplication

Add design duplication feature

Author: toddaheath

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

@@ -24,7 +24,7 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import CircularProgress from '@mui/material/CircularProgress';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import type { Design, UpdateDesignRequest } from '../types';
+import type { Design, UpdateDesignRequest, CreateDesignRequest } from '../types';
 import { api, getStoredToken, setStoredToken, extractApiError } from '../services/api';
 import { useDesignApi } from '../hooks/useDesignApi';
 import { useAutoSave } from '../hooks/useAutoSave';
@@ -341,6 +341,25 @@ function AuthenticatedApp({ mode, toggleDarkMode, onSignOut }: AuthenticatedAppP
     [createDesign]
   );
 
+  const handleDuplicateDesign = useCallback(
+    (design: Design) => {
+      const req: CreateDesignRequest = {
+        name: `${design.name} (Copy)`,
+        widthFeet: design.widthFeet,
+        widthInches: design.widthInches,
+        depthFeet: design.depthFeet,
+        depthInches: design.depthInches,
+        heightFeet: design.heightFeet,
+        heightInches: design.heightInches,
+        roofPitch: design.roofPitch,
+        roofType: design.roofType,
+        openings: design.openings,
+      };
+      createDesign(req).then((d) => { if (d) setLocalDesign(d); });
+    },
+    [createDesign]
+  );
+
   return (
     <Box sx={{ display: 'flex', height: '100vh' }}>
       <a href="#main-content" style={{
@@ -404,6 +423,7 @@ function AuthenticatedApp({ mode, toggleDarkMode, onSignOut }: AuthenticatedAppP
             onSelect={handleSelectDesign}
             onCreate={handleCreateDesign}
             onDelete={deleteDesign}
+            onDuplicate={handleDuplicateDesign}
           />
         </nav>
       </Drawer>

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

@@ -16,6 +16,7 @@ import {
   DialogActions,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import AddIcon from '@mui/icons-material/Add';
 import SearchIcon from '@mui/icons-material/Search';
 import type { Design } from '../types';
@@ -26,9 +27,10 @@ interface Props {
   onSelect: (id: string) => void;
   onCreate: (name: string) => void;
   onDelete: (id: string) => void;
+  onDuplicate?: (design: Design) => void;
 }
 
-export default memo(function DesignList({ designs, selectedId, onSelect, onCreate, onDelete }: Props) {
+export default memo(function DesignList({ designs, selectedId, onSelect, onCreate, onDelete, onDuplicate }: Props) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newName, setNewName] = useState('');
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
@@ -90,6 +92,18 @@ export default memo(function DesignList({ designs, selectedId, onSelect, onCreat
               secondary={`${d.widthFeet}'${d.widthInches ? d.widthInches + '"' : ''} × ${d.depthFeet}'${d.depthInches ? d.depthInches + '"' : ''}`}
             />
             <ListItemSecondaryAction>
+              {onDuplicate && (
+                <IconButton
+                  size="small"
+                  aria-label={`Duplicate ${d.name}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDuplicate(d);
+                  }}
+                >
+                  <ContentCopyIcon fontSize="small" />
+                </IconButton>
+              )}
               <IconButton
                 edge="end"
                 size="small"

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

@@ -199,4 +199,51 @@ describe('DesignList', () => {
 
     expect(onCreate).not.toHaveBeenCalled();
   });
+
+  it('shows duplicate button when onDuplicate is provided', () => {
+    render(
+      <DesignList
+        designs={mockDesigns}
+        selectedId={null}
+        onSelect={vi.fn()}
+        onCreate={vi.fn()}
+        onDelete={vi.fn()}
+        onDuplicate={vi.fn()}
+      />
+    );
+
+    expect(screen.getByLabelText('Duplicate Shed A')).toBeInTheDocument();
+    expect(screen.getByLabelText('Duplicate Shed B')).toBeInTheDocument();
+  });
+
+  it('calls onDuplicate with design when duplicate button is clicked', async () => {
+    const onDuplicate = vi.fn();
+    render(
+      <DesignList
+        designs={mockDesigns}
+        selectedId={null}
+        onSelect={vi.fn()}
+        onCreate={vi.fn()}
+        onDelete={vi.fn()}
+        onDuplicate={onDuplicate}
+      />
+    );
+
+    await userEvent.click(screen.getByLabelText('Duplicate Shed A'));
+    expect(onDuplicate).toHaveBeenCalledWith(mockDesigns[0]);
+  });
+
+  it('hides duplicate button when onDuplicate is not provided', () => {
+    render(
+      <DesignList
+        designs={mockDesigns}
+        selectedId={null}
+        onSelect={vi.fn()}
+        onCreate={vi.fn()}
+        onDelete={vi.fn()}
+      />
+    );
+
+    expect(screen.queryByLabelText('Duplicate Shed A')).not.toBeInTheDocument();
+  });
 });