Skip to main content

Master Screen Rules

Quy tắc cho màn hình danh sách (master): search, URL, căn lề bảng, required input và xử lý flashing.

Search Capability​

Tất cả các cột trong bảng (table) phải có thể search được (theo filter/search của dự án).

Kết quả search chính xác​

Kết quả tìm kiếm phải chính xác (đúng nghiệp vụ, không thiếu hoặc thừa bản ghi do lỗi filter/query).

Màn hình danh sách hỗ trợ tìm kiếm từ URL​

Màn hình danh sách phải hỗ trợ tìm kiếm từ URL (query params). Ví dụ: ?q=keyword&status=active để khi share link hoặc refresh, filter vẫn được giữ.

Ví dụ: Đọc searchParams từ page và khởi tạo state filter/search từ đó; khi thay đổi filter thì cập nhật URL (shallow hoặc push).

Table Alignment​

Số / tiền tệ: canh lề phải​

Giá trị số và tiền tệ trong table phải canh lề phải (text-align: right) để dễ so sánh.

Text (Email, Phone, UserProfile, Datetime): canh lề trái​

Giá trị text (Email, Phone, UserProfile, Datetime, …) canh lề trái (mặc định).

Required Input​

Input bắt buộc có thuộc tính required​

Các input bắt buộc phải có thuộc tính required (hoặc validation tương đương) để form không submit khi thiếu và hỗ trợ accessibility.

Flashing Issue (TMS-Web)​

Xử lý flashing khi quay lại danh sách​

Trong dự án TMS-Web, phải xử lý vấn đề flashing khi quay lại màn hình danh sách sau khi tạo mới hoặc chỉnh sửa (ví dụ: list nháy/blink do refetch hoặc state reset). Có thể dùng cache (SWR), optimistic update hoặc điều chỉnh thứ tự render/loading để tránh nháy màn hình.