gov-layout 1.2.25 → 1.2.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -241,11 +241,21 @@ import { UserHeader } from 'gov-layout';
|
|
|
241
241
|
notifications={[
|
|
242
242
|
{
|
|
243
243
|
id: 1,
|
|
244
|
-
title: '
|
|
245
|
-
description: '
|
|
244
|
+
title: 'คำร้องใหม่รอตรวจสอบ',
|
|
245
|
+
description: 'มีคำร้องใหม่เข้ามา กรุณาตรวจสอบ',
|
|
246
246
|
date: '2 ชม. ที่แล้ว',
|
|
247
|
-
type: '
|
|
247
|
+
type: 'warning',
|
|
248
248
|
isRead: false,
|
|
249
|
+
category: 'action', // ← แสดงในแท็บ "ต้องดำเนินการ"
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
id: 2,
|
|
253
|
+
title: 'คำร้องได้รับการอนุมัติ',
|
|
254
|
+
description: 'คำร้องหมายเลข #1234 อนุมัติสำเร็จ',
|
|
255
|
+
date: '5 ชม. ที่แล้ว',
|
|
256
|
+
type: 'success',
|
|
257
|
+
isRead: true,
|
|
258
|
+
category: 'general', // ← แสดงในแท็บ "แจ้งเตือนทั่วไป"
|
|
249
259
|
},
|
|
250
260
|
]}
|
|
251
261
|
onToggleSidebar={() => setOpen(true)}
|
|
@@ -273,15 +283,32 @@ import { UserHeader } from 'gov-layout';
|
|
|
273
283
|
| `notificationBell` | `ReactNode?` | - | custom bell icon |
|
|
274
284
|
| `className` | `string?` | - | className เพิ่มเติม |
|
|
275
285
|
|
|
286
|
+
### 🔔 Notification Filter Tabs (v1.2.25+)
|
|
287
|
+
|
|
288
|
+
Dropdown แจ้งเตือนมีแท็บกรอง 3 หมวด พร้อม badge ตัวเลข:
|
|
289
|
+
|
|
290
|
+
| แท็บ | กรองจาก `category` | ตัวอย่างใช้งาน |
|
|
291
|
+
|------|-------------------|----------------|
|
|
292
|
+
| **ทั้งหมด** | แสดงทุกรายการ | ดูภาพรวม |
|
|
293
|
+
| **ต้องดำเนินการ** | `'action'` | คำร้องใหม่รอตรวจสอบ, ต้องอัปโหลดเอกสาร, มีคิวใหม่ |
|
|
294
|
+
| **แจ้งเตือนทั่วไป** | `'general'` หรือไม่ระบุ | อนุมัติสำเร็จ, จองสำเร็จ, ยกเลิกแล้ว |
|
|
295
|
+
|
|
296
|
+
> 💡 ถ้าไม่ส่ง `category` จะถูกจัดเป็น **แจ้งเตือนทั่วไป** อัตโนมัติ (backward compatible)
|
|
297
|
+
|
|
276
298
|
### Features
|
|
277
299
|
|
|
278
300
|
- ✅ Notification bell พร้อม badge (99+ เมื่อเกิน)
|
|
279
301
|
- ✅ ไม่มีแจ้งเตือน → ไม่แสดง badge
|
|
280
302
|
- ✅ Notification dropdown แบบ scroll
|
|
303
|
+
- ✅ **Filter tabs**: ทั้งหมด / ต้องดำเนินการ / แจ้งเตือนทั่วไป 🆕
|
|
304
|
+
- ✅ **Badge ตัวเลข** แต่ละแท็บ 🆕
|
|
305
|
+
- ✅ **Category badge** "ต้องดำเนินการ" ติดแต่ละรายการ 🆕
|
|
306
|
+
- ✅ **Empty state แยกตาม filter** 🆕
|
|
281
307
|
- ✅ กดแจ้งเตือนแต่ละรายการ → `onNotificationClick`
|
|
282
308
|
- ✅ Subtitle ใต้ข้อความทักทาย (เช่น "ผู้สูงอายุ")
|
|
283
309
|
- ✅ ปุ่มเปิด sidebar (☰)
|
|
284
310
|
- ✅ กดโปรไฟล์ผู้ใช้ (avatar + ชื่อ) → `onProfile`
|
|
311
|
+
- ✅ รองรับ Dark Mode
|
|
285
312
|
|
|
286
313
|
---
|
|
287
314
|
|
|
@@ -433,6 +460,8 @@ interface User {
|
|
|
433
460
|
}
|
|
434
461
|
|
|
435
462
|
// การแจ้งเตือน
|
|
463
|
+
type NotificationCategory = 'action' | 'general';
|
|
464
|
+
|
|
436
465
|
interface NotificationItem {
|
|
437
466
|
id: string | number;
|
|
438
467
|
title: string;
|
|
@@ -440,6 +469,7 @@ interface NotificationItem {
|
|
|
440
469
|
date: string;
|
|
441
470
|
type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
|
|
442
471
|
isRead: boolean;
|
|
472
|
+
category?: NotificationCategory; // 🆕 หมวดหมู่: 'action' | 'general'
|
|
443
473
|
}
|
|
444
474
|
|
|
445
475
|
// ตั้งค่า
|