Skip to content

Improve rabbit sheet printing functionality for A6 format without UI interference#31

Merged
hankerspace merged 4 commits into
mainfrom
copilot/fix-cbd92f53-1242-4559-a70b-d7cd18761131
Aug 10, 2025
Merged

Improve rabbit sheet printing functionality for A6 format without UI interference#31
hankerspace merged 4 commits into
mainfrom
copilot/fix-cbd92f53-1242-4559-a70b-d7cd18761131

Conversation

Copilot AI commented Aug 10, 2025

Copy link
Copy Markdown
Contributor

Problem

The existing print functionality for rabbit sheets (fiches lapin) had several issues:

  • The print dialog modal could include unwanted UI elements in the printed output
  • Print styles might not be properly isolated from the main application UI
  • Users had to go through an unnecessary preview dialog before printing

Solution

This PR completely reimplements the print functionality to provide a clean, A6-formatted rabbit sheet without any superfluous interface elements.

Key Changes

New dedicated print utility (src/utils/print.utils.ts):

  • Creates a standalone print window with optimized HTML content
  • Generates A6-formatted layout (105mm x 148mm) with proper margins
  • Includes integrated QR code generation using CDN library
  • Automatically handles print dialog and window cleanup

Simplified user experience (src/pages/Animals/AnimalDetailPage.tsx):

  • Removed the intermediate print preview dialog (30+ lines of code removed)
  • Direct print action when clicking "Imprimer fiche" button
  • Better error handling for popup blockers

Print-optimized layout:

  • Clean typography with font sizes optimized for A6 format
  • Essential information displayed in compact grid layout
  • QR code properly sized and positioned
  • CSS @page rules ensure correct A6 page size and margins

Technical Implementation

The new print function opens a dedicated window with self-contained HTML that includes:

  • All necessary CSS styles embedded inline
  • QR code generation via external CDN library
  • Responsive layout that fits perfectly on A6 paper
  • Automatic print triggering and window cleanup

Testing

Added comprehensive test suite covering:

  • HTML content generation with proper animal data
  • Graceful handling of missing/empty data
  • Print workflow simulation
  • Error handling for blocked popups

Usage

When users click "Imprimer fiche" on an animal detail page:

  1. A new print window opens instantly with the formatted rabbit sheet
  2. Browser print dialog appears automatically
  3. Window closes after printing (or user cancellation)

The result is a clean, professional A6 rabbit identification sheet containing:

  • Animal name and identifier
  • Sex with appropriate symbols (♀/♂)
  • Birth date and breed information
  • QR code for digital traceability
  • Generation timestamp

This implementation eliminates any risk of printing unwanted UI elements while providing a much smoother user experience.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 2 commits August 10, 2025 12:46
Co-authored-by: hankerspace <303649+hankerspace@users.noreply.github.com>
Co-authored-by: hankerspace <303649+hankerspace@users.noreply.github.com>
Copilot AI changed the title [WIP] retravaille la fonctionalité "imprimer" une fiche lapin. Cette fiche doit tenir au format A6, et le clic sur "imprimer" doit pouvoir lancer l'impression au format A6, sans autre élément d'interface superflux dans la page. Trouve une solution Improve rabbit sheet printing functionality for A6 format without UI interference Aug 10, 2025
Copilot AI requested a review from hankerspace August 10, 2025 12:57
@hankerspace hankerspace marked this pull request as ready for review August 10, 2025 13:07
@hankerspace

Copy link
Copy Markdown
Owner

@copilot fix tests & lint

…nimal interface properties

Co-authored-by: hankerspace <303649+hankerspace@users.noreply.github.com>

Copilot AI commented Aug 10, 2025

Copy link
Copy Markdown
Contributor Author

@copilot fix tests & lint

Tests and lint have been fixed! The TypeScript compilation errors were resolved by updating the test file to use the correct Animal interface properties. All tests now pass (600 passed), lint passes without issues, and the build completes successfully. Changes committed in 5fb3e8c.

@hankerspace hankerspace merged commit e54d500 into main Aug 10, 2025
3 checks passed
@hankerspace hankerspace deleted the copilot/fix-cbd92f53-1242-4559-a70b-d7cd18761131 branch August 10, 2025 13:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants