Giao diện
@digiforce-nc/plugin-action-print
Plugin cung cấp in bản ghi (browser print) - sử dụng react-to-print để in nội dung detail/calendar view trực tiếp từ trình duyệt, không cần server API.
Plugin này làm gì?
Hãy hình dung bạn đang xem chi tiết một đơn hàng và muốn in ra giấy hoặc lưu PDF. Plugin hoàn toàn client-only - khi nhấn nút Print, nó sử dụng react-to-print để chụp vùng .df-grid (chứa nội dung detail view) rồi mở native print dialog của trình duyệt. Không gửi request nào lên server.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Đăng ký action | Gắn action print vào detail view và calendar form |
| 2 | Chụp nội dung | Sử dụng react-to-print nhắm vào vùng .df-grid để chụp nội dung cần in |
| 3 | Mở print dialog | Kích hoạt native print dialog của trình duyệt (hỗ trợ in giấy + Save as PDF) |
Kiến trúc
Tổng quan
Plugin hoạt động 100% ở client - không có server API, không gửi request. Luồng xử lý đi từ nút Print → react-to-print → browser print dialog.
| Tầng | Vai trò | Thành phần |
|---|---|---|
| Plugin Provider | Đăng ký component + action | PrintActionPluginProvider |
| Action Initializer | Gắn nút Print vào schema | PrintActionInitializer |
| Action Hook | Logic xử lý in (tìm ref, gọi react-to-print) | useDetailPrintActionProps |
| Thư viện | Chụp DOM → trigger print | react-to-print |
| Browser | Native print dialog | Chrome/Firefox/Safari print |
Vị trí action
Plugin đăng ký action print tại hai nơi trong schema initializer:
| Vị trí | Schema Initializer | Mô tả |
|---|---|---|
| Detail view | details:configureActions | Nút Print trong thanh action của detail view |
| Calendar form | CalendarFormActionInitializers | Nút Print trong popup event của calendar |
Vùng in .df-grid
Plugin nhắm vào CSS class .df-grid để xác định vùng nội dung cần in:
| Thuộc tính | Mô tả |
|---|---|
| Selector | .df-grid |
| Bao gồm | Toàn bộ nội dung grid trong detail/calendar view |
| Không bao gồm | Toolbar, sidebar, navigation |
| CSS in | react-to-print tự inject print stylesheet |
Luồng hoạt động
Lưu ý khi in
| Lưu ý | Mô tả |
|---|---|
| CSS tương thích | react-to-print inject stylesheet riêng cho print media |
| Ẩn element | Toolbar, sidebar tự ẩn trong print mode |
| Ảnh | Hình ảnh trong grid được giữ nguyên |
| Table overflow | Bảng dài có thể bị cắt trang - trình duyệt tự xử lý pagination |
| Cross-browser | Hoạt động trên Chrome, Firefox, Safari, Edge |
Thành phần client
| Thành phần | Mô tả |
|---|---|
PrintActionPluginProvider | Provider đăng ký toàn bộ component vào plugin system |
PrintActionInitializer | Đăng ký nút Print vào schema initializer (detail + calendar) |
useDetailPrintActionProps | Hook xử lý logic in: tìm ref .df-grid, gọi react-to-print |
PrintActionWidget | Widget nút action kích hoạt in (uiCore) |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework (peer) |
react-to-print | Thư viện in từ React component (dev) |