Trang sửa bài tập và cuộc thi, bản mới
Hai trang sửa bài tập và cuộc thi giờ cho thấy tình trạng chính ngay dưới tiêu đề, có biểu tượng cho từng phần, dòng thời gian cho lịch thi và danh sách đề gọn hơn. Mọi trường và thao tác cũ vẫn giữ nguyên.
Tình trạng ngày 3/10/2026
- Giai đoạn
- Đang review. PR đang mở. Chưa merge vào main, chưa lên beta, chưa có trong bản production.
- PR
- #529 Toàn bộ thay đổi giao diện của hai trang: cột rộng hơn, dải tóm tắt, biểu tượng phần, tab gạch chân, thẻ chọn cách chấm, dòng thời gian, danh sách đề một dòng. Chỉ có frontend.
- Ticket
- SP-781
- Ảnh chụp
- Mọi ảnh chụp đều lấy từ môi trường local với dữ liệu giả. Tên và số liệu không có thật. Ảnh "Trước" là nhánh main, ảnh "Sau" là PR #529, cùng một cơ sở dữ liệu, giao diện tiếng Việt.
Vì sao có thay đổi này
SP-781 đã chuyển hai trang này sang bố cục phẳng giống trang cài đặt AI. Bố cục đó gọn nhưng hơi đơn điệu. Muốn biết bài đã đủ tệp chưa hay chấm theo cách nào thì phải cuộn xuống. Lịch thi chỉ là bốn ô ngày giờ nên khó hình dung. Mỗi bài trong danh sách đề chiếm ba dòng. Lần này giữ nguyên bố cục phẳng nhưng thêm cấu trúc để đọc nhanh hơn.
Thay đổi trong một hình
1
Dải tóm tắt
Trạng thái, hiển thị và các thông tin chính nằm ngay dưới tiêu đề.
2
Biểu tượng và tab
Mỗi phần có biểu tượng riêng, tab chuyển sang kiểu gạch chân.
3
Chọn bằng thẻ
Ba cách chấm điểm là ba thẻ có mô tả ngắn.
4
Dòng thời gian
Lịch thi hiện thành một trục với các mốc và giờ hiện tại.
Trước và sau
Mỗi cặp ảnh là cùng một trang, cùng dữ liệu. Bấm vào ảnh để xem cỡ đầy đủ.
1. Đầu trang bài tập
2. Tệp và chấm điểm
3. Đầu trang cuộc thi
4. Lịch trình
5. Danh sách đề bài
6. Tạo cuộc thi, khi chưa chọn ngày
Chỉ có ở bản mới
Toàn trang
Đọc dải tóm tắt
Dải tóm tắt lấy từ dữ liệu đã lưu, không phải từ nội dung đang sửa. Chỉ "Trạng thái" có chấm màu: xanh là đang hoạt động, đỏ là đã lưu trữ.
| Mục | Ý nghĩa | Ví dụ trong ảnh |
|---|---|---|
| Bài tập | ||
| Trạng thái | Đang hoạt động hay đã lưu trữ. | Đang hoạt động |
| Hiển thị | Ổ khoá là riêng tư, quả địa cầu là công khai. | Riêng tư |
| Độ khó | Độ khó đã lưu. | Dễ |
| Chấm điểm | Cách chấm. Với catalog dùng chung thì kèm tên bộ chấm. | So sánh CSV cơ bản |
| Tệp | Số tệp đã có trên tổng số tệp cần. Liên kết ngoài cũng được tính. | Đã tải lên 2/2 |
| Cập nhật | Lần lưu gần nhất. | 4 giờ trước |
| Cuộc thi | ||
| Trạng thái | Đang hoạt động hay đã lưu trữ. | Đang hoạt động |
| Hiển thị | Riêng tư hoặc công khai, kèm "đã liên kết bài học" khi có. | Riêng tư · đã liên kết bài học |
| Cách tính giờ | Cố định hoặc Linh hoạt, kèm thời lượng. | Linh hoạt, 120 phút |
| Bắt đầu | Mốc bắt đầu đã lưu. | 01/10/2026 08:00 |
| Số bài | Số bài trong danh sách đề. | 5 |
| Đã đăng ký | Số học viên đã đăng ký. | 4 |
Đã kiểm tra những gì
- Không mất trường hay thao tác nào. Mọi trường, nút, gợi ý và kiểm tra dữ liệu của bản cũ vẫn có mặt. Cách lưu và gọi API không đổi.
- Lint, test và build đều qua. 593 test frontend chạy qua, lint không có lỗi.
- Các trang khác không đổi. Tab kiểu hộp vẫn là mặc định. Trang soạn blog được chụp trước và sau, hai ảnh giống hệt nhau.
- So với bản mock. Ảnh chụp trang thật được so với bản mock đã chọn. Những chỗ khác đều có lý do, ghi ở phần dưới.
Giới hạn đã biết
- Dòng tệp không có tên, dung lượng và ngày tải. Bản mock có dòng này nhưng API chưa trả về các thông tin đó, nên bỏ.
- Danh sách đề không có huy hiệu độ khó và tay kéo. API không trả độ khó cho từng bài trong cuộc thi. App chưa có kéo thả, vẫn dùng nút lên và xuống.
- Cuộc thi chưa có mục "Cập nhật". API cuộc thi chưa có thời điểm cập nhật. Muốn có thì cần một thay đổi nhỏ ở backend.
- Cuộc thi Cố định ngắn trong khoảng dài. Hai mốc Bắt đầu và Kết thúc gần chạm nhau trên trục. Nhãn vẫn đọc được vì xuống hai hàng.
- Tooltip trên màn hình cảm ứng chưa được kiểm tra. Đã kiểm tra bằng chuột và phím Tab.
- Chỉ mới kiểm tra trên local. Chưa có ai đi thử trên beta.
- PR gồm cả các thay đổi trước đó trên cùng nhánh. Cột rộng 1280px, nút Lưu bị khoá khi chưa có thay đổi, cột "Cuộc thi" trong tab Bài nộp, công tắc đổi thành "Cuộc thi công khai".
Quyết định đã chọn
| Câu hỏi | Lựa chọn |
|---|---|
| Hướng thiết kế nào? | Bản kết hợp từ ba hướng mock: dải tóm tắt và dòng thời gian của hướng 2, biểu tượng phần của hướng 1. Không dùng dạng khung thẻ của hướng 3. |
| Kiểu tab? | Kiểu gạch chân của shadcn. Các trang khác vẫn dùng kiểu hộp. |
| Trình soạn markdown mặc định? | Giữ chia đôi như trên main: soạn bên trái, xem trước bên phải. Khung soạn cao hơn. |
| Dữ liệu API chưa có? | Bỏ mục đó thay vì hiện số giả. |
| Nút Lưu? | Mờ khi chưa có thay đổi. Chấm cam báo khi có thay đổi chưa lưu. |
| Dòng thời gian lấy số từ đâu? | Từ các ô đang nhập, nên thấy ngay khi sửa. Với Cố định, Kết thúc là Bắt đầu cộng thời lượng. |
Các bước tiếp theo
- Review và merge PR #529 vào main. Beta tự deploy sau khi merge.
- Không có migration, không đổi API, không đổi cấu hình.
- Trên beta: mở một bài tập và một cuộc thi. Xem dải tóm tắt, sửa tiêu đề để thấy chấm cam, rê chuột lên các mốc của dòng thời gian.
- Chuyển SP-781 sang Testing sau khi thử trên beta, và sang Done khi có trong bản production.