100 lines
4.5 KiB
Markdown
100 lines
4.5 KiB
Markdown
# Permission Matrix UI Improvement Report
|
|
|
|
วันที่อัปเดต: 2026-07-07
|
|
|
|
## 1. Summary
|
|
|
|
ปรับปรุงหน้า `Permission Matrix` และ Permission Catalog ให้ผู้ใช้งานเข้าใจ permission แต่ละรายการได้ง่ายขึ้น โดยเพิ่ม metadata ระดับคำอธิบายภาษาไทยให้ทุก permission และปรับ UI ให้แสดงข้อมูลตามลำดับ:
|
|
|
|
- Permission Name
|
|
- Description
|
|
- Permission Code
|
|
- Action Badge
|
|
|
|
รอบนี้เป็นการปรับปรุงเฉพาะ UI/UX และ catalog metadata เท่านั้น โดยไม่เปลี่ยน business logic, permission code, authorization, API contract หลัก หรือ database schema
|
|
|
|
## 2. Files Modified
|
|
|
|
- `src/features/permission-management/api/types.ts`
|
|
- `src/features/permission-management/server/permission-management-catalog.ts`
|
|
- `src/features/permission-management/components/permission-matrix.tsx`
|
|
- `src/features/permission-management/components/permission-template-form-sheet.tsx`
|
|
|
|
## 3. UI Changes
|
|
|
|
สิ่งที่เปลี่ยนในหน้า `Permission Matrix`:
|
|
|
|
- เปลี่ยนจากแสดงแค่ `action` + `permission code`
|
|
- เพิ่ม `permission.description` ภาษาไทยในแต่ละ card
|
|
- แสดง `permission.code` ด้วย `font-mono`
|
|
- ปรับ typography:
|
|
- name ใช้ `text-base font-semibold`
|
|
- description ใช้ `text-sm text-muted-foreground`
|
|
- code ใช้ `font-mono text-xs`
|
|
- คง `Action` badge เดิมไว้
|
|
|
|
ผลลัพธ์คือผู้ใช้สามารถอ่านแล้วเข้าใจได้ทันทีว่า permission นั้น “ใช้ทำอะไร” โดยไม่ต้องเดาจาก code
|
|
|
|
นอกจากนี้ใน `Permission Template Form` ก็เปลี่ยนให้แสดง description จาก catalog เดียวกันด้วย เพื่อไม่ hardcode ข้อความและรองรับการใช้งานต่อในอนาคต
|
|
|
|
## 4. Permission Catalog Changes
|
|
|
|
ปรับ catalog เดิมใน `src/features/permission-management/server/permission-management-catalog.ts` โดยเพิ่ม metadata ต่อ permission ดังนี้:
|
|
|
|
- `module`
|
|
- `action`
|
|
- `code`
|
|
- `name`
|
|
- `description`
|
|
- `descriptionEn`
|
|
|
|
และยังคง field compatibility เดิมไว้ด้วย:
|
|
|
|
- `value`
|
|
- `label`
|
|
|
|
ดังนั้น component เดิมที่อิง `permission.value` ยังใช้ต่อได้ และ component ใหม่สามารถอ่าน `permission.description` ได้ทันที
|
|
|
|
## 5. Permission Coverage
|
|
|
|
ผลการตรวจสอบ catalog:
|
|
|
|
- จำนวน permission ทั้งหมดในระบบ: `78`
|
|
- จำนวน permission ที่มี metadata ครบ: `78`
|
|
- จำนวน permission ที่ขาดคำอธิบาย: `0`
|
|
- จำนวน permission ที่ขาด field สำคัญ (`module`, `action`, `code`, `name`, `description`): `0`
|
|
|
|
ยืนยันว่า permission ทุกตัวมีข้อมูลครบ:
|
|
|
|
- `module`
|
|
- `action`
|
|
- `code`
|
|
- `name`
|
|
- `description`
|
|
|
|
## 6. Compatibility
|
|
|
|
ยืนยันว่าในการเปลี่ยนรอบนี้:
|
|
|
|
- Permission Code ไม่เปลี่ยน
|
|
- Business Logic ไม่เปลี่ยน
|
|
- Authorization ไม่เปลี่ยน
|
|
- API ไม่เปลี่ยนในเชิงพฤติกรรมการอนุญาต
|
|
- Database ไม่เปลี่ยน
|
|
|
|
รอบนี้เป็น UX improvement ของ catalog และการ render UI เท่านั้น
|
|
|
|
## 7. Verification
|
|
|
|
ตรวจสอบแล้ว:
|
|
|
|
- `npx oxlint src/features/permission-management src/app/api/permissions src/features/permission-management/server/permission-management-catalog.ts` ผ่าน
|
|
- `npx tsc --noEmit` ผ่าน
|
|
- coverage check ของ permission catalog:
|
|
- total permissions = `78`
|
|
- coverage = `78`
|
|
- missing = `0`
|
|
- incomplete = `0`
|
|
- หน้า `Permission Matrix` แสดง description จาก `permission.description`
|
|
- Permission Code ยังคงเดิมทุกตัว
|