Giao diện
Cấu hình
registerGroupFieldInterface
Plugin cung cấp API để plugin khác đăng ký field interface mới làm group field cho Kanban:
typescript
kanbanPlugin.registerGroupFieldInterface('customSelect', {
getOptions: (field) => field.options,
getValue: (record, field) => record[field.name],
});Mặc định, Kanban hỗ trợ group field kiểu select và radioGroup. Sau khi đăng ký thêm, field interface mới sẽ xuất hiện trong danh sách chọn group field khi tạo Kanban block.
Card designer
Card template quyết định nội dung hiển thị trên mỗi card:
| Thành phần | Mô tả |
|---|---|
KanbanCardDesigner | Designer cho nội dung card — kéo thả field |
| Title area | Khu vực tiêu đề card (field text) |
| Body area | Khu vực nội dung (fields tùy chỉnh) |
| Footer area | Khu vực chân card (tags, avatar, date) |
Admin thiết kế card một lần, tất cả card trên board áp dụng cùng template.
Association kanban
Kanban block có thể hiển thị cho association data:
- Tạo Kanban block trong popup association.
- Block hiển thị records từ association collection.
- Group field cần có trong association collection.
Drag & Drop (react-beautiful-dnd)
Plugin sử dụng react-beautiful-dnd với hai loại draggable:
| Loại | Mô tả |
|---|---|
| Card drag | Kéo card giữa các cột — cập nhật group field value |
| Card reorder | Kéo card trong cùng cột — cập nhật sort order |
Khi drop card:
onDragEndcallback nhận source (cột gốc, vị trí gốc) và destination (cột đích, vị trí đích).- Plugin gửi PATCH request cập nhật giá trị field + sort order.
- UI cập nhật vị trí card ngay lập tức (optimistic update).
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 |
| Page size | Số card mỗi lần tải per cột | 20 |
| Show card adder | Hiển thị nút tạo nhanh | true |
Lazy loading
Kanban sử dụng react-intersection-observer để lazy load card khi scroll trong cột — tải thêm card khi user cuộn xuống cuối cột.
Column collapse
Cột có thể thu gọn (collapse) để tiết kiệm không gian — chỉ hiện tiêu đề cột và số lượng card.