290 lines
6.4 KiB
Markdown
290 lines
6.4 KiB
Markdown
# Prompt: Redesign Announcement List to Enterprise Data Table
|
|
|
|
## Objective
|
|
|
|
ปรับปรุงหน้า **Announcements List** จาก Card Layout ให้เป็น **Enterprise Data Table** เพื่อให้เหมาะสำหรับการจัดการประกาศของผู้ดูแลระบบ (Admin / HRD / HRD Manager)
|
|
|
|
เป้าหมายของงานนี้คือ
|
|
|
|
- ลดพื้นที่แนวตั้งของรายการ
|
|
- รองรับข้อมูลจำนวนมาก
|
|
- ค้นหาและจัดการประกาศได้สะดวก
|
|
- รองรับ Sorting, Filtering และ Bulk Actions
|
|
- ใช้ Design System เดิมของระบบ (shadcn/ui + TailwindCSS)
|
|
- ไม่เปลี่ยน Business Logic, Workflow หรือ Permission เดิม
|
|
|
|
---
|
|
|
|
# Existing Implementation Compatibility
|
|
|
|
ก่อนเริ่มพัฒนา ให้ตรวจสอบโครงสร้างเดิมทั้งหมด เช่น
|
|
|
|
- Announcement List Page
|
|
- Announcement Card Component
|
|
- Query และ Pagination
|
|
- Filters
|
|
- Search
|
|
- Status Badge
|
|
- Action Menu
|
|
- Permission
|
|
- API
|
|
- Server Actions
|
|
- Shared Components
|
|
|
|
หากสามารถ Reuse Component เดิมได้ ให้ Reuse เป็นหลัก
|
|
|
|
ใช้หลัก
|
|
|
|
> Reuse > Extend > Refactor > Create New
|
|
|
|
ห้าม Rewrite Module ทั้งหมด
|
|
|
|
---
|
|
|
|
# Scope
|
|
|
|
ดำเนินการดังนี้
|
|
|
|
- เปลี่ยน Card Layout เป็น Data Table
|
|
- คง Search เดิม
|
|
- คง Filter เดิม
|
|
- เพิ่ม Sorting
|
|
- เพิ่ม Action Menu
|
|
- รองรับ Bulk Selection (ถ้ามีโครงสร้างรองรับ)
|
|
- แสดงสถานะและการปักหมุดใน Table
|
|
- ตรวจสอบ Responsive
|
|
|
|
---
|
|
|
|
# Table Columns
|
|
|
|
เรียงลำดับดังนี้
|
|
|
|
1. Checkbox (รองรับ Bulk Action)
|
|
2. Pin (📌)
|
|
3. หัวข้อประกาศ
|
|
4. สถานะ
|
|
5. วันที่เผยแพร่
|
|
6. วันสิ้นสุด
|
|
7. ผู้สร้าง
|
|
8. ไฟล์แนบ
|
|
9. จัดการ
|
|
|
|
### หัวข้อประกาศ
|
|
|
|
แสดง
|
|
|
|
- ชื่อประกาศ
|
|
- ข้อความย่อย (ถ้ามี)
|
|
|
|
ใช้ `truncate`
|
|
|
|
---
|
|
|
|
### Status
|
|
|
|
ใช้ Badge ตามมาตรฐานของระบบ
|
|
|
|
- Draft
|
|
- Pending Review
|
|
- Approved
|
|
- Published
|
|
- Expired
|
|
- Archived
|
|
|
|
---
|
|
|
|
### Pin
|
|
|
|
หากประกาศถูกปักหมุด
|
|
|
|
แสดงไอคอน 📌 หรือ Badge `Pinned`
|
|
|
|
หากไม่ปักหมุด ไม่ต้องแสดงข้อความ
|
|
|
|
---
|
|
|
|
### Publish Date
|
|
|
|
แสดงวันที่เผยแพร่
|
|
|
|
หากยังไม่เผยแพร่ แสดง "-"
|
|
|
|
---
|
|
|
|
### Expire Date
|
|
|
|
แสดงวันสิ้นสุดการแสดงผล
|
|
|
|
หากไม่มี แสดง "ไม่กำหนด"
|
|
|
|
---
|
|
|
|
### Attachment
|
|
|
|
หากมีไฟล์แนบ
|
|
|
|
แสดงไอคอนคลิปหนีบกระดาษ พร้อมจำนวนไฟล์ (ถ้ามีหลายไฟล์)
|
|
|
|
หากไม่มี
|
|
|
|
แสดง "-"
|
|
|
|
---
|
|
|
|
### Action Menu
|
|
|
|
ใช้ Dropdown Menu
|
|
|
|
รายการ Action ต้องเปลี่ยนตาม Status และ Permission
|
|
|
|
ตัวอย่าง
|
|
|
|
- ดูรายละเอียด
|
|
- แก้ไข
|
|
- ส่งตรวจสอบ
|
|
- อนุมัติ
|
|
- เผยแพร่
|
|
- ปักหมุด
|
|
- ยกเลิกการปักหมุด
|
|
- Archive
|
|
- ลบ
|
|
|
|
---
|
|
|
|
# Search
|
|
|
|
คง Search เดิม
|
|
|
|
ค้นหา
|
|
|
|
- หัวข้อประกาศ
|
|
- รายละเอียดประกาศ (ถ้าระบบรองรับ)
|
|
|
|
---
|
|
|
|
# Filter
|
|
|
|
คง Filter เดิม และปรับ Layout ให้เหมาะกับ Data Table
|
|
|
|
รองรับ
|
|
|
|
- Status
|
|
- ประเภท
|
|
- ผู้สร้าง
|
|
- ปี
|
|
- ปักหมุด
|
|
|
|
---
|
|
|
|
# Sorting
|
|
|
|
รองรับการเรียงลำดับ
|
|
|
|
- หัวข้อ
|
|
- สถานะ
|
|
- วันที่เผยแพร่
|
|
- วันสิ้นสุด
|
|
- ผู้สร้าง
|
|
|
|
---
|
|
|
|
# Bulk Action
|
|
|
|
หากระบบมี Permission และ API รองรับ
|
|
|
|
เพิ่ม Bulk Actions
|
|
|
|
- Publish
|
|
- Archive
|
|
- Delete
|
|
- Pin
|
|
- Unpin
|
|
|
|
หากยังไม่มีโครงสร้างรองรับ ให้เตรียม UI และระบุในรายงานว่าเป็น Future Enhancement
|
|
|
|
---
|
|
|
|
# Pagination
|
|
|
|
ใช้ Pagination เดิมของระบบ
|
|
|
|
ไม่เปลี่ยน Logic
|
|
|
|
---
|
|
|
|
# Responsive
|
|
|
|
Desktop
|
|
|
|
ใช้ Data Table
|
|
|
|
Mobile
|
|
|
|
สามารถแสดงเป็น Card ได้ หาก Data Table ใช้งานยากบนหน้าจอเล็ก
|
|
|
|
---
|
|
|
|
# Performance
|
|
|
|
- Reuse Query เดิม
|
|
- ไม่ Fetch ซ้ำ
|
|
- ใช้ Memoization ตามมาตรฐานเดิม
|
|
- ไม่กระทบ Server Pagination
|
|
|
|
---
|
|
|
|
# Business Logic
|
|
|
|
ห้ามแก้ไข
|
|
|
|
- Approval Workflow
|
|
- Publish Workflow
|
|
- Schedule Publish
|
|
- Permission
|
|
- Validation
|
|
- API Contract
|
|
- Business Rules
|
|
|
|
ให้เปลี่ยนเฉพาะการแสดงผล (Presentation Layer)
|
|
|
|
---
|
|
|
|
# Deliverables
|
|
|
|
เมื่อดำเนินการเสร็จ
|
|
|
|
สร้างเอกสาร
|
|
|
|
`docs/announcement-list-table-redesign.md`
|
|
|
|
ประกอบด้วย
|
|
|
|
- Existing Structure Review
|
|
- Files Changed
|
|
- UI Before / After
|
|
- Table Columns
|
|
- Action Menu
|
|
- Responsive Result
|
|
- Performance Impact
|
|
- Regression Check
|
|
- Future Improvements
|
|
|
|
---
|
|
|
|
# Success Criteria
|
|
|
|
งานถือว่าเสร็จเมื่อ
|
|
|
|
- เปลี่ยน Card Layout เป็น Data Table
|
|
- แสดงข้อมูลครบถ้วน
|
|
- Search และ Filter ยังทำงานได้
|
|
- Action Menu ใช้งานได้
|
|
- Sorting ทำงานได้
|
|
- Responsive สมบูรณ์
|
|
- ไม่มี Regression
|
|
- TypeScript ไม่มี Error
|
|
- ESLint ผ่าน
|
|
- Build ผ่าน
|
|
- Report ถูกสร้างเรียบร้อย
|