Giao diện

@digiforce-nc/plugin-block-list ​

Plugin hiển thị dữ liệu collection dưới dạng danh sách dọc (List View) - mỗi bản ghi là một hàng có layout tùy chỉnh, phù hợp cho danh sách bài viết, feed hoạt động, hoặc danh mục chi tiết.

Plugin này làm gì? ​

Grid Card sắp xếp thẻ theo lưới ngang, còn List View xếp từng bản ghi theo chiều dọc - mỗi item chiếm toàn bộ chiều ngang. Đây là layout quen thuộc cho blog posts, danh sách đơn hàng, hay feed thông báo.

Ba nhiệm vụ chính ​

#Nhiệm vụChi tiết
1Hiển thị danh sách dọcMỗi bản ghi là một hàng full-width với layout tùy chỉnh
2Phân trang & tìm kiếmPagination known/unknown count, tích hợp filter/search
3Item designerKéo thả field vào template của từng item

Kiến trúc ​

Tổng quan ​

Giống như Grid Card, plugin hoạt động hoàn toàn ở client - không có server hay database riêng. Dữ liệu lấy từ collection API có sẵn.

Widget hierarchy ​

WidgetKế thừa từVai trò
ListBlockWidgetCollectionBlockWidgetBlock chính, quản lý resource, pagination, toolbar
ListItemWidgetCollectionBlockWidgetĐại diện một item trong danh sách

So sánh với Grid Card ​

Tiêu chíGrid CardList
LayoutLưới ngang, nhiều cộtDanh sách dọc, 1 cột
ResponsiveSố cột thay đổi theo breakpointLuôn 1 cột, chiều rộng item thay đổi
Use caseCatalog sản phẩm, thư viện ảnhBlog, đơn hàng, feed
SharedCùng dùng MultiRecordResource, pagination, DnDCùng dùng MultiRecordResource, pagination, DnD

Luồng hiển thị dữ liệu ​

Tính năng ​

Tính năngMô tả
Danh sách dọcLayout dọc full-width, dễ đọc trên mobile
PaginationPhân trang known/unknown count
Item designerTùy chỉnh layout từng item bằng drag & drop
Toolbar actionsFilter, sort, refresh, bulk actions
SearchTìm kiếm nhanh trên toolbar
Association supportHiển thị list trong popup association
DnD reorderSắp xếp lại thứ tự item
Multi data sourceHoạt động với mọi data source

Thành phần client ​

Thành phầnMô tả
ListBlockWidgetWidget chính, extends CollectionBlockWidget, quản lý list layout
ListItemWidgetWidget item con, render từng bản ghi theo template
ListComponent React render danh sách với Ant Design List
ListDesignerDesigner cho phép cấu hình item template
ListBlockInitializerĐăng ký block vào menu "Add block"
listActionInitializersNhóm action toolbar: filter, sort, refresh, bulk
ListItemActionInitializersAction trên từng item: view, edit, delete

Dependencies ​

PackageVai trò
@digiforce-nc/clientClient framework, widget system (peer)
@digiforce-nc/serverServer framework - chỉ dùng khi build (peer)
antdAnt Design - List component (peer)
@dnd-kit/coreDrag & drop framework (peer)

Mục lục chi tiết ​