ĐẶT LỊCH
1. Màn hình Danh sách Lịch Checklist (Calendar View)
| Tên trường / Chức năng | Loại (Type) | Mô tả giao diện (UI) | Logic xử lý (System/Business Logic) |
| Tab View | Button Group |
- Hiển thị 2 nút: "Lịch" và "Danh sách". - Mặc định chọn: Tab "Lịch". |
Khi switch tab, hệ thống render lại dữ liệu hiển thị theo dạng view tương ứng (Calendar view hoặc List view). |
| Thanh tìm kiếm | Input Text |
- Placeholder: "Tìm theo tên lịch...". - Icon kính lúp ở bên phải. |
- Điều kiện tìm: So khớp chuỗi ký tự gần đúng (LIKE %keyword%) với trường "Tên lịch checklist". - Phạm vi dữ liệu: Query tất cả các lịch trong quá khứ + Lịch hiện tại + Lịch tương lai (trong phạm vi 30 ngày kể từ ngày hiện tại đối với lịch có tần suất). |
| Bộ lọc Địa điểm | Dropdown (Multi-select) |
- Hiển thị danh sách các địa điểm đã được cấu hình (site) - Cho phép tích chọn nhiều. |
- Cho phép nhập tìm kiếm theo tên và mã địa điểm - Quan hệ OR giữa các giá trị chọn. |
| Bộ lọc Phân loại | Dropdown (Multi-select) | - Hiển thị danh sách loại checklist. | - Lọc theo category_id. |
| Bộ lọc Nhãn dán | Dropdown (Multi-select) | - Hiển thị danh sách Tags/Label. | - Lọc theo tag_id. |
| Bộ lọc Năm | Dropdown | - Hiển thị số năm (VD: 2025, 2026). |
- Mặc định: Get - Khi thay đổi, reload lại lịch theo năm chọn. |
| Bộ lọc Tháng | Dropdown | - Hiển thị tháng (Jan - Dec). |
- Mặc định: Get - Khi thay đổi, reload lại lịch theo tháng chọn. |
| Lưới lịch (Calendar Grid) | UI Component |
- Lưới 7 cột (Su - Sa). - Các ngày có sự kiện: Hiển thị chấm tròn màu (theo trạng thái) hoặc tên vắn tắt. - Ô ngày hiện tại: Highlight viền hoặc màu nền khác biệt. |
- Click vào ô trống (Ngày chưa có lịch): Gọi sự kiện mở Modal "Tạo mới" (Màn hình 2.1). Truyền tham số - Click vào item lịch: Gọi API lấy chi tiết lịch -> Mở Drawer "Chi tiết" (Màn hình 3). |
| Nút "Đặt lịch" | Button |
- Nút màu tím (Primary Color). - Icon dấu cộng (+). |
- Sự kiện onClick: Mở Modal "Tạo mới lịch checklist". |
2. Màn hình Tạo mới Đặt lịch
2.1. Màn hình tạo mới với tần suất 1 lần
| Khu vực | Tên trường | Bắt buộc | Mô tả giao diện (UI) | Logic xử lý (System/Business Logic) |
| Header | Nút Đóng / Lưu | - |
- Nút "Đóng": Góc phải trên. - Nút "Lưu": Nút màu tím nổi bật. |
- Đóng: Đóng modal, không lưu dữ liệu, clear form. - Lưu: Trigger validate form -> Nếu Pass -> Gọi API |
| Thông tin chung | Tên lịch checklist | Có |
- Input text. - Hiển thị bộ đếm ký tự góc phải (0/200). |
- Validate: Không được để trống. - Validate: Max length = 200 ký tự. |
| Biểu mẫu sử dụng | Có |
- Dropdown single select. - Có dòng note hướng dẫn bên dưới. |
- Load danh sách Template đang Active. - Khi chọn, hệ thống mapping ID questionnaire vào lịch. - Validate: Không được để trống. |
|
| Thực hiện | Người thực hiện | Có |
1. Trạng thái đóng: Khi chưa chọn - Hiển thị input box. - Placeholder: "Chọn người thực hiện". 2. Trạng thái mở (Dropdown): - Có 2 Tab: Cá nhân và Nhóm. - Có thanh tìm kiếm (Search bar) trên cùng. - Nút "Lưu" màu tím ở dưới cùng của dropdown. 3. Tab Cá nhân (Default): - List user (Display name) - Mỗi dòng cho phép có cơ chế chọn nhiều. - Đã chọn: Hiển thị dấu tích (Checkmark) bên phải. 4. Tab Nhóm: - List danh sách các nhóm (Nhóm 1, Nhóm 2...). - Cơ chế chọn: Single select (Chọn 1).
|
- Validate: Không được để trống. -Mặc định khi bấm tạo mới lịch sẽ hiển thị nút gán người thực hiện mà chưa có các lựa chọn ở phía dưới. 1. Logic Tìm kiếm: - Filter danh sách user/nhóm theo từ khóa nhập vào (Local search hoặc API search). -Chỉ có thể chọn cá nhân hoặc nhóm, khi đang chọn cá nhân mà đổi sang tab nhóm và chọn 1 giá trị sẽ clear toàn bộ giá trị cá nhân đã chọn tương tự với khi chọn nhóm mà đổi sang và chọn cá nhân. 2. Logic Tab Cá nhân (Multi-select): - Cho phép tích chọn nhiều User ID vào mảng - Quy tắc Reset: Ngay khi user thực hiện chọn (click) vào 1 user bất kỳ tại tab này -> Hệ thống tự động Clear (Xóa rỗng) giá trị của 3. Logic Tab Nhóm (Single-select): - Chỉ cho phép chọn duy nhất 1 Group ID - Quy tắc Reset: Ngay khi user thực hiện chọn (click) vào 1 nhóm bất kỳ -> Hệ thống tự động Clear (Xóa rỗng) toàn bộ mảng 4. Nút Lưu (trong dropdown): - Sự kiện: Đóng dropdown. - Hiển thị text lên input box: + Nếu chọn Cá nhân: Hiển thị tên các user (cách nhau dấu phẩy) hoặc dạng Tags. + Nếu chọn Nhóm: Hiển thị tên nhóm.
|
| Tất cả hoàn thành | Không |
Quy tắc hoàn thành Chỉ xuất hiện khi trường "Người thực hiện" có dữ liệu chọn "nhiều người" hoặc "Nhóm thực hiện" - Dạng nút chọn (Radio Button). |
Tất cả hoàn thành: Khi tạo lịch, hệ thống sẽ yêu cầu mọi user được gán đều phải submit checklist thì checklist mới được tính là "Done" |
|
| Chỉ cần 1 người |
Quy tắc hoàn thành Chỉ xuất hiện khi trường "Người thực hiện" có dữ liệu chọn nhiều "người thực hiện" hoặc/và "Nhóm thực hiện" - Dạng nút chọn (Radio Button). |
Check list được chia sẻ chung. Chỉ cần 1 trong số các user được gán submit là check list hoàn thành (First-come first-served). |
||
| ☑ Tự lấy người theo địa điểm. |
- Chỉ xuất hiện khi trường "Người thực hiện" có dữ liệu. - Dạng Checkbox. |
- Khi Uncheck (False): Giữ nguyên danh sách người/nhóm đã chọn ở trên. - Khi Check (True): Kích hoạt logic giao điểm (Intersection). + Hệ thống sẽ lấy danh sách User trong Nhóm/List đã chọn VÀ (AND) User đó phải thuộc + Ví dụ: Chọn "Nhóm Quản lý" + Check "Tự lấy theo địa điểm" + Địa điểm "Kho A" -> Hệ thống chỉ gán check list cho các Quản lý đang làm việc tại Kho A. |
||
| Địa điểm thực hiện | Không | - Dropdown Multi-select. |
|
|
| Thời gian | Múi giờ | Có | - Dropdown chọn múi giờ. |
|
| Thời lượng thực hiện | Có |
- 2 ô Input: Ngày bắt đầu (Date) + Giờ (Time) và Ngày kết thúc (Date) + Giờ (time) - Note: "Mỗi lịch được thực hiện trong X giờ". |
- Validate: - Hệ thống tự tính toán -Mặc định là ngày hiện tại . Giờ mặc định là giờ hiện tại |
|
| Tần suất | Có |
|
- Mặc định: Set giá trị là "Một lần" (One-time). - Nếu chọn loại khác (Hàng ngày/tuần...), hiển thị thêm UI cấu hình lặp lại (Recurrence Rules). Các màn hình tiếp theo số: 2.2; 2.3; 2.4; 2.5 |
|
| Hoàn thành sau thời hạn | Không |
- Toggle Switch (On/Off). - Note: "Cho phép ngườii dùng hoàn thành check list sau thời gian quy định lên tới 14 ngày" |
- OFF (False): Đến - ON (True): Cho phép submit sau Cho phép người dùng được làm checklist theo lịch ngay cả khi hết hạn hoàn thành theo thời gian làm khi bật tính năng này. Sau 14 ngày mà k được thực hiện thì Checklist được tính về Bỏ lỡ. |
2.2. Màn hình tạo mới với tần suất "Hằng ngày"
Modal tạo mới đặt lịch với tần suất hàng ngày, các cụm thông tin tương tự với tần suất 1 lần gồm
- Thông tin chung
- Thực hiện
- Thời gian
Các thông tin khác khi lựa chọn tần suất hàng ngày , cụ thẻ mô tả chi tiết và logic xử lý như sau:
| Tên trường / Chức năng | Bắt buộc | Mô tả giao diện (UI) | Logic xử lý (System/Business Logic) |
| Tần suất | Có |
- Dropdown select. - Giá trị chọn: "Hàng ngày" (Daily). |
- Khi giá trị thay đổi sang "Hàng ngày" (hoặc Hàng tuần/tháng) -> Hệ thống tự động Hiển thị (Unhide) khối cấu hình "Kết thúc" ngay bên dưới. |
|
Kết thúc (Cấu hình vòng lặp) |
Có |
Hiển thị: - Label: "Kết thúc". - Dạng: Radio Group (Chọn 1 trong 3). Các tùy chọn: 1. 🔘 Không bao giờ (Never). --> Mặc định 2. ⚪ Vào ngày (On Date): - Kèm theo 1 Date Picker bên cạnh. - Placeholder: DD/MM/YYYY. 3. ⚪ Sau (After): - Kèm theo 1 Input Number. - Placeholder: "10". - Label đuôi: "Vòng lặp" (Occurrences). |
1. Tùy chọn "Không bao giờ": - Hệ thống sẽ sinh lịch vô hạn (Yêu cầu sinh cho 05 năm tới để tránh ảnh hưởng tới performance hệ thống) 2. Tùy chọn "Vào ngày": - Cho phép user chọn ngày kết thúc chuỗi lặp. - Validate: - Hệ thống sẽ sinh lịch từ ngày bắt đầu cho đến ngày này thì dừng. 3. Tùy chọn "Sau [N] vòng lặp": - Cho phép user nhập số lần lặp lại mong muốn. - Validate: Input phải là số nguyên dương (Integer > 0). - Ví dụ: Nhập 10 -> Hệ thống sinh đúng 10 bản ghi lịch checklist rồi dừng. |
3. Màn hình Chi tiết Lịch (View Mode)
| Tên trường / Nút | Loại hiển thị | Mô tả giao diện (UI) | Logic xử lý (System/Business Logic) |
| Header | Nút Action |
- Nút "Tạm ngừng": Style Danger/Warning. - Nút "Sửa": Style Primary. - Mã lịch: Hiển thị ID dạng text (Read-only). |
- Tạm ngừng: Update - Sửa: Mở lại form Tạo mới (Màn hình 2) nhưng bind dữ liệu cũ vào các trường để user chỉnh sửa. |
| Thông tin chính | Tiêu đề & Trạng thái |
- Tiêu đề: Font to, in đậm. - Trạng thái: Badge màu (Xanh: Active, Xám: Inactive). |
- Hiển thị đúng tên lịch đã lưu. - Mapping trạng thái từ DB ra màu sắc tương ứng. |
| Chi tiết | Các trường thông tin |
- Hiển thị dạng Label: Value. - Các trường: Biểu mẫu, Người thực hiện, Địa điểm, Múi giờ... |
- Tất cả đều ở trạng thái Read-only (Chỉ xem). - Dữ liệu Người thực hiện: Nếu > 5 người, hiển thị Avatar stack (+5) để tiết kiệm diện tích. |
| Cấu hình | Tần suất & Deadline |
- Tần suất: Hiển thị text. - Hoàn thành sau hạn: Text "Cho phép" / "Không". |
- Hiển thị cấu hình hiện tại của lịch. |