KHOÁ HỌC - UI mới

Link figma: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20078-78078&m=dev

I. Màn hình Master và tạo mới

1. TỔNG QUAN

1.1. Mục tiêu

Xây dựng màn hình Master Khóa học gồm:

Màn hình danh sách khóa học (List View)
Drawer tạo mới khóa học

Cho phép:

Xem danh sách khóa học
Tìm kiếm, lọc
Tạo mới khóa học
Upload ảnh đại diện khóa học

2. MÀN HÌNH MASTER – DANH SÁCH KHÓA HỌC

2.1. Layout tổng thể

Màn hình gồm 4 vùng chính:

Khi user click vào Module "Đào tạo", mặc định focus luôn vào Menu "Khoá học"

Click vào tab Menu nào -> điều hướng sang nội dung của đúng menu đó.

2.2 Search & Filter

2.3 Nút [+ Tạo]

Nằm bên phải
Màu primary
Click → mở Drawer "Khóa học mới"

2.4 Bảng danh sách khoá học

Cột	UI	Mô tả chi tiết
Checkbox		Chọn vào ô checkbox ở header cột -> auto checked all ô checkbox trong bảng. Cho phép chọn 1 hoặc nhiều khoá học cần xoá Sau khi chọn -> hiển thị action bar có nút [Xoá] và [Đóng] Click xoá -> hiển thị modal Cảnh báo xoá
Khoá học	Thumbnail + Tên + Mã + số bài học	Dòng 1 (textprimary): Hiện Tên khóa học, nếu dài quá thì truncate và ..., hover hiển thị tooltip full tên khoá học, Click vào tên → mở màn hình sửa khoá học Dòng 2 (subtext): <Mã khoá học> - <count số lượng bài học trong khoá đó> Bài học Thumbnail: Ảnh vuông nhỏ bên trái Hiển thị ảnh khoá học, nếu khoá học không được upload ảnh, hiển thị ảnh màu tím (như hình)
Trạng thái	Tag	Hiển thị tag trạng thái khoá học
Người tạo	Avatar + Tên	Hiển thị avatar và tên hiển thị của người tạo khoá học, chỉ hiển thị 1 dòng nếu text dài quá: truncate 1 phần tên và ...; hover hiển thị full <tên hiển thị của người tạo> - <email>
Sửa gần nhất	Date	Hiển thị ngày update gần nhất của khoá học
Action	icon ...	Click -> hiển thị overflow action Sửa khóa học: click mở màn hình Sửa khoá học Xem trước: Mở màn hình Preview khoá học Nhân bản khoá học: Click, tạo 1 bản ghi khoá học mới (thực hiện như chức năng Nhân bản khoá học đang có) Xoá khoá học: Click mở modal "Xoá khoá học"

2.5. Sorting

Default sort theo Sửa gần nhất DESC

2.6. Hiển thị Action theo phân quyền

Nút [+Tạo], Sửa, Xoá: Chỉ hiển thị khi user có quyền
Nút Xem trước, Nhân bản: luôn hiển thị khi user có quyền xem bản ghi đó.

2.7. UX behavior

Hover row: Background sáng nhẹ
Click ngoài dropdow: Dropdown đóng
Khi filter thay đổi: Reload list

3. DRAWER Tạo mới

3.1 Cách vào Drawer Tạo mới

Từ màn hình Danh sách khoá học, click [+Tạo] hoặc nút [+ Tạo khoá học] -> Mở Modal "Khoá học mới" (Trượt từ phải sang)

3.2 Mô tả chi tiết

Header:
- Tên Drawer: Khoá học mới
- Nút [x], [Đóng]: Click -> quay lại màn hình Danh sách khoá học
- Nút [Tạo mới]: Click -> validate hợp lệ các trường thông tin (theo Business rule của hệ thống hiện tại), hiển thị màn hình chi tiết Khoá học, focus vào tab "Nội dung"
Upload ảnh khoá học
- Mặc định hiển thị trạng thái empty như hình
- Cho phép tải lên hoặc kéo thả 1 ảnh (định dạng ảnh theo hệ thống hiện tại)
- Khi hover lên ảnh đã upload cho phép preview ảnh + Xóa ảnh đi để up lại ảnh mới
Thông tin chung
- Tên khoá học * (input text):
  - Mặc định hiển thị là "Khoá học chưa đặt tên"
  - Cho phép sửa, bắt buộc nhập tối đa 255 ký tự
  - Nếu để trống: nhấc chuột ra khỏi ô input, hiển thị lại giá trị gần nhất.
