79 lines
5.2 KiB
Markdown
79 lines
5.2 KiB
Markdown
# Certificate Preview Review
|
|
|
|
## Summary
|
|
|
|
ปรับปรุงการแสดงตัวอย่างใบรับรองในโมดูล Training Records ให้รองรับ fallback ที่ชัดเจนขึ้น:
|
|
|
|
- ไฟล์รูปภาพ `JPG`, `JPEG`, `PNG`, `GIF`, `WEBP` แสดง preview ได้
|
|
- หากรูปเสีย, โหลดไม่ได้, URL ไม่ถูกต้อง, หรือเป็นไฟล์ที่ไม่ใช่รูปภาพ จะไม่แสดง broken image
|
|
- ใช้ placeholder แบบเดียวกันในตารางประวัติอบรม, หน้ารายละเอียด, และรายการเอกสารแนบ
|
|
- การเปิดไฟล์/ดาวน์โหลดไฟล์ยังทำงานเหมือนเดิม
|
|
|
|
## Files Changed
|
|
|
|
- `src/components/icons.tsx`
|
|
- `src/features/training-records/components/certificate-preview-utils.tsx`
|
|
- `src/features/training-records/components/training-record-certificate-manager.tsx`
|
|
- `src/features/training-records/components/training-record-tables/columns.tsx`
|
|
- `src/features/training-records/components/training-record-tables/training-record-image-preview.tsx`
|
|
- `src/features/training-records/server/training-record-data.ts`
|
|
|
|
## Preview Logic
|
|
|
|
1. ดึง certificate ล่าสุดของแต่ละ training record เหมือนเดิม
|
|
2. ถ้า `fileType` เป็นรูปภาพที่รองรับ จะส่ง preview URL กลับมาให้ UI
|
|
3. ถ้า `fileType` ไม่ใช่รูปภาพ จะไม่ส่ง preview URL แต่ยังส่งชนิดไฟล์กลับมาเพื่อใช้แสดง placeholder
|
|
4. ฝั่ง UI ตรวจสอบอีกชั้นว่า:
|
|
- ถ้าเป็นรูปและโหลดได้ ให้แสดงรูป
|
|
- ถ้าเป็นรูปแต่โหลดไม่ได้ ให้ fallback เป็น placeholder
|
|
- ถ้าไม่ใช่รูป ให้แสดง placeholder ทันที
|
|
5. ถ้าไม่มีไฟล์แนบเลย จะแสดง `-`
|
|
|
|
## Placeholder Design
|
|
|
|
Placeholder ใช้ไอคอน `Award` จากชุดไอคอนของโปรเจกต์ และมีองค์ประกอบดังนี้:
|
|
|
|
- ไอคอนใบรับรอง
|
|
- ข้อความ `เกียรติบัตร`
|
|
- ชนิดไฟล์แบบ optional เช่น `PDF`, `DOCX`, `ZIP`
|
|
|
|
ดีไซน์ใช้กรอบ `border-dashed`, พื้นหลัง muted, และจัดวางกึ่งกลางเพื่อให้ดูสอดคล้องกับ UI เดิมของระบบ
|
|
|
|
## Supported File Types
|
|
|
|
Preview รูปภาพ:
|
|
|
|
- `image/jpeg`
|
|
- `image/jpg`
|
|
- `image/png`
|
|
- `image/gif`
|
|
- `image/webp`
|
|
|
|
Fallback placeholder:
|
|
|
|
- `application/pdf`
|
|
- `application/vnd.openxmlformats-officedocument.wordprocessingml.document`
|
|
- `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
|
|
- `application/vnd.openxmlformats-officedocument.presentationml.presentation`
|
|
- `application/zip`
|
|
- `application/x-rar-compressed`
|
|
- และไฟล์ชนิดอื่นที่ไม่ใช่รูปภาพ
|
|
|
|
## Manual Test Checklist
|
|
|
|
- อัปโหลดไฟล์ `JPG` แล้วตรวจสอบว่า preview แสดงถูกต้อง
|
|
- อัปโหลดไฟล์ `PNG` แล้วตรวจสอบว่า preview แสดงถูกต้อง
|
|
- ตรวจสอบ record ที่มี `GIF` หรือ `WEBP` ว่า preview แสดงถูกต้อง
|
|
- ทำให้ URL รูปภาพไม่ถูกต้อง แล้วตรวจสอบว่าแสดง placeholder แทน broken image
|
|
- ตรวจสอบไฟล์ `PDF` ว่าแสดง placeholder พร้อมชนิดไฟล์
|
|
- ตรวจสอบไฟล์ที่ไม่ใช่รูปภาพอื่น เช่น `DOCX`, `XLSX`, `PPTX`, `ZIP`, `RAR` ว่าแสดง placeholder
|
|
- กดปุ่มเปิดไฟล์จากรายการเอกสารแนบ และตรวจสอบว่าเปิดไฟล์ได้
|
|
- ตรวจสอบหน้าตาราง Training Records
|
|
- ตรวจสอบหน้ารายละเอียด Training Record
|
|
- ตรวจสอบรายการเอกสารแนบใน Certificate Manager
|
|
|
|
## Known Limitations
|
|
|
|
- UI สำหรับอัปโหลดไฟล์ยังคงจำกัดชนิดไฟล์ตาม validation เดิมของระบบ; งานนี้โฟกัสที่ preview/fallback behavior เป็นหลัก
|
|
- Placeholder แสดงชนิดไฟล์จาก MIME type ที่ระบบมีอยู่ ถ้าแหล่งข้อมูลส่ง MIME type แปลกหรือไม่ครบ อาจแสดง label ได้ไม่สมบูรณ์
|