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

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

-

1. tabTab NỘINội DUNG

dung