- Chủ đề học tập (DDL): Mặc định là "Khác", cho phép chọn lại 1 giá trị từ list chủ đề học tập
- Mô tả khoá học (Text area): Nhập mô tả khoá học (theo Business rule của hệ thống hiện tại)

II. Màn hình chi tiết

Cách vào màn hình chi tiết: Người dùng click [Tạo mới] thành công từ Drawer "Khoá học mới" hoặc người dùng chọn [Sửa khoá học] từ action hub của bản ghi khoá học.

1. Header

Nút Back (mũi tên trái): Click -> quay ra màn hình Master khoá học
Tên khóa học (title): Hiển thị tên khoá học
Thanh tab: Nội dung | Cấu hình | Phát hành. (Thanh điều hướng, người dùng có thể chọn 1 segment bất kì để điều chỉnh thông tin.)
Trạng thái lưu: chip Lưu thành công
- Hiển thị chịp Lưu thành công/Đang lưu giống như menu Công việc.
Nhóm nút hành động bên phải:
- Icon … (more actions): Click hiển thị overflow
- Nút [Chia sẻ]: bật ra màn hình popup để chia sẻ quyền chỉnh sủa khóa học này với 1 user khác.
  
  Cụ thể màn popup:
  
  https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20469-56080&t=WgEkdvODT2Mww088-1
- Nút Primary (thay đổi theo tab): Nút Primary này sẽ thay đổi khi ở các tab khác nhau.

2. Segment Nội dung

2.1 Thêm bài học

Mặc định hiển thị 1 bài học, tên bài học là: Bài học chưa đặt tên và 1 nội dung mặc định là đoạn văn bản và có 1 nội dung mặc định là Kết bài học (Kết thúc bài học không thể xóa) ngay tạo mới thành công khoá học.
Icon primary [+]

Click -> hiển thị Dropdown tuỳ chọn thêm "Bài học thường" hoặc "Bài tập"
Khi thêm mới bài học hay bài tập thì luôn thêm xuống cuối cùng, và bài học sẽ có tên mặc định "Bài học chưa đặt tên"

Bài học thường luôn có 1 nội dung mặc định là đoạn văn bản và có 1 nội dung mặc định là Kết bài học (Kết thúc bài học không thể xóa).
Khi thêm các nội dung học vào bài học thường thì sẽ thêm tuần tự và ngay trên nội dung kết bài.

Số thứ tự tăng dần và tự đánh cho các nội dung học.
Hover vào icon [...] ở tên bài học thường và click, hiển thị dropdown các tuỳ chọn cho bài học gồm:
- Đổi tên bài học: Click -> chuyển ô nhập tên bài học về dạng editable, cho phép user sửa lại tên bài học. Nhấc chuột khỏi ô input -> chuyển về dạng view.
- Nhân bản bài học: Click -> Clone bài học và nội dung hiện tại thành 1 bài học mới xuống cuối cùng.
- Cấu hình bài học: Click -> Mở modal "Cấu hình bài học" https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20401-16103&m=dev
- Xoá bài học: Click -> Hiển thị modal cảnh báo "Xoá bài học"
Hover vào icon [...] ở tên nội dung và click, hiển thị dropdown các tuỳ chọn cho nội dung gồm:
- Nhân bản nội dung: Click -> Clone nội dung hiện tại thành 1 nội dung mới ở cuối bài học hiện tại, phía trên "kết thúc học"
- Xoá nội dung bài học: Click -> Hiển thị modal cảnh báo "Xoá nội dung"

2.2 Thêm nội dung bài học thường

Click [Thêm nội dung] -> mở modal "Thư viện nội dung"
Danh sách danh mục Thư viện nội dung gồm:
- Văn bản (default active)
- Video
- Hình ảnh
- Trắc nghiệm
Hành vi chọn: Khi click vào một loại:

- Không tạo content ngay
- Chỉ highlight
- Cột phải hiển thị preview tương ứng

a. Chọn loại nội dung "Văn bản"

Khi click vào loại "Văn bản", hệ thống thực hiện:

