Giao diện
@digiforce-nc/plugin-kanban
Plugin hiển thị dữ liệu collection dưới dạng bảng Kanban - phân nhóm bản ghi thành các cột theo field select/radio, hỗ trợ kéo thả card giữa các cột.
Plugin này làm gì?
Kanban board là công cụ quản lý trực quan: mỗi cột đại diện một trạng thái (To Do, In Progress, Done), mỗi thẻ là một bản ghi. Người dùng kéo thả thẻ giữa các cột để thay đổi trạng thái - lý tưởng cho quản lý task, pipeline bán hàng, theo dõi tiến độ.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Phân nhóm theo cột | Nhóm bản ghi theo field select/radio thành các cột |
| 2 | Drag & drop | Kéo thả card giữa các cột để cập nhật trạng thái |
| 3 | Card designer | Tùy chỉnh nội dung hiển thị trên mỗi card |
Kiến trúc
Tổng quan
Plugin hoạt động hoàn toàn ở client - nhóm dữ liệu client-side theo field giá trị, render bằng react-beautiful-dnd.
Cơ chế phân nhóm
Plugin yêu cầu chọn một group field - field kiểu select hoặc radioGroup - để chia bản ghi thành cột:
| Bước | Mô tả |
|---|---|
| 1 | Lấy danh sách options từ group field (ví dụ: To Do, In Progress, Done) |
| 2 | Mỗi option tạo thành một cột trên board |
| 3 | Bản ghi được phân vào cột tương ứng với giá trị field |
| 4 | Khi kéo card sang cột khác → cập nhật field value |
Drag & drop flow
Tính năng
| Tính năng | Mô tả |
|---|---|
| Column grouping | Phân cột theo field select/radio |
| Card DnD | Kéo thả card giữa các cột (react-beautiful-dnd) |
| Card designer | Tùy chỉnh layout card: fields, avatar, tags |
| Card viewer | Click card mở popup chi tiết (edit/view) |
| Card adder | Nút "+" trên mỗi cột để tạo nhanh record |
| Association kanban | Kanban cho association data trong popup |
| Custom group | Đăng ký group field interface tùy chỉnh |
| Lazy load | Intersection observer tải thêm card khi scroll |
| Column collapse | Thu gọn/mở rộng cột |
registerGroupFieldInterface
Plugin cung cấp API cho plugin khác đăng ký field interface mới làm group field:
typescript
kanbanPlugin.registerGroupFieldInterface('customSelect', {
getOptions: (field) => field.options,
getValue: (record, field) => record[field.name],
});Thành phần client
| Thành phần | Mô tả |
|---|---|
KanbanBlockWidget | Widget chính đăng ký Kanban block |
Kanban | Component board chính quản lý columns và DnD |
Kanban.Card | Component card hiển thị bản ghi |
CardAdder | Component tạo nhanh record trên mỗi cột |
CardViewer | Popup chi tiết khi click card |
KanbanBlockInitializer | Đăng ký vào menu "Add block" |
KanbanDesigner | Designer: chọn group field, card template |
KanbanCardDesigner | Designer cho nội dung card |
Cấu hình block
| Setting | Mô tả | Mặc định |
|---|---|---|
| Group field | Field select/radio để phân cột | Bắt buộc chọn |
| Sort field | Field sắp xếp card trong cột | sort hoặc createdAt |
| Card template | Layout hiển thị trên card | Mặc định: title + description |
| Show card adder | Hiển thị nút tạo nhanh | true |
| Page size | Số card mỗi lần tải | 20 |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework (peer) |
@digiforce-nc/server | Server framework - chỉ dùng khi build (peer) |
react-beautiful-dnd | Thư viện drag & drop cho card và column |
react-intersection-observer | Lazy load card khi scroll |