KHOÁ HỌC - UI mới

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:

1. 1. Sidebar trái (navigation hệ thống)

   2. Tab điều hướng Menu (Khóa học / Quizzies / Lộ trình học / Đánh giá)

   3. Toolbar tìm kiếm + filter + tạo mới

   4. Table danh sách khóa học

   5. Phân trang

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

• Search box
  • Hiển thị placeholder: Tìm mã hoặc tên khoá học
  • Cho phép tìm kiếm theo: tên hoặc mã của khoá học
    
  • User nhập ký tự vào ô search, Kết quả phải hiển thị trong 2s
  • Clear text → reload full list
• Filter
  
  • Thời hạn (Range date picker): Lọc theo 
  • Phát hành (Range date picker): Lọc theo ngày phát hành khoá học trong khoảng ngày đang được filter
  • Trạng thái (Multi-choice DDL): Lọc theo trạng thái khoá học, cho phép chọn nhiều giá trị để filter
  • Nhóm người dùng (Multi-choice DDL): Lọc khóa học có gán group được filter, cho phép chọn nhiều giá trị để 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"
  • 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 Left Panel Bài học

2.1.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: Click -> Hiển thị modal cảnh báo "Xoá nội dung"

2.1.2 Thêm nội dung

• 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: 

• Đóng modal

• Tạo content mới với:

  • Tên tiêu đề là: Đoạn văn bản, 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 đề"

• Tiêu đề* (input text): Bắt buộc nhập, tối đa 255 ký tự
• Nội dung (Editor): Không bắt buộc nhập
• Thuyết minh: Cho phép upload hoặc kéo thả 1 file MP3, max =... MB (theo hệ thống hiện tại)
  • Khi chưa upload: Hiển thị dropzone
  • Khi đã upload: Hiển thị:

• • • Tên file

    • Thời gian đoạn mp3
    • Icon play

    • Icon audio

    • Nút xóa, thay đổ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

a.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"
• 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
    

a.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"
• 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"