- - Thời gian đoạn mp3 + thanh progress
  - Icon play: Click play -> phát nội dung âm thanh của file, chuyển icon sang pause.
  - Nút xóa: Xoá file MP3 đã upload, Hiển thị dropzone
  - Thay đổi: Mở hộp thoại chọn file mp3 từ thiết bị hiện tại.

b. Chọn loại nội dung "Video"

Khi click vào loại "Video", hệ thống hiển thị 2 lựa chọn: Một đoạn phim (Clip) hoặc Đoạn phim Youtube

Cho phép user chọn 1 loại video

b.1 Chọn loại "Một đoạn phim (Clip)"

Tạo content mới với:
- Tên tiêu đề là: Một đoạn phim, bắt buộc có tên tiêu đề
- Vị trí hiển thị: trước "Kết bài học"
Insert content vào bài học đang chọn
Focus vào input "Tiêu đề"
Video clip:
- Cho phép upload hoặc kéo thả 1 file MP4, max = 300Mb
Tự động phát video:
- Mặc định checked, cho phép unchecked.
- Khi tích chọn tùy chọn này thì video sẽ tự động play khi người học vào nội dung này

b.2 Chọn loại "Đoạn phim Youtube"

Tạo content mới với:
- Tên tiêu đề là: Đoạn Youtube, bắt buộc có tên tiêu đề
- Vị trí hiển thị: trước "Kết bài học"
Insert content vào bài học đang chọn
Focus vào input "Tiêu đề"
Link Youtube *:
- Bắt buộc nhập link youtube
- Validate đúng định dạng URL
Tự động phát video:
- Mặc định checked, cho phép unchecked.
- Khi tích chọn tùy chọn này thì video sẽ tự động play khi người học vào nội dung này

c. Chọn loại nội dung "Hình ảnh"

Khi click vào Slide ảnh, hệ thống thực hiện:

d. Chọn loại nội dung "Trắc nghiệm"

Khi click vào loại "Trắc nghiệm", hệ thống hiển thị 3 lựa chọn: Câu hỏi trắc nghiệm; Chọn đúng sai; Import câu hỏi

d.1 Chọn "Câu hỏi trắc nghiệm"

Khi click vào "Câu hỏi trắc nghiệm", hệ thống thực hiện:

d.2 Chọn "Câu hỏi đúng sai"

Khi click vào "Câu hỏi trắc nghiệm", hệ thống thực hiện:

d3. Chọn "Import câu hỏi"

Khi bấm vào nội dung này sẽ hiển thị ngay Modal import trắc nghiệm vào khóa học (Sử dụng lại template của Quizzies)

Khi Tải lên file và nhấn Tiến hành import, hệ thống validate file nhập lên:

Nếu invalid: Hiển thị modal Báo lỗi nhập liệu
Nếu valid: Hiển thị màn hình tương tự như khi chọn "Câu hỏi trắc nghiệm" với nội dung câu hỏi và đáp án, giới hạn thời gian trả lời theo file được import.

e. Kết bài học học

Tiêu đề (Input text)*: Hiển thị tiêu đề mặc định là "Kết thúc bài học", Cho phép nhập tối đa 255 ký tự, bắt buộc nhập

Nội dung (Editor): Hiển thị nội dung mặc định là "Cảm ơn bạn đã cố gắng học tập!", cho phép sửa.

2.3 Thêm Bài tập tự luận

User click vào Icon primary [+]

Hệ thống hiển thị Dropdown tuỳ chọn thêm "Bài học thường" hoặc "Bài tập" -> User nhấn chọn "Bài tập"

Hệ thống thực hiện thêm 1 bài tập tự luận vào cuối danh sách bài học hiện tại có tiêu đề mặc định là "Bài tập chưa đặt tên", focus vào bài tập tự luận đó và hiển thị Layout bên phải tương ứng gồm:

Tiêu đề (Input text)*:
- Mặc định là "Bài tập chưa đặt tên"
- Cho phép sửa, bắt buộc nhập tối đa 255 ký tự
Nội dung (Text Editor): Không bắt buộc
Danh sách người đánh giá
- Nhấn [Thêm người đánh giá]: mở modal "Chọn người đánh giá"
- Cho phép checked chọn nhiều người đánh giá cho bài tập tự luận

2.4 Cấu hình bài học

Từ dropdown các tuỳ chọn của bài học, user nhấn chọn "Cấu hình bài học" -> hệ thống hiển thị modal "Cấu hình bài học <Tên bài học>", Focus vào tab "Điều kiện học"

