Làm mới trình chỉnh sửa khoá học, chương và bài học
Các trang giảng viên dùng để sửa khoá học, chương và từng loại bài học giờ theo cùng kiểu với trang quản trị tổ chức. Mỗi trang có một nút Lưu ở thanh trên, các mục phẳng, và nút xoá nằm riêng ở cuối trang. Các liên kết của khoá học thành một hàng tab ở đầu trang, nên thanh bên chỉ còn chương và bài học. Tính năng giữ nguyên.
Tình trạng ngày 24/10/2026
- Giai đoạn
- PR chưa mở, chờ review. Code đã push lên nhánh, chưa merge, chưa có trên beta hay production.
- Nhánh
- SP-851/course-editor-rework, ba commit, mới nhất là 25079ca3 (tab khoá học). Trước nó là ba54593c (bỏ nút xoá chương ở thanh bên) và ac167faf (làm lại các trang sửa).
- Base
- origin/main tại 1d13d171. Phần "Trước" trong ảnh và video chụp từ đúng commit này.
- PR
- Chưa mở. Link PR sẽ được thêm khi mở.
- Ticket
- SP-851
- Phạm vi
- Chỉ đổi frontend, ở các trang giảng viên và quản trị dùng để sửa khoá học. Học viên không thấy gì khác. Backend, API và cơ sở dữ liệu không đổi.
- Ảnh và video
- Toàn bộ ảnh chụp và video lấy từ môi trường chạy trên máy với dữ liệu mẫu. Tên người và số liệu không có thật. Phần "Sau" chụp lại từ commit 25079ca3 tối 24/10/2026. Riêng ảnh "Trước" ở mục Tab khoá học lấy từ lần chụp đầu, commit ac167faf.
Vì sao làm lại
Trang sửa khoá học và bài học cũ mỗi chỗ lưu một kiểu. Có trang để nút Lưu trong một khung giữa trang, có trang có hai nút lưu cho hai phần khác nhau. Ở trang bài học, nút Xóa màu đỏ nằm ngay cạnh nút Cập nhật, bấm nhầm là mất bài.
Trang quản trị tổ chức (SP-792) đã chuyển sang kiểu phẳng với một nút Lưu ở trên cùng. Đợt này đưa toàn bộ phần soạn khoá học về cùng kiểu đó. Giảng viên quen một trang là dùng được mọi trang khác.
Thay đổi chính
Một nút Lưu ở trên
Thanh tiêu đề cố định có nút Lưu, chấm "Có thay đổi chưa lưu" và nút Bỏ thay đổi.
Mục phẳng
Không còn khung thẻ. Mỗi nhóm trường là một mục có biểu tượng và tiêu đề.
Tab khoá học
Thông tin khoá học, Cài đặt, Học viên và các trang khác thành một hàng tab ở đầu trang. Thanh bên chỉ còn cây nội dung.
Vùng nguy hiểm
Nút xoá chương và bài học xuống cuối trang, xa nút Lưu. Cây nội dung không còn biểu tượng thùng rác.
Danh sách tham khảo
Tài liệu tham khảo là một danh sách, liên kết mới được đánh dấu Chưa lưu.
Danh sách và trình soạn
Trang câu hỏi chia làm danh sách bên trái, trình soạn bên phải.
Video giới thiệu
Dài 4 phút 33 giây. Phần đầu là giao diện cũ, phần sau là giao diện mới, quay lại từ commit 25079ca3. Giọng đọc tiếng Anh, phụ đề tiếng Việt bật sẵn. Có thể đổi sang phụ đề tiếng Anh trong nút phụ đề của trình phát. Chấm xanh là con trỏ chuột.
Trong video
- 0:00 Thẻ mở đầu.
- 0:13 Giao diện cũ, có nhãn "TRƯỚC" ở góc. Thông tin khoá học với nút Lưu nằm trong khung Tổng quan.
- 0:24 Bài đọc. Nút Xóa đỏ cạnh Cập nhật, phần Tài liệu tham khảo có nút Cập nhật riêng.
- 0:38 Cài đặt khoá học có hai nút Lưu, một cho Lịch làm bài tập, một cho Thu thập phản hồi.
- 0:49 Trang câu hỏi quiz chèn thêm thanh bên thứ hai cạnh cây nội dung.
- 0:55 Thẻ "SAU". Từ đây là giao diện mới.
- 1:01 Hàng tab khoá học ở đầu trang bài đọc, tab Nội dung đang chọn.
- 1:07 Bấm tab Cài đặt, rồi Danh sách Học viên. Mỗi tab mở trang riêng của nó. Khoá mẫu chưa có học viên nên danh sách trống.
- 1:14 Bấm Nội dung để quay lại chương và bài học, rồi mở lại bài đọc.
- 1:18 Thanh bên chỉ còn cây nội dung, cao hết màn hình. Cả 9 bài, nút Thêm bài học và Chương 2 đều nằm gọn, không phải cuộn.
- 1:32 Tab Thông tin khoá học: breadcrumb, dòng trạng thái, một nút Lưu ở thanh trên. Cuộn qua các mục phẳng.
- 1:53 Sửa phần Tóm tắt. Thanh trên hiện chấm "Có thay đổi chưa lưu" và nút Bỏ thay đổi. Bấm Bỏ thay đổi, trang về như cũ.
- 2:05 Sửa lại rồi bấm Lưu. Thông báo "Khoá học đã được cập nhật thành công" hiện ở góc dưới bên trái khoảng 3 giây.
- 2:15 Cài đặt khoá học. Trạng thái, Đăng ký và Bán công khai vẫn lưu ngay khi đổi (chỉ di chuột qua, không đổi). Thêm một điều kiện Thu thập phản hồi, thanh trên báo chưa lưu, rồi Bỏ thay đổi.
- 2:35 Trang chương: Thông tin cơ bản, Tài liệu tham khảo, Vùng nguy hiểm với nút "Xóa chương". Giờ chỉ xoá chương được ở đây.
- 2:45 Bài đọc. Thêm tài liệu "Bài tập Python trên W3Schools", dòng mới có chấm Chưa lưu, rồi Bỏ thay đổi.
- 3:06 Vùng nguy hiểm, nút "Xóa bài học", hộp thoại xác nhận, bấm Hủy.
- 3:17 Quiz và trang câu hỏi: danh sách 12 câu bên trái, trình soạn bên phải. Sửa câu 5, thanh trên báo chưa lưu. Di chuột qua Thêm câu hỏi và Nhập từ tệp, rồi Bỏ thay đổi.
- 3:46 Bài luận: mục Chấm điểm với 4 tiêu chí, 100 / 100 điểm.
- 3:56 Bài học cuộc thi: cuộc thi liên kết và nút Mở trang cuộc thi.
- 4:03 Bộ bài tập: danh sách 3 bài có nút đổi thứ tự, hộp chọn Thêm bài tập, đóng lại mà không thêm gì.
- 4:18 Cây nội dung: dòng chương chỉ còn mũi tên mở và đóng, không còn thùng rác. Kết thúc ở tab Thông tin khoá học.
Thay đổi gì và vì sao
Tab khoá học thay cho cụm liên kết ở thanh bên
Ở bản đang chạy và ở bản đầu của đợt này (ac167faf), các liên kết Thông tin khoá học, Cài đặt, Danh sách Học viên, Phản hồi, Cảm nhận và Chấm điểm nằm thành một cụm ở cuối thanh bên. Cụm này chiếm khoảng một phần ba chiều cao thanh bên. Danh sách bài học chỉ còn chỗ cho khoảng năm bài, phần còn lại phải cuộn, nên sửa chương và bài học rất bất tiện. Người phụ trách dự án góp ý điểm này sau khi xem bản đầu.
Giờ các liên kết đó là một hàng tab ở đầu mọi trang của khoá học. Tab Nội dung sáng khi đang ở chương hoặc bài học. Mỗi tab vẫn mở đúng trang và đường dẫn cũ, với cùng điều kiện hiện như liên kết cũ. Tab Phân phối đối tác chỉ hiện khi tổ chức bật B2B. Tab Video bài giảng hiện mờ kèm nhãn "Chuyên nghiệp trở lên" nếu gói chưa có tính năng này, và khi đó không bấm được. Hàng tab không dính khi cuộn, thanh có nút Lưu vẫn dính như cũ. Trang tạo khoá học chưa có tab, vì khoá học chưa tồn tại.
Thanh bên chỉ còn cây chương và bài học, cao hết màn hình. Với khoá mẫu 9 bài, cả cây, nút Thêm bài học và Chương 2 nằm gọn trong một màn hình.
Xoá chương chỉ ở trang chương
Mỗi dòng chương trong cây nội dung từng có một biểu tượng thùng rác, nằm ngay cạnh mũi tên mở và đóng chương. Xoá một chương là gỡ cả chương và mọi bài học trong đó khỏi khoá học, nên bấm trượt mũi tên là có thể mở hộp thoại xoá. Bản mới bỏ biểu tượng đó. Muốn xoá chương thì mở trang chương và bấm "Xóa chương" trong Vùng nguy hiểm, giống cách xoá bài học. Hộp thoại xác nhận vẫn như cũ. Mũi tên mở và đóng chương giờ có nhãn cho trình đọc màn hình, ví dụ "Thu gọn Chương 1: Nền tảng Python".
Một nút Lưu ở thanh trên, có trạng thái chưa lưu
Mọi trang sửa (khoá học, chương, từng loại bài học, trang câu hỏi quiz) có một thanh tiêu đề cố định khi cuộn. Khi chưa sửa gì, nút Lưu mờ đi. Khi có thay đổi, thanh hiện chấm cam "Có thay đổi chưa lưu" và nút Bỏ thay đổi. Bỏ thay đổi đưa trang về giá trị đã lưu.
Trước đây trang Thông tin khoá học để nút Lưu trong khung Tổng quan, giữa trang. Các trang bài học có nút Cập nhật ở trên và thêm một nút Cập nhật khác cho tài liệu tham khảo. Giờ mỗi trang chỉ còn một chỗ lưu.
Các mục phẳng thay cho khung thẻ
Khung thẻ, đường kẻ và tiêu đề tím bên trong biểu mẫu được thay bằng các mục phẳng. Mỗi mục có biểu tượng, tiêu đề và đôi khi một dòng mô tả. Bài học nào cũng theo cùng thứ tự: Thông tin cơ bản, Nội dung, các mục riêng của loại bài (Lịch làm bài, Chấm điểm...), Cài đặt, Tài liệu tham khảo, Vùng nguy hiểm. Các ô đánh dấu (checkbox) trở thành công tắc có mô tả. Đầu trang có dòng thông tin ngắn: trạng thái, loại bài, số câu hỏi hoặc số bài tập.
Trước và sau của từng trang nằm ở phần Trước và sau từng màn hình.
Vùng nguy hiểm cho thao tác xoá
Nút Xóa đỏ từng nằm ngay cạnh nút Cập nhật ở đầu trang chương và bài học. Giờ nút xoá nằm trong mục "Vùng nguy hiểm" ở cuối trang, xa nút Lưu. Hộp thoại xác nhận giữ nguyên như cũ. Với chương, đây cũng là chỗ duy nhất để xoá (xem mục trên).
Tài liệu tham khảo là một danh sách
Tài liệu tham khảo của chương và bài học giờ là một danh sách, có số lượng ở đầu, nút xoá ở mỗi dòng và ô thêm liên kết hoặc tệp ở cuối. Liên kết mới có chấm cam "Chưa lưu" cho đến khi bấm Lưu ở thanh trên. Nút "Lưu tài nguyên" và "Cập nhật" riêng của phần này không còn. Khung vàng báo chưa lưu cũng bỏ, vì thanh trên đã báo.
Câu hỏi quiz: danh sách bên trái, trình soạn bên phải
Trang câu hỏi cũ chèn một thanh bên thứ hai cạnh cây nội dung khoá học, có nút Quay lại riêng. Giờ trang có breadcrumb về bài quiz, một nút Lưu ở thanh trên, khung danh sách câu hỏi (Thêm câu hỏi, Nhập từ tệp, loại và nút xoá ở mỗi dòng, tổng số câu và tổng điểm) và trình soạn chia mục Loại câu hỏi, Đáp án, Giải thích.
Nội dung câu hỏi chờ nút Lưu ở thanh trên như mọi trang khác. Thêm, xoá và nhập câu hỏi vẫn chạy ngay khi bấm, như trước.
Quy tắc lưu ở Cài đặt khoá học
Trang này có hai kiểu lưu, và đợt này giữ nguyên kiểu nào ra kiểu đó. Trạng thái, đăng ký và bán công khai vẫn lưu ngay khi đổi, như trước. Lịch làm bài tập và Thu thập phản hồi thành bản nháp, lưu chung bằng một nút Lưu ở thanh trên.
| Phần | Cách lưu |
|---|---|
| Trạng thái khoá học | Lưu ngay khi đổi, như trước. |
| Trạng thái đăng ký | Lưu ngay khi đổi, như trước. |
| Bán công khai (B2C) | Lưu ngay khi bật hoặc tắt, như trước. |
| Lịch làm bài tập | Bản nháp. Lưu bằng nút Lưu ở thanh trên. Trước đây có nút Lưu và Xoá riêng. |
| Thu thập phản hồi | Bản nháp. Lưu cùng nút Lưu ở thanh trên. Trước đây có nút Lưu riêng. |
Nút Lưu ở thanh trên lưu cả hai bản nháp. Mỗi bản nháp chỉ được xoá khỏi trang khi phần đó lưu thành công, nên nếu một phần lỗi thì phần đó vẫn còn để lưu lại. Nếu vừa đổi trạng thái và lần lưu trạng thái còn đang chạy, nút Lưu đợi nó xong rồi mới lưu tiếp.
Trước và sau từng màn hình
Ảnh bên trái là bản đang chạy (origin/main), ảnh bên phải là bản mới (25079ca3), nên ảnh bên phải đều có hàng tab khoá học và thanh bên mới. Cả hai dùng cùng dữ liệu mẫu: khoá "Lập trình Python cơ bản" ở trạng thái Nháp, 2 chương, 9 bài học. Bấm vào ảnh để xem cỡ lớn.
Thông tin khoá học
Cài đặt khoá học
Chương
Bài đọc
Quiz
Câu hỏi quiz
Bài luận
Bài học cuộc thi
Bộ bài tập
Cây nội dung khoá học
Ảnh cũ cuộn danh sách bài học xuống một đoạn, vì thanh bên cũ phải chia chỗ cho cụm liên kết khoá học. Ảnh mới chụp cả thanh bên, không cuộn: khi cụm liên kết chuyển lên hàng tab, 9 bài của khoá mẫu vừa một màn hình. Với chương dài hơn, danh sách vẫn cuộn và nút Thêm bài học vẫn dính ở cuối. Kéo thả và nút lên xuống để đổi thứ tự vẫn như cũ.
Phạm vi
- Ai thấy thay đổi. Giảng viên và quản trị viên khi tạo hoặc sửa khoá học, chương và bài học. Học viên không thấy gì khác, trang học không đổi.
- Tính năng. Mọi trường, nút, thao tác và đường dẫn cũ vẫn còn. Không bỏ tính năng nào.
- Các trang có đổi. Tạo khoá học, Thông tin khoá học, Cài đặt khoá học, chương, và mọi loại bài học: bài đọc, video, slide, quiz và trang câu hỏi, bài luận, bài tập, H5P, lớp học trực tuyến, cuộc thi, bộ bài tập. Ảnh trên trang này không chụp video, slide, bài tập, H5P và lớp học trực tuyến, nhưng chúng dùng cùng bố cục.
- Dữ liệu. Không đổi backend, API hay cơ sở dữ liệu. Không cần chuyển đổi dữ liệu khi triển khai.
Lỗi đã sửa trong đợt này
Có lỗi đã có sẵn trên bản đang chạy, có lỗi tìm ra khi review bản làm lại. Tất cả đều sửa trên nhánh này.
- Chuyển nhanh giữa các bài học bị kẹt ở "Đang tải". Khi bấm từ bài này sang bài khác cùng loại, hoặc sang tạo bài mới, biểu mẫu có thể đứng mãi ở màn hình tải. Giờ mỗi bài học mở một biểu mẫu mới, nên dữ liệu về muộn của bài trước không còn đổ nhầm vào bài sau.
- Trang câu hỏi quiz báo chưa lưu ngay khi mở. Nhãn "Chưa lưu" hiện dù chưa sửa gì, và Bỏ thay đổi không xoá được nó. Ảnh "Trước" ở phần Câu hỏi quiz cho thấy lỗi này trên bản cũ.
- Cài đặt khoá học làm mất ngày làm bài hoặc bản nháp. Nếu bấm Lưu khi trang đang lưu một phần khác, trang có thể xoá bản nháp Lịch làm bài tập hoặc Thu thập phản hồi mà không lưu gì. Giờ mỗi bản nháp chỉ bị xoá khi phần đó lưu thành công.
- Bài luận và video bị xoá trắng sau khi tạo. Vừa tạo xong bài luận, biểu mẫu tự đưa về giá trị mặc định. Vừa tạo xong bài video, video đã chọn biến khỏi ô chọn. Giờ cả hai giữ đúng những gì vừa lưu.
- H5P vẫn báo chưa lưu sau khi đã lưu. Sau khi bấm Lưu, trang H5P vẫn hiện "Có thay đổi chưa lưu". Giờ trang về trạng thái sạch sau khi lưu.
Thay đổi về cách hoạt động cần biết
- Không gửi lại được cùng một Lịch làm bài tập. Nút Lưu chỉ bật khi có thay đổi. Bản cũ cho bấm Lưu lại Lịch làm bài tập với đúng ngày đã lưu, bản mới thì không, vì không có gì để lưu.
- Nút Quay lại được thay bằng breadcrumb. Nút "Quay lại" ở góc phải các trang cũ không còn. Dùng breadcrumb ở đầu trang để quay về, ví dụ "Khoá học / Lập trình Python cơ bản / Chương 1: Nền tảng Python / Bài kiểm tra kiến thức cơ bản" ở trang câu hỏi quiz.
- Chọn câu hỏi khác vẫn bỏ phần sửa chưa lưu. Ở trang câu hỏi quiz, nếu đang sửa một câu mà bấm sang câu khác, phần sửa chưa lưu bị bỏ, không có hộp thoại hỏi lại. Bản cũ cũng vậy, đợt này chưa đổi. Hãy bấm Lưu trước khi chuyển câu.
Giới hạn đã biết, chưa sửa
- Lịch chọn ngày hiện tên tháng tiếng Việt khi giao diện là tiếng Anh. Lỗi nằm ở tên tháng trong ô chọn ngày. Chưa sửa trong đợt này.
- Khoá miễn phí vẫn hiện số gợi ý 1000000 trong ô giá. Đây là chữ mờ gợi ý trong ô trống, không phải giá thật. Khoá trong ảnh có giá 0. Chưa sửa trong đợt này.
- Video mẫu không có mã nanoid hiện ô chọn video trống. Ở trang sửa bài video, nếu video trong dữ liệu mẫu thiếu mã nanoid thì ô chọn không hiện video đang dùng, dù dòng thời lượng vẫn có. Đây là vấn đề dữ liệu mẫu trên máy, không phải lỗi của bố cục mới. Nên kiểm tra lại với video thật trên beta.
- Chưa kiểm tra trên beta. Mọi ảnh và video đến từ môi trường chạy trên máy với dữ liệu mẫu.
Cách kiểm tra trên beta sau khi merge
Khoảng 15 phút, với tài khoản giảng viên có một khoá học nháp để thử. Đừng thử trên khoá đang có học viên.
Thông tin khoá học
Sửa Tóm tắt. Thanh trên phải hiện "Có thay đổi chưa lưu". Bấm Bỏ thay đổi, giá trị cũ quay lại và nút Lưu mờ đi. Sửa lần nữa, bấm Lưu, tải lại trang và xem giá trị mới còn đó.
Cài đặt khoá học
Đổi trạng thái đăng ký và thấy nó lưu ngay. Đổi Lịch làm bài tập và thêm một điều kiện Thu thập phản hồi, bấm một nút Lưu ở thanh trên, tải lại trang và xem cả hai đã lưu.
Chương và bài đọc
Thêm một tài liệu tham khảo, dòng mới phải có chấm "Chưa lưu". Bấm Lưu, chấm mất. Bấm "Xóa bài học" trong Vùng nguy hiểm, thấy hộp thoại xác nhận, rồi bấm Hủy.
Quiz
Mở trang câu hỏi. Ngay khi mở, nút Lưu phải mờ. Sửa một câu, bấm Lưu, tải lại trang. Thêm rồi xoá một câu hỏi để thấy hai thao tác này chạy ngay.
Các loại bài khác
Tạo một bài luận và một bài video mới. Sau khi tạo, biểu mẫu phải giữ đúng nội dung vừa nhập và video vừa chọn. Mở một bài H5P, bấm Lưu, trang không còn báo chưa lưu.
Chuyển nhanh giữa các bài
Bấm liên tục qua vài bài học trong cây nội dung rồi bấm Thêm bài học. Không trang nào được kẹt ở màn hình tải.
Tab khoá học
Mở một bài học, bấm lần lượt từng tab rồi bấm Nội dung để quay lại. Mỗi tab phải mở đúng trang, tab đang mở được gạch chân. Dòng chương trong cây nội dung không còn thùng rác. Xoá thử một chương trống từ Vùng nguy hiểm của trang chương.
Phía học viên
Mở khoá học bằng tài khoản học viên. Trang học phải giống hệt trước.
Các bước để đưa lên
- Mở PR từ nhánh SP-851/course-editor-rework, review và duyệt.
- Merge vào main. Bản này tự lên beta. Không cần chuyển đổi dữ liệu hay đổi cấu hình.
- Chạy lượt kiểm tra trên beta ở phần trên.
- Chuyển SP-851 sang Testing sau khi kiểm tra beta, và sang Done khi bản này có trong một bản phát hành production.