374 lines
10 KiB
Markdown
374 lines
10 KiB
Markdown
ต้องการเพิ่มฟีเจอร์ใหม่ในระบบ Training System ชื่อ **บทเรียนออนไลน์ (Online Lessons)** โดยให้มีลักษณะคล้ายเมนู **ประกาศ** เดิม แต่เปลี่ยนวัตถุประสงค์เป็นการจัดการบทเรียนออนไลน์สำหรับ HRD และแสดงบทเรียนให้พนักงานเข้าไปเรียนได้
|
|
|
|
## 1. เมนูที่ต้องเพิ่ม
|
|
|
|
### สำหรับ HRD/Admin
|
|
|
|
เพิ่มเมนูใหม่ชื่อ:
|
|
|
|
**เพิ่มบทเรียนออนไลน์**
|
|
|
|
ใช้สำหรับให้ HRD เพิ่ม แก้ไข ลบ และเผยแพร่บทเรียนออนไลน์
|
|
|
|
Path แนะนำ:
|
|
|
|
```txt
|
|
/dashboard/online-lessons/manage
|
|
```
|
|
|
|
หรือ
|
|
|
|
```txt
|
|
/dashboard/online-lessons-admin
|
|
```
|
|
|
|
### สำหรับพนักงาน
|
|
|
|
เพิ่มเมนูใหม่ชื่อ:
|
|
|
|
**บทเรียนออนไลน์**
|
|
|
|
ใช้สำหรับให้พนักงานเปิดดูบทเรียน วิดีโอ และดาวน์โหลดไฟล์แนบ
|
|
|
|
Path แนะนำ:
|
|
|
|
```txt
|
|
/dashboard/online-lessons
|
|
```
|
|
|
|
---
|
|
|
|
## 2. สิทธิ์การเข้าถึง
|
|
|
|
### HRD/Admin
|
|
|
|
สามารถทำได้ดังนี้:
|
|
|
|
- เพิ่มบทเรียนออนไลน์
|
|
- แก้ไขบทเรียน
|
|
- ลบบทเรียน
|
|
- เปิด/ปิดการเผยแพร่
|
|
- แนบไฟล์เอกสาร
|
|
- เพิ่มลิงก์วิดีโอ หรืออัปโหลดวิดีโอ
|
|
- กำหนดสถานะบทเรียน
|
|
|
|
### Employee
|
|
|
|
สามารถทำได้ดังนี้:
|
|
|
|
- ดูรายการบทเรียนออนไลน์ที่เผยแพร่แล้วเท่านั้น
|
|
- เปิดดูวิดีโอ
|
|
- อ่านรายละเอียดบทเรียน
|
|
- ดาวน์โหลดไฟล์แนบ
|
|
- ไม่สามารถเพิ่ม แก้ไข หรือลบบทเรียนได้
|
|
|
|
---
|
|
|
|
## 3. ข้อมูลของบทเรียนออนไลน์
|
|
|
|
ให้สร้างข้อมูล Online Lesson โดยมี fields ประมาณนี้:
|
|
|
|
```ts
|
|
{
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
category?: string;
|
|
videoUrl?: string;
|
|
videoFileUrl?: string;
|
|
attachmentUrl?: string;
|
|
attachmentName?: string;
|
|
thumbnailUrl?: string;
|
|
status: "draft" | "published" | "archived";
|
|
isPublished: boolean;
|
|
publishedAt?: Date;
|
|
createdBy: string;
|
|
updatedBy?: string;
|
|
createdAt: Date;
|
|
updatedAt: Date;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 4. หน้าจอ HRD: เพิ่มบทเรียนออนไลน์
|
|
|
|
ให้ทำหน้า Layout คล้ายเมนู **ประกาศ**
|
|
|
|
### รายการบทเรียน
|
|
|
|
แสดงเป็นตาราง มี columns:
|
|
|
|
- ชื่อบทเรียน
|
|
- หมวดหมู่
|
|
- ประเภทวิดีโอ
|
|
- ไฟล์แนบ
|
|
- สถานะ
|
|
- วันที่เผยแพร่
|
|
- ผู้สร้าง
|
|
- จัดการ
|
|
|
|
### ปุ่มหลัก
|
|
|
|
- เพิ่มบทเรียนออนไลน์
|
|
- ค้นหา
|
|
- Filter สถานะ
|
|
- Filter หมวดหมู่
|
|
- View
|
|
- Pagination
|
|
|
|
---
|
|
|
|
## 5. ฟอร์มเพิ่ม / แก้ไขบทเรียน
|
|
|
|
ฟอร์มควรมี fields ดังนี้:
|
|
|
|
### ข้อมูลหลัก
|
|
|
|
- ชื่อบทเรียน
|
|
- รายละเอียดบทเรียน
|
|
- หมวดหมู่
|
|
- สถานะ: Draft / Published / Archived
|
|
|
|
### วิดีโอ
|
|
|
|
ให้รองรับ 2 แบบ:
|
|
|
|
1. ใส่ลิงก์วิดีโอ เช่น YouTube, Google Drive, OneDrive, SharePoint หรือ URL ภายนอก
|
|
2. อัปโหลดไฟล์วิดีโอ เช่น `.mp4`, `.webm`, `.mov`
|
|
|
|
### เอกสารแนบ
|
|
|
|
ให้แนบไฟล์ประกอบบทเรียนได้ เช่น:
|
|
|
|
- PDF
|
|
- Word
|
|
- Excel
|
|
- PowerPoint
|
|
- รูปภาพ
|
|
- ZIP
|
|
|
|
### รูปปกบทเรียน
|
|
|
|
- อัปโหลด Thumbnail หรือไม่มีก็ได้
|
|
- ถ้าไม่มีรูป ให้แสดง icon default เหมือนระบบประกาศ
|
|
|
|
---
|
|
|
|
## 6. หน้าจอพนักงาน: บทเรียนออนไลน์
|
|
|
|
ให้แสดงเฉพาะบทเรียนที่สถานะเป็น `published` หรือ `isPublished = true`
|
|
|
|
### รูปแบบการแสดงผล
|
|
|
|
แนะนำให้แสดงเป็น Card Grid คล้ายประกาศ
|
|
|
|
แต่ละ Card แสดง:
|
|
|
|
- รูปปก หรือ icon default
|
|
- ชื่อบทเรียน
|
|
- รายละเอียดสั้น ๆ
|
|
- หมวดหมู่
|
|
- วันที่เผยแพร่
|
|
- ปุ่ม “เปิดบทเรียน”
|
|
|
|
---
|
|
|
|
## 7. หน้ารายละเอียดบทเรียน
|
|
|
|
เมื่อพนักงานกดเปิดบทเรียน ให้แสดงหน้า Detail
|
|
|
|
ข้อมูลที่ต้องแสดง:
|
|
|
|
- ชื่อบทเรียน
|
|
- รายละเอียด
|
|
- วิดีโอ
|
|
- ไฟล์แนบ
|
|
- วันที่เผยแพร่
|
|
|
|
### การแสดงวิดีโอ
|
|
|
|
ถ้าเป็น `videoUrl` ให้ embed หรือเปิดผ่าน iframe/player ถ้ารองรับ
|
|
|
|
ถ้าเป็น `videoFileUrl` ให้ใช้ HTML video player:
|
|
|
|
```tsx
|
|
<video controls className="w-full rounded-xl">
|
|
<source src={lesson.videoFileUrl} />
|
|
</video>
|
|
```
|
|
|
|
### ไฟล์แนบ
|
|
|
|
ถ้ามีไฟล์แนบ ให้แสดงรายการไฟล์พร้อมปุ่ม:
|
|
|
|
- ดาวน์โหลด
|
|
- เปิดไฟล์
|
|
|
|
ถ้าไม่มีไฟล์แนบ ให้แสดงข้อความ:
|
|
|
|
```txt
|
|
ไม่มีไฟล์แนบ
|
|
```
|
|
|
|
---
|
|
|
|
## 8. UI/UX
|
|
|
|
ให้ดีไซน์เหมือนเมนูประกาศเดิม
|
|
|
|
- ใช้ Card
|
|
- ใช้ Badge แสดงสถานะ
|
|
- ใช้ icon default ถ้าไม่มีรูปปก
|
|
- ใช้ Empty State เมื่อไม่มีบทเรียน
|
|
- ใช้ Confirm Dialog ก่อนลบ
|
|
- ใช้ Toast แจ้งผลสำเร็จ/ผิดพลาด
|
|
- รองรับ Responsive
|
|
- ใช้ Theme สีเดียวกับระบบเดิม
|
|
|
|
---
|
|
|
|
## 9. Validation
|
|
|
|
ใช้ Zod validation
|
|
|
|
เงื่อนไข:
|
|
|
|
- ชื่อบทเรียน: required
|
|
- รายละเอียด: optional
|
|
- ต้องมีอย่างน้อย 1 อย่างระหว่าง `videoUrl` หรือ `videoFile`
|
|
- สถานะ: required
|
|
- ไฟล์แนบ: optional
|
|
|
|
ตัวอย่าง validation:
|
|
|
|
```ts
|
|
const onlineLessonSchema = z
|
|
.object({
|
|
title: z.string().min(1, "กรุณากรอกชื่อบทเรียน"),
|
|
description: z.string().optional(),
|
|
category: z.string().optional(),
|
|
videoUrl: z
|
|
.string()
|
|
.url("URL วิดีโอไม่ถูกต้อง")
|
|
.optional()
|
|
.or(z.literal("")),
|
|
videoFile: z.any().optional(),
|
|
attachmentFile: z.any().optional(),
|
|
status: z.enum(["draft", "published", "archived"]),
|
|
})
|
|
.refine((data) => data.videoUrl || data.videoFile, {
|
|
message: "กรุณาใส่ลิงก์วิดีโอหรืออัปโหลดไฟล์วิดีโอ",
|
|
path: ["videoUrl"],
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## 10. Database / Prisma Model
|
|
|
|
เพิ่ม model สำหรับ OnlineLesson
|
|
|
|
```prisma
|
|
model OnlineLesson {
|
|
id String @id @default(cuid())
|
|
title String
|
|
description String? @db.Text
|
|
category String?
|
|
videoUrl String?
|
|
videoFileUrl String?
|
|
attachmentUrl String?
|
|
attachmentName String?
|
|
thumbnailUrl String?
|
|
status String @default("draft")
|
|
isPublished Boolean @default(false)
|
|
publishedAt DateTime?
|
|
createdBy String?
|
|
updatedBy String?
|
|
createdAt DateTime @default(now())
|
|
updatedAt DateTime @updatedAt
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 11. API / Actions
|
|
|
|
สร้าง server actions หรือ API สำหรับ:
|
|
|
|
- createOnlineLesson
|
|
- updateOnlineLesson
|
|
- deleteOnlineLesson
|
|
- getOnlineLessonsForAdmin
|
|
- getPublishedOnlineLessons
|
|
- getOnlineLessonById
|
|
- uploadOnlineLessonFile
|
|
|
|
---
|
|
|
|
## 12. Sidebar Menu
|
|
|
|
เพิ่มเมนูใน Sidebar
|
|
|
|
### สำหรับ HRD/Admin
|
|
|
|
```txt
|
|
เพิ่มบทเรียนออนไลน์
|
|
```
|
|
|
|
Icon แนะนำ:
|
|
|
|
- BookOpen
|
|
- Video
|
|
- GraduationCap
|
|
- FileVideo
|
|
|
|
### สำหรับ Employee
|
|
|
|
```txt
|
|
บทเรียนออนไลน์
|
|
```
|
|
|
|
Icon แนะนำ:
|
|
|
|
- BookOpen
|
|
- PlayCircle
|
|
- MonitorPlay
|
|
|
|
---
|
|
|
|
## 13. ข้อจำกัด
|
|
|
|
ห้ามกระทบเมนูเดิม เช่น:
|
|
|
|
- ประกาศ
|
|
- หลักสูตร
|
|
- ประวัติการอบรม
|
|
- รายชื่อพนักงาน
|
|
- รายงาน
|
|
|
|
ห้ามแก้ Business Logic เดิมของระบบอบรม
|
|
|
|
ให้เพิ่มเป็น Module ใหม่แยกออกมา
|
|
|
|
---
|
|
|
|
## 14. ผลลัพธ์ที่ต้องการ
|
|
|
|
เมื่อ HRD เพิ่มบทเรียนออนไลน์และตั้งสถานะเป็น Published
|
|
|
|
พนักงานจะเห็นบทเรียนนั้นในเมนู **บทเรียนออนไลน์**
|
|
|
|
พนักงานสามารถ:
|
|
|
|
- เปิดดูวิดีโอได้
|
|
- อ่านรายละเอียดบทเรียนได้
|
|
- ดาวน์โหลดไฟล์แนบได้
|
|
|
|
HRD สามารถ:
|
|
|
|
- จัดการบทเรียนทั้งหมดได้
|
|
- แก้ไขบทเรียนได้
|
|
- ลบบทเรียนได้
|
|
- เปิด/ปิดการเผยแพร่ได้
|