Data Entry Component - Copy this React, Tailwind Component to your project
1. Quản lý nhập liệu theo hàng: • Người dùng nhập dữ liệu vào các trường của từng hàng trong bảng. • Nếu người dùng bắt đầu nhập liệu vào bất kỳ trường nào trong hàng, hàng đó sẽ được kích hoạt kiểm tra các trường bắt buộc (required). • Nếu một hàng chưa có dữ liệu nào, hàng đó sẽ không bị áp dụng các quy tắc kiểm tra. 2. Kiểm tra required chỉ khi hàng có dữ liệu: • Khi hàng có dữ liệu (bất kỳ trường nào trong hàng không trống), tất cả các trường được đánh dấu required trong hàng sẽ yêu cầu người dùng nhập liệu. • Nếu người dùng xóa toàn bộ dữ liệu trong một hàng (tất cả các trường đều trống), hàng đó sẽ không bị yêu cầu required nữa, và các lỗi xác thực sẽ bị xóa. 3. Tính toán tự động: • Nếu có các trường tính toán (như average là trung bình của score1 và score2), chúng sẽ tự động cập nhật khi các giá trị trong hàng thay đổi. • Nếu một trong các trường liên quan đến phép tính (ví dụ, score1 hoặc score2) bị xóa, giá trị tính toán (như average) cũng sẽ được xóa theo. 4. Gửi dữ liệu hợp lệ: • Khi người dùng nhấn nút Submit, chỉ các hàng có dữ liệu hợp lệ mới được gửi. • Nếu có bất kỳ hàng nào bị thiếu dữ liệu ở trường required nhưng vẫn có dữ liệu ở các trường khác, hệ thống sẽ hiển thị lỗi yêu cầu người dùng hoàn thành các trường còn thiếu. Mô phỏng chức năng Giả sử chúng ta có một bảng với các cột như sau: • Name: Bắt buộc phải có nếu hàng có dữ liệu. • Score 1: Bắt buộc phải có nếu hàng có dữ liệu. • Score 2: Bắt buộc phải có nếu hàng có dữ liệu. • Average: Tự động tính trung bình của Score 1 và Score 2 (nếu cả hai đều có dữ liệu). Tình huống cụ thể: 1. Nhập dữ liệu vào hàng: • Người dùng bắt đầu nhập dữ liệu vào trường Name trong hàng 1. Ngay sau khi nhập liệu, hàng này sẽ bị kích hoạt và tất cả các trường required trong hàng sẽ yêu cầu người dùng điền giá trị. • Nếu người dùng chỉ nhập Name mà không điền Score 1 và Score 2, hệ thống sẽ hiển thị lỗi yêu cầu nhập liệu cho Score 1 và Score 2. 2. Tính toán trung bình: • Khi người dùng nhập cả hai giá trị Score 1 và Score 2 trong hàng 1, trường Average sẽ tự động tính giá trị trung bình của hai trường này. • Nếu người dùng xóa một trong hai trường Score 1 hoặc Score 2, Average sẽ bị xóa và không hiển thị nữa. 3. Xóa toàn bộ dữ liệu trong hàng: • Sau khi nhập xong, nếu người dùng xóa hết giá trị của Name, Score 1, và Score 2, hàng 1 sẽ trở về trạng thái “chưa nhập liệu”. • Tất cả các lỗi xác thực cho hàng đó sẽ biến mất, và hàng sẽ không yêu cầu required nữa cho tới khi người dùng bắt đầu nhập lại. 4. Nhấn Submit: • Khi người dùng nhấn Submit, hệ thống sẽ kiểm tra tất cả các hàng: • Hàng nào có dữ liệu thì tất cả các trường required phải được điền đầy đủ, nếu không sẽ hiện lỗi. • Hàng nào không có dữ liệu (tất cả các trường đều trống) sẽ được bỏ qua và không bị kiểm tra.
