starred/bambuddy-maziggy-1
1
0
Fork 0
mirror of https://github.com/maziggy/bambuddy.git synced 2026-05-09 08:25:54 +02:00
Code Issues 44 Projects Packages Wiki Activity

[PR #569] [MERGED] [Feature]: Printer Page - Add a print button & Drop zone on the printer card #1072

New issue
Closed
opened 2026-05-07 00:15:50 +02:00 by BreizhHardware · 0 comments
BreizhHardware commented 2026-05-07 00:15:50 +02:00
Owner
Copy link

📋 Pull Request Information

Original PR: https://github.com/maziggy/bambuddy/pull/569
Author: @aneopsy
Created: 3/2/2026
Status: ✅ Merged
Merged: 3/3/2026
Merged by: @maziggy

Base: 0.2.2b1 ← Head: printer-print

📝 Commits (8)

  • 74dd536 Add printer card print flow with drag-drop and reusable LibraryUploadModal
  • b9a886a Add printer compatibility check for drag-drop and upload-to-print flows
  • 4d997e5 Improve FileUploadModal: auto-close on success, inline errors, file validation, and i18n
  • 4423209 Clean up incompatible files from library and fix print button i18n
  • a3f664f Add printer information modal accessible from card 3-dot menu
  • 99c49d0 Extract getPrinterImage and getWifiStrength into shared printer utils
  • 29f7ecf Merge branch '0.2.2b1' into printer-print
  • 7a36ef7 Merge branch '0.2.2b1' into printer-print

📊 Changes

18 files changed (+10417 additions, -414 deletions)

View changed files

➕ frontend/src/__tests__/components/FileUploadModal.test.tsx (+654 -0)
📝 frontend/src/__tests__/pages/FileManagerPage.test.tsx (+112 -12)
➕ frontend/src/components/FileUploadModal.tsx (+352 -0)
📝 frontend/src/components/PrintModal/index.tsx (+28 -22)
📝 frontend/src/components/PrintModal/types.ts (+2 -0)
➕ frontend/src/components/PrinterInfoModal.tsx (+246 -0)
📝 frontend/src/i18n/locales/de.ts (+18 -1)
📝 frontend/src/i18n/locales/en.ts (+18 -1)
📝 frontend/src/i18n/locales/fr.ts (+18 -1)
📝 frontend/src/i18n/locales/it.ts (+18 -1)
📝 frontend/src/i18n/locales/ja.ts (+17 -0)
📝 frontend/src/i18n/locales/pt-BR.ts (+18 -1)
📝 frontend/src/pages/FileManagerPage.tsx (+3 -331)
📝 frontend/src/pages/PrintersPage.tsx (+189 -43)
➕ frontend/src/utils/printer.ts (+25 -0)
➖ static/assets/index-C8l0CpBG.css (+0 -1)
➕ static/assets/index-DCSTzx1f.css (+1 -0)
➕ static/assets/index-DweJfV_v.js (+8698 -0)

📄 Description

Extract inline upload modal from FileManagerPage into a reusable LibraryUploadModal component. Add a Print button and drag-drop zone to printer cards that upload files to the library and open PrintModal with the printer pre-selected. Only .gcode/.gcode.3mf files are accepted for printing. PrintModal hides printer selector when a printer is provided via initialSelectedPrinterIds prop.

Related Issue

Fixes #567

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update
  • Code refactoring
  • Performance improvement
  • Test addition or update

Changes Made

LibraryUploadModal (new component)

  • Extracted the inline upload modal from FileManagerPage into a reusable LibraryUploadModal component
  • Supports ZIP extraction, 3MF detection, STL thumbnail generation
  • Added autoUpload prop, immediately uploads and closes when a file is added
  • Added onFileUploaded callback returning the uploaded file's response data
  • Refactored upload logic: replaced fragile index-based status updates with file-reference matching via updateFileStatus helper
  • Modal stays open after manual upload so users can see results; only auto-closes in autoUpload mode

Printer Card - Print button

  • Added a green "Print" button (with printer icon) next to the Files button on each printer card
  • Only visible when the printer is not running or paused
  • Opens LibraryUploadModal in autoUpload mode, then chains into PrintModal with the printer pre-selected

Printer Card - Drag-and-drop

  • Made the entire printer card a drop zone for files
  • Validates dropped files: only .gcode and .gcode.3mf are accepted, others show an error toast
  • Shows a visual overlay while dragging (green "Drop to print" or red "Printer busy")
  • Shows a spinner overlay during upload
  • On successful upload, opens PrintModal with the printer pre-selected — same flow as the Print button

PrintModal enhancements

  • Added initialSelectedPrinterIds prop to pre-select printers
  • Hides the printer selector when printers are provided via props
  • Auto-expands Filament Mapping and Print Options when a printer is pre-selected

Cleanup

  • Fixed drop overlay border radius (rounded-lg → rounded-xl) to match card styling
  • Moved chamber light button to controls section in printer card

Tests

  • Created LibraryUploadModal.test.tsx with 33 tests covering rendering, file selection, removal, type detection, ZIP options, upload flow, autoUpload mode, close behavior, and drag-and-drop
  • Updated FileManagerPage.test.tsx with 6 new integration tests for the upload modal (43 total)

Screenshots

image

When dropping a file:
image

Testing

  • I have tested this on my local machine
  • I have tested with my printer model:

Checklist

  • My code follows the project's coding style
  • I have commented my code where necessary
  • I have updated the documentation (if needed)
  • My changes generate no new warnings
  • I have tested my changes thoroughly

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/maziggy/bambuddy/pull/569 **Author:** [@aneopsy](https://github.com/aneopsy) **Created:** 3/2/2026 **Status:** ✅ Merged **Merged:** 3/3/2026 **Merged by:** [@maziggy](https://github.com/maziggy) **Base:** `0.2.2b1` ← **Head:** `printer-print` --- ### 📝 Commits (8) - [`74dd536`](https://github.com/maziggy/bambuddy/commit/74dd5366248d7910daf1c128e521ff065dd3bdd5) Add printer card print flow with drag-drop and reusable LibraryUploadModal - [`b9a886a`](https://github.com/maziggy/bambuddy/commit/b9a886a8a52ada045d82881b2f3ce736e5ed887a) Add printer compatibility check for drag-drop and upload-to-print flows - [`4d997e5`](https://github.com/maziggy/bambuddy/commit/4d997e5f8c8481a1ae77c2b36197a3ca84886079) Improve FileUploadModal: auto-close on success, inline errors, file validation, and i18n - [`4423209`](https://github.com/maziggy/bambuddy/commit/442320988b3fabe2dd11dfead460a4980805b8d4) Clean up incompatible files from library and fix print button i18n - [`a3f664f`](https://github.com/maziggy/bambuddy/commit/a3f664fe20e377e0fdaee4817a011f50530cd169) Add printer information modal accessible from card 3-dot menu - [`99c49d0`](https://github.com/maziggy/bambuddy/commit/99c49d0aff2f24f46c978153192bab99d4ba49cf) Extract getPrinterImage and getWifiStrength into shared printer utils - [`29f7ecf`](https://github.com/maziggy/bambuddy/commit/29f7ecf70b71dd5e489ef02ef38a296fc381cb1b) Merge branch '0.2.2b1' into printer-print - [`7a36ef7`](https://github.com/maziggy/bambuddy/commit/7a36ef74b242f94a9dc6c5028319f28710272625) Merge branch '0.2.2b1' into printer-print ### 📊 Changes **18 files changed** (+10417 additions, -414 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/__tests__/components/FileUploadModal.test.tsx` (+654 -0) 📝 `frontend/src/__tests__/pages/FileManagerPage.test.tsx` (+112 -12) ➕ `frontend/src/components/FileUploadModal.tsx` (+352 -0) 📝 `frontend/src/components/PrintModal/index.tsx` (+28 -22) 📝 `frontend/src/components/PrintModal/types.ts` (+2 -0) ➕ `frontend/src/components/PrinterInfoModal.tsx` (+246 -0) 📝 `frontend/src/i18n/locales/de.ts` (+18 -1) 📝 `frontend/src/i18n/locales/en.ts` (+18 -1) 📝 `frontend/src/i18n/locales/fr.ts` (+18 -1) 📝 `frontend/src/i18n/locales/it.ts` (+18 -1) 📝 `frontend/src/i18n/locales/ja.ts` (+17 -0) 📝 `frontend/src/i18n/locales/pt-BR.ts` (+18 -1) 📝 `frontend/src/pages/FileManagerPage.tsx` (+3 -331) 📝 `frontend/src/pages/PrintersPage.tsx` (+189 -43) ➕ `frontend/src/utils/printer.ts` (+25 -0) ➖ `static/assets/index-C8l0CpBG.css` (+0 -1) ➕ `static/assets/index-DCSTzx1f.css` (+1 -0) ➕ `static/assets/index-DweJfV_v.js` (+8698 -0) </details> ### 📄 Description Extract inline upload modal from FileManagerPage into a reusable LibraryUploadModal component. Add a Print button and drag-drop zone to printer cards that upload files to the library and open PrintModal with the printer pre-selected. Only .gcode/.gcode.3mf files are accepted for printing. PrintModal hides printer selector when a printer is provided via initialSelectedPrinterIds prop. ## Related Issue Fixes #567 ## Type of Change - [ ] Bug fix (non-breaking change that fixes an issue) - [X] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) - [ ] Documentation update - [ ] Code refactoring - [ ] Performance improvement - [ ] Test addition or update ## Changes Made ### LibraryUploadModal (new component) - Extracted the inline upload modal from FileManagerPage into a reusable LibraryUploadModal component - Supports ZIP extraction, 3MF detection, STL thumbnail generation - Added autoUpload prop, immediately uploads and closes when a file is added - Added onFileUploaded callback returning the uploaded file's response data - Refactored upload logic: replaced fragile index-based status updates with file-reference matching via updateFileStatus helper - Modal stays open after manual upload so users can see results; only auto-closes in autoUpload mode ### Printer Card - Print button - Added a green "Print" button (with printer icon) next to the Files button on each printer card - Only visible when the printer is not running or paused - Opens LibraryUploadModal in autoUpload mode, then chains into PrintModal with the printer pre-selected ### Printer Card - Drag-and-drop - Made the entire printer card a drop zone for files - Validates dropped files: only .gcode and .gcode.3mf are accepted, others show an error toast - Shows a visual overlay while dragging (green "Drop to print" or red "Printer busy") - Shows a spinner overlay during upload - On successful upload, opens PrintModal with the printer pre-selected — same flow as the Print button ### PrintModal enhancements - Added initialSelectedPrinterIds prop to pre-select printers - Hides the printer selector when printers are provided via props - Auto-expands Filament Mapping and Print Options when a printer is pre-selected ### Cleanup - Fixed drop overlay border radius (rounded-lg → rounded-xl) to match card styling - Moved chamber light button to controls section in printer card ### Tests - Created LibraryUploadModal.test.tsx with 33 tests covering rendering, file selection, removal, type detection, ZIP options, upload flow, autoUpload mode, close behavior, and drag-and-drop - Updated FileManagerPage.test.tsx with 6 new integration tests for the upload modal (43 total) ## Screenshots <img width="309" height="123" alt="image" src="https://github.com/user-attachments/assets/a0fe1ba8-e4e6-48fd-b53f-374acb1f8a2f" /> When dropping a file: <img width="968" height="1458" alt="image" src="https://github.com/user-attachments/assets/3556c358-4d97-4fb8-bba4-cb42526031ff" /> ## Testing - [X] I have tested this on my local machine - [X] I have tested with my printer model: <!-- e.g., X1C, P1S, A1 --> ## Checklist - [X] My code follows the project's coding style - [X] I have commented my code where necessary - [X] I have updated the documentation (if needed) - [X] My changes generate no new warnings - [X] I have tested my changes thoroughly --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
BreizhHardware 2026-05-07 00:15:50 +02:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
github-repo-stats
bug-report-assets
dev
0.2.4b3
0.2.4b2
0.2.4b1
pr/1114
0.2.3.2
0.2.3.1
0.2.3
0.2.3b3
0.2.3b2
0.2.3b1
0.2.2.2
0.2.2.1
0.2.2b3
0.2.2
0.2.2b2
0.2.2b1
0.2.1.1
0.2.1
0.2.1b3
0.2.1b2
0.2.1b
0.2.0
0.2.0b
0.1.5-2-ctrl
v0.2.4b4-daily.20260508
v0.2.4b2
v0.2.4b3
v0.2.4b1
v0.2.3.2
v0.2.3.1
v0.2.3
v0.2.3b3
v0.2.3b2
v0.2.3b1-daily.20260407
v0.2.3b1
v0.2.2.2
v0.2.2.1
v0.2.3b1-daily.20260318
v0.2.3b1-daily.20260317
v0.2.3b1-daily.20260316
v0.2.2
v0.2.2b4-daily.20260314
v0.2.2b4-daily.20260313
v0.2.2b3-daily.20260312
v0.2.2b3-1
v0.2.2b2
v0.2.2-b2
v0.2.2b3
v0.2.2-b1
v0.2.2b1
v0.2.1.1
v0.2.1
v0.2.1b3
v0.2.1b2
v0.2.1b
v0.2.0
v0.1.9
v0.1.8.1
v0.1.8
v0.1.7
v0.1.6.2
v0.1.6.1
v0.1.6-hotfix
v0.1.6
v0.1.6b11
v0.1.6b10
v0.1.6b9
v0.1.6b8
v0.1.6b7
v0.1.6b6
v0.1.6b5
v0.1.6b4
v0.1.6b3
v0.1.6b2
v0.1.6b
v0.1.5-final
v0.1.5b7
v0.1.5b6
v0.1.5b5
v0.1.5b4
v0.1.5b3
v0.1.5b2
v0.1.5b
v0.1.4
v0.1.3
v0.1.2-bugfix
v0.1.2-final
v0.1.2
0.1.1
Labels
Clear labels   
A1

   
automated

   
automated

   
bug

   
bug

   
Closed due to inactivity

   
contrib

   
dependencies

   
dependencies

   
duplicate

   
enhancement

   
feedback

   
hold

   
invalid

   
Notes

   
P1S

   
pull-request
Mirrored from GitHub Pull Request

  
security

   
ThumbsUp

   
user-report

   
wontfix
No labels
A1
automated
automated
bug
bug
Closed due to inactivity
contrib
dependencies
dependencies
duplicate
enhancement
feedback
hold
invalid
Notes
P1S
pull-request
security
ThumbsUp
user-report
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/bambuddy-maziggy-1#1072
No description provided.