Biểu mẫu
Link thiết kế: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=17609-14177&t=TZBwrrKSgFKbTvZw-4
1. Mục tiêu:
- Thuận tiện cho KH sử dụng
- Tối ưu công cụ cho phép user thực hiện các thao tác
2. Mô tả chi tiết giao diện và logic
2.1. Thanh điều hướng (Side bar)
-
Hiển thị danh sách các chức năng chính gồm:
| Menu Tiếng Việt | Menu English (Standard) | Ghi chú |
| Của tôi | My Space | Tab mặc định |
| Nhắn tin | Messages | Điều hướng sang chức năng nhắn tín/chat |
| Báo cáo | Reports |
Điều hướng sang chức năng báo cáo tổng hợp |
| Biểu mẫu | Forms | Điều hướng sang chức năng biểu mẫu (WORK) |
| Checklist | Checklist | Điều hướng sang chức năng check list (WORK) |
| Lịch checklist | Checklist Schedule | Điều hướng sang chức năng Đặt lịch (WORK) |
| Công việc | Tasks | Điều hướng sang chức năng Công việc (WORK) |
| Lịch | Calendar | Điều hướng sang chức năng calender |
| Đào tạo | Training | Điều hướng sang chức năng Đào tạo (Traing) |
| Dự án | Projects | Điều hướng sang chức năng Dự án |
| Cài đặt | Settings | Điều hướng sang chức năng Cài đặt |
| Ứng dụng | Apps | Điều hướng sang ds các phân hệ trong ứng dụng |
-
Active State: Highlight menu Biểu mẫu".
2.2. Màn hình master
Các Tab thông tin fồm
| STT | Tên trường | Loại | Mô tả | Ghi chú |
|---|---|---|---|---|
| 1 | Biểu mẫu | Tab | Tab hiển thị danh sách các biểu mẫu trong hệ thống | Tab mặc định |
| 2 | Mẫu trả lời | Tab | Tab hiển thị danh sách các mẫu trả lời của biểu mẫu | |
| 3 | Lưu trữ | Tab | Tab hiển thị các biểu mẫu đã được lưu trữ |
2.2.1. Tab Biểu mẫu
2.2.1.1. Block "Biểu mẫu yêu thích"
- Khi không có danh sách biểu mẫu yêu thích thì không hiển thị block này
- Đẩy cụm Danh sách biểu mẫu lên
- Danh sách biểu mẫu yêu thích hiển thị:
- Tối đã 05 biểu mẫu --> Khi đưa vào list "Biểu mẫu yêu thích" thì không hiển thị ở cụm "Danh sách biểu mẫu "
- List hiển thị biểu mẫu ưu thích hiển thì từ ngày đưa vào list yêu thích từ "mới nhất" đến "Cũ nhất"
- Vượt quá 05 biểu mẫu --> Trả biểu mẫu được đưa vào ds yêu thích có ngày "cũ nhất" so với ngày hiên tại . Biểu mẫu này cũng đưa về list danh sách biểu mẫu
-
STT Tên trường Loại Mô tả
Ghi chú 1 Biểu mẫu yêu thích Khu vực hiển thị Danh sách các biểu mẫu được người dùng đánh dấu yêu thích Hiển thị phía trên danh sách biểu mẫu 2 Ảnh biểu mãu image Hiển thị ảnh đại diện biểu mẫu (nếu có)
Nếu k có thì hiển thị ảnh mặc định
3 Ngày sửa gần nhất Date Hiển thị nhgayf sửa gần nhất của biểu mẫu 4 Ngày phát hành Hiển thị nhgayf sửa gần nhất của biểu mẫu 5 Đặt lịch Label Giá trị Có; Không 6 Làm check list Button Bấm vào để mở ra modal làm check list 7 action Hub Butto Bấm vào mở ra các action chi tiết gồm:
- Sửa biểu mẫu
- Đặt lịch check list
- Bỏ yêu thích
- Quản lý quyền
- Nhân bản
- Lưu trữ biểu mẫu
- Xóa biểu mẫu
- Lấy QR Code
2.2.1.2.Block“DANH SÁCH BIỂU MẪU”
1. Thanh tìm kiếm & bộ lọcSTT Tên trường Loại Mô tả Ghi chú 8 Search bar Textbox Tìm kiếm biểu mẫu theo tên biểu mẫu Tìm gần đúng 9 Bộ lọc Người tạo Dropdown Lọc danh sách biểu mẫu theo người tạo Cho phép chọn 1 hoặc nhiều 10 Bộ lọc Đặt lịch Dropdown (Yes/No) Lọc biểu mẫu theo trạng thái có đặt lịch hay không Yes / No 11 Bộ lọc khác Button Mở popup bộ lọc nâng cao
2. Popup “Bộ lọc khác”
STT Tên trường Loại Mô tả Ghi chú 12 Người được thực hiện Dropdown multi-select Lọc theo người được phân công thực hiện checklist 13 Nhóm được thực hiện Dropdown multi-select Lọc theo nhóm được phân công thực hiện 14 Ngày chỉnh sửa Date range picker Lọc biểu mẫu theo khoảng ngày chỉnh sửa Start date – End date 15 Ngày phát hành Date range picker Lọc biểu mẫu theo khoảng ngày phát hành Start date – End date 16 Nút Lọc Button Áp dụng điều kiện lọc 17 Nút Bỏ lọc Button Xóa toàn bộ điều kiện lọc
3. Bảng danh sách biểu mẫu
STT Tên trường Loại Mô tả Ghi chú 18 Checkbox chọn Checkbox Chọn một hoặc nhiều biểu mẫu để thao tác hàng loạt 19 Biểu mẫu Text Tên biểu mẫu và mã biểu mẫu Ví dụ: QA.2026.000035 20 Thực hiện Icon + số Hiển thị số người/nhóm được gán thực hiện 21 Xem báo cáo Icon + số Hiển thị số người/nhóm có quyền xem báo cáo 22 Sửa gần nhất Date Ngày chỉnh sửa gần nhất của biểu mẫu 23 Phát hành Date Ngày phát hành biểu mẫu 24 Đặt lịch Label Hiển thị trạng thái đặt lịch (Có/Không) 25 Làm checklist Button Tạo checklist từ biểu mẫu tương ứng 26 Menu thao tác (…) Button Mở danh sách hành động với biểu mẫu. gồm:
- Sửa biểu mẫu
- Đặt lịch check list
- Yêu thích
- QUản lý quyền
- Nhân bản biểu mẫu
- Lưu trữ biễu mẫu
- Xóa biểu mẫu,
- Lấy QR code
Có cảnh báo xác nhận khi thực hiện xóa biểu mẫu