548 lines
11 KiB
Markdown
548 lines
11 KiB
Markdown
# 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 ถูกสร้างครบถ้วน
|