Skip to main content

Chuyển Trường "Thành Phố" Thành Dropdown Select

Ngày cập nhật: 20/06/2026
File ảnh gốc: z7956568162401_8dab47ca14bdf577d417866805228495.jpg

Dưới đây là đặc tả yêu cầu chỉnh sửa UI/UX đối với trường nhập liệu "Thành phố" trong form quản lý thông tin chi nhánh:

Feedback Select Tỉnh Thành

1. Hiện trạng thực tế​

  • Tại màn hình quản lý Thông tin chi nhánh (ví dụ chi nhánh Golden Lotus Healing Spa Land Phú Mỹ Hưng), trường nhập liệu Thành phố hiện tại đang sử dụng ô nhập văn bản tự do (Text Input). Giao diện hiển thị con trỏ soạn thảo văn bản (I) khi người dùng click vào.

[!WARNING]
Rủi ro dữ liệu:

  • Việc cho phép nhập văn bản tự do dễ dẫn đến sai sót chính tả, viết tắt không thống nhất (ví dụ: "TP. Hồ Chí Minh", "TP.HCM", "Hồ Chí Minh", "Ho Chi Minh City").
  • Điều này trực tiếp gây lỗi cho bộ lọc (Filter) tìm kiếm chi nhánh hoặc đặt lịch trên App của khách hàng khi hệ thống thực hiện truy vấn theo tên thành phố.

2. Yêu cầu chỉnh sửa & Giải pháp kỹ thuật​

2.1. Thay đổi UI trên trang quản trị Admin CMS​

  • Thay thế ô Text Input của trường "Thành phố" bằng component Dropdown Select (hộp chọn thả xuống).
  • Định cấu hình danh sách lựa chọn tĩnh/động các Tỉnh/Thành phố lớn có chi nhánh hoạt động (Ví dụ: TP. Hồ Chí Minh, Hà Nội, Đà Nẵng...).

2.2. Kiểm tra và ràng buộc dữ liệu (Validation & Backend)​

  • Áp dụng quy tắc kiểm tra (Validation): Không cho phép bỏ trống trường Thành phố khi lưu thông tin chi nhánh.
  • Ràng buộc ở Backend API: Chỉ chấp nhận các mã/tên thành phố hợp lệ nằm trong danh mục hệ thống quy định để lưu vào cơ sở dữ liệu.