From dec791f3f0153c1f4f6a9192c9d1bcfcbd4a8940 Mon Sep 17 00:00:00 2001 From: HaiAu2501 Date: Tue, 24 Dec 2024 14:21:13 +0700 Subject: [PATCH] Implement header action menu for sorting, filtering, and resetting in QueueTab; adjust padding in UsersPage; align text in QueueCard --- .../admin/presentation/tabs/queue_tab.dart | 100 +++++++++++------- .../admin/presentation/users_page.dart | 2 +- .../presentation/widgets/queue_card.dart | 17 +-- 3 files changed, 74 insertions(+), 45 deletions(-) diff --git a/lib/features/admin/presentation/tabs/queue_tab.dart b/lib/features/admin/presentation/tabs/queue_tab.dart index 73050c9..6aedf36 100644 --- a/lib/features/admin/presentation/tabs/queue_tab.dart +++ b/lib/features/admin/presentation/tabs/queue_tab.dart @@ -264,6 +264,29 @@ class _QueueTabState extends State { }); } + // Mới: Hàm để xử lý lựa chọn từ menu "Thao tác" trong tiêu đề + void handleHeaderAction(String action) { + switch (action) { + case 'Sort': + showSortDialog(); + break; + case 'Filter': + showFilterDialog(); + break; + case 'Reset': + setState(() { + sortCriteria = null; + filterCriteria = null; + filterValue = ''; + applyFilterAndSort(); + currentPage = 1; + }); + break; + default: + break; + } + } + @override Widget build(BuildContext context) { if (isLoadingQueue) { @@ -283,9 +306,10 @@ class _QueueTabState extends State { return Column( children: [ + SizedBox(height: 8), // Thông tin thống kê Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(0), child: Row( children: [ Expanded( @@ -386,40 +410,19 @@ class _QueueTabState extends State { ], ), ), - // Nút Sắp xếp và Lọc + // Nút Thao tác trong tiêu đề Padding( padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0), child: Row( children: [ - ElevatedButton.icon( - onPressed: showSortDialog, - icon: const Icon(Icons.sort), - label: const Text('Sắp xếp'), - ), - const SizedBox(width: 10), - ElevatedButton.icon( - onPressed: showFilterDialog, - icon: const Icon(Icons.filter_list), - label: const Text('Lọc'), - ), + // Loại bỏ hai nút "Sắp xếp" và "Lọc" + // Thêm Spacer hoặc các widget khác nếu cần const Spacer(), - if (filterCriteria != null || sortCriteria != null) - IconButton( - icon: const Icon(Icons.clear), - tooltip: 'Đặt lại', - onPressed: () { - setState(() { - filterCriteria = null; - sortCriteria = null; - applyFilterAndSort(); - currentPage = 1; - }); - }, - ), + // Không cần nút "Clear" riêng ], ), ), - // Thẻ tiêu đề cột + // Thẻ tiêu đề cột với nút "Thao tác" Card( margin: EdgeInsets.zero, // Loại bỏ margin giữa các Card elevation: 0, // Loại bỏ hiệu ứng đổ bóng @@ -430,55 +433,76 @@ class _QueueTabState extends State { child: Padding( padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0), child: Row( - children: const [ - Expanded( + children: [ + // Các cột tiêu đề khác + const Expanded( flex: 3, child: Text( 'Họ và tên', + textAlign: TextAlign.center, // Căn giữa style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ), - Expanded( + const Expanded( flex: 4, child: Text( 'Email', + textAlign: TextAlign.center, // Căn giữa style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ), - Expanded( + const Expanded( flex: 2, child: Text( 'Vai trò', + textAlign: TextAlign.center, // Căn giữa style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ), - Expanded( + const Expanded( flex: 3, child: Text( 'Số điện thoại', + textAlign: TextAlign.center, // Căn giữa style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16, ), ), ), + // Cột Thao tác với nút PopupMenuButton Expanded( flex: 2, - child: Text( - 'Thao tác', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16, - ), + child: PopupMenuButton( + icon: const Icon(Icons.more_vert), + tooltip: 'Thao tác', + onSelected: handleHeaderAction, + itemBuilder: (BuildContext context) => >[ + const PopupMenuItem( + value: 'Sort', + child: Text('Sắp xếp'), + ), + const PopupMenuItem( + value: 'Filter', + child: Text('Lọc'), + ), + const PopupMenuItem( + value: 'Reset', + child: Text('Đặt lại'), + ), + ], + // Điều chỉnh vị trí của menu + // Bạn có thể cần điều chỉnh giá trị Offset tùy thuộc vào thiết kế của bạn + offset: const Offset(0, 40), // Giảm hoặc tăng giá trị X để căn giữa ), ), ], diff --git a/lib/features/admin/presentation/users_page.dart b/lib/features/admin/presentation/users_page.dart index 8dfd1f2..60d014e 100644 --- a/lib/features/admin/presentation/users_page.dart +++ b/lib/features/admin/presentation/users_page.dart @@ -47,7 +47,7 @@ class _UsersPageState extends State { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.all(8.0), child: Column( children: [ // Hiển thị thông báo diff --git a/lib/features/admin/presentation/widgets/queue_card.dart b/lib/features/admin/presentation/widgets/queue_card.dart index 8396746..6aa23ba 100644 --- a/lib/features/admin/presentation/widgets/queue_card.dart +++ b/lib/features/admin/presentation/widgets/queue_card.dart @@ -123,47 +123,52 @@ class _QueueCardState extends State { return Column( children: [ + // Nội dung chính của QueueCard Padding( padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), child: Row( children: [ - // Họ và tên + // Họ và tên (Căn lề trái) Expanded( flex: 3, child: Text( fullName, style: const TextStyle(fontSize: 16), + textAlign: TextAlign.left, // Căn lề trái ), ), - // Email + // Email (Căn lề trái) Expanded( flex: 4, child: Text( email, style: const TextStyle(fontSize: 16), + textAlign: TextAlign.left, // Căn lề trái ), ), - // Vai trò + // Vai trò (Căn lề trái) Expanded( flex: 2, child: Text( role, style: const TextStyle(fontSize: 16), + textAlign: TextAlign.center, // Căn lề trái ), ), - // Số điện thoại + // Số điện thoại (Căn lề trái) Expanded( flex: 3, child: Text( phone, style: const TextStyle(fontSize: 16), + textAlign: TextAlign.center, // Căn lề trái ), ), - // Thao tác + // Thao tác (Căn giữa các icon) Expanded( flex: 2, child: Row( - mainAxisAlignment: MainAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, // Căn giữa các icon children: [ IconButton( icon: const Icon(Icons.check, color: Colors.green),