Giao diện
@digiforce-nc/plugin-number-format-field
Plugin field định dạng số — bổ sung kiểu field hiển thị số theo format tùy chỉnh (tiền tệ, phần trăm, số thập phân, mã đơn hàng).
Plugin này làm gì?
Số 1234567.89 có thể cần hiển thị khác nhau: 1,234,567.89 (tiền USD), 1.234.567,89 (tiền VND format), 1234567.89%, hoặc ORD-001234567. Plugin đăng ký field type mới cho phép cấu hình format hiển thị số linh hoạt.
Cơ chế hoạt động
Tính năng chính
| # | Tính năng | Mô tả |
|---|---|---|
| 1 | Locale-aware format | Tự động định dạng theo locale (en-US, vi-VN) qua Intl.NumberFormat |
| 2 | Precision control | Cấu hình độ chính xác thập phân (1, 1.0, 1.00, ..., 1.00000) |
| 3 | Thousand separator | Dấu phân cách hàng nghìn tự động theo locale |
| 4 | Percent mode | Hiển thị dạng phần trăm — lưu 0.5, hiển thị 50% |
| 5 | Validation | Min/Max, Integer/Odd/Even, Regular expression |
| 6 | Pretty format toggle | Bật/tắt định dạng đẹp qua checkbox |
Kiến trúc Plugin
Plugin chỉ hoạt động phía client — server plugin trống (không có collection hay action). Toàn bộ logic nằm ở:
| Thành phần | Mô tả |
|---|---|
FormatNumberFieldInterface | Interface cho field Number — đăng ký vào group basic, order 7 |
FormatPercentFieldInterface | Interface cho field Percent — đăng ký vào group basic, order 8 |
InputNumber | Component input số với formatter/parser locale-aware |
Percent | Component phần trăm — nhân/chia 100 tự động |
ReadPretty | Component hiển thị (read-only) với định dạng |
NumberFormatProvider | Provider đăng ký các interface vào hệ thống |
getNumberFormatter() | Utility tạo formatter/parser từ locale và step |
Database type hỗ trợ
| Type | Mô tả |
|---|---|
double | Số thực dấu phẩy động (mặc định cho Number) |
float | Số thực độ chính xác đơn (mặc định cho Percent) |
decimal | Số thập phân chính xác cao |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client UI framework — field registry |
@digiforce-nc/server | Server framework (peer, không dùng trực tiếp) |
@formily/react | Form library — connect, mapReadPretty |
@rc-component/mini-decimal | Utility lấy precision từ step value |
Intl.NumberFormat | API trình duyệt — format số theo locale |
Lưu ý triển khai
- Dữ liệu lưu trong DB luôn là raw number — format chỉ khi hiển thị
- Sort và filter hoạt động trên raw number, không bị ảnh hưởng bởi format
- Locale đọc từ
localStorage.getItem('DIGIFORCE_LOCALE'), mặc địnhen-US - Percent field lưu dạng decimal (0.156 → hiển thị 15.6%)