11 KiB
Task: Refactor Attachment UI/UX for Training Record
Objective
ปรับปรุง UI/UX ส่วนจัดการไฟล์แนบของระบบ Training Management System (TMS) ให้ใช้งานง่าย ลดความซ้ำซ้อน และสอดคล้องกับ Workflow ของระบบ
ปัจจุบันหน้า Training Record มีทั้ง
- อัปโหลดใบรับรอง
- เอกสารประกอบ
- Drag & Drop Area
- รายการไฟล์แนบ
ซึ่งทำให้ผู้ใช้งานเกิดความสับสน เนื่องจากมีพื้นที่ Upload มากกว่า 1 จุด และมีการแสดงผลที่ซ้ำซ้อน
เป้าหมายคือ
- แยกหน้าที่ของแต่ละส่วนให้ชัดเจน
- ลด White Space
- ปรับชื่อหัวข้อให้เข้าใจง่าย
- ใช้ Component ร่วมกันทั้งระบบ
- ไม่กระทบ Business Logic เดิม
Project Rules
ก่อนเริ่มแก้ไข ต้องตรวจสอบและปฏิบัติตาม
- AGENTS.md
- docs/AI_DEVELOPMENT_GUIDE.md
- docs/PROJECT_ARCHITECTURE.md
ต้องตรวจสอบ Implementation เดิมก่อนทุกครั้ง
ห้ามสร้าง Component ใหม่ หากมี Shared Component อยู่แล้ว
หากสามารถ Reuse ได้ ให้ Reuse
Scope
ตรวจสอบทั้งโปรเจกต์
ห้ามแก้เฉพาะหน้าเดียว
ค้นหาและตรวจสอบทุก Component ที่เกี่ยวข้องกับ
- File Upload
- Attachment
- Attachment List
- Certificate Upload
- Dropzone
- Training Record
- Shared Upload Component
หากเป็น Shared Component ให้แก้ที่ต้นทาง
Current Problems
Problem 1
หน้าเดียวกันมีพื้นที่ Upload มากกว่า 1 จุด
ตัวอย่าง
- อัปโหลดใบรับรอง
- เอกสารประกอบ
ผู้ใช้งานไม่ทราบว่าควร Upload ตรงไหน
Problem 2
ส่วน "เอกสารประกอบ"
แสดงทั้ง
- Drag & Drop
- ไม่มีไฟล์แนบ
พร้อมกัน
ทำให้ UI ซ้ำซ้อน
Problem 3
เมื่อไม่มีไฟล์
มีพื้นที่ว่างขนาดใหญ่โดยไม่จำเป็น
ทำให้หน้าจอดูยาว
Problem 4
ชื่อ
"เอกสารประกอบ"
ไม่สื่อว่าเป็น
รายการไฟล์ที่แนบแล้ว
ผู้ใช้อาจเข้าใจผิดว่าเป็นอีกจุดสำหรับ Upload
UX/UI Improvements
1. เปลี่ยนชื่อหัวข้อ
เดิม
เอกสารประกอบ
ใหม่
ไฟล์ที่แนบ
เหตุผล
- เข้าใจง่าย
- เป็นคำที่ผู้ใช้คุ้นเคย
- สื่อว่าเป็นรายการไฟล์ที่มีอยู่แล้ว
- ไม่ทำให้เข้าใจว่าเป็นพื้นที่ Upload
2. เปลี่ยนชื่อส่วน Upload
หากปัจจุบันใช้
อัปโหลดใบรับรอง
ให้พิจารณาเปลี่ยนเป็น
เพิ่มไฟล์แนบ
หรือ
อัปโหลดไฟล์
หากไม่กระทบ Business Requirement
แต่หาก Business Logic ระบุว่าต้องเป็น "ใบรับรอง"
สามารถคงชื่อเดิมไว้ได้
3. แยกหน้าที่ของแต่ละส่วน
ส่วน Upload
ใช้สำหรับ
- Upload File
- Drag & Drop
เท่านั้น
ส่วนไฟล์ที่แนบ
ใช้สำหรับ
- แสดงรายการไฟล์
- Download
- Delete (เฉพาะ Draft)
ห้ามมี
- Drag & Drop
- Upload Area
- Upload Button
ภายในส่วนนี้
Functional Requirements
Requirement 1
Dropzone
ต้องมีเพียงจุดเดียวในหน้า
ห้ามมีหลาย Dropzone ที่ทำหน้าที่เดียวกัน
Requirement 2
Dropzone
ต้องแสดงเฉพาะเมื่อระบบอนุญาตให้อัปโหลด
เช่น
- Create
- Edit Draft
หาก Record อยู่ในสถานะ
- รอตรวจสอบ
- อนุมัติ
- ไม่อนุมัติ
- ยกเลิก
ให้ซ่อน Dropzone ทั้งหมด
Requirement 3
ส่วน "ไฟล์ที่แนบ"
ต้องเป็น Read-only Area
ยกเว้นกรณี Draft
ที่สามารถลบไฟล์ได้
Requirement 4
เมื่อไม่มีไฟล์
ให้แสดง
📎 ไม่มีไฟล์แนบ
เพียงข้อความเดียว
ไม่ต้องมี Card สูง
ไม่ต้องมีพื้นที่ว่างขนาดใหญ่
Requirement 5
เมื่อมีไฟล์
แสดงเป็นรายการ
ตัวอย่าง
📄 Certificate.pdf
PDF • 1.2 MB
⬇ ดาวน์โหลด
📄 Activity.jpg
JPG • 800 KB
⬇ ดาวน์โหลด
หากเป็น Draft
แสดง
🗑 ลบ
ได้
Requirement 6
ลด White Space
Card
Padding
Margin
ให้เหมาะสม
ไม่ควรมีพื้นที่ว่างจำนวนมากเมื่อไม่มีไฟล์
Refactoring
ตรวจสอบ
- Duplicate Upload Component
- Duplicate Attachment Component
- Duplicate File List
- Duplicate Empty State
หากสามารถรวมเป็น Shared Component ได้
ให้ Refactor
โดย
ห้ามเปลี่ยน Business Logic
Do NOT
ห้าม
- เปลี่ยน Database
- เปลี่ยน API
- เปลี่ยน Permission
- เปลี่ยน Workflow
- เปลี่ยน Validation
- เปลี่ยน Business Rule
งานนี้เป็น
UI/UX Refactor
เท่านั้น
Expected UI
Create / Edit Draft
────────────────────
เพิ่มไฟล์แนบ
[ Drag & Drop ]
────────────────────
ไฟล์ที่แนบ
📄 Certificate.pdf
📄 Activity.jpg
────────────────────
ไม่มีไฟล์
────────────────────
ไฟล์ที่แนบ
📎 ไม่มีไฟล์แนบ
────────────────────
Waiting / Approved
────────────────────
ไฟล์ที่แนบ
📄 Certificate.pdf
📄 Activity.jpg
────────────────────
ไม่มี Dropzone
Acceptance Criteria
ต้องผ่านทั้งหมด
✅ ไม่มี Dropzone ซ้ำในหน้าเดียว
✅ ส่วน "ไฟล์ที่แนบ" ไม่มี Upload UI
✅ Upload แสดงเฉพาะสถานะที่อนุญาต
✅ ไม่มี White Space ขนาดใหญ่เมื่อไม่มีไฟล์
✅ ชื่อหัวข้อใหม่เป็น "ไฟล์ที่แนบ"
✅ หากมีไฟล์ แสดงรายการไฟล์จริง
✅ หากไม่มีไฟล์ แสดง "📎 ไม่มีไฟล์แนบ"
✅ Download ใช้งานได้
✅ Delete ใช้งานได้เฉพาะ Draft
✅ Responsive ทุกขนาดหน้าจอ
Regression Testing
ทดสอบ
Create
- ไม่มีไฟล์
- มีไฟล์
- Upload
Edit Draft
- Upload
- Delete
- Download
Waiting for Review
- Download
Approved
- Download
Rejected
ตรวจสอบตาม Business Rule
Empty State
ไม่มีไฟล์
Multiple Files
หลายไฟล์
Responsive
Desktop
Tablet
Mobile
Deliverables
หลังแก้ไขเสร็จ
สร้างรายงาน
docs/reports/training-record-attachment-ui-refactor-report.md
รายงานต้องประกอบด้วย
1. Scope
Component และหน้าที่ได้รับผลกระทบ
2. Files Changed
รายการไฟล์ทั้งหมดที่แก้ไข
3. Before vs After
สรุปการเปลี่ยนแปลง UI
4. Refactoring Summary
Component ที่รวมเข้าด้วยกัน
Component ที่ถูก Reuse
5. Functional Verification
ผลการทดสอบแต่ละ Workflow
- Create
- Edit Draft
- Waiting
- Approved
- Rejected
6. Responsive Testing
Desktop
Tablet
Mobile
7. Regression Testing
สรุปผลการทดสอบทั้งหมด
8. Risks
ความเสี่ยงที่พบ
9. Recommendations
ข้อเสนอแนะเพิ่มเติมสำหรับการปรับปรุงในอนาคต
Final Checklist
ก่อนส่งมอบงาน ต้องตรวจสอบให้ครบทุกข้อ
- ใช้ Shared Component หากมีอยู่แล้ว
- ไม่มี Upload Area ซ้ำ
- เปลี่ยนหัวข้อจาก "เอกสารประกอบ" เป็น "ไฟล์ที่แนบ"
- แยกหน้าที่ Upload และ File List ชัดเจน
- แสดง Empty State อย่างเหมาะสม
- ลด White Space
- UI ทุกหน้ามีความสอดคล้องกัน
- ไม่กระทบ Business Logic
- ไม่เกิด Regression
- Report ถูกสร้างครบถ้วน