Yêu Cầu Chỉnh Sửa: Tạo Mới Qua Modal/Popup Thay Vì Form Inline
Ngày cập nhật: 24/06/2026
File ảnh gốc: z7970695149099_84414135f42107f9c2e8a2f7c6262586.jpg
Áp dụng cho: Toàn bộ Admin CMS
Vấn Đề Hiện Tại
Trong ảnh ví dụ (màn hình Dịch vụ spa), khi Admin click "+ Tạo service", form nhập liệu đang được mở ra theo kiểu inline/trang mới — Admin bị điều hướng rời khỏi trang danh sách hiện tại, mất context đang làm việc.
Vấn đề này xảy ra tương tự trên tất cả các module có chức năng tạo mới trong Admin CMS.
Yêu Cầu Thay Đổi
Nguyên tắc chung (áp dụng toàn CMS)
Tất cả chức năng "Tạo mới" phải mở qua Modal/Popup Dialog, KHÔNG điều hướng sang trang mới hoặc hiển thị form inline phía trên danh sách.
| Hiện tại | Yêu cầu mới | |
|---|---|---|
| UX flow | Click → chuyển trang / form mở bên trên | Click → Modal popup xuất hiện |
| Context | Admin rời khỏi trang danh sách | Admin vẫn nhìn thấy danh sách phía sau modal |
| Sau khi lưu | Redirect về trang danh sách | Đóng modal + refresh danh sách tại chỗ |
| Hủy bỏ | Bấm Back hoặc Cancel | Click nút ✕ hoặc click ra ngoài modal |
Danh Sách Các Module Cần Áp Dụng
Các module trong Admin CMS có nút Tạo mới cần chuyển sang dạng Modal:
| # | Module | Nút hiện tại | Hành vi mới |
|---|---|---|---|
| 1 | Dịch vụ spa | + Tạo service | Mở modal nhập thông tin service |
| 2 | Chi nhánh | + Tạo chi nhánh | Mở modal nhập thông tin chi nhánh |
| 3 | Slide (Banner) | Tạo banner mới | Mở modal upload ảnh + cấu hình slide |
| 4 | Sự kiện (Event) | + Tạo sự kiện | Mở modal nhập thông tin event |
| 5 | Tin tức (News) | + Tạo bài viết | Mở modal nhập nội dung bài viết |
| 6 | BigFan | + Tạo bản ghi | Mở modal nhập liệu BigFan |
| 7 | Voucher | + Tạo voucher | Mở modal nhập thông tin voucher |
| 8 | Lucky Wheel (Vòng quay) | + Thêm phần thưởng | Mở modal nhập phần thưởng |
| 9 | Notifications | + Tạo thông báo | Mở modal soạn thông báo |
| 10 | Membership Tiers | + Tạo hạng | Mở modal cấu hình hạng thành viên |
⚠️ Lưu ý: Các module có form nhập liệu phức tạp, nhiều bước (ví dụ: tạo service có nhiều tab — thông tin cơ bản, biến thể, tài nguyên...) có thể dùng dạng Multi-step Modal (modal nhiều bước có thanh tiến trình) thay vì chuyển trang.
Thiết Kế Modal Chuẩn
┌─────────────────────────────────────────────┐
│ [Tiêu đề: Tạo service mới] [✕] │
├─────────────────────────────────────────────┤
│ │
│ Tên dịch vụ * │
│ ┌─────────────────────────────────────┐ │
│ │ Nhập tên dịch vụ... │ │
│ └─────────────────────────────────────┘ │
│ │
│ Danh mục * Thời lượng │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Body Treat ▼ │ │ 60 phút ▼ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ ...các trường khác... │
│ │
├─────────────────────────────────────────────┤
│ [Hủy bỏ] [+ Tạo service] │
└─────────────────────────────────────────────┘
Các quy tắc UX cho Modal
| Quy tắc | Chi tiết |
|---|---|
| Backdrop | Có lớp mờ phía sau modal, click ra ngoài = đóng modal (có xác nhận nếu đã nhập dữ liệu) |
| Kích thước | Width tối đa 600px (desktop), full-screen trên mobile |
| Scroll | Nội dung modal cuộn được nếu dài hơn viewport |
| Focus trap | Keyboard focus bị giữ trong modal khi đang mở |
| Escape key | Nhấn Esc = đóng modal |
| Loading state | Nút "Tạo" chuyển sang loading spinner khi đang gửi request |
| Validation | Hiển thị lỗi inline ngay dưới từng trường, không submit khi còn lỗi |
| Success | Sau khi tạo thành công: đóng modal + toast notification + tự động reload danh sách |
Checklist Kỹ Thuật
- Tạo component
<CreateModal />dùng chung, nhậnfields configvàonSubmithandler - Thay thế tất cả action
router.push('/create')hoặc inline form bằngopenModal() - Implement focus trap và keyboard accessibility (Escape, Tab)
- Sau khi tạo thành công, gọi
refetch()/invalidateQueries()để cập nhật danh sách không cần reload trang - Xử lý trường hợp người dùng click ra ngoài modal khi đã có dữ liệu nhập → hiện confirm dialog "Bạn có muốn hủy không?"
- Test responsive trên mobile (full-screen modal)