Cài đặt và sử dụng

Cài đặt

Plugin @digiforce-nc/plugin-block-list thường được cài sẵn trong bản phân phối chính. Nếu chưa có, kích hoạt qua trang Plugin Manager.

Plugin hoạt động hoàn toàn ở client — không có server component hay database riêng.

Thêm List block

1. Mở trang ở chế độ thiết kế (Schema Editor).
2. Click Add block → chọn List.
3. Chọn collection (data source) muốn hiển thị.
4. Block List xuất hiện với danh sách trống, sẵn sàng cấu hình.

Thiết kế item template

Mỗi bản ghi trong danh sách hiển thị theo template chung:

1. Click vào vùng item trống → chuyển sang Item Designer.
2. Kéo thả field từ collection vào item layout (ảnh, tiêu đề, mô tả, ngày tạo...).
3. Sắp xếp vị trí field theo layout mong muốn.
4. Thoát designer — tất cả item tự động áp dụng template mới.

So sánh với Grid Card

Tiêu chí	List	Grid Card
Layout	Danh sách dọc, 1 cột full-width	Lưới ngang, nhiều cột
Responsive	Chiều rộng item thay đổi	Số cột thay đổi theo breakpoint
Use case	Blog, đơn hàng, feed	Catalog, thư viện ảnh

Phân trang

List block hỗ trợ hai chế độ phân trang giống Grid Card:

• Known count: Hiển thị tổng số bản ghi và page navigator.
• Unknown count: Chỉ hiện nút Next / Previous.

Cấu hình page size qua Settings panel.

Tìm kiếm và lọc

Trên toolbar của block, admin có thể bật:

• Filter: Lọc dữ liệu theo điều kiện field
• Search: Ô tìm kiếm nhanh trên toolbar
• Sort: Sắp xếp theo field tùy chọn
• Refresh: Tải lại dữ liệu

Action trên từng item

Mỗi item có thể gắn action riêng:

• View: Mở popup xem chi tiết
• Edit: Mở form chỉnh sửa
• Delete: Xóa bản ghi
• Custom action: Action tùy chỉnh

Kéo thả sắp xếp

Tương tự Grid Card, List block hỗ trợ drag & drop để sắp xếp lại thứ tự item. Yêu cầu collection có field sort.

Mẹo

List block phù hợp cho danh sách bài viết, feed hoạt động, danh sách đơn hàng — những nơi cần hiển thị chi tiết hơn trên mỗi hàng.