84 lines
2.4 KiB
Markdown
84 lines
2.4 KiB
Markdown
ช่วยปรับหน้า "บทเรียนออนไลน์" ให้เหมือนหน้า "ประวัติการอบรม"
|
|
|
|
สิ่งที่ต้องแก้:
|
|
|
|
1. เอา Card ที่ครอบตารางรายการบทเรียนออกทั้งหมด
|
|
- ลบ <Card>
|
|
- ลบ <CardContent>
|
|
- ลบ padding ของ Card
|
|
- ไม่ต้องมี Shadow รอบตาราง
|
|
|
|
2. ให้ Table แสดงผลเหมือนหน้า "ประวัติการอบรม" ทุกประการ
|
|
- Table อยู่ต่อจาก Search/Filter ทันที
|
|
- ใช้ DataTable Component เดียวกัน
|
|
- ใช้ border และ rounded ของ DataTable เหมือนหน้า "ประวัติการอบรม"
|
|
- ใช้ spacing เดียวกัน
|
|
|
|
3. Search / Filter ยังอยู่ใน Card เหมือนเดิม
|
|
แต่ส่วนรายการ Table ไม่ต้องอยู่ใน Card
|
|
|
|
ตัวอย่าง Layout ที่ต้องการ
|
|
|
|
---
|
|
|
|
หัวข้อ
|
|
|
|
Card
|
|
├── Search
|
|
├── Filter
|
|
└── View
|
|
|
|
DataTable
|
|
├── Header
|
|
├── Rows
|
|
├── Pagination
|
|
└── Total
|
|
|
|
---
|
|
|
|
ไม่ต้องเป็น
|
|
|
|
---
|
|
|
|
Card
|
|
DataTable
|
|
|
|
---
|
|
|
|
4. Pagination และจำนวนรายการ
|
|
ให้แสดงเหมือนหน้า "ประวัติการอบรม"
|
|
|
|
เช่น
|
|
|
|
ทั้งหมด 5 รายการ
|
|
|
|
จำนวนต่อหน้า [10]
|
|
หน้า 1 จาก 1
|
|
|
|
5. Table ต้องใช้ Layout เดียวกับหน้า "ประวัติการอบรม"
|
|
|
|
- overflow-x-auto
|
|
- rounded-lg border
|
|
- table-fixed
|
|
- hover row
|
|
- row height
|
|
- header style
|
|
- spacing
|
|
- badge
|
|
- action menu
|
|
|
|
เหมือนกันทั้งหมด
|
|
|
|
6. ห้ามแก้ Business Logic
|
|
|
|
- API
|
|
- Query
|
|
- Data
|
|
- Columns
|
|
|
|
แก้เฉพาะ Layout
|
|
|
|
ผลลัพธ์ที่ต้องการ
|
|
|
|
หน้า "บทเรียนออนไลน์" มี Layout เหมือนหน้า "ประวัติการอบรม" โดย Search/Filter อยู่ด้านบน และตารางแสดงต่อทันทีโดยไม่มี Card ครอบตาราง
|