Tab "Điều kiện học":

Cột bên trái: Hiển thị danh sách các bài học của khoá học hiện tại và chưa có ở cột bên phải. Cho phép checked chọn nhiều bài học, khi checked và nhấn icon mũi tên [>] -> hiển thị bài học được checked sang cột bên phải
Cột bên phải: Hiển thị danh sách các bài học của khoá học hiện tại đã được chọn làm điều kiện học trước đó. Cho phép checked chọn nhiều bài học, khi checked và nhấn icon mũi tên [<] -> hiển thị bài học được checked sang cột bên phải
Interaction follow link sau: https://ant.design/components/transfer

Tab "Điều kiện hoàn thành"

Hiển thị checkbox "Yêu cầu đạt điểm số tối thiểu để hoàn thành", Mặc định unchecked
Khi checked -> hiển thị ô input number nhập phần trăm điểm cần đạt để hoàn thành, bắt buộc nhập số nguyên dương trong khoảng (0; 100]

2.5 Nút Tiếp tục: Cấu hình

Nhấn [Tiếp tục: Cấu hình], Validate hợp lệ các thông tin trong Segment "Nội dung", chuyển màn hình hiện tại sang segment "Cấu hình"

3. Segment Cấu hình

Cách vào: Người dùng mở form chi tiết khoá học sau đó click vào segment "Cấu hình" hoặc người dùng nhấn nút "Tiếp tục:Cấu hình" từ segment "Nội dung"

3.1 Mục tiêu màn hình

Cho phép user được phân quyền cấu hình thông tin của khoá học, bao gồm:

Thông tin chung
Loại khóa học
Quy định hoàn thành
Tài liệu tham khảo

3.2 Bố cục tổng thể

Layout chung

Layout dạng Form dọc
Chiều rộng form cố định: kích thước theo thiết kế
Padding container: theo thiết kế
Khoảng cách giữa các section: theo thiết kế
Các section hiển thị trong card có border + background trắng

Các section theo thứ tự:

Thông tin chung
Loại khóa học
Tài liệu tham khảo

a. Thông tin chung

Lần đầu vào segment "Cấu hình", hiển thị thông tin chung đã nhập khi tạo mới khoá học
Ở những lần sau, hiển thị thông tin Tên khoá học, chủ đề học tập, mô tả khoá học theo lần cập nhật gần nhất
Business rules của phần thông tin chung giống như khi tạo mới khoá học, xem tại mục 3.2 Mô tả chi tiết trong phần 3. Drawer Tạo mới

b. Loại khoá học

Hiển thị 3 loại:

Khóa học bắt buộc (Mandatory): Bắt buộc, sẽ cần hoàn thành ít nhất 1 lần có thể set các thời hạn hoàn thành.
Khóa học lặp lại (Recurring): Lặp lại, sẽ cần hoàn thành theo định kỳ, có thể set tần suất.
Khóa học tự chọn (Optional): Tự do, có thể hoàn thành hoặc không, không cần set thời hạn hay tần suất.

UI:

Radio group
Chỉ chọn 1 loại
Mặc định: Khóa học bắt buộc

b.1 Khoá học bắt buộc

Hiển thị text tiếng Việt: Khóa học bắt buộc (Người học cần hoàn thành khóa học 1 lần)
Khi user đổi ngôn ngữ sang tiếng Anh, hiển thị là: Mandatory (Users must complete this course once)
Hiển thị thêm phần cấu hình deadline gồm 4 option radio con:

Option 1:

Hoàn thành sau X ngày kể từ thời điểm được gán
- Input number (default: 30)
- Min: 1
- Max: ......

Option 2:

Hoàn thành sau X ngày kể từ ngày phát hành

- Input number (default: 30)
- Min: 1
- Max: ......

Option 3:

Hoàn thành trước ngày cụ thể

- Date picker
- Không cho chọn ngày quá khứ

Option 4:

Người học có thể hoàn thành bất kỳ lúc nào

- Không cần thêm input

b.2 Khoá học lặp lại

Hiển thị text tiếng Việt: Khóa học lặp lại (Người học cần hoàn thành khóa học định kỳ)
Khi user đổi ngôn ngữ sang tiếng Anh, hiển thị là: Recurring (Users must retake this course periodically)
Khi chọn sang loại "Khoá học lặp lại"